驼驼-推荐好友

htmldev/loan/README.md

@@ -24,3 +24,9 @@ npm run lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ### http://daikuan.codedreamit.com/loan/apply/1
+
+#### 驼驼2期
+>* 我的 - 推荐有礼(邀请好友弹窗)
+>* 计算器 - 推荐产品
+>* 产品 - 产品介绍(已有，新增邀请好友弹窗)
+

htmldev/loan/src/api/request.js

@@ -26,7 +26,7 @@ request.interceptors.response.use(response => {
   // Do something with response data
   const { code, authorizeUrl } = response.data
   if (code === 301 && authorizeUrl) {
-    location.replace(authorizeUrl)
+    // location.replace(authorizeUrl)
   } else if (code === 403) {
     router.push('/partner/login')
   }

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

@@ -9,6 +9,7 @@
   font-weight: 400;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 
 a {
@@ -39,7 +40,8 @@ iframe {
 html,
 body {
   width: 100%;
-  min-height: 100vh;
+  height: 100%;
+  min-height: 100%;
 }
 
 html {

htmldev/loan/src/router/index.js

@@ -40,6 +40,11 @@ const routes = [
     name: 'loanMine',
     component: () => import(/* webpackChunkName: "loan_mine" */ '../views/loan/mine')
   },
+  {
+    path: '/loan/invite', // 邀请记录
+    name: 'loanInvite',
+    component: () => import(/* webpackChunkName: "loan_invite" */ '../views/loan/invite')
+  },
   {
     path: '/loan/coupon', // 优惠券
     name: 'loanCoupon',

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="ttyf-conatainer">
+    <!--邀请记录-头像区-->
+    <div>
+      <div class="invite-list">
+        <ul>
+          <!--头像-->
+          <li v-for="i in 2" :key="'a' + i">
+            <div class="avatar">
+              <img src="" alt="">
+            </div>
+            <p class="name">爱神的箭</p>
+          </li>
+          <!--占位-->
+          <li v-for="i in 3" :key="'b' + i">
+            <div class="avatar">
+              <img src="" alt="">
+            </div>
+          </li>
+        </ul>
+      </div>
+      <a class="btn"
+         href="javascript:;">去推荐</a>
+    </div>
+    <!--奖励说明-->
+    <!--邀请记录-列表-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  async mounted () {
+    await this.$nextTick()
+    this.$refreshTitle('推荐有礼')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.invite-list {
+  width: 330px;
+  height: 236px;
+  padding-top: 34px;
+  margin: 0 auto;
+  background: rgba(56, 22, 54, 0.1);
+  border-radius: 16px;
+
+  ul {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    width: 238px;
+    margin: 0 auto;
+  }
+
+  li {
+    margin-left: 35px;
+    margin-top: 15px;
+
+    &:nth-of-type(1),
+    &:nth-of-type(2),
+    &:nth-of-type(3) {
+      margin-top: 0;
+    }
+
+    &:nth-of-type(1),
+    &:nth-of-type(4) {
+      margin-left: 0;
+    }
+  }
+
+  .avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: 1px solid #FFFFFF;
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .name {
+    width: 100%;
+    margin-top: 10px;
+    font-size: 13px;
+    color: #FFFFFF;
+    line-height: 18px;
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.btn {
+  display: block;
+  width: 326px;
+  height: 45px;
+  margin: 0 auto;
+  background: #FE9400;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 45px;
+  text-align: center;
+}
+</style>

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

@@ -41,6 +41,12 @@
         </span>
       </a>
     </div>
+    <!--驼驼来送礼，邀请好友-->
+    <router-link class="btn-invite"
+                 :to="{name: 'loanInvite'}">
+      <img src="./image/xiaoshou_bg_tuiguang@2x.png"
+           alt="">
+    </router-link>
   </div>
 </template>
 
@@ -251,4 +257,14 @@ export default {
     margin-left: 5px;
   }
 }
+
+.btn-invite {
+  margin-top: 16px;
+
+  img {
+    display: block;
+    width: 342px;
+    height: 117px;
+  }
+}
 </style>