贷款-注册送会员

htmldev/loan/src/router/index.js

@@ -26,6 +26,11 @@ const routes = [
       keepAlive: true
     }
   },
+  {
+    path: '/loan/login', // 登录
+    name: 'loanLogin',
+    component: () => import(/* webpackChunkName: "loan_login" */ '../views/loan/login')
+  },
   {
     path: '/loan/explain/:orderProductId', // 贷款介绍
     name: 'loanExplain',

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

@@ -0,0 +1,439 @@
+<template>
+  <div class="container">
+    <div class="better-scroll wrapper" ref="wrapper">
+      <ul>
+        <li></li>
+      </ul>
+    </div>
+    <a class="login" href="javascript:;" @click="showEditInfo = true">注册领会员</a>
+    <van-popup position="bottom" round v-model="showEditInfo">
+      <img class="title" src="./image/title@2x.png" alt="">
+      <ul class="form-wrap">
+        <li>
+          <label>
+            <span v-for="(str, index) in '手机号码：'" :key="index">{{ str }}</span>
+          </label>
+          <div class="value-wrap">
+            <input type="tel" placeholder="请输入手机号码" v-myBlur v-model.trim="postData.orderUserPhone"
+                   @input="funLimitLength">
+          </div>
+        </li>
+        <li>
+          <label>
+            <span class="label-name" v-for="(str, index) in '姓名：姓名'" :key="index">{{ str }}</span>
+          </label>
+          <div class="value-wrap">
+            <div class="value-name">
+              <input type="text" placeholder="请输入姓名" v-myBlur v-model.trim="postData.orderUserName">
+            </div>
+          </div>
+        </li>
+        <li>
+          <label>
+            <span class="label-city" v-for="(str, index) in '城市：城市'" :key="index">{{ str }}</span>
+          </label>
+          <div class="value-wrap" @click="showPicker0 = true">
+            <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 class="icon_next" src="./image/btn_next@2x.png" alt="">
+          </div>
+        </li>
+        <li>
+          <label>
+            <span class="label-community" v-for="(str, index) in '小区：小区'" :key="index">{{ str }}</span>
+          </label>
+          <div class="value-wrap" @click="showPicker1 = true">
+            <p class="value-city" v-show="postData.orderCommunity">{{ postData.orderCommunity }}</p>
+            <p class="value-city init" v-show="!postData.orderCommunity">请选择所在小区</p>
+            <img class="icon_next" src="./image/btn_next@2x.png" alt="">
+          </div>
+        </li>
+        <li>
+          <label>
+            <span class="label-buildingy" v-for="(str, index) in '楼号：楼号'" :key="index">{{ str }}</span>
+          </label>
+          <div class="value-wrap" @click="showPicker2 = true">
+            <p class="value-city" v-show="postData.orderBuilding">{{ postData.orderBuilding }}</p>
+            <p class="value-city init" v-show="!postData.orderBuilding">请选择所在楼号</p>
+            <img class="icon_next" src="./image/btn_next@2x.png" alt="">
+          </div>
+        </li>
+        <li>
+          <label>
+            <span class="label-room" v-for="(str, index) in '房号：房号'" :key="index">{{ str }}</span>
+          </label>
+          <div class="value-wrap">
+          <textarea name="" rows="1" placeholder="请输入房号" v-model.trim="postData.orderRoom" v-myBlur
+                    ref="myTextarea"></textarea>
+          </div>
+        </li>
+      </ul>
+      <button class="submit" @click="funSubmit">提交</button>
+    </van-popup>
+    <van-popup v-model="showPicker0" round position="bottom">
+      <van-picker
+        show-toolbar
+        title="城市"
+        :columns="columnsOfCity"
+        @cancel="showPicker0 = false"
+        @confirm="onConfirm0"/>
+    </van-popup>
+    <van-popup v-model="showPicker1" round position="bottom">
+      <van-picker
+        show-toolbar
+        title="小区"
+        :columns="columnsOfCommunity"
+        @cancel="showPicker1 = false"
+        @confirm="onConfirm1"/>
+    </van-popup>
+    <van-popup v-model="showPicker2" round position="bottom">
+      <van-picker
+        show-toolbar
+        title="楼号"
+        :columns="columnsOfBuildingy"
+        @cancel="showPicker2 = false"
+        @confirm="onConfirm2"/>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+  import BScroll from 'better-scroll'
+  import { Picker, Popup, Toast } from 'vant'
+  import { getChinaArea } from '../../../api/common'
+  import { createOrder } from '../apply/api'
+
+  export default {
+    name: 'login',
+    components: {
+      'van-popup': Popup,
+      'van-picker': Picker
+    },
+    data () {
+      return {
+        scroll: null,
+        showEditInfo: false,
+        postData: {
+          orderUserName: '', // 用户名称
+          orderUserPhone: '', // 手机号码
+          orderProvince: '', // 省份
+          orderCity: '', // 城市
+          orderDistrict: '', // 区域
+          orderCommunity: '', // 小区
+          orderBuilding: '', // 楼号
+          orderRoom: '' // 房号
+        },
+        arrErrorList: [],
+        showPicker0: false,
+        columnsOfCity: [],
+        showPicker1: false,
+        columnsOfCommunity: [
+          {
+            values: ['东海水景城'],
+            defaultIndex: 0
+          }
+        ],
+        showPicker2: false,
+        columnsOfBuildingy: [
+          {
+            values: BUILDING(),
+            defaultIndex: 0
+          },
+          {
+            values: ROOM(),
+            defaultIndex: 0
+          }
+        ]
+      }
+    },
+    created () {
+      this.funGetChinaArea()
+    },
+    async mounted () {
+      await this.$nextTick()
+      const textarea = this.$refs.myTextarea
+      this.$refreshTitle('注册')
+      if (textarea) {
+        this.handleTextarea(textarea)
+        textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
+        this.$once('hook:beforeDestroy', () => {
+          textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
+        })
+      }
+      if (!this.scroll) {
+        this.scroll = new BScroll(this.$refs.wrapper, {
+          click: true,
+          pullUpLoad: {
+            threshold: -20
+          },
+          scrollbar: true
+        })
+      } else {
+        this.scroll.refresh()
+      }
+    },
+    methods: {
+      funGetChinaArea () {
+        getChinaArea().then(res => {
+          if (res.status) {
+            this.columnsOfCity = res.data
+          }
+        })
+      },
+      handleTextarea (el, auto) {
+        return () => {
+          if (auto) {
+            el.style.height = 'auto'
+          }
+          el.style.height = el.scrollHeight + 'px'
+        }
+      },
+      onConfirm0 (value) {
+        this.$set(this.postData, 'orderProvince', value[0])
+        this.$set(this.postData, 'orderCity', value[1])
+        this.$set(this.postData, 'orderDistrict', value[2])
+        this.showPicker0 = false
+      },
+      onConfirm1 (value) {
+        this.$set(this.postData, 'orderCommunity', value[0])
+        this.showPicker1 = false
+      },
+      onConfirm2 (value) {
+        this.$set(this.postData, 'orderBuilding', value[0] + value[1])
+        this.showPicker2 = false
+      },
+      funLimitLength () {
+        const { orderUserPhone } = this.postData
+        this.postData.orderUserPhone = orderUserPhone.length > 11 ? orderUserPhone.slice(0, 11) : orderUserPhone
+      },
+      verifyData () {
+        const { orderUserName, orderUserPhone, orderProvince, orderCity, orderDistrict, orderCommunity, orderBuilding, orderRoom } = this.postData
+        this.arrErrorList = []
+        if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone)) {
+          this.arrErrorList.push('请输入手机号码')
+        }
+        if (!orderUserName) {
+          this.arrErrorList.push('请输入姓名')
+        }
+        if (!orderProvince || !orderCity || !orderDistrict) {
+          this.arrErrorList.push('请选择所在城市')
+        }
+        if (!orderCommunity) {
+          this.arrErrorList.push('请选择所在小区')
+        }
+        if (!orderBuilding) {
+          this.arrErrorList.push('请选择所在楼号')
+        }
+        if (!orderRoom) {
+          this.arrErrorList.push('请输入房号')
+        }
+        return this.arrErrorList.length <= 0
+      },
+      funSubmit () {
+        const postData = {
+          ...this.postData
+        }
+        delete postData.capture
+        if (!this.verifyData()) {
+          Toast({
+            message: this.arrErrorList[0],
+            forbidClick: true
+          })
+          return
+        }
+        createOrder(postData).then(res => {
+          if (res.status) {
+            const { id } = res.data
+            this.$router.replace({ path: '/loan/detail/' + id })
+            return
+          }
+          Toast(res.msg)
+        }).catch(err => {
+          Toast(err)
+        })
+      }
+    },
+    beforeDestroy () {
+      if (this.scroll) {
+        this.scroll.destroy()
+      }
+    }
+  }
+
+  const BUILDING = () => {
+    const res = []
+    for (let i = 1; i < 101; i++) {
+      if (res.indexOf(i) < 0) {
+        res.push(i + '幢')
+      }
+    }
+    return res
+  }
+  const ROOM = () => {
+    const res = []
+    for (let i = 1; i < 7; i++) {
+      if (res.indexOf(i) < 0) {
+        res.push(i + '单元')
+      }
+    }
+    return res
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    position: relative;
+    left: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .wrapper {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+    }
+  }
+
+  .login {
+    position: absolute;
+    left: 24px;
+    top: 50vh;
+    z-index: 1;
+    width: 327px;
+    height: 45px;
+    border-radius: 4px;
+    line-height: 45px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    text-align: center;
+    background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+    box-shadow: 0 14px 9px -10px #DBD0C2;
+  }
+
+  img.title {
+    display: block;
+    width: 93px;
+    height: 22px;
+    margin: 23px auto 0;
+  }
+
+  .form-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    li {
+      position: relative;
+      left: 0;
+      top: 0;
+      display: flex;
+      align-items: flex-start;
+      width: 327px;
+      padding: 13px 14px;
+      margin-top: 8px;
+      border: 1px solid #E8E8E8;
+      border-radius: 4px;
+
+      &:nth-of-type(1) {
+        margin-top: 24px;
+      }
+    }
+
+    label {
+      display: flex;
+
+      span {
+        line-height: 22px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+
+        &.label-name:nth-of-type(4),
+        &.label-name:nth-of-type(5),
+        &.label-city:nth-of-type(4),
+        &.label-city:nth-of-type(5),
+        &.label-community:nth-of-type(4),
+        &.label-community:nth-of-type(5),
+        &.label-buildingy:nth-of-type(4),
+        &.label-buildingy:nth-of-type(5),
+        &.label-room:nth-of-type(4),
+        &.label-room:nth-of-type(5) {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .value-wrap {
+      flex: 1;
+      display: flex;
+      margin-left: 9px;
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      min-height: 20px;
+      padding-top: 2px;
+      line-height: 20px;
+      font-size: 15px;
+      color: #333;
+      word-break: break-all;
+      resize: none;
+      outline: 0 none;
+      overflow: hidden;
+      background: transparent;
+      -webkit-text-fill-color: #333;
+      opacity: 1;
+
+      &::-webkit-input-placeholder {
+        color: #999;
+        -webkit-text-fill-color: #999;
+        opacity: 1;
+      }
+    }
+
+    .value-name {
+      display: flex;
+      width: 100%;
+    }
+
+    .value-city {
+      flex: 1;
+      line-height: 22px;
+      font-size: 15px;
+      color: #333;
+
+      &.init {
+        color: #999;
+      }
+    }
+
+    .icon_next {
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  .submit {
+    display: block;
+    width: 327px;
+    height: 45px;
+    margin: 25px auto 24px;
+    border-radius: 4px;
+    line-height: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
+</style>