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

<template>
  <div class="wrapper">
    <img class="goods-cover" src="./image/header@2x.png" alt="">
    <Flow></Flow>
    <ul class="form-wrap">
      <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-model.trim="postData.name">
          </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">
              <span>{{ str }}</span>
            </p>
          </div>
        </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.phone" @input="funLimitLength">
        </div>
      </li>
      <li>
        <label>
          <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">
        </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>
        </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>
      <li>
        <label>
          <span v-for="(str, index) in '房产地址：'" :key="index">{{ str }}</span>
        </label>
        <div class="value-wrap">
          <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 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" @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,
      'van-popup': Popup,
      'van-picker': Picker
    },
    data () {
      return {
        postData: {
          name: '',
          gender: -1,
          phone: '',
          code: '',
          province: '',
          city: '',
          address: '',
          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
        }
      }
    },
    async mounted () {
      await this.$nextTick()
      const textarea = this.$refs.myTextarea
      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)
        })
      }
      this.$refreshTitle('中行贷')
    },
    methods: {
      handleTextarea (el, auto) {
        return () => {
          if (auto) {
            el.style.height = 'auto'
          }
          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
          })
        }
        this.$router.replace({ path: '/detail' })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 110px 0 200px;
    background: #fff;
  }

  .goods-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    min-height: 147px;
  }

  .form-wrap {
    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: 37px;
      }
    }

    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-code:nth-of-type(5), {
          visibility: hidden;
        }
      }
    }

    .value-wrap {
      flex: 1;
      display: flex;
      margin-left: 9px;
    }

    .amount-wrap {
      position: relative;
      left: 0;
      top: 0;

      input {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 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;
      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-gender {
      display: flex;

      p {
        display: flex;

        &:nth-of-type(2) {
          margin-left: 15px;
        }
      }

      span {
        margin-left: 4px;
        line-height: 22px;
        font-size: 16px;
        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 {
    width: 327px;
    height: 45px;
    margin-top: 36px;
    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);
  }

  .explain {
    display: flex;
    margin-top: 12px;

    span,
    a {
      line-height: 17px;
      font-size: 12px;
      color: #666;
    }
  }
</style>