成为合伙人申请资料填写样式

htmldev/loan/src/router/index.js

@@ -123,6 +123,16 @@ const routes = [
     path: '/partner/detail', // 申请进度
     name: 'Detail',
     component: () => import(/* webpackChunkName: "partner_detail" */ '../views/partner/detail')
+  },
+  {
+    path: '/partner/privacy', // 隐私协议
+    name: 'Privacy',
+    component: () => import(/* webpackChunkName: "partner_privacy" */ '../views/partner/privacy')
+  },
+  {
+    path: '/partner/agreement', // 协议
+    name: 'Agreement',
+    component: () => import(/* webpackChunkName: "partner_agreement" */ '../views/partner/agreement')
   }
 ]
 

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

@@ -0,0 +1,17 @@
+<template>
+  <div>协议</div>
+</template>
+
+<script>
+  export default {
+    name: 'agreement',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('协议')
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,13 +1,75 @@
 <template>
-  <div>explain</div>
+  <div class="wrapper">
+    <div class="footer">
+      <a class="btn-contact" href="javascript:;">
+        <img src="./image/btn_dianhua@2x.png" alt="">
+        <span>立即致电</span>
+      </a>
+      <router-link class="btn-apply" :to="{path: '/partner/join'}">在线申请</router-link>
+    </div>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'explain'
+    name: 'explain',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('中行贷')
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  .wrapper {
+    width: 100%;
+    min-height: 100vh;
+    padding-bottom: 91px;
+  }
+
+  .footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 23px 0;
+  }
+
+  .btn-contact,
+  .btn-apply {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 141px;
+    height: 45px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
 
+  .btn-contact {
+    img {
+      width: 29px;
+      height: 29px;
+    }
+
+    span {
+      margin-left: 3px;
+      font-size: 15px;
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+
+  .btn-apply {
+    margin-left: 22px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #fff;
+  }
 </style>

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

@@ -1,13 +1,448 @@
 <template>
-  <div>join</div>
+  <div class="wrapper">
+    <h2 class="title">加入我们</h2>
+    <p class="subtitle">欢迎加入我们，成为合伙人</p>
+    <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="number" 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 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>
+          <img src="./image/btn_next@2x.png" alt="">
+        </div>
+      </li>
+      <li>
+        <label>
+          <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">
+        </div>
+      </li>
+      <li>
+        <label>
+          <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="请输入年龄"
+                 v-model.trim="age">
+          <p v-show="postData.age * 1 > 0">{{ postData.age * 1 }}</p>
+        </div>
+      </li>
+      <li>
+        <label>
+          <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">
+        </div>
+      </li>
+    </ul>
+    <button class="submit" @click="funSubmit">提交</button>
+    <p class="explain">
+      <span>申请代表您同意</span>
+      <router-link :to="{path: '/partner/privacy'}">《用户隐私协议》</router-link>
+      <span>和</span>
+      <router-link :to="{path: '/partner/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 { Popup, Picker, Toast } from 'vant'
+
   export default {
-    name: 'join'
+    name: 'join',
+    components: {
+      'van-popup': Popup,
+      'van-picker': Picker
+    },
+    data () {
+      return {
+        postData: {
+          name: '',
+          gender: -1,
+          phone: '',
+          code: '',
+          province: '',
+          city: '',
+          profession: '',
+          age: 0,
+          inviteCode: ''
+        },
+        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: {
+      age: {
+        get () {
+          return this.postData.age ? this.postData.age * 1 : ''
+        },
+        set (value) {
+          this.postData.age = value
+        }
+      }
+    },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('中行贷')
+    },
+    methods: {
+      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, profession, age, inviteCode } = 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 || !city) {
+          this.arrErrorList.push('请选择所在城市')
+        }
+        if (!profession) {
+          this.arrErrorList.push('请输入职业')
+        }
+        if (age * 1 < 0) {
+          this.arrErrorList.push('请输入年龄')
+        }
+        if (!inviteCode) {
+          this.arrErrorList.push('请输入邀请码')
+        }
+        return this.arrErrorList.length <= 0
+      },
+      funSubmit () {
+        if (!this.verifyData()) {
+          Toast({
+            message: this.arrErrorList[0],
+            forbidClick: true
+          })
+        }
+        this.$router.replace({ path: '/partner/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: 25px 0 200px;
+    background: #fff;
+  }
+
+  h2.title {
+    width: 327px;
+    line-height: 33px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  p.subtitle {
+    width: 327px;
+    margin-top: 4px;
+    line-height: 22px;
+    font-size: 16px;
+    color: #333;
+  }
+
+  .form-wrap {
+    li {
+      position: relative;
+      left: 0;
+      top: 0;
+      display: flex;
+      align-items: flex-start;
+      width: 327px;
+      padding: 13px 14px;
+      margin-top: 13px;
+      border: 1px solid #E8E8E8;
+      border-radius: 4px;
+
+      &:nth-of-type(1) {
+        margin-top: 40px;
+      }
+    }
+
+    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),
+        &.label-city:nth-of-type(4),
+        &.label-city:nth-of-type(5),
+        &.label-profession:nth-of-type(4),
+        &.label-profession:nth-of-type(5),
+        &.label-age:nth-of-type(4),
+        &.label-age:nth-of-type(5),
+        &.label-invite-code:nth-of-type(5) {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .value-wrap {
+      flex: 1;
+      display: flex;
+      margin-left: 9px;
+    }
+
+    .age-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-city {
+      flex: 1;
+      line-height: 22px;
+      font-size: 15px;
+      color: #333;
+
+      &.init {
+        color: #999;
+      }
+    }
+
+    img {
+      width: 22px;
+      height: 22px;
+    }
+
+    .get-code {
+      @include vertical-center;
+      right: 0;
+      z-index: 1;
+      display: block;
+      min-width: 87px;
+      padding: 6px;
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #C9A585;
+    }
+  }
+
+  .submit {
+    width: 327px;
+    height: 45px;
+    margin-top: 41px;
+    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>

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

@@ -0,0 +1,17 @@
+<template>
+  <div>隐私协议</div>
+</template>
+
+<script>
+  export default {
+    name: 'privacy',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('隐私协议')
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>