计算器-轮播图详情

htmldev/loan/src/router/index.js

@@ -58,15 +58,6 @@ const routes = [
           keepAlive: true
         }
       },
-      {
-        path: '/loan/recommend', // 贷款计算器推荐产品
-        name: 'loanRecommend',
-        component: _import('views/loan/recommend/index'),
-        meta: {
-          isUseCache: false,
-          keepAlive: true
-        }
-      },
       {
         path: '/loan/mine', // 我的
         name: 'loanMine',
@@ -78,6 +69,23 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/loan/media/:id', // 销售页顶部banner，轮播图详情
+    name: 'loanMedia',
+    component: _import('views/loan/media/index'),
+    props: (route) => ({
+      id: route.params.id
+    })
+  },
+  {
+    path: '/loan/recommend', // 贷款计算器推荐产品
+    name: 'loanRecommend',
+    component: _import('views/loan/recommend/index'),
+    meta: {
+      isUseCache: false,
+      keepAlive: true
+    }
+  },
   {
     path: '/loan/invite', // 邀请记录
     name: 'loanInvite',

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

@@ -42,7 +42,7 @@
     <div id="ttyf-qrcode"
          style="display: none;"></div>
     <!--弹窗：邀请-->
-    <van-popup class="ybr-van-popup-invite"
+    <van-popup class="ttyf-van-popup-invite"
                round
                v-model="booInvite">
       <p class="title">邀请好友申请贷款</p>
@@ -58,7 +58,7 @@
       </p>
     </van-popup>
     <!--弹窗：二维码-->
-    <van-popup class="ybr-van-popup-code"
+    <van-popup class="ttyf-van-popup-code"
                round
                v-model="booCode">
       <p>请扫码申请贷款</p>
@@ -67,7 +67,7 @@
       </div>
     </van-popup>
     <!--弹窗：分享提示-->
-    <van-popup class="ybr-van-popup-share"
+    <van-popup class="ttyf-van-popup-share"
                position="top"
                v-model="booShareTip">
       <img src="./image/icon_01@2x.png" alt="">
@@ -270,7 +270,7 @@ export default {
   }
 }
 
-.ybr-van-popup-invite {
+.ttyf-van-popup-invite {
   width: 327px;
   padding-top: 26px;
   border-radius: 9px;
@@ -344,7 +344,7 @@ export default {
   }
 }
 
-.ybr-van-popup-code {
+.ttyf-van-popup-code {
   width: 252px;
   padding-bottom: 26px;
   border-radius: 9px;
@@ -373,7 +373,7 @@ export default {
   }
 }
 
-.ybr-van-popup-share {
+.ttyf-van-popup-share {
   background: transparent;
 
   img {

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

@@ -1,8 +1,8 @@
 <template>
-  <swiper class="ybr-swiper-container"
-          :class="{'swiper-no-swiping': arrBanner.length === 1}"
-          :options="ybrSWOptions"
-          v-if="arrBanner.length">
+  <swiper class="ttyf-swiper-container"
+          :options="ttyfSWOptions"
+          v-if="arrBanner.length"
+          ref="ttyfSwiper">
     <swiper-slide v-for="(item, index) in arrBanner"
                   :key="index">
       <img class="banner"
@@ -31,23 +31,42 @@ export default {
       }
     }
   },
-  computed: {
-    ybrSWOptions () {
-      return {
+  data () {
+    return {
+      ttyfSWOptions: {
         loop: true,
         autoplay: this.arrBanner.length > 1,
         pagination: {
           el: '.sw-pagination',
           clickable: true
+        },
+        on: {
+          click: this.handleClick
         }
       }
     }
+  },
+  methods: {
+    handleClick () {
+      // bannerType：1 跳转链接，0 富文本
+      const ttyfSwiper = this.$refs.ttyfSwiper.swiper
+      const { bannerType, url, id } = this.arrBanner[ttyfSwiper.realIndex]
+      switch (bannerType) {
+        case 0:
+          this.$router.push({ name: 'loanMedia', params: { id } })
+          break
+        case 1:
+          location.href = url
+          break
+        default:
+      }
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.ybr-swiper-container {
+.ttyf-swiper-container {
   .banner {
     display: block;
     width: 100%;

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

@@ -56,7 +56,6 @@ export default {
     fetchBanner () {
       getBannerList().then(res => {
         if (res.status) {
-          // todo bannerType：1 跳转链接，0 富文本
           this.arrBanner = res.data
         } else {
           Toast(res.msg)

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

@@ -11,10 +11,8 @@
         <span>销售</span>
       </router-link>
       <router-link :to="{path: '/loan/calculator'}" replace>
-        <img src="./image/tab_jisuanqi_nor@2x.png" alt=""
-             v-show="$route.name !== 'loanCalculator' && $route.name !== 'loanRecommend'">
-        <img src="./image/tab_jisuanqi_sel@2x.png" alt=""
-             v-show="$route.name === 'loanCalculator' || $route.name === 'loanRecommend'">
+        <img src="./image/tab_jisuanqi_nor@2x.png" alt="" v-show="$route.name !== 'loanCalculator'">
+        <img src="./image/tab_jisuanqi_sel@2x.png" alt="" v-show="$route.name === 'loanCalculator'">
         <span>贷款工具</span>
       </router-link>
       <router-link :to="{path: '/loan/mine'}" replace>

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

@@ -0,0 +1,12 @@
+import request from '@/api/request'
+
+/**
+ * 轮播图详情接口
+ */
+export const getBannerDetail = (id) => request({
+  method: 'GET',
+  url: '/home/banner/detail',
+  params: {
+    id
+  }
+})

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="ttyf-container">
+    <div v-html="bannerContent"></div>
+  </div>
+</template>
+
+<script>
+import { getBannerDetail } from './api'
+import { Toast } from 'vant'
+
+export default {
+  name: 'index',
+  props: {
+    id: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      bannerContent: ''
+    }
+  },
+  created () {
+    this.fetchBannerDetail()
+  },
+  methods: {
+    // 获取用户分享权限
+    fetchBannerDetail () {
+      getBannerDetail(this.id).then(res => {
+        if (res.status) {
+          const { bannerContent } = res.data
+          this.bannerContent = bannerContent
+        } else {
+          Toast(res.msg)
+        }
+      }).catch(err => {
+        Toast(err)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>