贷款-申请资料填写新增图片验证

htmldev/loan/src/views/loan/apply/index.vue

@@ -28,6 +28,15 @@
           <input type="number" placeholder="请输入手机号码" v-model.trim="postData.phone" @input="funLimitLength">
         </div>
       </li>
+      <li>
+        <label>
+          <span v-for="(str, index) in '图形验证：'" :key="index">{{ str }}</span>
+        </label>
+        <div class="value-wrap">
+          <input type="text" placeholder="图片验证码" v-model.trim="postData.capture">
+        </div>
+        <img class="capture-img" :src="strCapture" alt="" @click="funUpdateCapture">
+      </li>
       <li>
         <label>
           <span class="label-code" v-for="(str, index) in '验证码：码'" :key="index">{{ str }}</span>
@@ -88,6 +97,7 @@
   import Flow from './components/flow'
   import { Popup, Picker, Toast } from 'vant'
 
+  const STRCAPTURE = '//daikuanapi.codedreamit.com/captcha'
   export default {
     name: 'apply',
     components: {
@@ -102,6 +112,7 @@
           gender: -1,
           phone: '',
           code: '',
+          capture: '',
           province: '',
           city: '',
           address: '',
@@ -109,6 +120,7 @@
         },
         numCount: 60,
         arrErrorList: [],
+        strCapture: STRCAPTURE,
         showPicker: false,
         columns: [
           {
@@ -196,7 +208,7 @@
       // 获取验证码
       funGetCode () {
         const numCount = this.numCount
-        const { phone } = this.postData
+        const { phone, capture } = this.postData
         if (numCount < 60 && numCount > 0) {
           return
         }
@@ -205,7 +217,13 @@
           Toast('请输入手机号码')
           return
         }
+
+        if (!capture) {
+          Toast('请输入图片验证码')
+          return
+        }
         this.funCutDown()
+        this.funUpdateCapture()
         // todo ajax
       },
       verifyData () {
@@ -234,6 +252,9 @@
         }
         return this.arrErrorList.length <= 0
       },
+      funUpdateCapture () {
+        this.strCapture = STRCAPTURE + '?' + new Date().getTime()
+      },
       funSubmit () {
         if (!this.verifyData()) {
           Toast({
@@ -400,6 +421,17 @@
       height: 22px;
     }
 
+    .capture-img {
+      @include vertical-center;
+      right: 14px;
+      z-index: 1;
+      display: block;
+      width: 125px;
+      height: 31px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
     .get-code {
       @include vertical-center;
       right: 0;