story#6932,年月选择样式优化，禁止弹出键盘

src/views/secondHandCar/sellingInfo.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="contentWrap" :class="[!(status==9 && auditRemark) ? 'noReasonWrap': 'hasReasonWrap']">
       <div  class="content">
-        <div class="item vehicleTypeItem">
+        <div class="item" style="align-items: self-end">
           <span> <span class="star">*</span>售出渠道 </span>
           <van-radio-group v-model="form.salesChannel" direction="horizontal" class="radioWrap"  :disabled="type !== 'revise'">
             <van-radio name="1" :class="{'checked':form.salesChannel==1,'salesChannelRadio':true,'radio':true}">中道二手拖车</van-radio>
@@ -31,14 +31,22 @@
           </div>
           <div class="item">
             <span> <span class="star">*</span>报废年月</span>
-            <el-date-picker
+            <van-field
+                :disabled="type !== 'revise'"
+                @focus="showDatetime = true"
+                class="radioWrap"
+                readonly
+                v-model="form.scrapTime"
+                input-align="right"
+            > </van-field>
+<!--            <el-date-picker
                 :disabled="type !== 'revise'"
                 v-model="form.scrapTime"
                 type="date"
                 placeholder="选择日期"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 format="yyyy-MM-dd">
-            </el-date-picker>
+            </el-date-picker>-->
           </div>
         </template>
         <template v-else>
@@ -72,14 +80,14 @@
           </div>
           <div class="item">
             <span> <span class="star">*</span>交易年月</span>
-            <el-date-picker
+            <van-field
                 :disabled="type !== 'revise'"
+                @focus="showDatetime = true"
+                class="radioWrap"
+                readonly
                 v-model="form.tradeTime"
-                type="date"
-                placeholder="选择日期"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                format="yyyy-MM-dd">
-            </el-date-picker>
+                input-align="right"
+            > </van-field>
           </div>
         </template>
       </div>
@@ -96,14 +104,25 @@
         </template>
       </div>
     </div>
- </div>
+    <van-popup v-model="showDatetime" round position="bottom">
+      <van-datetime-picker
+          class="dataTime"
+          v-if="showDatetime"
+          v-model="time"
+          type="date"
+          :min-date="minDate"
+          @confirm="onConfirm"
+          @cancel="showDatetime = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins"
-// carInfoDetail,
 import {auditCarInfo, usedCarRemove,carInfoDetail,auditCarInfoAgain} from "@/api/secondHandCar"
 import uploadCommon from "@/views/secondHandCar/components/upload-common.vue";
+import {timeFormat} from "@/utils/common";
 export default {
   name: "sellingInfo",
   mixins:[myMixins],
@@ -129,6 +148,9 @@ export default {
       auditRemark:'',
       auditReason:'',
       status:'' ,
+      time:'',
+      showDatetime:false,
+      minDate: new Date(),
     }
   },
   async mounted() {
@@ -153,6 +175,16 @@ export default {
     }
   },
   methods:{
+    onConfirm(data) {
+      this.time = timeFormat(new Date(data))
+      if (this.form.salesChannel==1 || this.form.salesChannel==2){
+          this.form.tradeTime = timeFormat(new Date(data))
+      }else if(this.form.salesChannel==3){
+        this.form.scrapTime = timeFormat(new Date(data))
+      }
+      console.log("time",this.time)
+      this.showDatetime = false;
+    },
     // 审核操作
     async auditHandle(type){
       if (!type && !this.auditReason){
@@ -389,10 +421,6 @@ export default {
       padding-left: 6px;
     }
   }
-  .vehicleTypeItem{
-    line-height: 13px !important;
-    margin-top: 8px;
-  }
   .star{
     color: #FF4B4B !important;
     opacity: 1 !important;