增加短信验证码倒计时

src/components/ebiz/question/ShortMessage.vue

@@ -6,7 +6,9 @@
         <p>{{ text }}</p>
         <div class="enter" v-if="type === 'confirm'">
           <input type="text" v-model="code" placeholder="请输入短信验证码" maxlength="6" />
-          <button type="button" @click="getMessage" v-no-more-click="3000">获取验证码</button>
+          <button type="button" @click="getMessage" v-no-more-click="3000">
+            {{ sendTime === 0 ? '获取验证码' : sendTime + 's' }}
+          </button>
         </div>
       </div>
       <div class="bottom">
@@ -32,13 +34,18 @@ export default {
     type: {
       type: String,
       default: 'confirm'
+    },
+    sendTime: {
+      type: Number,
+      default: 0
     }
   },
   data() {
     return {
       code: '',
       sid: '',
-      getCaptcha: false
+      getCaptcha: false,
+      timer: null
     }
   },
   watch: {
@@ -52,11 +59,33 @@ export default {
                 overflow-y:visible;
                 height:auto;
               `
+    },
+    sendTime(nv) {
+      console.log('time change ... ', this.sendTime)
+      if (nv === 0) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+      if (!this.timer) {
+        this.timer = setInterval(() => {
+          if (this.sendTime === 0) {
+            console.log('clear timer...')
+            clearInterval(this.timer)
+            this.timer = null
+          } else {
+            this.$emit('update:sendTime', this.sendTime - 1)
+          }
+        }, 1000)
+      }
     }
   },
   methods: {
     cancel() {
+      clearInterval(this.timer)
+      this.timer = null
+      this.$emit('update:sendTime', 0)
       this.code = ''
+      this.getCaptcha = false
       this.$emit('update:show', false)
     },
     async confirm() {
@@ -76,12 +105,16 @@ export default {
           type: 'confirm',
           data: true
         })
+        clearInterval(this.timer)
+        this.timer = null
+        this.$emit('update:sendTime', 0)
       } else {
         this.$toast('验证失败, 请重新获取验证码')
       }
       this.code = ''
     },
     async getMessage() {
+      if (this.sendTime !== 0) return
       this.getCaptcha = true
       let data = {
         operateType: 'appntInfoEntry',
@@ -95,8 +128,8 @@ export default {
       if (res.result === '0') {
         this.$toast('获取验证码成功')
       }
-      console.log(res)
       this.sid = res.sessionId
+      this.$emit('update:sendTime', 60)
     }
   }
 }

src/views/ebiz/questions/QuestionsDetail.vue

@@ -129,7 +129,7 @@
     <div class="bg-white bottom-btn">
       <van-button type="danger" size="large" block @click="submit">下一步</van-button>
     </div>
-    <short-message :show.sync="dialog.show" :type="dialog.type" :text="dialog.text" @getMessage="getMessage"></short-message>
+    <short-message :sendTime.sync="sendTime" :show.sync="dialog.show" :type="dialog.type" :text="dialog.text" @getMessage="getMessage"></short-message>
     <van-popup v-model="transfer.show" position="bottom">
       <ul class="bankList">
         <li v-for="item in transfer.bankList" :key="item.code" @click="getBankListItem(item)">{{ item.bankName }}</li>
@@ -175,6 +175,7 @@ export default {
   data() {
     let isWeixin = this.$utils.device().isWeixin
     return {
+      sendTime: 0,
       isWeixin,
       problemInfo: null,
       problemDetail: null,
@@ -499,12 +500,13 @@ export default {
     },
     // 下一步
     submit() {
+      this.dialog.show = true
       // 校验回复内容
       if (this.issueType === 'TB89' && this.newContract.feedback.trim() === '') return this.$toast('请填写回复内容')
       // 校验补充资料
       if (this.issueType === '828601') {
         if (!this.checkInsurantUpload()) return this.$toast('请上传被保人补充资料')
-        if (!this.checkPolicyholderUpload()) return this.$toast('请上传投保人补充资料')
+        if (!this.checkPolicyholderUpload()) return this.$toast('请上传申请人补充资料')
       }
       // 转账不成功
       if (this.issueType === '818901') {
@@ -537,11 +539,15 @@ export default {
       } else if (this.$route.query.receiveType === '1') {
         if (!this.policyholderSigned || !this.insurantSigned) return this.$toast('请完成签名后继续操作')
       }
+
+      let phoneStrArr = this.problemInfo.phoneNo.split('')
+      phoneStrArr.splice(3, 4, '****')
+      let encryptPhone = phoneStrArr.join('')
       // 短信校验
       this.dialog = {
         type: 'confirm',
         show: true,
-        text: `为确定用户身份，我们将向${this.problemInfo.phoneNo}此手机号发送验证码`
+        text: `为确定用户身份，我们将向${encryptPhone}此手机号发送验证码`
       }
     },
     async getMessage({ data }) {
@@ -591,7 +597,6 @@ export default {
         this.$toast.loading()
         // 更新问题件数据
         let res = await updateQuestionDetail(problemData)
-        console.dir(res)
         this.$toast.clear()
         if (res.result === '1') {
           localStorage.setItem('failedReason', res.resultMessage)
@@ -614,6 +619,7 @@ export default {
         prtNo: this.$route.query.prtNo,
         userType: Number(this.$route.query.receiveType)
       })
+      console.log(rs.content)
       // 包含投保人和被保人证件id和姓名
       this.problemInfo = rs.content
       this.pdfUrl = encodeURIComponent(config.imgDomain + `/returnDirectStream?imgPath=${this.problemInfo.pdfUrl}`)
@@ -854,6 +860,11 @@ export default {
 /deep/ .van-dialog__header {
   padding-top: 1em;
 }
+
+/deep/ .van-search {
+  font-size: 10px;
+}
+
 #app .van-cell:not(:last-child):after {
   border: 0;
 }