合伙人-基本资料填写页、登录页优化

htmldev/loan/src/views/partner/join/index.vue

@@ -344,7 +344,7 @@
 
         &:before {
           position: absolute;
-          left: -15px;
+          left: -12px;
           top: -4px;
           z-index: 1;
           content: '*';

htmldev/loan/src/views/partner/login/index.vue

@@ -5,18 +5,27 @@
     <ul class="form-wrap">
       <li>
         <label>
-          <span v-for="(str, index) in '手机号：'" :key="index">{{ str }}</span>
+          <span v-for="(str, index) in '手机号码：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="number" placeholder="请输入手机号码" v-model.trim="postData.phone" @input="funLimitLength">
+          <input type="tel" placeholder="请输入手机号码" v-model.trim="postData.orderUserPhone" @input="funLimitLength">
         </div>
       </li>
       <li>
         <label>
-          <span class="label-code" v-for="(str, index) in '验证码：'" :key="index">{{ str }}</span>
+          <span v-for="(str, index) in '图形验证：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="number" placeholder="请输入验证码" v-model.trim="postData.code" @input="funLimitLength">
+          <input type="text" placeholder="图片验证码" v-myBlur v-model.trim="postData.capture">
+        </div>
+        <img class="capture-img" :src="strCapture" alt="" @click="funUpdateCapture">
+      </li>
+      <li>
+        <label class="label-code">
+          <span class="label-code" v-for="(str, index) in '验证码：码'" :key="index">{{ str }}</span>
+        </label>
+        <div class="value-wrap">
+          <input type="tel" placeholder="请输入验证码" v-model.trim="postData.code" @input="funLimitLength">
         </div>
         <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取': numCount + '秒'}}</button>
       </li>
@@ -27,16 +36,21 @@
 
 <script>
   import { Toast } from 'vant'
+  import { sendSMS } from '../../../api/common'
 
+  const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
   export default {
     name: 'login',
     data () {
       return {
         postData: {
-          phone: '',
+          orderUserPhone: '',
+          capture: '',
           code: ''
         },
+        strCapture: STRCAPTURE,
         numCount: 60,
+        timer: null,
         arrErrorList: []
       }
     },
@@ -46,41 +60,56 @@
     },
     methods: {
       funLimitLength () {
-        const { phone, code } = this.postData
-        this.postData.phone = phone.length > 11 ? phone.slice(0, 11) : phone
+        const { orderUserPhone, code } = this.postData
+        this.postData.orderUserPhone = orderUserPhone.length > 11 ? orderUserPhone.slice(0, 11) : orderUserPhone
         this.postData.code = code.length > 4 ? code.slice(0, 4) : code
       },
       funCutDown () {
-        let numCount = this.numCount
-        const timer = setInterval(() => {
-          if (numCount === 0) {
-            clearInterval(timer)
+        this.timer = setInterval(() => {
+          if (this.numCount === 0) {
+            clearInterval(this.timer)
             this.numCount = 0
             return
           }
-          numCount--
-          this.numCount = numCount
+          this.numCount--
         }, 1000)
       },
       // 获取验证码
       funGetCode () {
         const numCount = this.numCount
-        const { phone } = this.postData
+        const { orderUserPhone, capture } = this.postData
         if (numCount < 60 && numCount > 0) {
           return
         }
         this.numCount = 60
-        if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(phone))) {
+        if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone))) {
           Toast('请输入手机号码')
           return
         }
+
+        if (!capture) {
+          Toast('请输入图片验证码')
+          return
+        }
         this.funCutDown()
-        // todo ajax
+        sendSMS(orderUserPhone, 0, capture).then(res => {
+          if (res.status) {
+            Toast('发送成功')
+          }
+        }).catch(err => {
+          Toast(err.msg)
+          this.funUpdateCapture()
+          clearInterval(this.timer)
+          this.numCount = 60
+        })
+      },
+      funUpdateCapture () {
+        this.strCapture = STRCAPTURE + '?' + new Date().getTime()
       },
       verifyData () {
-        const { phone, code } = this.postData
+        const { orderUserPhone, code } = this.postData
         this.arrErrorList = []
-        if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
+        if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone)) {
           this.arrErrorList.push('请输入手机号码')
         }
         if (!(/^\d{4}$/.test(code))) {
@@ -151,13 +180,17 @@
         font-size: 16px;
         font-weight: 500;
         color: #333;
+
+        &.label-code:nth-of-type(5), {
+          visibility: hidden;
+        }
       }
     }
 
     .value-wrap {
       flex: 1;
       display: flex;
-      margin-left: 25px;
+      margin-left: 9px;
     }
 
     input,
@@ -183,6 +216,17 @@
       }
     }
 
+    .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;