信息填写静态

htmldev/loan/src/App.vue

@@ -15,4 +15,8 @@
 
 <style lang="scss">
   @import "./assets/styles/reset";
+
+  body {
+    background: #F2F2F2;
+  }
 </style>

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

@@ -22,6 +22,12 @@ input {
   -webkit-appearance: none;
 }
 
+button {
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
 iframe {
   position: absolute;
   width: 0;

htmldev/loan/src/router/index.js

@@ -7,17 +7,17 @@ const routes = [
   {
     path: '/', // 贷款介绍
     name: 'Home',
-    component: () => import(/* webpackChunkName: "home" */ '../views/home.vue')
+    component: () => import(/* webpackChunkName: "home" */ '../views/home/index.vue')
   },
   {
     path: '/apply', // 基本信息填写
     name: 'Apply',
-    component: () => import(/* webpackChunkName: "apply" */ '../views/apply.vue')
+    component: () => import(/* webpackChunkName: "apply" */ '../views/apply/index.vue')
   },
   {
     path: '/record', // 我的申请记录
     name: 'Record',
-    component: () => import(/* webpackChunkName: "record" */ '../views/record.vue'),
+    component: () => import(/* webpackChunkName: "record" */ '../views/record/index.vue'),
     meta: {
       isUseCache: false,
       keepAlive: true
@@ -26,37 +26,37 @@ const routes = [
   {
     path: '/detail', // 进度查询：贷款详情页
     name: 'Detail',
-    component: () => import(/* webpackChunkName: "detail" */ '../views/detail.vue')
+    component: () => import(/* webpackChunkName: "detail" */ '../views/detail/index.vue')
   },
   {
     path: '/attest', // 上传资料
     name: 'Attest',
-    component: () => import(/* webpackChunkName: "attest" */ '../views/attest.vue')
+    component: () => import(/* webpackChunkName: "attest" */ '../views/attest/index.vue')
   },
   {
     path: '/bespeak', // 预约现场办理时间
     name: 'Bespeak',
-    component: () => import(/* webpackChunkName: "bespeak" */ '../views/bespeak.vue')
+    component: () => import(/* webpackChunkName: "bespeak" */ '../views/bespeak/index.vue')
   },
   {
     path: '/privacy', // 隐私协议
     name: 'Privacy',
-    component: () => import(/* webpackChunkName: "privacy" */ '../views/privacy.vue')
+    component: () => import(/* webpackChunkName: "privacy" */ '../views/privacy/index.vue')
   },
   {
     path: '/agreement', // 协议
     name: 'Agreement',
-    component: () => import(/* webpackChunkName: "agreement" */ '../views/agreement.vue')
+    component: () => import(/* webpackChunkName: "agreement" */ '../views/agreement/index.vue')
   },
   {
     path: '/help', // 还款助手
     name: 'Help',
-    component: () => import(/* webpackChunkName: "help" */ '../views/help.vue')
+    component: () => import(/* webpackChunkName: "help" */ '../views/help/index.vue')
   },
   {
     path: '/about', // 了解我们
     name: 'About',
-    component: () => import(/* webpackChunkName: "about" */ '../views/about.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/about/index.vue')
   }
 ]
 

htmldev/loan/src/views/apply.vue

@@ -1,13 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-  export default {
-    name: 'apply'
-  }
-</script>
-
-<style scoped>
-
-</style>

htmldev/loan/src/views/apply/components/flow.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="flow">
+    <div class="title">
+      <img src="" alt="">
+      <p>5步快速申请</p>
+      <img src="" alt="">
+    </div>
+    <ul>
+      <li>
+        <img class="icon" src="../image/flow_0@2x.png" alt="">
+        <p>提交申请</p>
+      </li>
+      <li>
+        <img class="arrow" src="" alt="">
+      </li>
+      <li>
+        <img class="icon" src="../image/flow_1@2x.png" alt="">
+        <p>提交资料</p>
+      </li>
+      <li>
+        <img class="arrow" src="" alt="">
+      </li>
+      <li>
+        <img class="icon" src="../image/flow_2@2x.png" alt="">
+        <p>预约办理</p>
+      </li>
+      <li>
+        <img class="arrow" src="" alt="">
+      </li>
+      <li>
+        <img class="icon" src="../image/flow_3@2x.png" alt="">
+        <p>现场办理</p>
+      </li>
+      <li>
+        <img class="arrow" src="" alt="">
+      </li>
+      <li>
+        <img class="icon" src="../image/flow_4@2x.png" alt="">
+        <p>放款成功</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'flow'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .flow {
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 337px;
+    height: 124px;
+    padding-top: 24px;
+    border-radius: 8px;
+    background: #FFFFFF;
+    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.03);
+  }
+
+  .title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    p {
+      margin: 0 5px;
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    img {
+      width: 23px;
+      height: 2px;
+      background: pink;
+    }
+  }
+
+  ul {
+    display: flex;
+    justify-content: space-between;
+    width: 310px;
+    margin-top: 14px;
+
+    li {
+      &:nth-of-type(2n+2) {
+        display: flex;
+        padding-top: 14px;
+      }
+    }
+
+    .icon {
+      display: block;
+      width: 32px;
+      height: 32px;
+      margin: 0 auto;
+    }
+
+    .arrow {
+      width: 10px;
+      height: 4px;
+      background: pink;
+    }
+
+    p {
+      margin-top: 10px;
+      line-height: 17px;
+      font-size: 12px;
+      color: #333;
+    }
+  }
+</style>

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

@@ -0,0 +1,274 @@
+<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="name">
+            <input type="text" v-model.trim="postData.name">
+          </div>
+          <div class="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" v-model.trim="postData.phone">
+        </div>
+      </li>
+      <li>
+        <label>
+          <span v-for="(str, index) in '所在城市：'" :key="index">{{ str }}</span>
+        </label>
+        <div class="value-wrap">
+          <p class="address">{{ postData.province + postData.city}}</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" 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>
+      </li>
+    </ul>
+    <button class="submit">提交</button>
+    <p class="explain">
+      <span>申请代表您同意</span>
+      <router-link :to="{path: '/privacy'}">《用户隐私协议》</router-link>
+      <span>和</span>
+      <router-link :to="{path: '/agreement'}">《服务协议》</router-link>
+    </p>
+  </div>
+</template>
+
+<script>
+  import Flow from './components/flow'
+
+  export default {
+    name: 'apply',
+    components: {
+      Flow
+    },
+    data () {
+      return {
+        postData: {
+          name: '',
+          gender: -1,
+          phone: '',
+          province: '',
+          city: '',
+          address: '',
+          amount: 0
+        }
+      }
+    },
+    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)
+        })
+      }
+    },
+    methods: {
+      handleTextarea (el, auto) {
+        return () => {
+          if (auto) {
+            el.style.height = 'auto'
+          }
+          el.style.height = el.scrollHeight + 'px'
+        }
+      }
+    }
+  }
+</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 {
+      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) {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .value-wrap {
+      flex: 1;
+      display: flex;
+      margin-left: 9px;
+    }
+
+    .name {
+      display: flex;
+      width: 100%;
+    }
+
+    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;
+
+      &::-webkit-input-placeholder {
+        color: #999;
+        -webkit-text-fill-color: #999;
+        opacity: 1;
+      }
+    }
+
+    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;
+      }
+    }
+
+    .address {
+      flex: 1;
+      line-height: 22px;
+      font-size: 15px;
+      color: #333;
+    }
+
+    img {
+      width: 22px;
+      height: 22px;
+    }
+
+    .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;
+      }
+    }
+  }
+
+  .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>

htmldev/loan/src/views/home.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>1111</div>
-</template>
-
-<script>
-  export default {
-    name: 'home'
-  }
-</script>
-
-<style scoped>
-
-</style>

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="wrapper">
+    <div class="footer">
+      <div class="invite-info">
+        <div class="avatar">
+          <img src="" alt="">
+        </div>
+        <p class="partner-name">蒋华华</p>
+        <p class="label">邀请您</p>
+      </div>
+      <router-link class="btn-apply" :to="{path: '/apply'}">免费在线申请</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'home'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    width: 100%;
+    min-height: 100vh;
+    padding-bottom: 138px;
+  }
+
+  .footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 22px 0 24px;
+    background: #fff;
+  }
+
+  .invite-info {
+    display: flex;
+    align-items: center;
+    width: 327px;
+  }
+
+  .avatar {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: pink;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .partner-name,
+  .label {
+    margin-left: 12px;
+    line-height: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .btn-apply {
+    width: 327px;
+    height: 45px;
+    margin-top: 22px;
+    border-radius: 4px;
+    line-height: 45px;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    color: #fff;
+    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
+</style>