驼驼-商城

htmldev/loan/src/router/index.js

@@ -80,7 +80,7 @@ const routes = [
     component: _import('views/loan/coupon/index'),
     meta: {
       isUseCache: false,
-      keepAlive: true
+      keepAlive: false
     }
   },
   {

htmldev/loan/src/views/loan/index/api/index.js

@@ -0,0 +1,28 @@
+import request from '@/api/request'
+
+/**
+ * 轮播图
+ */
+export const getBannerList = () => request({
+  method: 'GET',
+  url: '/home/banner/list'
+})
+
+/**
+ * 消息轮播
+ */
+export const getNotice = () => request({
+  method: 'GET',
+  url: '/home/user/market/data'
+})
+
+/**
+ * 产品列表
+ */
+export const getProduct = (type) => request({
+  method: 'GET',
+  url: '/home/product/list',
+  params: {
+    type
+  }
+})

htmldev/loan/src/views/loan/index/child/banner.vue

@@ -6,7 +6,7 @@
     <swiper-slide v-for="(item, index) in arrBanner"
                   :key="index">
       <img class="banner"
-           :src="item"
+           :src="item.bannerImgUrl"
            alt="">
     </swiper-slide>
     <div class="sw-pagination"

htmldev/loan/src/views/loan/index/child/goods.vue

@@ -2,16 +2,18 @@
   <div>
     <Subtitle :subtitle="subtitle"/>
     <ul class="goods">
-      <li @click="$emit('funJump', {id: 2})">
+      <li v-for="(item, index) in products"
+          :key="index"
+          @click="$emit('funJump', item)">
         <div class="left goods-cover">
-          <img src="" alt="">
+          <img :src="item.productImgUrl" alt="">
         </div>
         <div class="right">
           <div class="div">
-            <p class="name">中行贷款</p>
-            <p class="money">最高可贷50万</p>
+            <p class="name">{{ item.productName }}</p>
+            <p class="money">最高可贷{{ item.productPrice | toThousands }}元</p>
           </div>
-          <p class="specialty">速度快，材料少</p>
+          <p class="specialty">{{ item.productDesc }}</p>
         </div>
       </li>
     </ul>
@@ -30,6 +32,12 @@ export default {
     subtitle: {
       type: String,
       default: ''
+    },
+    products: {
+      type: Array,
+      default: function () {
+        return []
+      }
     }
   }
 }
