驼驼-商城

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

@@ -2,34 +2,65 @@
   <div class="wrapper">
     <img class="banner" :src="productInfo.productContentUrl" alt="">
     <!--本人：可以分享-->
-    <div class="footer other">
-      <template v-if="false">
+    <div class="footer myself">
+      <template v-if="true">
         <router-link class="btn-apply double"
                      :to="{path: '/loan/apply/' + orderProductId + '?partnerId=' + partnerId}">点击预约办理
         </router-link>
-        <a class="invite" href="javascript:;">分享好礼</a>
+        <a class="invite double"
+           href="javascript:;"
+           @click="booInvite = true">分享好礼</a>
       </template>
       <!--本人：不能分享-->
       <router-link class="btn-apply single"
-                   :to="{path: '/loan/apply/' + orderProductId + '?partnerId=' + partnerId}">点击预约办理
+                   :to="{path: '/loan/apply/' + orderProductId + '?partnerId=' + partnerId}"
+                   v-if="false">点击预约办理
       </router-link>
       <!--非本人-->
-      <div class="partner-info">
+      <div class="partner-info"
+           v-if="false">
         <div class="partner-avatar">
           <img src="" alt="">
         </div>
         <p class="name">leon 邀请你</p>
       </div>
     </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'
 import { funWxShare } from '../../../utils/wxShareConfig'
 import { getProductDetail } from '../../../api/common'
 
 export default {
   name: 'explain',
+  components: {
+    'van-popup': Popup
+  },
   props: {
     // 产品ID
     orderProductId: {
@@ -43,7 +74,9 @@ export default {
   },
   data () {
     return {
-      productInfo: {}
+      productInfo: {},
+      booInvite: false,
+      booCode: false
     }
   },
   async mounted () {
@@ -52,6 +85,10 @@ export default {
     this.funGetProductDetail()
   },
   methods: {
+    funShowCode () {
+      this.booInvite = false
+      this.booCode = true
+    },
     funGetProductDetail () {
       getProductDetail(this.orderProductId).then(res => {
         if (res.status) {
@@ -110,12 +147,6 @@ export default {
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
   text-align: center;
-}
-
-.btn-apply {
-  background: linear-gradient(180deg, #E0000B 0%, #CB0000 100%);
-  color: #FFFFFF;
-  line-height: 45px;
 
   &.single {
     width: 326px;
@@ -126,6 +157,12 @@ export default {
   }
 }
 
+.btn-apply {
+  background: linear-gradient(180deg, #E0000B 0%, #CB0000 100%);
+  color: #FFFFFF;
+  line-height: 45px;
+}
+
 .invite {
   margin-left: 12px;
   border: 1px solid #CBB091;
@@ -156,4 +193,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>

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

@@ -21,7 +21,7 @@
       </div>
       <a class="btn"
          href="javascript:;"
-         @click="booInvite = true">去推荐</a>
+         @click="funShowDialog">去推荐</a>
     </div>
     <!--奖励说明-->
     <div class="award-explain">
@@ -67,54 +67,31 @@
         </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'
+import { Dialog } from 'vant'
 
 export default {
   name: 'index',
-  components: {
-    'van-popup': Popup
-  },
   data () {
-    return {
-      booInvite: false,
-      booCode: false
-    }
+    return {}
   },
   async mounted () {
     await this.$nextTick()
     this.$refreshTitle('推荐有礼')
   },
   methods: {
-    funShowCode () {
-      this.booInvite = false
-      this.booCode = true
+    funShowDialog () {
+      Dialog.alert({
+        message: '去贷款产品首页，选择产品并推荐',
+        confirmButtonText: '前往',
+        confirmButtonColor: '#333333',
+        closeOnClickOverlay: true
+      }).then(() => {
+        this.$router.replace({ name: 'loanIndex' })
+      })
     }
   }
 }
@@ -408,102 +385,4 @@ 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>