新增轮播图链接

src/api/index.js

@@ -9,6 +9,14 @@ export function getBanners(params) {
   })
 }
 
+/* 获取对应轮播详情 */
+export function getBannerDetail(id) {
+  return request({
+    url: `/cniyv/cniyvbanner/info/${id}`,
+    method: 'get'
+  })
+}
+
 /* 获取首页推荐产品类别及对应产品 */
 export function getHomeCniyvTypes(params) {
   return request({

src/components/layout/ComponentBanner.vue

@@ -3,15 +3,15 @@
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" v-for="(item, index) in bannerList" :data-slide-to="index" :class="index==0 ? 'active' : ''"></li>
-      <!-- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
-      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
-      <li data-target="#carousel-example-generic" data-slide-to="3"></li> -->
     </ol>
 
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
       <div class="item" v-for="(item, index) in bannerList" :key="item.ptsid" :class="index==0 ? 'active' : ''">
-        <img :src="item.pic" alt="">
+        <router-link :to="formatUrl(item)" :target="item.lurl ? '_blank' : ''" v-if="item.url || item.lurl">
+          <img :src="item.pic" :alt="item.title">
+        </router-link>
+        <img :src="item.pic" :alt="item.title" v-else>
         <div class="carousel-caption">
         </div>
       </div>
@@ -61,13 +61,11 @@ export default {
   methods: {
     ...mapActions({
       getBanners: 'app/getBannerList'
-    })
-    // initSwiper() {
-    //   this.swiper = new Swiper('.swiper-container', {
-    //     autoplay: true,
-    //     loop: true
-    //   })
-    // }
+    }),
+
+    formatUrl(el) {
+      return el.lurl ? el.lurl : el.url ? `${el.url}/${el.ptsid}` : ''
+    }
   }
 }
 </script>

src/router/index.js

@@ -100,14 +100,7 @@ const routes = [
           },
         ]
       },
-      {
-        path: '/detail',
-        name: '',
-        meta: {
-
-        },
-        component: PublicDetail
-      }
+      
       // {
       //   path: '/join',
       //   meta: {
@@ -115,8 +108,16 @@ const routes = [
       //   },
       //   component: Join,
       // },
+      {
+        path: '/detail/:id',
+        name: '',
+        meta: {
+          isPublicDetail: true
+        },
+        component: PublicDetail
+      }
     ]
-  }
+  },
 ]
 
 const router = new VueRouter({

src/store/getters.js

@@ -1,6 +1,7 @@
 const getters = {
   navActive: state => state.app.navActive,
   bannerList: state => state.app.banners,
+  bannerDetail: state => state.app.bannerDetail,
   homeTypeList: state => state.cniyv.homeTypeList,
   cniyvTypeList: state => state.cniyv.typeList,
   cniyvList: state => state.cniyv.cniyvList,

src/store/modules/app.js

@@ -1,9 +1,10 @@
-import { getBanners } from "@/api"
+import { getBanners, getBannerDetail } from "@/api"
 
 const state = {
   navActive: '/',
   breadList: [],
-  banners: []
+  banners: [],
+  bannerDetail: ''
 }
 
 const mutations = {
@@ -18,6 +19,10 @@ const mutations = {
   SET_BANNERS: (state, payload) => {
     state.banners = payload
   },
+
+  SET_BANNER_DETAIL: (state, payload) => {
+    state.bannerDetail = payload
+  },
 }
 
 const actions = {
@@ -38,7 +43,19 @@ const actions = {
         reject(err)
       })
     })
-  }
+  },
+
+  getBannerMsg({ commit }, id) {
+    return new Promise((resolve, reject) => {
+      getBannerDetail(id).then(res => {
+        res.data.imgs = res.data.imgs ? res.data.imgs.split(',') : []
+        commit('SET_BANNER_DETAIL', res.data)
+        resolve()
+      }).catch(err => {
+        reject(err)
+      })
+    })
+  },
 }
 
 export default {

src/views/Home/ComponentCustom.vue

@@ -64,7 +64,7 @@
         <div class="row">
           <div class="col-md-6 aboutwh">
             <h3>天云文化</h3>
-            <a href="" class="btn-block" style="margin-bottom:10px;">
+            <a class="btn-block" style="margin-bottom:10px;">
               <img src="@/assets/images/top2.png" alt="" />
             </a>
             <!-- <p class="tips-p">北斗巡天，云福中华</p> -->

src/views/PublicDetail/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <!-- <div class="products-yemian">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="bread-container">
+            <b>您当前的位置：</b>
+            <el-breadcrumb separator-class="el-icon-arrow-right">
+              <el-breadcrumb-item v-for="item in breadList" :key="item.path">
+                <router-link :to="item.path" :data-title="item.meta.title">{{
+                item.meta.title }}</router-link>
+              </el-breadcrumb-item>
+              <el-breadcrumb-item v-if="newsTitle && !$route.meta.isDetail">
+                <span class="nav-title">{{ newsTitle }}</span>
+              </el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+          <div class="row" style="margin-top: 10px;">
+            <div class="col-md-12 col-sm-9 content">
+              <div class="content-news" v-html="toHtml(bannerDetail.content)"></div>
+              <div class="content-news" v-html="toHtml(bannerDetail.content1)"></div>
+              <div class="content-news" v-html="toHtml(bannerDetail.content2)"></div>
+              <div class="content-news" v-html="toHtml(bannerDetail.content3)"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> -->
+  <div class="row" style="margin-top: 10px;">
+    <div class="col-md-24 content">
+      <div class="content-news" v-html="toHtml(bannerDetail.content)"></div>
+      <div class="content-news" v-html="toHtml(bannerDetail.content1)"></div>
+      <div class="content-news" v-html="toHtml(bannerDetail.content2)"></div>
+      <div class="content-news" v-html="toHtml(bannerDetail.content3)"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  data() {
+    return {
+      bannerId: '',
+      // newsTitle: ''
+    }
+  },
+  created() {
+    this.bannerId = this.$route.params.id
+    this.getBannerMsg(this.$route.params.id)
+  },
+  computed: {
+    ...mapGetters([
+      'bannerDetail',
+    ]),
+    // breadList() {
+    //   const matche = this.$route.matched
+    //   matche[0].path = '/'
+    //   const length = matche.length
+    //   if (length > 1) {
+    //     matche[length - 1].path = ''
+    //     matche[length - 1].meta.title = this.bannerDetail.title
+    //   }
+    //   return matche
+    // }
+  },
+  methods: {
+    ...mapActions({
+      getBannerMsg: 'app/getBannerMsg'
+    }),
+
+    toHtml(content) {
+      if (!content) return ''
+      return content.replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&amp;/g, "&")
+        .replace(/&quot;/g, '"')
+        .replace(/&apos;/g, "'");
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  padding: 0;
+}
+.news-title {
+  font-size: 3.2rem;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.news-time {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+/* .bread-container {
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+  border-bottom: 1px solid #dadada;
+}
+
+.bread-container .nav-title {
+  font-weight: 600;
+  color: #3884c0;
+}
+
+.bread-container .nav-title:hover {
+  color: #333;
+}
+
+.el-breadcrumb__item {
+  display: flex;
+}
+
+.el-breadcrumb__item:last-child a {
+  font-weight: 600;
+  color: #3884c0;
+}
+
+a {
+  outline: none;
+} */
+
+/* .content-news p img {
+    width: auto;
+    height: auto;
+  } */
+</style>