信息填写静态

htmldev/loan/src/assets/styles/variable.scss

@@ -1,21 +1,4 @@
 @charset "utf-8";
-
-$_0A1831: #0A1831;
-$_F2F3F8: #F2F3F8;
-$_161D2D: #161D2D;
-$_FFF: #FFF;
-$_EADAB9: #EADAB9;
-$_1B2131: #1B2131;
-$_10172A: #10172A;
-$_D6C4A1: #D6C4A1;
-$_F9BC13: #F9BC13;
-$_94532B: #94532B;
-$_A5673B: #A5673B;
-$_192032: #192032;
-$_E2C39C: #E2C39C;
-$_E1C593: #E1C593;
-$_BAA378: #BAA378;
-
 /*垂直居中*/
 @mixin vertical-center {
   position: absolute;

htmldev/loan/src/filter/toThousands.js

@@ -0,0 +1,6 @@
+export const toThousands = (num) => {
+  if (Object.prototype.toString.call(num) === '[object Number]') {
+    num = num.toString()
+  }
+  return num.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
+}

htmldev/loan/src/main.js

@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import { toThousands } from './filter/toThousands'
 
 Vue.config.productionTip = false
 
+Vue.filter('toThousands', toThousands)
+
 new Vue({
   router,
   render: h => h(App)

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

@@ -8,10 +8,10 @@
           <span class="label-name" v-for="(str, index) in '姓名：姓名'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <div class="name">
-            <input type="text" v-model.trim="postData.name">
+          <div class="value-name">
+            <input type="text" placeholder="请输入姓名" v-model.trim="postData.name">
           </div>
-          <div class="gender">
+          <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">
@@ -25,15 +25,25 @@
           <span v-for="(str, index) in '手机号码：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <input type="text" v-model.trim="postData.phone">
+          <input type="text" placeholder="请输入手机号码" v-model.trim="postData.phone" @input="funLimitLength">
         </div>
+        <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取验证码': numCount + '秒'}}</button>
       </li>
       <li>
         <label>
-          <span v-for="(str, index) in '所在城市：'" :key="index">{{ str }}</span>
+          <span class="label-code" v-for="(str, index) in '验证码：码'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <p class="address">{{ postData.province + postData.city}}</p>
+          <input type="number" placeholder="请输入验证码" v-model.trim="postData.code" @input="funLimitLength">
+        </div>
+      </li>
+      <li>
+        <label>
+          <span v-for="(str, index) in '所在城市：'" :key="index">{{ str }}</span>
+        </label>
+        <div class="value-wrap" @click="showPicker = true">
+          <p class="value-address" v-show="postData.province">{{ postData.province + postData.city}}</p>
+          <p class="value-address init" v-show="!postData.province">请选择所在城市</p>
           <img src="./image/btn_next@2x.png" alt="">
         </div>
       </li>
@@ -42,35 +52,49 @@
           <span v-for="(str, index) in '房产地址：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap">
-          <textarea name="" rows="1" v-model.trim="postData.address" ref="myTextarea"></textarea>
+          <textarea name="" rows="1" placeholder="请输入房产地址" v-model.trim="postData.address" ref="myTextarea"></textarea>
         </div>
       </li>
       <li>
         <label>
           <span v-for="(str, index) in '需求金额：'" :key="index">{{ str }}</span>
         </label>
-        <div class="value-wrap">
-          <input type="text" v-model.trim="postData.amount">
+        <div class="value-wrap amount-wrap">
+          <input :class="{'opacity-0': postData.amount * 1 > 0}" type="number" placeholder="请输入需求金额"
+                 v-model.trim="amount">
+          <p v-show="postData.amount * 1 > 0">{{ postData.amount * 1 | toThousands }}.00</p>
         </div>
       </li>
     </ul>
-    <button class="submit">提交</button>
+    <button class="submit" @click="funSubmit">提交</button>
     <p class="explain">
       <span>申请代表您同意</span>
       <router-link :to="{path: '/privacy'}">《用户隐私协议》</router-link>
       <span>和</span>
       <router-link :to="{path: '/agreement'}">《服务协议》</router-link>
     </p>
+    <van-popup v-model="showPicker" round position="bottom">
+      <van-picker
+        show-toolbar
+        title="所在城市"
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onConfirm"
+      />
+    </van-popup>
   </div>
 </template>
 
 <script>
   import Flow from './components/flow'
+  import { popup, picker, Toast } from 'vant'
 
   export default {
     name: 'apply',
     components: {
-      Flow
+      Flow,
+      'van-popup': popup,
+      'van-picker': picker
     },
     data () {
       return {
@@ -78,10 +102,52 @@
           name: '',
           gender: -1,
           phone: '',
+          code: '',
           province: '',
           city: '',
           address: '',
-          amount: 0
+          amount: ''
+        },
+        numCount: 60,
+        arrErrorList: [],
+        showPicker: false,
+        columns: [
+          {
+            text: '浙江',
+            children: [
+              {
+                text: '杭州'
+                // children: [{ text: '西湖区' }, { text: '余杭区' }]
+              },
+              {
+                text: '温州'
+                // children: [{ text: '鹿城区' }, { text: '瓯海区' }]
+              }
+            ]
+          },
+          {
+            text: '福建',
+            children: [
+              {
+                text: '福州'
+                // children: [{ text: '鼓楼区' }, { text: '台江区' }]
+              },
+              {
+                text: '厦门'
+                // children: [{ text: '思明区' }, { text: '海沧区' }]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    computed: {
+      amount: {
+        get () {
+          return this.postData.amount ? this.postData.amount * 1 : ''
+        },
+        set (value) {
+          this.postData.amount = value
         }
       }
     },
@@ -104,6 +170,80 @@
           }
           el.style.height = el.scrollHeight + 'px'
         }
+      },
+      onConfirm (value) {
+        this.showPicker = false
+        this.$set(this.postData, 'province', value[0])
+        this.$set(this.postData, 'city', value[1])
+      },
+      funLimitLength () {
+        const { phone, code } = this.postData
+        this.postData.phone = phone.length > 11 ? phone.slice(0, 11) : phone
+        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.numCount = 0
+            return
+          }
+          numCount--
+          this.numCount = numCount
+        }, 1000)
+      },
+      // 获取验证码
+      funGetCode () {
+        const numCount = this.numCount
+        const { phone } = 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))) {
+          Toast('请输入手机号码')
+          return
+        }
+        this.funCutDown()
+        // todo ajax
+      },
+      verifyData () {
+        const { name, gender, phone, code, province, city, address, amount } = this.postData
+        this.arrErrorList = []
+        if (!name) {
+          this.arrErrorList.push('请输入姓名')
+        }
+        if (gender < 0) {
+          this.arrErrorList.push('请选择性别')
+        }
+        if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
+          this.arrErrorList.push('请输入手机号码')
+        }
+        if (!(/^\d{4}$/.test(code))) {
+          this.arrErrorList.push('请输入验证码')
+        }
+        if (!province) {
+          this.arrErrorList.push('请选择所在城市')
+        }
+        if (!city) {
+          this.arrErrorList.push('请选择所在城市')
+        }
+        if (!address) {
+          this.arrErrorList.push('请输入房产地址')
+        }
+        if (amount * 1 <= 0) {
+          this.arrErrorList.push('请输入需求金额')
+        }
+        return this.arrErrorList.length <= 0
+      },
+      funSubmit () {
+        if (!this.verifyData()) {
+          Toast({
+            message: this.arrErrorList[0],
+            forbidClick: true
+          })
+        }
       }
     }
   }
