Feat(千县名品):县店铺首页界面接口对接

api/qianxian.js

@@ -20,6 +20,21 @@ export function getCountyFamousCityShop(param) {
     return request.get('/countyFamous/shop', param, { login: true })
 }
 
+// 千县名品店铺点赞/取消赞
+export function postCountyFamousShopZan(data) {
+    return request.post('/countyFamous/shop/zan', data, { login: true })
+}
+
+// 千县名品资讯点赞/取消赞
+export function postCountyFamousNewsZan(data) {
+    return request.post('/countyFamous/news/zan', data, { login: true })
+}
+
+// 千县名品资讯被浏览
+export function postCountyFamousNewsView(data) {
+    return request.post('/countyFamous/news/view', data, { login: true })
+}
+
 // 获取千县名品县城资讯数据
 export function getCountyFamousCityNews(param) {
     return request.get('/countyFamous/news', param, { login: true })
@@ -30,7 +45,27 @@ export function getCountyFamousCityGuide(param) {
     return request.get('/countyFamous/guide', param, { login: true })
 }
 
-// 获取千县名品县城攻略数据
+// 获取千县名品县城攻略专题页
 export function getCountyFamousCityGuideContent(param) {
     return request.get('/countyFamous/guide/content', param, { login: true })
 }
+
+// 获取千县名品县城重点产业列表
+export function getCountyFamousIndustry(param) {
+    return request.get('/countyFamous/industry', param, { login: true })
+}
+
+// 获取千县名品县城产业项目列表
+export function getCountyFamousIndustryProject(param) {
+    return request.get('/countyFamous/industryProject', param, { login: true })
+}
+
+// 获取千县名品县城产业项目文件列表
+export function getCountyFamousIndustryProjectFile(param) {
+    return request.get('/countyFamous/industryProject/file', param, { login: true })
+}
+
+// 获取千县名品县城招商政策文件列表
+export function getCountyFamousInvestmentFile(param) {
+    return request.get('/countyFamous/investmentFile', param, { login: true })
+}

pages.json

@@ -590,6 +590,19 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "views/famousQianxianTheme",
+          "style": {
+            "navigationBarTitleText": "千县名品",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "views/famousQianxianInvestment",
+          "style": {
+            "navigationBarTitleText": "招商政策"
+          }
+        },
         {
           "path": "views/famousStory",
           "style": {

pkg_product/views/famousList.vue

@@ -57,6 +57,10 @@
             <view>收</view>
             <view>起</view>
           </view>
+          <image
+            :src="webUrl + '/page/qianxian/icon-06.png'"
+            class="icon"
+          />
         </view>
       </view>
     </view>
@@ -148,6 +152,11 @@
               </view>
             </view>
           </view>
+          <image
+            :src="webUrl + '/home/no-data-bg.png'"
+            mode="widthFix"
+            class="loadend"
+          />
         </view>
         <image
           v-if="list.length === 0"
@@ -368,6 +377,12 @@ export default {
       }
       .toggle-wrap {
         padding: 0 0 0 20rpx;
+        .icon {
+          display: block;
+          width: 24rpx;
+          height: 20rpx;
+          margin: 6rpx auto;
+        }
       }
     }
   }
@@ -376,11 +391,9 @@ export default {
     z-index: 2;
     padding: 80rpx 30rpx 30rpx 30rpx;
     background-color: #F0F0F0;
-    .item + .item {
-      margin: 30rpx 0 0 0;
-    }
     .item {
       padding: 30rpx 0 20rpx 30rpx;
+      margin: 0 0 30rpx 0;
       border-radius: 20rpx;
       background-color: #fff;
       box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
@@ -465,6 +478,9 @@ export default {
         }
       }
     }
+    .loadend {
+      width: 100%;
+    }
   }
 }
 .img-nodata {

pkg_product/views/famousQianxian.vue

@@ -55,6 +55,11 @@
               </view>
             </view>
           </view>
+          <image
+            :src="webUrl + '/home/no-data-bg.png'"
+            mode="widthFix"
+            class="loadend"
+          />
         </view>
         <goo-skeleton
           v-else
@@ -169,13 +174,18 @@ export default {
       }
     }
   }
