驼驼-推荐记录

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

@@ -20,7 +20,8 @@
         </ul>
       </div>
       <a class="btn"
-         href="javascript:;">去推荐</a>
+         href="javascript:;"
+         @click="booInvite = true">去推荐</a>
     </div>
     <!--奖励说明-->
     <div class="award-explain">
@@ -66,15 +67,55 @@
         </li>
       </ul>
     </div>
+    <!--弹窗：邀请-->
+    <van-popup class="ybr-van-popup-invite"
+               round
+               v-model="booInvite">
+      <p class="title">邀请好友申请贷款</p>
+      <p class="tip">放款成功后，可获得超值奖励</p>
+      <p class="btns">
+        <a href="javascript:;">微信好友 邀请</a>
+        <a href="javascript:;">微信朋友圈 邀请</a>
+      </p>
+      <p class="show-code"
+         @click="funShowCode">
+        <img src="" alt="">
+        <span>面对面扫码邀请></span>
+      </p>
+    </van-popup>
+    <!--弹窗：二维码-->
+    <van-popup class="ybr-van-popup-code"
+               round
+               v-model="booCode">
+      <p>请扫码申请贷款</p>
+      <img src="" alt="">
+    </van-popup>
   </div>
 </template>
 
 <script>
+import { Popup } from 'vant'
+
 export default {
   name: 'index',
+  components: {
+    'van-popup': Popup
+  },
+  data () {
+    return {
+      booInvite: false,
+      booCode: false
+    }
+  },
   async mounted () {
     await this.$nextTick()
     this.$refreshTitle('推荐有礼')
+  },
+  methods: {
+    funShowCode () {
+      this.booInvite = false
+      this.booCode = true
+    }
   }
 }
 </script>
@@ -367,4 +408,102 @@ export default {
     line-height: 20px;
   }
 }
+
+.ybr-van-popup-invite {
+  width: 327px;
+  padding-top: 26px;
+  border-radius: 9px;
+
+  .title {
+    padding-left: 24px;
+    font-size: 24px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 33px;
+  }
+
+  .tip {
+    padding-left: 24px;
+    margin-top: 4px;
+    font-size: 16px;
+    line-height: 22px;
+    color: #666666;
+  }
+
+  .btns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 28px;
+  }
+
+  a {
+    width: 132px;
+    height: 46px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 46px;
+    text-align: center;
+
+    &:nth-of-type(1) {
+      background: #5ACE8D;
+    }
+
+    &:nth-of-type(2) {
+      margin-left: 16px;
+      background: #FE9400;
+    }
+  }
+
+  .show-code {
+    font-size: 0;
+    background: #FCFCFC;
+    border-top: 1px solid #EBEBEB;
+    padding: 17px 0 20px;
+    margin-top: 16px;
+    text-align: center;
+
+    img {
+      width: 20px;
+      height: 20px;
+      vertical-align: middle;
+    }
+
+    span {
+      margin-left: 5px;
+      font-size: 14px;
+      color: #333333;
+      line-height: 20px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.ybr-van-popup-code {
+  width: 252px;
+  padding-bottom: 26px;
+  border-radius: 9px;
+
+  p {
+    font-size: 24px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 33px;
+    text-align: center;
+    padding: 26px 0;
+    border-bottom: 1px solid #EBEBEB;
+  }
+
+  img {
+    display: block;
+    width: 194px;
+    height: 193px;
+    margin: 12px auto 0;
+  }
+}
 </style>