计算器-样式

htmldev/loan/src/filter/toThousands.js

@@ -4,6 +4,5 @@ export const toThousands = (num) => {
   } else if (Object.prototype.toString.call(num) === '[object Number]') {
     num = num.toString()
   }
-  console.log(num.replace(/(\d)(?=(\d{3})+$)/g, '$1,'))
   return num.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
 }

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

@@ -3,7 +3,7 @@
     <!--信息编辑-->
     <van-form ref="myVanform">
       <!--标题：妥妥计算器-->
-      <img class="title" src="" alt="">
+      <img class="title" src="./image/icon_title@2x.png" alt="">
       <van-field
         readonly
         clickable

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

@@ -48,12 +48,12 @@
       <p class="title">邀请好友申请贷款</p>
       <p class="tip">放款成功后，可获得超值奖励</p>
       <p class="btns">
-        <a href="javascript:;">微信好友 邀请</a>
-        <a href="javascript:;">微信朋友圈 邀请</a>
+        <a href="javascript:;" @click="funShareTip">微信好友 邀请</a>
+        <a href="javascript:;" @click="funShareTip">微信朋友圈 邀请</a>
       </p>
       <p class="show-code"
          @click="funShowCode">
-        <img src="" alt="">
+        <img src="./image/icon_00@2x.png" alt="">
         <span>面对面扫码邀请></span>
       </p>
     </van-popup>
@@ -66,6 +66,12 @@
         <img :src="codeUrl" alt="">
       </div>
     </van-popup>
+    <!--弹窗：分享提示-->
+    <van-popup class="ybr-van-popup-share"
+               position="top"
+               v-model="booShareTip">
+      <img src="./image/icon_01@2x.png" alt="">
+    </van-popup>
   </div>
 </template>
 
@@ -110,7 +116,8 @@ export default {
       booCode: false,
       qrcode: null,
       codeUrl: '', // 二维码地址
-      showCode: false // 是否显示二维码弹窗
+      showCode: false, // 是否显示二维码弹窗
+      booShareTip: false // 分享朋友、朋友圈提示
     }
   },
   computed: {
@@ -163,6 +170,10 @@ export default {
         const canvas = document.getElementById('ttyf-qrcode').getElementsByTagName('canvas')[0]
         this.codeUrl = canvas.toDataURL('image/png', 1)
       }, 500)
+    },
+    funShareTip () {
+      this.booShareTip = true
+      this.booInvite = false
     }
   }
 }
@@ -361,4 +372,14 @@ export default {
     }
   }
 }
+
+.ybr-van-popup-share {
+  background: transparent;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 286px;
+  }
+}
 </style>

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

@@ -1,5 +1,6 @@
 <template>
   <div class="ttyf-conatainer">
+    <img class="header-bg" src="./image/header@2x.png" alt="">
     <!--邀请记录-头像区-->
     <div class="invite-list">
       <div class="avatar-list">
@@ -16,7 +17,7 @@
           <li v-for="i in (5 - recommendedUser.length)"
               :key="'b' + i">
             <div class="avatar">
-              <img src="" alt="">
+              <img src="./image/bitmap@2x.png" alt="">
             </div>
           </li>
         </ul>
@@ -24,6 +25,7 @@
       <a class="btn"
          href="javascript:;"
          @click="funShowDialog">去推荐</a>
+      <p class="my-value">我的积分：{{ point }}</p>
     </div>
     <!--奖励说明-->
     <div class="award-explain">
@@ -84,6 +86,7 @@ export default {
   name: 'index',
   data () {
     return {
+      point: 0, // 用户积分
       rewardList: [], // 推荐奖品
       recommendedUser: [] // 推荐成功用户
     }
@@ -111,7 +114,9 @@ export default {
     fetchReward () {
       getReward().then(res => {
         if (res.status) {
-          this.rewardList = res.data
+          const { point, datas } = res.data
+          this.point = point
+          this.rewardList = datas
         } else {
           Toast(res.msg)
         }
@@ -137,10 +142,26 @@ export default {
 
 <style lang="scss" scoped>
 .ttyf-conatainer {
-  padding-bottom: 52px;
+  position: relative;
+  left: 0;
+  top: 0;
+  padding: 493px 0 52px;
+}
+
+.header-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 885px;
 }
 
 .invite-list {
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 1;
+
   .avatar-list {
     width: 330px;
     height: 236px;
@@ -213,9 +234,24 @@ export default {
     line-height: 45px;
     text-align: center;
   }
+
+  .my-value {
+    width: 100%;
+    margin-top: 10px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 22px;
+    text-align: center;
+  }
 }
 
 .award-explain {
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -223,7 +259,8 @@ export default {
   background: #FFFFFF;
   box-shadow: 0 1px 8px 0 rgba(209, 219, 236, 0.7);
   border-radius: 8px;
-  margin: 0 auto;
+  padding-top: 18px;
+  margin: 24px auto 0;
 
   .title {
     width: 125px;