+  .list-wrap {
+    background-color: #F0F0F0;
+    .loadend {
+      width: 100%;
+    }
+  }
   .list-cont {
     position: relative;
     z-index: 2;
     display: flex;
     justify-content: space-between;
     padding: 0 21rpx 21rpx 21rpx;
-    background-color: #F0F0F0;
     .list-cont-left,
     .list-cont-right {
       width: calc(50% - 11rpx);

pkg_product/views/famousQianxianInvestment.vue

@@ -0,0 +1,113 @@
+<template>
+  <view class="list-page">
+    <view v-if="isLoad" class="file-list">
+      <view
+        v-for="(file, fileIndex) in list"
+        :key="fileIndex"
+        class="file-item"
+        @click="fileItemClick(file)"
+      >
+        <view class="name more-t">
+          ·&nbsp;&nbsp;{{ file.title }}
+        </view>
+        <image
+          :src="webUrl + '/page/qianxian/icon-05.png'"
+          class="icon"
+        />
+      </view>
+      <image
+        :src="webUrl + '/home/no-data-bg.png'"
+        mode="widthFix"
+        class="loadend"
+      />
+    </view>
+    <goo-skeleton v-else />
+  </view>
+</template>
+<script>
+import {
+  getCountyFamousInvestmentFile
+} from '@/api/qianxian'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+export default {
+  name: 'famousQianxianInvestment',
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      isLoad: false,
+      pageKeyId: '',
+      list: []
+    }
+  },
+  onLoad(options) {
+    const id = options.id
+    this.getListReq(id)
+  },
+  methods: {
+    getListReq(id) {
+      getCountyFamousInvestmentFile({
+        countyFamousDataId: id,
+        page: 1,
+        limit: 9999
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.isLoad = true
+          this.list = data.records || []
+        }
+      })
+    },
+    fileItemClick(file) {
+      const url = file.attachment || ''
+      if (!url) return
+      uni.downloadFile({
+        url,
+        success: res => {
+          const filePath = res.tempFilePath
+          wx.openDocument({
+            filePath,
+            fail: (err) => {
+              console.log(err)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.list-page {
+  min-height: 100vh;
+  padding: 30rpx;
+  box-sizing: border-box;
+  background-color: #f0f0f0;
+  .file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100rpx;
+    width: 100%;
+    padding: 0 20rpx;
+    margin: 0 0 20rpx 0;
+    border-radius: 20rpx;
+    box-sizing: border-box;
+    line-height: 36rpx;
+    background-color: #fff;
+    .name {
+      width: calc(100% - 40rpx);
+      font-size: 28rpx;
+    }
+    .icon {
+      display: block;
+      width: 26rpx;
+      height: 26rpx;
+    }
+  }
+  .loadend {
+    width: 100%;
+  }
+}
+</style>

pkg_product/views/famousQianxianShop.vue

@@ -110,18 +110,18 @@
         <view class="bg"></view>
         <view class="map-info">
           <view class="map-info-hd">
-            <image :src="webUrl + '/page/hotel/icon-location.png'" class="icon" />
+            <image :src="webUrl + '/page/qianxian/icon-location.png'" class="icon" />
           </view>
           <view class="map-info-bd more-t">
             {{ inn.address }}
           </view>
           <view class="map-info-ft flex">
             <view class="item" @click="showLocation">
-              <image :src="webUrl + '/page/hotel/navigation.png'" class="img" />
+              <image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
               <view>导航</view>
             </view>
             <view class="item" @click="call">
-              <image :src="webUrl + '/page/hotel/phone.png'" class="img" />
+              <image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
               <view>客服</view>
             </view>
           </view>
@@ -131,14 +131,15 @@
         <view
           v-for="(item, index) in tabList"
           :key="index"
-          :class="item.isShow ? '' : 'hide'"
           class="tab"
           @click="changeTab(item.value)"
         >
-          <text :class="activeIndex === index ? 'tab-item-active' : 'tab-item-no-active'">
+          <view
+            :class="activeIndex === index ? 'active' : ''"
+            class="tab-item"
+          >
             {{ item.text }}
-          </text>
+          </view>
-          <view v-show="activeIndex === index" class="btLine"></view>
         </view>
       </view>
       <view>
@@ -193,20 +194,20 @@
                       </view>
                       <view class="flex">
                         <image
-                          v-if="!item.zanVo"
+                          v-if="!item.hasZan"
                           :src="webUrl + '/page/hotel/zan-off-2.png'"
                           class="zan-off-icon"
-                          @click="likeInfoItemHandle(item, index, item.zan + 1, 1)"
+                          @click="likeInfoItemHandle(item, index, item.zan + 1, true)"
                         />
                         <image
                           v-else
                           :src="webUrl + '/page/hotel/zan-on-2.png'"
                           class="zan-on-icon"
-                          @click="likeInfoItemHandle(item, index, item.zan -1, 0)"
+                          @click="likeInfoItemHandle(item, index, item.zan - 1, false)"
                         />
                         <text
                           v-show="item.zan > 0"
-                          :class="item.zanVo ? 'on' : ''"
+                          :class="item.hasZan ? 'on' : ''"
                           class="seeNum-txt"
                         >{{ item.zan }}</text>
                       </view>
@@ -228,6 +229,7 @@
               县城介绍
               <view class="btn" @click="toggleCountyIntro">
                 {{ toggleCountyIntroStatus ? '收起' : '展开' }}
+                <image :src="webUrl + '/page/qianxian/icon-arrow.png'" class="icon" />
               </view>
             </view>
             <view
@@ -264,7 +266,9 @@
             <view class="guide-list">
               <view
                 v-for="(item, index) in guideList"
+                :key="index"
                 class="guide-item"
+                @click="guideItemClickHandle(item)"
               >
                 <image
                   :src="item.image"
@@ -287,9 +291,134 @@
         <!-- 产业 -->
         <view
           v-if="activeIndex === 3"
-          class="qualifications-section"
+          class="industry-section"
         >
-          产业
+          <view v-if="industryTabIndex === 0">
+            <view class="card-wrap">
+              <image
+                :src="webUrl + '/page/qianxian/card-bg1.png'"
+                class="bg"
+              />
+              <view class="card-cont">
+                <view class="tab-wrap">
+                  <view
+                    v-for="(tab, tabIndex) in industryTab"
+                    :key="tabIndex"
+                    :class="industryTabIndex === tabIndex ? 'active' : ''"
+                    class="item"
+                    @click="industryTabItemClick(tabIndex)"
+                  >
+                    <image
+                      :src="webUrl + tab.icon"
+                      class="icon"
+                    />
+                    {{ tab.name }}
+                  </view>
+                </view>
+                <view class="file-wrap">
+                  <view class="title">
+                    <image
+                      :src="webUrl + '/page/qianxian/icon-02.png'"
+                      class="icon"
+                    />
+                    重点项目
+                  </view>
+                  <view v-if="industryList.length > 0" class="file-list">
+                    <view class="list-cont">
+                      <view
+                        v-for="(file, fileIndex) in industryList"
+                        :key="fileIndex"
+                        class="file-item"
+                        @click="fileItemClick(file)"
+                      >
+                        <view class="name one-t">
+                          ·&nbsp;&nbsp;{{ file.title }}
+                        </view>
+                        <image
+                          :src="webUrl + '/page/qianxian/icon-05.png'"
+                          class="icon"
+                        />
+                      </view>
+                    </view>
+                  </view>
+                  <view v-else class="no-data">暂无重点项目</view>
+                </view>
+              </view>
+            </view>
+            <view class="project-wrap">
+              <view class="title">
+                <image
+                  :src="webUrl + '/page/qianxian/icon-01.png'"
+                  class="icon"
+                />
+                产业项目
+              </view>
+              <view v-if="industryProjectList.length > 0" class="list">
+                <view
+                  v-for="(item, index) in industryProjectList"
+                  :key="index"
+                  class="item"
+                >
+                  <image
+                    :src="item.image"
+                    class="img"
+                  />
+                </view>
+              </view>
+              <view v-else class="no-data">暂无产业项目</view>
+            </view>
+          </view>
+          <view v-if="industryTabIndex === 1">
+            <view class="card-wrap">
+              <image
+                :src="webUrl + '/page/qianxian/card-bg2.png'"
+                class="bg"
+              />
+              <view class="card-cont">
+                <view class="tab-wrap">
+                  <view
+                    v-for="(tab, tabIndex) in industryTab"
+                    :key="tabIndex"
+                    :class="industryTabIndex === tabIndex ? 'active' : ''"
+                    class="item"
+                    @click="industryTabItemClick(tabIndex)"
+                  >
+                    <image
+                      :src="webUrl + tab.icon"
+                      class="icon"
+                    />
+                    {{ tab.name }}
+                  </view>
+                </view>
+                <view class="file-wrap">
+                  <view v-if="investmentFileList.length > 0" class="file-list">
+                    <view class="list-cont">
+                      <view
+                        v-for="(file, fileIndex) in investmentFileList"
+                        :key="fileIndex"
+                        class="file-item file-item2"
+                        @click="fileItemClick(file)"
+                      >
+                        <view class="name more-t">
+                          ·&nbsp;&nbsp;{{ file.title }}
+                        </view>
+                        <image
+                          :src="webUrl + '/page/qianxian/icon-05.png'"
+                          class="icon"
+                        />
+                      </view>
+                    </view>
+                  </view>
+                  <view v-else class="no-data">暂无招商政策</view>
+                </view>
+              </view>
+            </view>
+            <view v-if="investmentFileList.length > 0" class="more-btn-wrap">
+              <view class="more-btn" @click="gotoInvestment">
+                更多政策
+              </view>
+            </view>
+          </view>
         </view>
       </view>
     </view>
@@ -321,15 +450,18 @@
 
 <script>
 import {
-  getHotelZan,
+  getPoster
-  getPoster,
-  getHotelNewsZan,
-  hotelNewsView
 } from "@/api/inn.js"
 import {
   getCountyFamousCityShop,
   getCountyFamousCityNews,
-  getCountyFamousCityGuide
+  getCountyFamousCityGuide,
+  postCountyFamousShopZan,
+  postCountyFamousNewsZan,
+  postCountyFamousNewsView,
+  getCountyFamousIndustry,
+  getCountyFamousIndustryProject,
+  getCountyFamousInvestmentFile
 } from '@/api/qianxian'
 import {formatDateTime} from "@/utils"
 import {getUrlParam} from "@/utils/common.js"
@@ -383,7 +515,18 @@ export default {
       pageKeyId: '',
       shareImg: '',
       // 县城介绍展开收起
-      toggleCountyIntroStatus: false
+      toggleCountyIntroStatus: false,
+      // 重点产业列表
+      industryList: [],
+      // 产业项目列表
+      industryProjectList: [],
+      // 招商政策文件列表
+      investmentFileList: [],
+      industryTab: [
+        { name: '产业项目', icon: '/page/qianxian/icon-04.png' },
+        { name: '招商政策', icon: '/page/qianxian/icon-03.png' }
+      ],
+      industryTabIndex: 0
     }
   },
   // 必须在页面加 onPageScroll(e){} ，才能滑动显示背景
@@ -406,16 +549,50 @@ export default {
     this.getShopDetailReq()
     this.getInfoReq()
     this.getGuideReq()
-    this.initPoster()
+    // this.initPoster()
+    this.getListReq()
   },
   methods: {
+    getListReq() {
+      // getPoster(this.id).then(({data}) => this.posterUrl = data)
+      getCountyFamousIndustry({
+        countyFamousDataId: this.id,
+        page: 1,
+        limit: 9999
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.industryList = data.records || []
+        }
+      })
+      getCountyFamousIndustryProject({
+        countyFamousDataId: this.id,
+        page: 1,
+        limit: 9999
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.industryProjectList = data.records || []
+        }
+      })
+      getCountyFamousInvestmentFile({
+        countyFamousDataId: this.id,
+        page: 1,
+        limit: 9999
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.investmentFileList = data.records || []
+        }
+      })
+    },
     getShopDetailReq() {
       const _this = this
       getCountyFamousCityShop({ countyFamousDataId: _this.id }).then((res) => {
         const { success, data } = res
         if (success) {
           _this.inn = data
-          _this.isLike = data.zanVo !== null
+          _this.isLike = data.hasZan
           _this.isFavorite = data.hasFavorite
           _this.favoriteCount = data.favoriteCount
           _this.inn.latitude = _this.inn.latitude > 0 ? _this.inn.latitude : 24.993587
@@ -582,7 +759,7 @@ export default {
       })
     },
     zanInn() {
-      getHotelZan(this.inn.id).then(() => {
+      postCountyFamousShopZan({ countyFamousDataId: this.id }).then(() => {
         this.isLike = !this.isLike
         this.getShopDetailReq()
       }).catch((err) => {
@@ -599,7 +776,7 @@ export default {
     },
     infoItemViewClick(item) {
       uni.$u.debounce(() => {
-        hotelNewsView({ id: item.id }).finally(() => {
+        postCountyFamousNewsView({ countyFamousNewsId: item.id }).finally(() => {
           this.infoArray.map(info => {
             if (info.id === item.id) {
               info.pv += 1
@@ -608,9 +785,6 @@ export default {
         })
       }, 500)
     },
-    initPoster() {
-      getPoster(this.id).then(({data}) => this.posterUrl = data)
-    },
     // 定位
     showLocation() {
       if (!this.inn.latitude || !this.inn.longitude) {
@@ -657,16 +831,44 @@ export default {
       })
     },
     likeInfoItemHandle(item, index, value, voValue) {
-      getHotelNewsZan(item.id).then(res => {
+      postCountyFamousNewsZan({ countyFamousNewsId: item.id }).then(res => {
         const { success } = res
         if (success) {
           this.$dialog.toast({
             mes: '操作成功!'
           })
           this.$set(this.infoArray[index], 'zan', value)
-          this.$set(this.infoArray[index], 'zanVo', voValue)
+          this.$set(this.infoArray[index], 'hasZan', voValue)
         }
       })
+    },
+    guideItemClickHandle(item) {
+      // 如果没有开启专题页，则不进入
+      if (!item.isContentPage) return
+      uni.navigateTo({ url: `/pkg_product/views/famousQianxianTheme?id=${item.id}` })
+    },
+    industryTabItemClick(index) {
+      if (index === this.industryTabIndex) return
+      this.industryTabIndex = index
+    },
+    fileItemClick(file) {
+      const url = file.attachment || ''
+      if (!url) return
+      uni.downloadFile({
+        url,
+        success: res => {
+          const filePath = res.tempFilePath
+          wx.openDocument({
+            filePath,
+            fail: (err) => {
+              console.log(err)
+            }
+          })
+        }
+      })
+    },
+    gotoInvestment() {
+      uni.navigateTo({ url: `/pkg_product/views/famousQianxianInvestment?id=${this.id}` })
     }
   }
 }
@@ -871,8 +1073,8 @@ export default {
     .map-info-hd {
       .icon {
         display: block;
-        width: 56rpx;
+        width: 34rpx;
-        height: 56rpx;
+        height: 42rpx;
       }
     }
     .map-info-bd {
@@ -889,21 +1091,29 @@ export default {
         font-weight: 500;
         .img {
           display: block;
-          width: 96rpx;
+          width: 64rpx;
-          height: 96rpx;
+          height: 64rpx;
-          margin: 0 0 -16rpx 0;
+          margin: 0 0 16rpx 16rpx;
         }
       }
     }
   }
 }
 .top-tab {
-  margin: 60rpx 0 0 0;
+  padding: 40rpx 0 20rpx 0;
-  border-bottom: 1px solid #ddd;
   .tab {
-    margin: 0 35rpx;
+    margin: 0 20rpx;
-    &.hide {
+    .tab-item {
-      display: none;
+      height: 52rpx;
+      padding: 0 30rpx;
+      border-radius: 26rpx 0 0 26rpx;
+      font-size: 32rpx;
+      line-height: 52rpx;
+      font-weight: bold;
+      &.active {
+        color: #fff;
+        background: linear-gradient(90deg, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
+      }
     }
   }
 }
@@ -1039,9 +1249,16 @@ export default {
     font-weight: bold;
     color: #333;
     .btn {
+      display: flex;
+      align-items: center;
       color: #999;
       font-size: 24rpx;
       font-weight: normal;
+      .icon {
+        display: block;
+        width: 32rpx;
+        height: 32rpx;
+      }
     }
   }
   .intro-main {
@@ -1064,12 +1281,14 @@ export default {
   .pic-list {
     display: flex;
     flex-wrap: wrap;
+    width: 100%;
     padding: 30rpx 0 0 0;
     .item {
+      width: calc(50% - 10rpx);
       margin: 0 20rpx 20rpx 0;
       .img {
         display: block;
-        width: 320rpx;
+        width: 100%;
         height: 360rpx;
         border-radius: 16rpx;
       }
@@ -1106,6 +1325,161 @@ export default {
     }
   }
 }
+.industry-section {
+  background-color: #F0F0F0;
+  .card-wrap {
+    position: relative;
+    .bg {
+      position: relative;
+      z-index: 2;
+      display: block;
+      width: 750rpx;
+      height: 530rpx;
+    }
+    .card-cont {
+      position: absolute;
+      z-index: 5;
+      top: 30rpx;
+      left: 30rpx;
+      right: 30rpx;
+      .tab-wrap {
+        display: flex;
+        .item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+          height: 80rpx;
+          font-size: 32rpx;
+          line-height: 36rpx;
+          font-weight: bold;
+          .icon {
+            display: block;
+            width: 24rpx;
+            height: 26rpx;
+            margin: 0 12rpx 0 0;
+          }
+          &:nth-child(2) {
+            .icon {
+              width: 26rpx;
+              height: 22rpx;
+            }
+          }
+        }
+      }
+      .file-wrap {
+        width: 630rpx;
+        height: 360rpx;
+        padding: 20rpx;
+        margin: 10rpx auto;
+        border-radius: 20rpx;
+        box-sizing: border-box;
+        background: rgba(240,240,240,0.39);
+        .title {
+          display: flex;
+          align-items: center;
+          font-weight: bold;
+          font-size: 28rpx;
+          line-height: 36rpx;
+          .icon {
+            display: block;
+            width: 20rpx;
+            height: 20rpx;
+            margin: 0 8rpx 0 0;
+          }
+        }
+        .file-list {
+          height: 300rpx;
+          overflow-y: auto;
+          .list-cont {
+            padding: 20rpx 0 0 0;
+            .file-item {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              height: 60rpx;
+              width: 100%;
+              padding: 0 20rpx;
+              margin: 0 0 20rpx 0;
+              border-radius: 20rpx;
+              box-sizing: border-box;
+              line-height: 36rpx;
+              background-color: #fff;
+              .name {
+                width: calc(100% - 40rpx);
+                font-size: 24rpx;
+              }
+              .icon {
+                display: block;
+                width: 26rpx;
+                height: 26rpx;
+              }
+            }
+            .file-item2 {
+              height: 100rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+  .project-wrap {
+    padding: 30rpx;
+    .title {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+      font-size: 28rpx;
+      line-height: 36rpx;
+      .icon {
+        display: block;
+        width: 20rpx;
+        height: 20rpx;
+        margin: 0 8rpx 0 0;
+      }
+    }
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      padding: 20rpx 0 0 0;
+      .item {
+        width: calc(50% - 20rpx);
+        margin: 0 26rpx 26rpx 0;
+        &:nth-child(2n) {
+          margin-right: 0;
+        }
+        .img {
+          display: block;
+          width: 332rpx;
+          height: 98rpx;
+        }
+      }
+    }
+  }
+  .no-data {
+    text-align: center;
+    line-height: 200rpx;
+    font-size: 32rpx;
+    color: #999;
+  }
+  .more-btn-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 30rpx 0 60rpx 0;
+    .more-btn {
+      width: 212rpx;
+      height: 62rpx;
+      border-radius: 32rpx;
+      text-align: center;
+      font-size: 32rpx;
+      line-height: 62rpx;
+      color: #fff;
+      background: #C52733;
+    }
+  }
+}
 .tab-no-data {
   text-align: center;
   font-size: 32rpx;

pkg_product/views/famousQianxianTheme.vue

@@ -0,0 +1,181 @@
+<template>
+  <view>
+    <hx-navbar
+      :fixed="true"
+      :background-color="[[13,197,197],[13,197,197]]"
+      statusBarFontColor="#ffffff"
+      barPlaceholder="hidden"
+      transparent="auto"
+      color='#ffffff'
+    />
+    <view v-if="isLoad">
+      <image
+        :src="templateProperties.page1Image"
+        class="top-img"
+        mode="widthFix"
+      />
+      <view class="page-wrap">
+        <view class="page-2">
+          <swiper
+            class="swiper"
+            circular
+            autoplay
+            :interval="5000"
+          >
+            <swiper-item
+              v-for="(swiperItem, swiperIndex) in templateProperties.page2Images"
+              :key="swiperIndex"
+            >
+              <image
+                :src="swiperItem"
+                mode="scaleToFill"
+                class="swiper-img"
+              />
+            </swiper-item>
+          </swiper>
+        </view>
+      </view>
+      <!-- 第三页 -->
+      <view class="page-wrap">
+        <view class="page-5">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="shop-img"
+            mode="widthFix"
+            @click="linkToShop(item)"
+          />
+        </view>
+      </view>
+      <!-- 第四页 -->
+      <view class="page-wrap">
+        <view class="page-4">
+          <image
+            :src="templateProperties.page4Image"
+            class="section-bg"
+            mode="widthFix"
+          />
+        </view>
+      </view>
+      <!-- 第五页 -->
+      <view class="page-wrap">
+        <view class="page-2">
+          <swiper
+            class="swiper"
+            circular
+            autoplay
+            :interval="5000"
+          >
+            <swiper-item
+              v-for="(swiperItem, swiperIndex) in templateProperties.page5Images"
+              :key="swiperIndex"
+            >
+              <image
+                :src="swiperItem"
+                mode="scaleToFill"
+                class="swiper-img"
+              />
+            </swiper-item>
+          </swiper>
+        </view>
+        <view class="page-5">
+          <image
+            v-for="(item, index) in templateProperties.page5Links"
+            :key="index"
+            :src="item.image"
+            class="shop-img"
+            mode="widthFix"
+            @click="linkToShop(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <goo-skeleton v-else />
+  </view>
+</template>
+<script>
+import {
+  getCountyFamousCityGuideContent
+} from '@/api/qianxian'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+export default {
+  name: 'FamousQianxianTheme',
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      isLoad: false,
+      pageKeyId: '',
+      templateProperties: {
+        page1Image: '',
+        page2Images: [],
+        page3Links: [],
+        page4Image: '',
+        page5Images: '',
+        page5Links: []
+      }
+    }
+  },
+  onLoad(options) {
+    const id = options.id
+    this.getDetailReq(id)
+  },
+  methods: {
+    getDetailReq(id) {
+      getCountyFamousCityGuideContent({
+        guideId: id
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.isLoad = true
+          this.templateProperties = data || {}
+        }
+      })
+    },
+    linkToShop(item) {
+      const linkId = item.linkId || ''
+      if (!linkId) return
+      uni.navigateTo({
+        url: `/pagesInn/inn/innHome?id=${linkId}&from=famous`
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    width: 100%;
+    height: 450rpx;
+    .swiper {
+      width: 100%;
+      height: 100%;
+      .swiper-img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .page-4 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+  .page-5 {
+    .shop-img {
+      display: block;
+      width: 100%;
+      height: 300rpx;
+    }
+  }
+}
+</style>