合伙人-产品介绍页、资料填写页代码优化

htmldev/loan/src/router/index.js

@@ -149,7 +149,12 @@ const routes = [
   {
     path: '/partner/join', // 成为合伙人-申请资料填写
     name: 'partnerJoin',
-    component: () => import(/* webpackChunkName: "partner_join" */ '../views/partner/join')
+    component: () => import(/* webpackChunkName: "partner_join" */ '../views/partner/join'),
+    meta: {
+      isUseCache: false,
+      keepAlive: true
+    },
+    props: true
   },
   {
     path: '/partner/detail', // 申请进度

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

@@ -15,7 +15,7 @@
     name: 'explain',
     async mounted () {
       await this.$nextTick()
-      this.$refreshTitle('中行贷')
+      this.$refreshTitle('成为合伙人')
     }
   }
 </script>

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

@@ -9,12 +9,12 @@
         </label>
         <div class="value-wrap">
           <div class="value-name">
-            <input type="text" placeholder="请输入姓名" v-model.trim="postData.name">
+            <input type="text" placeholder="请输入姓名" v-myBlur v-model.trim="postData.orderUserName">
           </div>
           <div class="value-gender">
-            <p v-for="(str, index) in ['男', '女']" :key="index" @click="postData.gender = index">
-              <img src="./image/btn_xingbie_sel@2x.png" alt="" v-show="postData.gender === index">
-              <img src="./image/btn_xingbie_nor@2x.png" alt="" v-show="postData.gender !== index">
+            <p v-for="str in ['男', '女']" :key="str" @click="postData.orderUserSex = str">
+              <img src="./image/btn_xingbie_sel@2x.png" alt="" v-show="postData.orderUserSex === str">
+              <img src="./image/btn_xingbie_nor@2x.png" alt="" v-show="postData.orderUserSex !== str">
               <span>{{ str }}</span>
             </p>
           </div>
@@ -25,15 +25,25 @@
           <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-myBlur v-model.trim="postData.orderUserPhone"
+                 @input="funLimitLength">
         </div>
       </li>
+      <li>
+        <label class="required">
+          <span v-for="(str, index) in '图形验证：'" :key="index">{{ str }}</span>
+        </label>
+        <div class="value-wrap">
+          <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="required">
           <span class="label-code" 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="tel" placeholder="请输入验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
         </div>
         <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取': numCount + '秒'}}</button>
       </li>
@@ -42,8 +52,9 @@
           <span class="label-city" v-for="(str, index) in '城市：城市'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap" @click="showPicker = true">
-          <p class="value-city" v-show="postData.province">{{ postData.province + postData.city}}</p>
-          <p class="value-city init" v-show="!postData.province">请选择所在城市</p>
+          <p class="value-city" v-show="postData.orderProvince">{{ postData.orderProvince + postData.orderCity +
+            postData.orderDistrict}}</p>
+          <p class="value-city init" v-show="!postData.orderProvince">请选择所在城市</p>
           <img src="./image/btn_next@2x.png" alt="">
         </div>
       </li>
@@ -52,7 +63,7 @@
           <span class="label-profession" v-for="(str, index) in '职业：职业'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="text" placeholder="请输入职业" v-model.trim="postData.profession">
+          <input type="text" placeholder="请输入职业" v-myBlur v-model.trim="postData.profession">
         </div>
       </li>
       <li>
@@ -60,7 +71,7 @@
           <span class="label-age" v-for="(str, index) in '年龄：年龄'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap age-wrap">
-          <input :class="{'opacity-0': postData.age * 1 > 0}" type="number" placeholder="请输入年龄"
+          <input :class="{'opacity-0': postData.age * 1 > 0}" type="tel" placeholder="请输入年龄" v-myBlur
                  v-model.trim="age">
           <p v-show="postData.age * 1 > 0">{{ postData.age * 1 }}</p>
         </div>
@@ -70,7 +81,7 @@
           <span class="label-invite-code" v-for="(str, index) in '邀请码：码'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="text" placeholder="请输入邀请码" v-model.trim="postData.inviteCode">
+          <input type="text" placeholder="请输入邀请码" v-myBlur v-model.trim="postData.inviteCode">
         </div>
       </li>
     </ul>
@@ -94,7 +105,9 @@
 
 <script>
   import { Popup, Picker, Toast } from 'vant'
+  import { getChinaArea, sendSMS } from '../../../api/common'
 
+  const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
   export default {
     name: 'join',
     components: {
@@ -104,47 +117,24 @@
     data () {
       return {
         postData: {
-          name: '',
-          gender: -1,
-          phone: '',
-          code: '',
-          province: '',
-          city: '',
-          profession: '',
+          orderUserName: '', // 用户名称
+          orderUserSex: '男',
+          orderUserPhone: '', // 手机号码
+          code: '', // 验证码
+          capture: '',
+          orderProvince: '', // 省份
+          orderCity: '', // 城市
+          orderDistrict: '', // 区域
+          profession: '', // 职业
           age: 0,
           inviteCode: ''
         },
         numCount: 60,
         arrErrorList: [],
+        strCapture: STRCAPTURE,
         showPicker: false,
-        columns: [
-          {
-            text: '浙江',
-            children: [
-              {
-                text: '杭州'
-                // children: [{ text: '西湖区' }, { text: '余杭区' }]
-              },
-              {
-                text: '温州'
-                // children: [{ text: '鹿城区' }, { text: '瓯海区' }]
-              }
-            ]
-          },
-          {
-            text: '福建',
-            children: [
-              {
-                text: '福州'
-                // children: [{ text: '鼓楼区' }, { text: '台江区' }]
-              },
-              {
-                text: '厦门'
-                // children: [{ text: '思明区' }, { text: '海沧区' }]
-              }
-            ]
-          }
-        ]
+        columns: [],
+        timer: null
       }
     },
     computed: {
@@ -159,84 +149,139 @@
     },
     async mounted () {
       await this.$nextTick()
-      this.$refreshTitle('中行贷')
+      this.$refreshTitle('成为合伙人')
+    },
+    activated () {
+      if (!this.$route.meta.isUseCache) {
+        this.postData = {
+          orderUserName: '',
+          orderUserSex: '男',
+          orderUserPhone: '',
+          code: '',
+          capture: '',
+          orderProvince: '',
+          orderCity: '',
+          orderDistrict: '',
+          profession: '',
+          age: 0,
+          inviteCode: ''
+        }
+        this.arrErrorList = []
+        this.showPicker = false
+        this.columns = []
+        this.funGetChinaArea()
+      }
+      this.numCount = 60
+      clearInterval(this.timer)
+      this.$route.meta.isUseCache = false
     },
     methods: {
+      funGetChinaArea () {
+        getChinaArea().then(res => {
+          if (res.status) {
+            this.columns = res.data
+          }
+        })
+      },
       onConfirm (value) {
         this.showPicker = false
-        this.$set(this.postData, 'province', value[0])
-        this.$set(this.postData, 'city', value[1])
+        this.$set(this.postData, 'orderProvince', value[0])
+        this.$set(this.postData, 'orderCity', value[1])
+        this.$set(this.postData, 'orderDistrict', value[2])
       },
       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
+        })
       },
       verifyData () {
-        const { name, gender, phone, code, province, city, profession, age, inviteCode } = this.postData
+        const { orderUserName, orderUserSex, orderUserPhone, code, orderProvince, orderCity, orderDistrict, profession, age } = this.postData
         this.arrErrorList = []
-        if (!name) {
+        if (!orderUserName) {
           this.arrErrorList.push('请输入姓名')
         }
-        if (gender < 0) {
+        if (!orderUserSex) {
           this.arrErrorList.push('请选择性别')
         }
-        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))) {
           this.arrErrorList.push('请输入验证码')
         }
-        if (!province || !city) {
+        if (!orderProvince || !orderCity || !orderDistrict) {
           this.arrErrorList.push('请选择所在城市')
         }
         if (!profession) {
           this.arrErrorList.push('请输入职业')
         }
-        if (age * 1 < 0) {
+        if (age * 1 <= 0) {
           this.arrErrorList.push('请输入年龄')
         }
-        if (!inviteCode) {
-          this.arrErrorList.push('请输入邀请码')
-        }
         return this.arrErrorList.length <= 0
       },
+      funUpdateCapture () {
+        this.strCapture = STRCAPTURE + '?' + new Date().getTime()
+      },
       funSubmit () {
+        const postData = {
+          ...this.postData
+        }
+        delete postData.capture
         if (!this.verifyData()) {
           Toast({
             message: this.arrErrorList[0],
             forbidClick: true
           })
+          return
         }
         this.$router.replace({ path: '/partner/detail' })
       }
+    },
+    beforeRouteLeave (to, from, next) {
+      if (['partnerPrivacy', 'partnerAgreement'].includes(to.name)) {
+        from.meta.isUseCache = true
+      }
+      next()
     }
   }
 </script>
@@ -409,6 +454,17 @@
       }
     }
 
+    .capture-img {
+      @include vertical-center;
+      right: 14px;
+      z-index: 1;
+      display: block;
+      width: 125px;
+      height: 31px;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
     .value-city {
       flex: 1;
       line-height: 22px;