submit

pages/consignment-painting/index.vue

@@ -26,6 +26,27 @@
             <div class="wrap4_2">*暂时不可选</div>
           </div>
         </div>
+        <div class="content2"></div>
+        <div class="content4">起始日期</div>
+        <div class="content5">
+          <div class="wrap1">年份</div>
+          <div class="wrap2">月</div>
+          <div class="wrap3">日</div>
+        </div>
+        <div style="margin-left: -30rpx;margin-right: -30rpx">
+          <picker-view   indicator-class="test" :value="value"  @change="changeData" class="picker-view">
+            <picker-view-column>
+              <view style="display: flex;align-items: center;justify-content: center" class="item" :class="[isDateFont(item,0)?'fontDate':'']" v-for="(item,index) in years" :key="index">{{item}}年</view>
+            </picker-view-column>
+            <picker-view-column>
+              <view style="display: flex;align-items: center;justify-content: center" class="item" :class="[isDateFont(item,1)?'fontDate':'']" v-for="(item,index) in months" :key="index">{{item}}月</view>
+            </picker-view-column>
+            <picker-view-column>
+              <view style="display: flex;align-items: center;justify-content: center" class="item" :class="[isDateFont(item,2)?'fontDate':'']" v-for="(item,index) in days" :key="index">{{item}}日</view>
+            </picker-view-column>
+          </picker-view>
+        </div>
+        <div class="content2"></div>
       </div>
     </tm-poup>
     <div class="content3">
@@ -108,13 +129,93 @@
 export default {
   name: "order-details",
   data(){
+    const date = new Date()
+    const years = []
+    const year = date.getFullYear()
+    const months = []
+    const month = date.getMonth() + 1
+    const days = []
+    const day = date.getDate()
+    for (let i = 1990; i <= date.getFullYear(); i++) {
+      years.push(i)
+    }
+    for (let i = 1; i <= 12; i++) {
+      months.push(i)
+    }
+    for (let i = 1; i <= 31; i++) {
+      days.push(i)
+    }
     return {
-      show_1:true
+      data:[],
+      show_1:true,
+      title: 'picker-view',
+      years,
+      year,
+      months,
+      month,
+      days,
+      day,
+      value: [9999, month - 1, day - 1],
+      visible: true,
+    }
+  },
+  mounted(){
+    const today = new Date();
+    this.value= [today.getFullYear() - 1990, today.getMonth(),today.getDate()-1]
+    this.data=[today.getFullYear(),today.getMonth() + 1,today.getDate()]
+  },
+  methods:{
+    isDateFont(item,num){
+      if (Array.isArray&&this.data.length===3){
+        return this.data[num]===item
+      }
+    },
+    changeData(e){
+      this.data=[e.detail.value[0]+1990,e.detail.value[1]+1,e.detail.value[2]+1]
     }
   }
 }
 </script>
 <style scoped lang="scss">
+.fontDate{
+  color: #fff;
+}
+/deep/ .pickerSelected {
+  color: #ffffff !important;
+  z-index: 2;
+}
+/deep/ .test{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+ z-index: -1;
+  background: #A9D897;
+  color: #fff;
+    height: 62rpx;
+}
+uni-picker-view {
+  display: block;
+}
+uni-picker-view .uni-picker-view-wrapper {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  background-color: white;
+}
+uni-picker-view[hidden] {
+  display: none;
+}
+picker-view {
+  width: 100%;
+  // height: 600upx;
+  height: 400rpx;
+  margin-top: 20upx;
+}
+.item {
+  line-height: 100upx;
+  text-align: center;
+}
 .order-details{
   background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
   box-sizing: border-box;
@@ -132,6 +233,7 @@ export default {
       display: flex;
       flex-wrap: wrap;
       .wrap4{
+        margin-bottom: 40rpx;
         border-radius: 32rpx;
         margin-top: 30rpx;
         width: 220rpx;
@@ -148,7 +250,6 @@ color: #626262;
         .wrap4_2{
           color: #BE7E7E;
           font-size: 16rpx;
-
         }
       }
       .wrap1{
@@ -173,7 +274,44 @@ color: #626262;
         }
       }
     }
+    &>.content5{
+      margin-top: 36rpx;
+      height: 66rpx;
+      display: flex;
+      align-items: center;
+      border-bottom: 1rpx solid #BABABA;
+      border-top: 1rpx solid #BABABA;
+    .wrap1{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 1;
+      color: #4E964D;
+      font-size: 28rpx;
+    }
+      .wrap2{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-grow: 1;
+        color: #4E964D;
+        font-size: 28rpx;
+      }
+      .wrap3{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-grow: 1;
+        color: #4E964D;
+        font-size: 28rpx;
+      }
+    }
+    &>.content4{
+      font-size: 32rpx;
+      color: #000;
+    }
     &>.content2{
+      margin-bottom: 36rpx;
       height: 1rpx;
       background:#626262 ;
     }