@@ -59,7 +67,6 @@ export default {
     height: 100px;
     border-radius: 8px;
     overflow: hidden;
-    background: pink;
 
     img {
       display: block;

htmldev/loan/src/views/loan/index/child/notice.vue

@@ -8,7 +8,7 @@
                   v-for="(item,index) in message"
                   :key="index">
       <div class="item">
-        <p>{{ item }}</p>
+        <p>{{ item.data }}</p>
       </div>
     </swiper-slide>
   </swiper>

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

@@ -6,9 +6,11 @@
     <Notice :message="noticeArr"/>
     <Goods class="margin-top-16"
            :subtitle="'明星产品'"
+           :products="starProduct"
            @funJump="funJump"/>
     <Goods class="margin-top-30"
            :subtitle="'推荐贷款'"
+           :products="recommendedProduct"
            @funJump="funJump"/>
   </div>
 </template>
@@ -17,6 +19,8 @@
 import Banner from './child/banner'
 import Notice from './child/notice'
 import Goods from './child/goods'
+import { getBannerList, getNotice, getProduct } from './api'
+import { Toast } from 'vant'
 
 export default {
   name: 'index',
@@ -28,13 +32,77 @@ export default {
   data () {
     return {
       arrBanner: [],
-      noticeArr: []
+      noticeArr: [],
+      arrProducttype: [0, 1], // 产品类型: 0明星产品1推荐产品
+      starProduct: [], // 明星产品
+      recommendedProduct: [] // 推荐贷款
     }
   },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+      this.fetchBanner()
+      this.fetchNotice()
+      this.arrProducttype.forEach(item => {
+        this.fetchProduct(item)
+      })
+    }
+    this.$route.meta.isUseCache = false
+  },
   methods: {
     funJump (item) {
       this.$router.push({ name: 'loanExplain', params: { orderProductId: item.id } })
+    },
+    // 顶部轮播图
+    fetchBanner () {
+      getBannerList().then(res => {
+        if (res.status) {
+          // todo bannerType：1 跳转链接，0 富文本
+          this.arrBanner = res.data
+        } else {
+          Toast(res.msg)
+        }
+      }).catch(err => {
+        Toast(err)
+      })
+    },
+    // 营销通知
+    fetchNotice () {
+      getNotice().then(res => {
+        if (res.status) {
+          this.noticeArr = res.data
+        } else {
+          Toast(res.msg)
+        }
+      }).catch(err => {
+        Toast(err)
+      })
+    },
+    // 产品列表
+    fetchProduct (type) {
+      getProduct(type).then(res => {
+        if (res.status) {
+          switch (type) {
+            case 0:
+              this.starProduct = res.data
+              break
+            case 1:
+              this.recommendedProduct = res.data
+              break
+            default:
+          }
+        } else {
+          Toast(res.msg)
+        }
+      }).catch(err => {
+        Toast(err)
+      })
+    }
+  },
+  beforeRouteLeave (to, from, next) {
+    if (['loanPrivacy', 'loanAgreement'].includes(to.name)) {
+      from.meta.isUseCache = true
     }
+    next()
   }
 }
 </script>

htmldev/loan/src/views/loan/invite/api/index.js

@@ -0,0 +1,17 @@
+import request from '@/api/request'
+
+/**
+ * 推荐奖品列表接口
+ */
+export const getReward = () => request({
+  method: 'GET',
+  url: '/home/recommend/reward/list'
+})
+
+/**
+ * 推荐成功用户列表接口
+ */
+export const getRecommendUser = () => request({
+  method: 'GET',
+  url: '/home/recommend/user/list'
+})

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

@@ -5,14 +5,16 @@
       <div class="avatar-list">
         <ul>
           <!--头像-->
-          <li v-for="i in 2" :key="'a' + i">
+          <li v-for="(item, index) in recommendedUser"
+              :key="'a' + index">
             <div class="avatar">
-              <img src="" alt="">
+              <img :src="item.userImgUrl" alt="">
             </div>
-            <p class="name">爱神的箭</p>
+            <p class="name">{{ item.userName }}</p>
           </li>
-          <!--占位-->
-          <li v-for="i in 3" :key="'b' + i">
+          <!--占位: 最多显示5个头像-->
+          <li v-for="i in (5 - recommendedUser.length)"
+              :key="'b' + i">
             <div class="avatar">
               <img src="" alt="">
             </div>
@@ -34,12 +36,14 @@
         <span>奖品兑换所需积分如下：</span>
       </p>
       <ul>
-        <li v-for="i in 6" :key="i">
+        <li v-for="(item, index) in rewardList"
+            :key="index">
           <div class="gift-cover">
-            <img src="" alt="">
+            <img :src="item.recommendRewardUrl"
+                 alt="">
           </div>
-          <p class="name">耳机</p>
-          <p class="number">1个积分</p>
+          <p class="name">{{ item.recommendRewardName }}</p>
+          <p class="number">{{ item.recommendRewardPoint }}个积分</p>
         </li>
       </ul>
       <a class="tel"
@@ -49,19 +53,21 @@
       </a>
     </div>
     <!--邀请记录-列表-->
-    <div class="user-list">
+    <div class="user-list"
+         v-if="recommendedUser.length">
       <p class="title">邀请记录</p>
       <ul>
-        <li v-for="i in 3" :key="i">
+        <li v-for="(item, index) in recommendedUser"
+            :key="index">
           <div class="left avatar">
-            <img src="" alt="">
+            <img :src="item.userImgUrl" alt="">
           </div>
           <div class="right">
             <p class="top">
-              <span>吴华华</span>
-              <span>申请贷款“中行贷”</span>
+              <span>{{ item.userName }}</span>
+              <span>申请贷款“{{ item.orderProduceName }}”</span>
             </p>
-            <p class="bottom">2021-03-23 14:44</p>
+            <p class="bottom">{{ item.createdAt }}</p>
           </div>
           <p class="status">放款成功</p>
         </li>
@@ -71,12 +77,20 @@
 </template>
 
 <script>
-import { Dialog } from 'vant'
+import { Dialog, Toast } from 'vant'
+import { getReward, getRecommendUser } from './api'
 
 export default {
   name: 'index',
   data () {
-    return {}
+    return {
+      rewardList: [], // 推荐奖品
+      recommendedUser: [] // 推荐成功用户
+    }
+  },
+  created () {
+    this.fetchReward()
+    this.fetchRecommendUser()
   },
   async mounted () {
     await this.$nextTick()
@@ -92,6 +106,30 @@ export default {
       }).then(() => {
         this.$router.replace({ name: 'loanIndex' })
       })
+    },
+    // 推荐奖品
+    fetchReward () {
+      getReward().then(res => {
+        if (res.status) {
+          this.rewardList = res.data
+        } else {
+          Toast(res.msg)
+        }
+      }).catch(err => {
+        Toast(err)
+      })
+    },
+    // 推荐成功用户
+    fetchRecommendUser () {
+      getRecommendUser().then(res => {
+        if (res.status) {
+          this.recommendedUser = res.data
+        } else {
+          Toast(res.msg)
+        }
+      }).catch(err => {
+        Toast(err)
+      })
     }
   }
 }
@@ -334,7 +372,6 @@ export default {
     height: 24px;
     border-radius: 50%;
     overflow: hidden;
-    background: pink;
 
     img {
       display: block;