@@ -135,6 +275,9 @@
 
   .form-wrap {
     li {
+      position: relative;
+      left: 0;
+      top: 0;
       display: flex;
       align-items: flex-start;
       width: 327px;
@@ -158,7 +301,8 @@
         color: #333;
 
         &.label-name:nth-of-type(4),
-        &.label-name:nth-of-type(5) {
+        &.label-name:nth-of-type(5),
+        &.label-code:nth-of-type(5), {
           visibility: hidden;
         }
       }
@@ -170,29 +314,32 @@
       margin-left: 9px;
     }
 
-    .name {
-      display: flex;
-      width: 100%;
-    }
+    .amount-wrap {
+      position: relative;
+      left: 0;
+      top: 0;
 
-    input {
-      width: 100%;
-      padding-top: 2px;
-      line-height: 20px;
-      font-size: 15px;
-      color: #333;
-      outline: 0 none;
-      -webkit-text-fill-color: #333;
-      opacity: 1;
-      background: transparent;
+      input {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
 
-      &::-webkit-input-placeholder {
-        color: #999;
-        -webkit-text-fill-color: #999;
-        opacity: 1;
+        &.opacity-0 {
+          opacity: 0;
+        }
+      }
+
+      p {
+        width: 100%;
+        padding-top: 2px;
+        line-height: 20px;
+        font-size: 15px;
+        color: #333;
       }
     }
 
+    input,
     textarea {
       width: 100%;
       min-height: 20px;
@@ -215,19 +362,12 @@
       }
     }
 
-    .address {
-      flex: 1;
-      line-height: 22px;
-      font-size: 15px;
-      color: #333;
-    }
-
-    img {
-      width: 22px;
-      height: 22px;
+    .value-name {
+      display: flex;
+      width: 100%;
     }
 
-    .gender {
+    .value-gender {
       display: flex;
 
       p {
@@ -245,6 +385,36 @@
         color: #333;
       }
     }
+
+    .value-address {
+      flex: 1;
+      line-height: 22px;
+      font-size: 15px;
+      color: #333;
+
+      &.init {
+        color: #999;
+      }
+    }
+
+    img {
+      width: 22px;
+      height: 22px;
+    }
+
+    .get-code {
+      @include vertical-center;
+      right: 14px;
+      z-index: 1;
+      display: block;
+      min-width: 87px;
+      padding: 6px;
+      border-radius: 4px;
+      line-height: 20px;
+      font-size: 15px;
+      color: #333;
+      background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
+    }
   }
 
   .submit {