添加校验

src/components/common/PopupSelector.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <van-cell-group @click.native="showPopup">
-      <van-field v-bind="$attrs" right-icon="arrow" v-model="value" :required="required" :readonly="readonly" />
+      <van-field v-bind="$attrs" right-icon="arrow" :value="value" :required="required" :readonly="readonly" />
     </van-cell-group>
     <van-popup id="popup" :value="isShow" :position="position" @click-overlay="closePopup">
       <slot :closePopup="closePopup">
-        <van-picker id="picker" show-toolbar :columns="columns" />
+        <van-picker id="picker" show-toolbar :columns="columns" @confirm="onPickerConfirm" @cancel="closePopup" />
       </slot>
     </van-popup>
   </div>
@@ -13,8 +13,11 @@
 
 <script>
 export default {
-  name: 'PopupSelectorq',
+  name: 'PopupSelector',
   props: {
+    value: {
+      type: String
+    },
     position: {
       type: String,
       default: 'bottom'
@@ -36,17 +39,19 @@ export default {
   },
   data() {
     return {
-      value: '',
       isShow: false
     }
   },
-  created() {},
   methods: {
     showPopup() {
       this.isShow = true
     },
     closePopup() {
       this.isShow = false
+    },
+    onPickerConfirm(pickedValue) {
+      this.$emit('input', String(pickedValue))
+      this.closePopup()
     }
   }
 }

src/views/ebiz/eqiVisit/VisitInfoRegister.vue

@@ -1,39 +1,66 @@
 <template>
   <div class="full-page bg-white">
-    <div class="form m10">
+    <div class="form ml10 mr10">
       <van-cell-group>
-        <van-field right-icon="arrow" v-model="accompanyingName" label="陪访新人姓名" placeholder="请选择" required readonly />
+        <van-field v-model="accompanyingName" label="陪访人" readonly />
       </van-cell-group>
-      <PopupSelector label="陪访类型" placeholder="请选择" readonly required :columns="visitType" />
+      <van-cell-group>
-      <PopupSelector label="日期" placeholder="请选择" readonly required>
+        <van-field
+          right-icon="arrow"
+          v-model="newcomerName"
+          label="陪访新人姓名"
+          placeholder="请选择"
+          required
+          readonly
+          name="陪访新人姓名"
+          v-validate="'required'"
+        />
+      </van-cell-group>
+      <PopupSelector
+        v-model="visitType"
+        label="陪访类型"
+        placeholder="请选择"
+        readonly
+        required
+        :columns="visitTypes"
+        name="陪访类型"
+        v-validate="'required'"
+      />
+      <PopupSelector v-model="visitDate" label="日期" placeholder="请选择" readonly required name="日期" v-validate="'required'">
         <template v-slot:default="{ closePopup }">
           <van-datetime-picker v-model="currentDate" type="date" @confirm="onDateConfirm($event, closePopup)" @cancel="closePopup" />
         </template>
       </PopupSelector>
-      <PopupSelector label="时长(h)" placeholder="请选择" readonly required :columns="duration" />
+      <PopupSelector v-model="visitDuration" label="时长(h)" placeholder="请选择" readonly required name="时长" v-validate="'required'">
+        <template v-slot:default="{ closePopup }">
+          <van-picker show-toolbar :columns="duration" @confirm="onDurationConfirm($event, closePopup)" @cancel="closePopup" />
+        </template>
+      </PopupSelector>
       <van-cell-group>
-        <van-field v-model="customerName" label="客户姓名" placeholder="请输入" required />
+        <van-field v-model="customerName" label="客户姓名" placeholder="请输入" required name="客户姓名" v-validate="'required'" />
       </van-cell-group>
-      <PopupSelector label="客户年龄" placeholder="请选择" readonly required />
+      <PopupSelector v-model="customerAge" :columns="ages" label="客户年龄" placeholder="请选择" readonly required name="客户年龄" v-validate="'required'" />
-      <PopupSelector label="地点" placeholder="请选择" readonly required>
+      <PopupSelector v-model="areaName" label="地点" placeholder="请选择" readonly required name="地点" v-validate="'required'">
         <template v-slot:default="{ closePopup }">
           <van-area :area-list="areaList" value="450000" @confirm="onAreaConfirm($event, closePopup)" @cancel="closePopup" />
         </template>
       </PopupSelector>
       <van-cell-group>
-        <van-field v-model="homeAddress" label="详细地址" placeholder="请输入" required />
+        <van-field v-model="homeAddress" label="详细地址" placeholder="请输入" required clearable name="详细地址" v-validate="'required'" maxlength="200" />
       </van-cell-group>
       <p class="m10">现场照片(最多9张)</p>
       <van-uploader class="m10" v-model="fileList" :after-read="afterRead" :max-count="9" />
     </div>
-    <van-button type="info" block>提交</van-button>
+    <van-button type="info" block @click="submitInfo">提交</van-button>
   </div>
 </template>
 
 <script>
 import PopupSelector from '@/components/common/PopupSelector.vue'
 import areaList from '@/assets/js/utils/areaForSale'
+import getAreaName from '@/assets/js/utils/getAreaNameForSale'
 import { uploadImg } from '@/api/ebiz/sale/sale'
+import timeUtil from '@/assets/js/utils/date-utils'
 
 export default {
   name: 'VisitInfoRegister',
@@ -44,21 +71,39 @@ export default {
     return {
       fileList: [],
       areaList,
-      accompanyingName: '',
+      accompanyingName: '张三',
+      newcomerName: '',
       customerName: '',
+      customerAge: '',
+      areaName: '',
+      homeProvince: '',
+      homeCity: '',
+      homeArea: '',
       homeAddress: '',
-      visitType: ['入职前陪访', '新人首单', '冲刺挑战', '参与衔训'],
+      visitType: '',
+      visitTypes: ['入职前陪访', '新人首单', '冲刺挑战', '参与衔训'],
+      visitDate: '',
+      visitDuration: '',
       show: false,
       currentDate: new Date()
     }
   },
   computed: {
+    // 陪访时长0.5-24
     duration() {
       let duration = []
       for (let i = 0; i < 48; i++) {
         duration.push(0.5 + i * 0.5)
       }
       return duration
+    },
+    // 客户年龄18-60
+    ages() {
+      let age = []
+      for (let i = 18; i <= 80; i++) {
+        age.push(i)
+      }
+      return age
     }
   },
   methods: {
@@ -66,7 +111,8 @@ export default {
       let data = new FormData()
       data.append('imgPath', file.file)
       this.$toast.loading({
-        duration: 0
+        duration: 0,
+        loadingType: 'spinner'
       })
       let res = await uploadImg(data)
       console.log('res :>> ', res)
@@ -75,12 +121,25 @@ export default {
       }
     },
     onDateConfirm(data, fun) {
-      console.log('date :>> ', data)
+      this.visitDate = timeUtil.formatDate(data, 'yyyy-MM-dd')
       fun()
     },
     onAreaConfirm(data, fun) {
-      console.log('data :>> ', data)
+      let [province, city, area] = [data[0], data[1], data[2]]
+      ;[this.homeProvince, this.homeCity, this.homeArea] = [province.code, city.code, area.code]
+      this.areaName = getAreaName(data)
       fun()
+    },
+    onDurationConfirm(data, fun) {
+      this.visitDuration = String(data)
+      fun()
+    },
+    async submitInfo() {
+      let res = await this.$validator.validate()
+      if (!res) {
+        return this.$toast(this.$validator.errors.all()[0])
+      }
+      console.log('res :>> ', res)
     }
   }
 }