Merge branch 'dev' into test

api/product.js

@@ -78,6 +78,10 @@ export function getHomestay(id) {
     return request.get(`/contentHomestay/${id}`, {}, {login: false})
 }
 
+export function getHomestayV2(id) {
+    return request.get(`/contentHomestay/v2/${id}`, {}, {login: false})
+}
+
 /**
  * 节日专题
  * */
@@ -85,6 +89,10 @@ export function getFestival() {
     return request.get('/contentFestival', {}, {login: false})
 }
 
+export function getFestivalV2() {
+    return request.get('/contentFestival/v2', {}, {login: false})
+}
+
 /**
  * 尖货专题
  * */

api/qianxian.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 千县名品首页
+export function getCountyFamousIndex() {
+    return request.get('/countyFamous/index', {}, { login: true })
+}
+
+// 获取千县名品省-县树形列表
+export function getCountyFamousCityTree(param) {
+    return request.get('/countyFamous/cityTree', param, { login: true })
+}
+
+// 获取千县名品县城数据
+export function getCountyFamousCityDetail(id) {
+    return request.get('/countyFamous/' + id, {}, { login: true })
+}
+
+// 获取千县名品县城店铺数据
+export function getCountyFamousCityShop(param) {
+    return request.get('/countyFamous/shop', param, { login: true })
+}
+
+// 获取千县名品县城资讯数据
+export function getCountyFamousCityNews(param) {
+    return request.get('/countyFamous/news', param, { login: true })
+}
+
+// 获取千县名品县城攻略数据
+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 })
+}

components/xdd-product-item/index.vue

@@ -23,18 +23,18 @@
     </view>
     <view class="info-wrap">
       <view class="name more-t">
-        {{ item.storeName }}
+        {{ item[nameKey] }}
       </view>
-      <view v-if="item.bestContent" class="desc one-t">
+      <view v-if="item.bestContent" class="desc more-t">
         {{ item.bestContent }}
       </view>
-      <view v-if="item.couponName" class="coupon">
+      <view v-if="item.couponName && showCoupon" class="coupon">
         <view class="tag">券</view>
         <view class="tag">{{ item.couponName }}</view>
       </view>
       <view class="price-wrap">
         <view class="price">
-          <text class="price-txt price-red">￥{{ item.price }}</text>
+          <text class="price-txt price-red">￥{{ item[priceKey] }}</text>
         </view>
         <view class="btn">
           <image
@@ -60,6 +60,19 @@ export default {
     imageKey: {
       type: String,
       default: 'image'
+    },
+    nameKey: {
+      type: String,
+      default: 'storeName'
+    },
+    priceKey: {
+      type: String,
+      default: 'price'
+    },
+    // 是否显示优惠券
+    showCoupon: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -108,6 +121,7 @@ export default {
       color: #333;
     }
     .desc {
+      width: 320rpx;
       padding: 10rpx 0 0 0;
       color: #FFC543;
       font-size: 24rpx;

pages.json

@@ -577,6 +577,12 @@
             "navigationBarTitleText": "千县名品"
           }
         },
+        {
+          "path": "views/famousQianxian",
+          "style": {
+            "navigationBarTitleText": "千县名品"
+          }
+        },
         {
           "path": "views/famousStory",
           "style": {

pages/home/index.vue

@@ -367,8 +367,8 @@ export default {
         _this.$set(_this, 'landmarkGoodsImage', data.landmarkGoodsImage)
         _this.$set(_this, 'countyFamousImage', data.countyFamousImage)
         _this.$set(_this, 'oldUserPopup', data.oldUserPopup)
-        _this.$set(_this, 'contentHomestay', data.contentHomestay)
+        _this.$set(_this, 'contentHomestay', data.contentHomestayV2)
-        _this.$set(_this, 'contentFestival', data.contentFestival)
+        _this.$set(_this, 'contentFestival', data.contentFestivalV2)
         _this.bastLeftList = []
         _this.bastRightList = []
         for (let i = 0; i < data.bastList.length; i++) {
@@ -418,27 +418,53 @@ export default {
       this.isOldUser = state
     },
     // 民宿专题
-    goHomeStay(stay) {
+    goHomeStay(item) {
-      if (stay.uniappUrl) {
+      if (item.type === 1) {
-        this.$global.commonJump(stay.uniappUrl)
+        uni.navigateTo({ url: '/pkg_product/views/homestay?id=' + item.id })
         return
       }
-      if (stay.type === 2 && stay.isLinkToProduct) {
+      this.linkToThemePage(item)
-        this.$yrouter.push({
-          path: '/pages/shop/GoodsCon/index',
-          query: {
-            id: stay.productId
-          }
-        })
-        return
-      }
-      if (stay.type === 1) {
-        uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
-      }
     },
     // 节日专题
     goFestival() {
+      if (this.contentFestival.type === 1) {
         uni.navigateTo({ url: '/pkg_product/views/festival' })
+        return
+      }
+      this.linkToThemePage(this.contentFestival)
+    },
+    // 尖货专题
+    productSwiperItemClickHandle(item) {
+      if (item.type === 1) {
+        uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
+        return
+      }
+      this.linkToThemePage(item)
+    },
+    linkToThemePage(item) {
+      /**
+       * type:1-专题页,2-商品,3-时令尝鲜
+       * 当type=2，且uniappUrl有值，以跳转界面地址为准
+      */
+      const type = item.type
+      // 链接到特定页面
+      if (type === 2 && item.uniappUrl) {
+        this.$global.commonJump(item.uniappUrl)
+        return
+      }
+      // 商品详情
+      if (type === 2 && item.productId) {
+        this.$yrouter.push({
+          path: '/pages/shop/GoodsCon/index',
+          query: {
+            id: item.productId
+          }
+        })
+      }
+      // 时令尝鲜
+      if (type === 3) {
+        uni.navigateTo({ url: '/pkg_product/views/seasonList' })
+      }
     },
     tapOld() {
       this.isOldUser = false
@@ -493,31 +519,6 @@ export default {
     hotelItemClickHandle(item) {
       uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.id}&from=index` })
     },
-    // 尖货专题
-    productSwiperItemClickHandle(item) {
-      // 类型:1-专题页 2-商品详情 3-时令尝鲜
-      const type = item.type
-      if (type === 1) {
-        uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
-      }
-      // 链接到特定页面
-      if (type === 2 && item.uniappUrl) {
-        this.$global.commonJump(stay.uniappUrl)
-        return
-      }
-      // 商品详情
-      if (type === 2 && item.productId) {
-        this.$yrouter.push({
-          path: '/pages/shop/GoodsCon/index',
-          query: {
-            id: item.productId
-          }
-        })
-      }
-      if (type === 3) {
-        uni.navigateTo({ url: '/pkg_product/views/seasonList' })
-      }
-    },
     setTopHandle() {
       uni.pageScrollTo({
         scrollTop: 0,

pages/home/landMark.vue

@@ -1,84 +1,102 @@
 <template>
-  <view class="pkg-product-land-mark" v-if="mapData">
+  <view class="pkg-product-land-mark">
-    <view class="top-box" :style="{'backgroundColor':topBoxBgColor}">
+    <view v-if="isLoad">
-      <view class="view-box">
+      <view class="top-box">
-        <view class="search-box flex ai-center">
+        <view class="nav flex">
-          <input
+          <view
-            v-model="keyword"
+            v-for="(item,index) in navList"
-            type="text"
+            :key="index"
-            placeholder="搜索商品"
+            :class="{
-            placeholder-style="color:#999"
+              'active': navIndex === index
-            @confirm="search()"
+            }"
-          />
+            class="flex flex-0 ai-center nav-item"
+            @click="changeNav(index)"
+          >
             <image
-            :src="webUrl+'/20231223183627184005.png'"
+              :src="webUrl + '/home/landmark-icon.png'"
-            mode="scaleToFill"
+              class="bg"
-            style="width:30rpx;height:30rpx"
+            />
-            @click="search()"
+            {{ item.provinceName }}
+          </view>
+        </view>
+        <view class="view-box">
+          <view class="map-box">
+            <image
+              :src="mapData.mapImage"
+              mode="widthFix"
+              class="img-map"
             />
           </view>
-
+        </view>
-        <view class="map-box">
+      </view>
-          <image class="img-map" :src="mapData.mapImage" mode="widthFix"/>
-
       <view
-            v-for="(item, index) in mapLocations"
+        v-if="mapData.middleImage"
-            :key="index"
+        class="middle-img-wrap"
+      >
+        <image
+          :src="mapData.middleImage"
+          mode="widthFix"
+          class="img"
+        />
+      </view>
+      <view v-if="goods.length > 0" class="list-wrap">
+        <view class="list-box flex flex-wrap">
+          <view
+            v-for="item in goods"
+            :key="item.id"
             class="item"
-            :style="{'left':item.gx+'rpx','top':item.gy+'rpx'}"
             @click="goGoods(item.productId)"
           >
-            <view class="round">
+            <image
-              <view class="line" :class="'line-'+directionClass[item.labelDirection]"></view>
+              :src="webUrl + '/home/mark-land.png'"
-            </view>
+              class="mark-img"
-            <view class="label flex ai-end" :class="'label-'+directionClass[item.labelDirection]">
+            />
-              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection===4"/>
+            <image
-              <view class="title flex ai-center">{{ item.mapTitle }}</view>
+              :src="item.storeImage"
-              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection!==4"/>
+              mode="scaleToFill"
-            </view>
+              class="good-img"
-          </view>
+            />
-        </view>
-      </view>
-
-      <view class="nav flex">
-        <view class="flex flex-0 ai-center" :class="{'active': navIndex===index}" v-for="(item,index) in navList"
-              :key="index" @click="changeNav(index)">{{ item.provinceName }}
-        </view>
-      </view>
-    </view>
-
-    <view class="main-box" v-if="mapData.recommended.storeImage"
-          @click="goGoods(mapData.recommended.productId)">
-      <image class="bg-main" :src="mapData.recommended.storeImage" mode="scaleToFill"/>
-      <view class="box-mask flex flex-col jc-end">
-        <view class="one-t bold">{{ mapData.recommended.title }}</view>
-        <view class="more-t">{{ mapData.recommended.description }}</view>
-      </view>
-    </view>
-
-    <view class="list-box flex flex-wrap">
-      <view class="item" v-for="item in goods" :key="item.id" @click="goGoods(item.productId)">
-        <image :src="item.storeImage" mode="scaleToFill"/>
             <view class="content flex flex-col jc-between">
               <view class="more-t bold">{{ item.title }}</view>
+              <view class="one-t desc">{{ item.description }}</view>
               <view class="flex jc-between ai-center">
                 <text class="price">￥{{ item.price }}</text>
-            <image class="btn" :src="webUrl+'/20231114151028082368.png'" mode="scaleToFill"/>
+                <image
-<!--            <view class="btn flex jc-center ai-center">立即购买</view>-->
+                  :src="webUrl + '/home/icon-cart.png'"
+                  class="btn"
+                />
               </view>
             </view>
           </view>
         </view>
-
+        <image
-    <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
+          v-if="isCompleteLoadGood"
-           v-if="goods.length===0"/>
+          :src="webUrl + '/home/no-data-bg.png'"
+          mode="widthFix"
+          class="loadend"
+        />
+      </view>
+      <image
+        v-if="goods.length === 0"
+        :src="webUrl + '/20231023131208675588.png'"
+        class="img-nodata"
+        mode="scaleToFill"
+      />
+    </view>
+    <goo-skeleton
+      v-else
+      :show-avatar="false"
+    />
   </view>
 </template>
 
 <script>
-import {getProvince, getProvinceGoods, getProvinceList} from "@/api/product";
+import {
+  getProvince,
+  getProvinceGoods,
+  getProvinceList
+} from "@/api/product"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
-
 export default {
   name: 'LandMarkPage',
   mixins: [pageListenMixins],
@@ -86,80 +104,60 @@ export default {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       keyword: '',
+      isLoad: false,
       page: 1,
       navList: [],
       navIndex: 0,
       mapData: null,
-      mapLocations: [],
       goods: [],
-      directionClass: ['', 'up', 'right', 'down', 'left'],
+      isCompleteLoadGood: false,
       pageKeyId: Object.freeze('landmarkGoodsIndex')
     }
   },
-  computed: {
-    topBoxBgColor() {
-      return this.navList.length > 0 ? this.navList[this.navIndex]['backgroundColor'] : '#FFFFFF';
-    },
-    viewBoxBgColor() {
-      return this.mapData?.backgroundColor || '#FFFFFF';
-    },
-    scale() {
-      return 718 / (this.mapData?.mapImageWidth || 1);
-    }
-  },
   onLoad() {
-    this.getNavList();
+    this.getNavList()
   },
   onHide() {
     this.pageToHideHandle()
   },
   onReachBottom() {
-    this.page++;
+    if (this.isCompleteLoadGood) {
-    this.fetchGoods();
+      return
+    }
+    this.page++
+    this.fetchGoods()
   },
   methods: {
     getNavList() {
       getProvinceList().then(({data}) => {
-        this.navList = data;
+        this.navList = data
-        this.changeNav(this.navIndex);
+        this.changeNav(this.navIndex)
-      });
+      })
     },
-
-    search() {
-      this.page = 1;
-      this.fetchGoods();
-    },
-
     changeNav(index) {
-      this.navIndex = index;
+      this.navIndex = index
-      this.page = 1;
+      this.page = 1
-      this.getMap();
+      this.goods = []
-      this.fetchGoods();
+      this.isCompleteLoadGood = false
+      this.getMap()
+      this.fetchGoods()
     },
-
     getMap() {
       const id = this.navList[this.navIndex]['id']
       getProvince(id).then(({data}) => {
-        this.mapData = data;
+        this.mapData = data
-        this.mapLocations = data.mapLocations;
+        this.isLoad = true
-        this.calcPosition();
-      });
-    },
-
-    // 计算位置
-    calcPosition() {
-      this.mapLocations?.forEach(item => {
-        item.gx = item.x * this.scale;
-        item.gy = item.y * this.scale;
       })
     },
-
     fetchGoods() {
       const id = this.navList[this.navIndex]['id']
       getProvinceGoods(id, this.keyword, this.page).then(({data}) => {
-        if (this.page === 1) this.goods = [];
+        const len = data.length
-        for (let i = 0; i < data.length; i++) {
+        for (let i = 0; i < len; i++) {
-          this.goods.push(data[i]);
+          this.goods.push(data[i])
+        }
+        if (len === 0 || len < 10) {
+          this.isCompleteLoadGood = true
         }
       })
     },
@@ -174,273 +172,120 @@ export default {
 
 <style scoped lang="less">
 .pkg-product-land-mark {
-  background: #F7F3ED;
+  padding: 20rpx;
-
+  background: #f0f0f0;
-  image {
-    vertical-align: middle;
-  }
-
   .top-box {
-    padding: 32rpx 0 20rpx;
+    border-radius: 20rpx;
-
+    background-color: #fff;
     .view-box {
       position: relative;
-      margin: 0 16rpx;
+      padding: 20rpx;
-      border-radius: 40rpx;
+      border-radius: 20rpx;
       overflow: hidden;
-
-      .search-box {
-        position: absolute;
-        top: 20rpx;
-        left: 34rpx;
-        width: 650rpx;
-        height: 64rpx;
-        padding: 0 32rpx;
-        box-sizing: border-box;
-        border-radius: 32rpx;
-        background: #FFFFFF;
-        z-index: 10;
-
-        input {
-          width: 100%;
-          height: 100%;
-          line-height: 64rpx;
-          font-size: 28rpx;
-        }
-      }
-
-      .map-box {
-        position: relative;
-        width: 718rpx;
-
       .img-map {
-          width: 718rpx;
+        display: block;
-          height: auto;
+        width: 100%;
-        }
-
-        .item {
-          position: absolute;
-
-          .round {
-            width: 8rpx;
-            height: 8rpx;
-            border-radius: 50%;
-            box-shadow: 0 0 0 8rpx rgba(225, 38, 65, .4);;
-            background: #E12641;
-          }
-
-          .line {
-            position: relative;
-            border: 2rpx solid #E12641;
-          }
-
-          .line-up {
-            left: 50%;
-            transform: translate(-50%, -100%);
-            width: 0;
-            height: 30rpx;
-          }
-
-          .line-right {
-            top: 50%;
-            transform: translate(0, -50%);
-            width: 30rpx;
-            height: 0;
-          }
-
-          .line-down {
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 0;
-            height: 30rpx;
-          }
-
-          .line-left {
-            top: 50%;
-            transform: translate(-100%, -50%);
-            width: 30rpx;
-            height: 0;
-          }
-
-          .label {
-            position: relative;
-
-            .cover {
-              width: 60rpx;
-              height: 60rpx;
-              box-sizing: border-box;
-              border: 6rpx solid #E12641;
-              border-radius: 50%;
-              z-index: 20;
-            }
-
-            .title {
-              height: 32rpx;
-              box-sizing: border-box;
-              margin-bottom: 10rpx;
-              padding: 0 16rpx;
-              background: #E12641;
-              color: #FFFFFF;
-              font-size: 22rpx;
-              line-height: 32rpx;
-              white-space: nowrap;
-              z-index: 10;
       }
     }
-
-          .label-up {
-            top: -80rpx;
-            left: -50%;
-
-            .title {
-              margin-right: -9rpx;
-              border-radius: 20rpx 0 0 20rpx;
-            }
-          }
-
-          .label-right {
-            top: -40rpx;
-            left: 32rpx;
-
-            .title {
-              margin-right: -9rpx;
-              border-radius: 20rpx 0 0 20rpx;
-            }
-          }
-
-          .label-down {
-            left: -50%;
-
-            .title {
-              margin-right: -9rpx;
-              border-radius: 20rpx 0 0 20rpx;
-            }
-          }
-
-          .label-left {
-            left: -100%;
-            transform: translate(-30rpx, -40rpx);
-
-            .title {
-              margin-left: -9rpx;
-              border-radius: 0 20rpx 20rpx 0;
-            }
-          }
-        }
-      }
-    }
-
     .nav {
-      padding: 30rpx 20rpx 0;
+      padding: 20rpx 20rpx 0 20rpx;
       overflow-x: scroll;
-
+      .nav-item + .nav-item {
-      view {
+        margin: 0 0 0 20rpx;
-        height: 52rpx;
-        box-sizing: border-box;
-        padding: 0 18rpx;
-        border: 4rpx solid transparent;
-        color: #FFFFFF;
-        font-size: 32rpx;
       }
-
+      .nav-item {
-      .active {
-        border-color: #FFFFFF;
-        border-radius: 26rpx;
-      }
-    }
-  }
-
-  .main-box {
         position: relative;
-    width: 718rpx;
+        box-sizing: border-box;
-    height: 360rpx;
+        padding: 0 32rpx 20rpx 0;
-    margin: 24rpx 16rpx;
+        color: #333;
-    border-radius: 16rpx;
+        font-size: 32rpx;
-    overflow: hidden;
+        .bg {
-
+          display: none;
-    .bg-main {
-      width: 718rpx;
-      height: 360rpx;
-    }
-
-    .box-mask {
           position: absolute;
-      left: 0;
           bottom: 0;
+          right: 6rpx;
+          width: 63rpx;
+          height: 42rpx;
+        }
+      }
+      .active {
+        font-size: 40rpx;
+        font-weight: bold;
+        .bg {
+          display: block;
+        }
+      }
+    }
+  }
+  .middle-img-wrap {
+    margin: 20rpx 0 0 0;
+    .img {
+      display: block;
       width: 100%;
-      height: 200rpx;
+      border-radius: 20rpx;
-      box-sizing: border-box;
-      padding: 20rpx 16rpx 16rpx;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
-      color: #FFFFFF;
-
-      .one-t {
-        margin-bottom: 16rpx;
-        font-size: 46rpx;
-        line-height: 52rpx;
-      }
-
-      .more-t {
-        width: 100%;
-        box-sizing: border-box;
-        padding-top: 10rpx;
-        border-top: 1rpx solid #FFFFFF;
-        font-size: 28rpx;
-        line-height: 32rpx;
     }
   }
-  }
-
   .list-box {
     margin-top: 24rpx;
-    padding: 0 16rpx 34rpx;
-
     .item {
-      width: 234rpx;
+      position: relative;
-      height: 380rpx;
+      width: 344rpx;
-      margin-right: 8rpx;
+      margin-right: 22rpx;
-      margin-bottom: 24rpx;
+      margin-bottom: 22rpx;
-      border-radius: 12rpx;
+      border-radius: 20rpx;
       background: #FFFFFF;
       overflow: hidden;
-
+      .mark-img {
-      image {
+        position: absolute;
-        width: 234rpx;
+        top: 0;
-        height: 234rpx;
+        right: 0;
+        z-index: 3;
+        display: block;
+        width: 84rpx;
+        height: 74rpx;
+      }
+      .good-img {
+        display: block;
+        width: 344rpx;
+        height: 344rpx;
       }
-
       .content {
-        height: 122rpx;
+        height: 156rpx;
-        margin: 6rpx 6rpx 18rpx;
+        padding: 8rpx 8rpx 18rpx 8rpx;
-
         .more-t {
           font-size: 28rpx;
           line-height: 36rpx;
-          color: #333333;
+          color: #333;
+        }
+        .desc {
+          padding: 5rpx 0;
+          height: 34rpx;
+          color: #FFC543;
+          font-size: 24rpx;
         }
-
         .price {
-          font-size: 28rpx;
+          font-size: 40rpx;
-          line-height: 36rpx;
+          line-height: 40rpx;
-          color: #DC1616;
+          font-weight: bold;
+          color: #C52733;
         }
-
         .btn {
-          width: 118rpx;
+          display: block;
-          height: 42rpx;
+          width: 48rpx;
-          //background: linear-gradient(180deg, #EFEDC7 0%, #EAC94B 100%);
+          height: 48rpx;
-          //border-radius: 4rpx;
-          //color: #764A00;
-          //font-size: 24rpx;
         }
       }
     }
-
+    .item:nth-child(2n) {
-    .item:nth-child(3n) {
       margin-right: 0;
     }
   }
-
+  .list-wrap {
+    margin: 20rpx 0 0 0;
+    .loadend {
+      width: 100%;
+    }
+  }
   .img-nodata {
     position: relative;
     top: 0;

pages/home/landMark_bak20240815.vue

@@ -0,0 +1,454 @@
+<template>
+  <view class="pkg-product-land-mark" v-if="mapData">
+    <view class="top-box" :style="{'backgroundColor':topBoxBgColor}">
+      <view class="view-box">
+        <view class="search-box flex ai-center">
+          <input
+            v-model="keyword"
+            type="text"
+            placeholder="搜索商品"
+            placeholder-style="color:#999"
+            @confirm="search()"
+          />
+          <image
+            :src="webUrl+'/20231223183627184005.png'"
+            mode="scaleToFill"
+            style="width:30rpx;height:30rpx"
+            @click="search()"
+          />
+        </view>
+
+        <view class="map-box">
+          <image class="img-map" :src="mapData.mapImage" mode="widthFix"/>
+
+          <view
+            v-for="(item, index) in mapLocations"
+            :key="index"
+            class="item"
+            :style="{'left':item.gx+'rpx','top':item.gy+'rpx'}"
+            @click="goGoods(item.productId)"
+          >
+            <view class="round">
+              <view class="line" :class="'line-'+directionClass[item.labelDirection]"></view>
+            </view>
+            <view class="label flex ai-end" :class="'label-'+directionClass[item.labelDirection]">
+              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection===4"/>
+              <view class="title flex ai-center">{{ item.mapTitle }}</view>
+              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection!==4"/>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="nav flex">
+        <view class="flex flex-0 ai-center" :class="{'active': navIndex===index}" v-for="(item,index) in navList"
+              :key="index" @click="changeNav(index)">{{ item.provinceName }}
+        </view>
+      </view>
+    </view>
+
+    <view class="main-box" v-if="mapData.recommended.storeImage"
+          @click="goGoods(mapData.recommended.productId)">
+      <image class="bg-main" :src="mapData.recommended.storeImage" mode="scaleToFill"/>
+      <view class="box-mask flex flex-col jc-end">
+        <view class="one-t bold">{{ mapData.recommended.title }}</view>
+        <view class="more-t">{{ mapData.recommended.description }}</view>
+      </view>
+    </view>
+
+    <view class="list-box flex flex-wrap">
+      <view class="item" v-for="item in goods" :key="item.id" @click="goGoods(item.productId)">
+        <image :src="item.storeImage" mode="scaleToFill"/>
+        <view class="content flex flex-col jc-between">
+          <view class="more-t bold">{{ item.title }}</view>
+          <view class="flex jc-between ai-center">
+            <text class="price">￥{{ item.price }}</text>
+            <image class="btn" :src="webUrl+'/20231114151028082368.png'" mode="scaleToFill"/>
+<!--            <view class="btn flex jc-center ai-center">立即购买</view>-->
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
+           v-if="goods.length===0"/>
+  </view>
+</template>
+
+<script>
+import {getProvince, getProvinceGoods, getProvinceList} from "@/api/product";
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+
+export default {
+  name: 'LandMarkPage',
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      keyword: '',
+      page: 1,
+      navList: [],
+      navIndex: 0,
+      mapData: null,
+      mapLocations: [],
+      goods: [],
+      directionClass: ['', 'up', 'right', 'down', 'left'],
+      pageKeyId: Object.freeze('landmarkGoodsIndex')
+    }
+  },
+  computed: {
+    topBoxBgColor() {
+      return this.navList.length > 0 ? this.navList[this.navIndex]['backgroundColor'] : '#FFFFFF';
+    },
+    viewBoxBgColor() {
+      return this.mapData?.backgroundColor || '#FFFFFF';
+    },
+    scale() {
+      return 718 / (this.mapData?.mapImageWidth || 1);
+    }
+  },
+  onLoad() {
+    this.getNavList();
+  },
+  onHide() {
+    this.pageToHideHandle()
+  },
+  onReachBottom() {
+    this.page++;
+    this.fetchGoods();
+  },
+  methods: {
+    getNavList() {
+      getProvinceList().then(({data}) => {
+        this.navList = data;
+        this.changeNav(this.navIndex);
+      });
+    },
+
+    search() {
+      this.page = 1;
+      this.fetchGoods();
+    },
+
+    changeNav(index) {
+      this.navIndex = index;
+      this.page = 1;
+      this.getMap();
+      this.fetchGoods();
+    },
+
+    getMap() {
+      const id = this.navList[this.navIndex]['id']
+      getProvince(id).then(({data}) => {
+        this.mapData = data;
+        this.mapLocations = data.mapLocations;
+        this.calcPosition();
+      });
+    },
+
+    // 计算位置
+    calcPosition() {
+      this.mapLocations?.forEach(item => {
+        item.gx = item.x * this.scale;
+        item.gy = item.y * this.scale;
+      })
+    },
+
+    fetchGoods() {
+      const id = this.navList[this.navIndex]['id']
+      getProvinceGoods(id, this.keyword, this.page).then(({data}) => {
+        if (this.page === 1) this.goods = [];
+        for (let i = 0; i < data.length; i++) {
+          this.goods.push(data[i]);
+        }
+      })
+    },
+    goGoods(id) {
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${id}&from=landmark`
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.pkg-product-land-mark {
+  background: #F7F3ED;
+
+  image {
+    vertical-align: middle;
+  }
+
+  .top-box {
+    padding: 32rpx 0 20rpx;
+
+    .view-box {
+      position: relative;
+      margin: 0 16rpx;
+      border-radius: 40rpx;
+      overflow: hidden;
+
+      .search-box {
+        position: absolute;
+        top: 20rpx;
+        left: 34rpx;
+        width: 650rpx;
+        height: 64rpx;
+        padding: 0 32rpx;
+        box-sizing: border-box;
+        border-radius: 32rpx;
+        background: #FFFFFF;
+        z-index: 10;
+
+        input {
+          width: 100%;
+          height: 100%;
+          line-height: 64rpx;
+          font-size: 28rpx;
+        }
+      }
+
+      .map-box {
+        position: relative;
+        width: 718rpx;
+
+        .img-map {
+          width: 718rpx;
+          height: auto;
+        }
+
+        .item {
+          position: absolute;
+
+          .round {
+            width: 8rpx;
+            height: 8rpx;
+            border-radius: 50%;
+            box-shadow: 0 0 0 8rpx rgba(225, 38, 65, .4);;
+            background: #E12641;
+          }
+
+          .line {
+            position: relative;
+            border: 2rpx solid #E12641;
+          }
+
+          .line-up {
+            left: 50%;
+            transform: translate(-50%, -100%);
+            width: 0;
+            height: 30rpx;
+          }
+
+          .line-right {
+            top: 50%;
+            transform: translate(0, -50%);
+            width: 30rpx;
+            height: 0;
+          }
+
+          .line-down {
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 0;
+            height: 30rpx;
+          }
+
+          .line-left {
+            top: 50%;
+            transform: translate(-100%, -50%);
+            width: 30rpx;
+            height: 0;
+          }
+
+          .label {
+            position: relative;
+
+            .cover {
+              width: 60rpx;
+              height: 60rpx;
+              box-sizing: border-box;
+              border: 6rpx solid #E12641;
+              border-radius: 50%;
+              z-index: 20;
+            }
+
+            .title {
+              height: 32rpx;
+              box-sizing: border-box;
+              margin-bottom: 10rpx;
+              padding: 0 16rpx;
+              background: #E12641;
+              color: #FFFFFF;
+              font-size: 22rpx;
+              line-height: 32rpx;
+              white-space: nowrap;
+              z-index: 10;
+            }
+          }
+
+          .label-up {
+            top: -80rpx;
+            left: -50%;
+
+            .title {
+              margin-right: -9rpx;
+              border-radius: 20rpx 0 0 20rpx;
+            }
+          }
+
+          .label-right {
+            top: -40rpx;
+            left: 32rpx;
+
+            .title {
+              margin-right: -9rpx;
+              border-radius: 20rpx 0 0 20rpx;
+            }
+          }
+
+          .label-down {
+            left: -50%;
+
+            .title {
+              margin-right: -9rpx;
+              border-radius: 20rpx 0 0 20rpx;
+            }
+          }
+
+          .label-left {
+            left: -100%;
+            transform: translate(-30rpx, -40rpx);
+
+            .title {
+              margin-left: -9rpx;
+              border-radius: 0 20rpx 20rpx 0;
+            }
+          }
+        }
+      }
+    }
+
+    .nav {
+      padding: 30rpx 20rpx 0;
+      overflow-x: scroll;
+
+      view {
+        height: 52rpx;
+        box-sizing: border-box;
+        padding: 0 18rpx;
+        border: 4rpx solid transparent;
+        color: #FFFFFF;
+        font-size: 32rpx;
+      }
+
+      .active {
+        border-color: #FFFFFF;
+        border-radius: 26rpx;
+      }
+    }
+  }
+
+  .main-box {
+    position: relative;
+    width: 718rpx;
+    height: 360rpx;
+    margin: 24rpx 16rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+
+    .bg-main {
+      width: 718rpx;
+      height: 360rpx;
+    }
+
+    .box-mask {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 200rpx;
+      box-sizing: border-box;
+      padding: 20rpx 16rpx 16rpx;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+      color: #FFFFFF;
+
+      .one-t {
+        margin-bottom: 16rpx;
+        font-size: 46rpx;
+        line-height: 52rpx;
+      }
+
+      .more-t {
+        width: 100%;
+        box-sizing: border-box;
+        padding-top: 10rpx;
+        border-top: 1rpx solid #FFFFFF;
+        font-size: 28rpx;
+        line-height: 32rpx;
+      }
+    }
+  }
+
+  .list-box {
+    margin-top: 24rpx;
+    padding: 0 16rpx 34rpx;
+
+    .item {
+      width: 234rpx;
+      height: 380rpx;
+      margin-right: 8rpx;
+      margin-bottom: 24rpx;
+      border-radius: 12rpx;
+      background: #FFFFFF;
+      overflow: hidden;
+
+      image {
+        width: 234rpx;
+        height: 234rpx;
+      }
+
+      .content {
+        height: 122rpx;
+        margin: 6rpx 6rpx 18rpx;
+
+        .more-t {
+          font-size: 28rpx;
+          line-height: 36rpx;
+          color: #333333;
+        }
+
+        .price {
+          font-size: 28rpx;
+          line-height: 36rpx;
+          color: #DC1616;
+        }
+
+        .btn {
+          width: 118rpx;
+          height: 42rpx;
+          //background: linear-gradient(180deg, #EFEDC7 0%, #EAC94B 100%);
+          //border-radius: 4rpx;
+          //color: #764A00;
+          //font-size: 24rpx;
+        }
+      }
+    }
+
+    .item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  .img-nodata {
+    position: relative;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 352rpx;
+    height: 338rpx;
+    margin-bottom: 60rpx;
+  }
+}
+</style>

pkg_product/components/ThemePageTemplate1.vue

@@ -0,0 +1,168 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      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.page2Links"
+            :key="swiperIndex"
+          >
+            <image
+              :src="swiperItem.image"
+              mode="scaleToFill"
+              class="swiper-img"
+              @click="itemClick(swiperItem)"
+            />
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-3">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :class="index === 0 ? 'span24' : 'span12'"
+            :src="item.image"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-3">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :class="index === 0 ? 'span24' : 'span12'"
+            :src="item.image"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第五页 -->
+    <view class="page-wrap">
+      <view class="page-5">
+        <image
+          :src="templateProperties.page5BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page5Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板1
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate1',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    width: 100%;
+    height: 1350rpx;
+    .swiper {
+      width: 100%;
+      height: 100%;
+      .swiper-img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .page-3 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 0;
+      .span24 {
+        display: block;
+        width: 680rpx;
+        height: 500rpx;
+        margin: 0 0 30rpx 0;
+      }
+      .span12 {
+        display: block;
+        width: 330rpx;
+        height: 540rpx;
+        margin: 0 30rpx 30rpx 0;
+      }
+    }
+  }
+  .page-5 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 35rpx;
+      .item {
+        display: block;
+        width: 680rpx;
+        height: 350rpx;
+        margin: 0 0 35rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/components/ThemePageTemplate2.vue

@@ -0,0 +1,162 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      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.page2Links"
+            :key="swiperIndex"
+          >
+            <image
+              :src="swiperItem.image"
+              mode="scaleToFill"
+              class="swiper-img"
+              @click="itemClick(swiperItem)"
+            />
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-3">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-4">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第五页 -->
+    <view class="page-wrap">
+      <view class="page-4">
+        <image
+          :src="templateProperties.page5BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page5Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板2
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate2',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    width: 100%;
+    height: 840rpx;
+    .swiper {
+      width: 100%;
+      height: 100%;
+      .swiper-img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .page-3 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 35rpx;
+      .item {
+        display: block;
+        width: 680rpx;
+        height: 500rpx;
+        margin: 0 0 35rpx 0;
+      }
+    }
+  }
+  .page-4 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 0;
+      .item {
+        display: block;
+        width: 330rpx;
+        height: 540rpx;
+        margin: 0 30rpx 25rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/components/ThemePageTemplate3.vue

@@ -0,0 +1,108 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      class="top-img"
+      mode="widthFix"
+    />
+    <!-- 第二页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板3
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate3',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 35rpx;
+      .item {
+        display: block;
+        width: 680rpx;
+        height: 700rpx;
+        margin: 0 0 35rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/components/ThemePageTemplate4.vue

@@ -0,0 +1,140 @@
+<template>
+  <view>
+    <image
+      :src="topImage"
+      class="top-img"
+      mode="widthFix"
+    />
+    <!-- 第二页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            :src="templateProperties.page2Image"
+            class="item item1"
+            mode="scaleToFill"
+          />
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第三页 -->
+    <view class="page-wrap">
+      <view class="page-2">
+        <image
+          :src="templateProperties.page3BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            :src="templateProperties.page3Image"
+            class="item item1"
+            mode="scaleToFill"
+          />
+          <image
+            v-for="(item, index) in templateProperties.page3Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+    <!-- 第四页 -->
+    <view class="page-wrap">
+      <view class="page-4">
+        <image
+          :src="templateProperties.page4BackgroundImage"
+          class="section-bg"
+          mode="widthFix"
+        />
+        <view class="list flex flex-wrap">
+          <image
+            v-for="(item, index) in templateProperties.page4Links"
+            :key="index"
+            :src="item.image"
+            class="item"
+            mode="scaleToFill"
+            @click="itemClick(item)"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+/**
+ * 模板4
+*/
+import { themeTemplateMixins } from '../mixins/themeTemplateMixins'
+export default {
+  name: 'ThemePageTemplate4',
+  mixins: [themeTemplateMixins]
+}
+</script>
+
+<style scoped lang="less">
+.top-img {
+  display: block;
+  width: 100%;
+}
+.page-wrap {
+  position: relative;
+  .page-2 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 0;
+      right: 0;
+      .item {
+        display: block;
+        width: 750rpx;
+        height: 400rpx;
+        margin: 0 0 30rpx 0;
+        &.item1 {
+          height: 800rpx;
+        }
+      }
+    }
+  }
+  .page-4 {
+    .section-bg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    .list {
+      position: absolute;
+      top: 400rpx;
+      left: 35rpx;
+      right: 0;
+      .item {
+        display: block;
+        width: 330rpx;
+        height: 540rpx;
+        margin: 0 22rpx 22rpx 0;
+      }
+    }
+  }
+}
+</style>

pkg_product/mixins/themeTemplateMixins.js

@@ -0,0 +1,19 @@
+export const themeTemplateMixins = {
+  props: {
+    topImage: {
+      type: String,
+      default: ''
+    },
+    templateProperties: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  methods: {
+    itemClick(item) {
+      this.$emit('view', item)
+    }
+  }
+}

pkg_product/views/famousList.vue

@@ -1,47 +1,175 @@
 <template>
-  <view class="pkg-product-list">
+  <view class="county-index">
-    <view class="search-box flex jc-between ai-center">
+    <view class="search-wrap">
-      <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
+      <view class="search-inner">
-      <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
+        <input
-    </view>
+          v-model="keyword"
-
+          type="text"
-    <swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
+          placeholder="请输入关键词县名~"
-            autoplay circular v-if="bannerList.length>0">
+          placeholder-style="color:#949494"
-      <swiper-item v-for="(item,index) in bannerList" :key="index">
+          class="inp"
-        <image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
+          @confirm="getListReq"
-      </swiper-item>
+        >
-    </swiper>
+        <view class="btn" @click="getListReq">
-
+          搜索
-    <image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
+          <image
-
+            :src="webUrl + '/home/icon-search4.png'"
-    <view class="nav-box flex">
+            class="icon"
-      <view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
+          />
-            @click="navTap(index)">{{ item.value }}
         </view>
       </view>
-
+    </view>
-    <view class="section-title bold">千县名品榜单</view>
+    <view class="top-img">
-
+      <image
-    <view class="list flex flex-wrap">
+        :src="countyFamousTopImage"
-      <view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
+        class="img"
-        <image class="label" :src="webUrl+'/20230222133041781911.png'"/>
+        mode="widthFix"
-        <image class="cover" :src="item.image" mode="scaleToFill"/>
+      />
-        <view class="name bold one-t">{{ item.storeName }}</view>
+      <view v-if="list.length > 0" class="province-wrap">
-        <view class="price">￥
+        <view
-          <text class="bold">{{ item.price }}</text>
+          :class="toggleStatus ? 'isopen' : ''"
+          class="list"
+        >
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            class="item"
+            @click="provinceItemToViewHandle(item)"
+          >
+            <image
+              :src="item.icon"
+              class="img"
+            />
+            <view class="name one-t">
+              {{ item.provinceName }}
             </view>
           </view>
-
+        </view>
-      <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
+        <view
-             v-if="dataList.length===0"/>
+          class="toggle-wrap"
+          @click="toggleStatusHandle"
+        >
+          <view v-if="!toggleStatus">
+            <view>展</view>
+            <view>开</view>
+          </view>
+          <view v-else>
+            <view>收</view>
+            <view>起</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="list-wrap">
+      <view v-if="isLoad">
+        <view v-if="list.length > 0" class="list-cont">
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            :class="'province__' + item.provinceId"
+            class="item"
+          >
+            <view class="name">
+              <view class="txt">
+                {{ item.provinceName }}
+              </view>
+            </view>
+            <view v-if="item.intro" class="desc">
+              {{ item.intro }}
+            </view>
+            <view class="pic-wrap">
+              <view v-if="item.countyTotal < 7" class="one-list">
+                <view
+                  v-for="(county) in item.county"
+                  :key="county.id"
+                  class="county-item"
+                  @click="countyItemClick(county)"
+                >
+                  <image
+                    :src="county.logo"
+                    class="county-img"
+                  />
+                  <view class="county-name">
+                    <image
+                      :src="webUrl + '/home/icon-location.png'"
+                      class="icon"
+                    />
+                    <view class="county-txt one-t">
+                      {{ county.countyName }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view v-else class="more-list-wrap">
+                <view class="more-list">
+                  <view
+                    v-for="(county) in item.oddList"
+                    :key="county.id"
+                    class="county-item"
+                    @click="countyItemClick(county)"
+                  >
+                    <image
+                      :src="county.logo"
+                      class="county-img"
+                    />
+                    <view class="county-name">
+                      <image
+                        :src="webUrl + '/home/icon-location.png'"
+                        class="icon"
+                      />
+                      <view class="county-txt one-t">
+                        {{ county.countyName }}
+                      </view>
+                    </view>
+                  </view>
+                </view>
+                <view class="more-list">
+                  <view
+                    v-for="(county) in item.evenList"
+                    :key="county.id"
+                    class="county-item"
+                    @click="countyItemClick(county)"
+                  >
+                    <image
+                      :src="county.logo"
+                      class="county-img"
+                    />
+                    <view class="county-name">
+                      <image
+                        :src="webUrl + '/home/icon-location.png'"
+                        class="icon"
+                      />
+                      <view class="county-txt one-t">
+                        {{ county.countyName }}
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <image
+          v-if="list.length === 0"
+          :src="webUrl + '/20231023131208675588.png'"
+          class="img-nodata"
+          mode="scaleToFill"
+        />
+      </view>
+      <goo-skeleton
+        v-else
+        :show-avatar="false"
+      />
     </view>
   </view>
 </template>
 
 <script>
-import {countyFamous} from '@/api/product'
-import {getProducts} from '@/api/store'
 import { famousShareImage } from '@/api/share'
+import {
+  getCountyFamousIndex,
+  getCountyFamousCityTree
+} from '@/api/qianxian'
 import { mapGetters } from 'vuex'
 import cookie from '@/utils/store/cookie'
 import { userBindParent } from '@/api/user'
@@ -55,198 +183,290 @@ export default {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       keyword: '',
-      page: 1,
+      shareData: {},
-      bannerList: [],
-      dataList: [],
-      navList: [],
-      navIndex: 0,
       partnerId: null,
+      countyFamousTopImage: '',
+      toggleStatus: false,
+      isLoad: false,
+      list: [],
       pageKeyId: Object.freeze('countyFamousIndex')
     }
   },
   computed: mapGetters(['userInfo', 'isLogin']),
   onShareAppMessage() {
-    return new Promise(async (resolve, reject) => {
+    return {
-      const {status, data} = await famousShareImage();
-      if (status === 200) {
-        resolve({
       title: '探寻有趣有味的生活方式',
       path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
-          imageUrl: data
+      imageUrl: this.shareData
-        })
     }
-    })
   },
   onLoad(options) {
     if (options.partnerId) {
-      this.partnerId = options.partnerId || null;
+      this.partnerId = options.partnerId || null
     } else {
-      let obj = uni.getEnterOptionsSync();
+      const obj = uni.getEnterOptionsSync()
       if (options.scene != null || obj.query.scene != null) {
-        let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
+        const query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene)
-        this.partnerId = getUrlParam(query, 'partnerId') || null;
+        this.partnerId = getUrlParam(query, 'partnerId') || null
       }
     }
     if (this.partnerId) {
-      cookie.set('spread', this.partnerId);
+      cookie.set('spread', this.partnerId)
-      userBindParent({spread: parseInt(this.partnerId)});
+      userBindParent({spread: parseInt(this.partnerId)})
     }
-
+    this.init()
-    countyFamous().then(({data}) => {
-      this.bannerList = data.banner;
-      this.navList = data.countyFamousAreaList;
-      this.search();
-    })
-  },
-  onReachBottom() {
-    this.page++;
-    this.fetchList();
   },
   methods: {
-    search() {
+    init() {
-      this.page = 1;
+      // 分享数据
-      this.dataList = [];
+      famousShareImage().then(res => {
-      this.fetchList();
+        this.shareData = res.data
-    },
+      })
-    navTap(index) {
+      // 顶部图片
-      if (index === this.navIndex) return;
+      getCountyFamousIndex().then(res => {
-      this.navIndex = index;
+        const { success, data } = res
-      this.search();
+        if (success) {
-    },
+          this.countyFamousTopImage = data.countyFamousTopImage || ''
-    fetchList() {
-      let param = {
-        isCountyFamous: 1,
-        page: this.page,
-        limit: 10,
-        keyword: this.keyword,
-        countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
         }
-
+      })
-      getProducts(param).then(({data}) => {
+      // 列表数据
-        for (let i = 0; i < data.length; i++) {
+      this.getListReq()
-          this.dataList.push(data[i]);
+    },
+    toggleStatusHandle() {
+      this.toggleStatus = !this.toggleStatus
+    },
+    getListReq() {
+      this.isLoad = false
+      getCountyFamousCityTree({
+        keyword: this.keyword || ''
+      }).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.list = data || []
+          this.list.map(item => {
+            const total = item.county.length || 0
+            item.countyTotal = total
+            // 偶数列
+            item.evenList = []
+            // 奇数列
+            item.oddList = []
+            if (total >= 7) {
+              item.county.map((county, countyIndex) => {
+                if (countyIndex % 2 === 0) {
+                  item.oddList.push(county)
+                }
+                if (countyIndex % 2 === 1) {
+                  item.evenList.push(county)
+                }
+              })
+            }
+          })
+          this.isLoad = true
         }
       })
     },
-    goGoods(id) {
+    provinceItemToViewHandle(item) {
-      uni.navigateTo({
+      const query = uni.createSelectorQuery().in(this)
-        url: `/pages/shop/GoodsCon/index?id=${id}&from=famous`
+      query.select(`.province__${item.provinceId}`).boundingClientRect(data => {
+        if (data) {
+          uni.pageScrollTo({
+            scrollTop: data.top || 0,
+            duration: 200
           })
+        }
+      }).exec()
     },
-    goStory() {
+    countyItemClick(item) {
-      uni.navigateTo({
+      uni.navigateTo({ url: `/pkg_product/views/famousQianxian?id=${item.id}` })
-        url: '/pkg_product/views/famousStory'
-      })
     }
   }
 }
 </script>
 
 <style scoped lang="less">
-@import "@/assets/css/product.less";
+.county-index {
-
-.pkg-product-list {
-  min-height: 100vh;
-  box-sizing: border-box;
-  padding-top: 16rpx;
-  background: #fff;
-  color: #333;
-
-  .swiper-box {
-    margin: 18rpx 32rpx 0;
-  }
-
-  .banner {
-    width: 686rpx;
-    height: 160rpx;
-    margin: 20rpx 32rpx 0;
-  }
-
-  .section-title {
-    margin: 0 32rpx 20rpx;
-    font-size: 32rpx;
-    line-height: 42rpx;
-  }
-
-  .nav-box {
-    width: 718rpx;
-    box-sizing: border-box;
-    margin: 26rpx 32rpx;
-    overflow-x: auto;
-
-    .item {
-      margin-right: 50rpx;
-      color: #7D7D7D;
-      font-size: 26rpx;
-      line-height: 38rpx;
-      white-space: nowrap;
-    }
-
-    .active {
   position: relative;
-      color: #333;
+  min-height: 100vh;
+  background-color: #fff;
+  .search-wrap {
+    padding: 20rpx 50rpx;
+    background-color: #fff;
+    .search-inner {
+      display: flex;
+      padding: 8rpx;
+      border-radius: 40px;
+      border: 2px solid #379748;
+      .inp {
+        flex: 1;
+        height: 64rpx;
+        padding: 0 20rpx 0 30rpx;
+        line-height: 84rpx;
         font-size: 28rpx;
-      line-height: 40rpx;
       }
-
+      .btn {
-    .active:after {
+        display: flex;
-      content: "";
+        align-items: center;
+        height: 64rpx;
+        padding: 0 30rpx;
+        border-radius: 32rpx;
+        color: #fff;
+        font-size: 28rpx;
+        line-height: 28rpx;
+        background-color: #379748;
+        .icon {
+          display: block;
+          width: 28rpx;
+          height: 28rpx;
+          margin: 0 0 0 8rpx;
+        }
+      }
+    }
+  }
+  .top-img {
+    position: relative;
+    z-index: 5;
+    .img {
       display: block;
       width: 100%;
-      height: 6rpx;
-      border-radius: 30px;
-      background: #FF564A;
     }
-  }
+    .province-wrap {
-
-  .nav-box::-webkit-scrollbar {
-    width: 0 !important
-  }
-
-  .list {
-    padding: 0 32rpx 32rpx;
-
-    .item {
-      position: relative;
-      width: 332rpx;
-      margin: 0 22rpx 24rpx 0;
-
-      .label {
       position: absolute;
-        top: 0;
+      left: 30rpx;
-        left: 0;
+      right: 30rpx;
-        width: 72rpx;
+      bottom: -50rpx;
-        height: 60rpx;
+      display: flex;
-      }
+      padding: 30rpx 20rpx 30rpx 30rpx;
-
+      border-radius: 20rpx;
-      .cover {
+      background-color: #fff;
-        width: 332rpx;
+      box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
-        height: 332rpx;
+      .list {
+        display: flex;
+        overflow-x: auto;
+        .item {
+          flex-shrink: 0;
+          margin: 0 20rpx 0 0;
+          .img {
+            display: block;
+            width: 80rpx;
+            height: 80rpx;
             border-radius: 8rpx;
           }
-
           .name {
-        height: 64rpx;
+            width: 80rpx;
-        margin: 4rpx 0;
+            padding: 10rpx 0 0 0;
-        font-size: 34rpx;
+            font-size: 24rpx;
-        line-height: 48rpx;
+            color: #333;
+            text-align: center;
+          }
+        }
+        &.isopen {
+          flex-wrap: wrap;
+          .item {
+            margin: 0 20rpx 20rpx 0;
+          }
+        }
+      }
+      .toggle-wrap {
+        padding: 0 0 0 20rpx;
+      }
+    }
+  }
+  .list-cont {
+    position: relative;
+    z-index: 2;
+    padding: 80rpx 30rpx 30rpx 30rpx;
+    background-color: #F0F0F0;
+    .item + .item {
+      margin: 30rpx 0 0 0;
+    }
+    .item {
+      padding: 30rpx 0 20rpx 30rpx;
+      border-radius: 20rpx;
+      background-color: #fff;
+      box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
+      .name {
+        display: flex;
+        padding: 0 30rpx 0 0;
+        font-size: 44rpx;
+        line-height: 44rpx;
+        color: #333;
+        .txt {
+          position: relative;
+          &::after {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 6rpx;
+            border-radius: 6rpx;
+            content: " ";
+            background: linear-gradient(90deg, #C52733 0%, rgba(202,56,67,0.92) 51%, rgba(255,255,255,0) 100%);
+          }
+        }
+      }
+      .desc {
+        padding: 20rpx 30rpx 0 0;
+        font-size: 24rpx;
+        color: #aaa;
+      }
+      .pic-wrap {
+        position: relative;
+        padding: 30rpx 0 0 0;
+        .county-item {
+          position: relative;
+          flex-shrink: 0;
+          margin: 0 16rpx 0 0;
+          .county-img {
+            display: block;
+            width: 168rpx;
+            height: 168rpx;
+            border-radius: 16rpx;
+          }
+          .county-name {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 5;
+            display: flex;
+            align-items: flex-end;
+            width: 168rpx;
+            height: 60rpx;
+            padding: 0 16rpx 16rpx 16rpx;
+            border-radius: 0rpx 0rpx 16rpx 16rpx;
+            box-sizing: border-box;
+            font-size: 24rpx;
+            line-height: 28rpx;
+            color: #fff;
+            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
+            .icon {
+              display: block;
+              width: 28rpx;
+              height: 28rpx;
+              margin: 0 10rpx 0 0;
+            }
+            .county-txt {
+              width: 90rpx;
+            }
+          }
+        }
+        .one-list {
+          display: flex;
+          overflow-x: auto;
+        }
+        .more-list-wrap {
+          overflow-x: auto;
+        }
+        .more-list + .more-list {
+          margin: 16rpx 0 0 0;
+        }
+        .more-list {
+          display: flex;
         }
-
-      .price {
-        color: #DA0000;
-        font-size: 28rpx;
-        line-height: 36rpx;
-
-        .bold {
-          font-size: 34rpx;
       }
     }
   }
-
-    .item:nth-child(2n) {
-      margin-right: 0;
 }
-
 .img-nodata {
   position: relative;
   top: 40rpx;
@@ -255,6 +475,4 @@ export default {
   width: 352rpx;
   height: 338rpx;
 }
-  }
-}
 </style>

pkg_product/views/famousList_bak20240819.vue

@@ -0,0 +1,260 @@
+<template>
+  <view class="pkg-product-list">
+    <view class="search-box flex jc-between ai-center">
+      <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
+      <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
+    </view>
+
+    <swiper class="swiper-box" indicator-dots indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
+            autoplay circular v-if="bannerList.length>0">
+      <swiper-item v-for="(item,index) in bannerList" :key="index">
+        <image :src="item.pic" mode="scaleToFill" @click="$global.commonJump(item.uniappUrl)"/>
+      </swiper-item>
+    </swiper>
+
+    <image class="banner" :src="webUrl+'/20230220024816081525.png'" mode="scaleToFill" @click="goStory"/>
+
+    <view class="nav-box flex">
+      <view class="item" :class="{'active':index===navIndex}" v-for="(item,index) in navList" :key="index"
+            @click="navTap(index)">{{ item.value }}
+      </view>
+    </view>
+
+    <view class="section-title bold">千县名品榜单</view>
+
+    <view class="list flex flex-wrap">
+      <view class="item" v-for="(item,index) in dataList" :key="index" @click="goGoods(item.id)">
+        <image class="label" :src="webUrl+'/20230222133041781911.png'"/>
+        <image class="cover" :src="item.image" mode="scaleToFill"/>
+        <view class="name bold one-t">{{ item.storeName }}</view>
+        <view class="price">￥
+          <text class="bold">{{ item.price }}</text>
+        </view>
+      </view>
+
+      <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
+             v-if="dataList.length===0"/>
+    </view>
+  </view>
+</template>
+
+<script>
+import {countyFamous} from '@/api/product'
+import {getProducts} from '@/api/store'
+import {famousShareImage} from '@/api/share'
+import {mapGetters} from 'vuex'
+import cookie from '@/utils/store/cookie'
+import {userBindParent} from '@/api/user'
+import {getUrlParam} from '@/utils/common.js'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+
+export default {
+  name: 'FamousList',
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      keyword: '',
+      page: 1,
+      bannerList: [],
+      dataList: [],
+      navList: [],
+      navIndex: 0,
+      partnerId: null,
+      pageKeyId: Object.freeze('countyFamousIndex')
+    }
+  },
+  computed: mapGetters(['userInfo', 'isLogin']),
+  onShareAppMessage() {
+    return new Promise(async (resolve, reject) => {
+      const {status, data} = await famousShareImage();
+      if (status === 200) {
+        resolve({
+          title: '探寻有趣有味的生活方式',
+          path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
+          imageUrl: data
+        })
+      }
+    })
+  },
+  onLoad(options) {
+    if (options.partnerId) {
+      this.partnerId = options.partnerId || null;
+    } else {
+      let obj = uni.getEnterOptionsSync();
+      if (options.scene != null || obj.query.scene != null) {
+        let query = options ? decodeURIComponent(options.scene) : decodeURIComponent(obj.query.scene);
+        this.partnerId = getUrlParam(query, 'partnerId') || null;
+      }
+    }
+    if (this.partnerId) {
+      cookie.set('spread', this.partnerId);
+      userBindParent({spread: parseInt(this.partnerId)});
+    }
+
+    countyFamous().then(({data}) => {
+      this.bannerList = data.banner;
+      this.navList = data.countyFamousAreaList;
+      this.search();
+    })
+  },
+  onReachBottom() {
+    this.page++;
+    this.fetchList();
+  },
+  methods: {
+    search() {
+      this.page = 1;
+      this.dataList = [];
+      this.fetchList();
+    },
+    navTap(index) {
+      if (index === this.navIndex) return;
+      this.navIndex = index;
+      this.search();
+    },
+    fetchList() {
+      let param = {
+        isCountyFamous: 1,
+        page: this.page,
+        limit: 10,
+        keyword: this.keyword,
+        countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
+      }
+
+      getProducts(param).then(({data}) => {
+        for (let i = 0; i < data.length; i++) {
+          this.dataList.push(data[i]);
+        }
+      })
+    },
+    goGoods(id) {
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${id}&from=famous`
+      })
+    },
+    goStory() {
+      uni.navigateTo({
+        url: '/pkg_product/views/famousStory'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/css/product.less";
+
+.pkg-product-list {
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding-top: 16rpx;
+  background: #fff;
+  color: #333;
+
+  .swiper-box {
+    margin: 18rpx 32rpx 0;
+  }
+
+  .banner {
+    width: 686rpx;
+    height: 160rpx;
+    margin: 20rpx 32rpx 0;
+  }
+
+  .section-title {
+    margin: 0 32rpx 20rpx;
+    font-size: 32rpx;
+    line-height: 42rpx;
+  }
+
+  .nav-box {
+    width: 718rpx;
+    box-sizing: border-box;
+    margin: 26rpx 32rpx;
+    overflow-x: auto;
+
+    .item {
+      margin-right: 50rpx;
+      color: #7D7D7D;
+      font-size: 26rpx;
+      line-height: 38rpx;
+      white-space: nowrap;
+    }
+
+    .active {
+      position: relative;
+      color: #333;
+      font-size: 28rpx;
+      line-height: 40rpx;
+    }
+
+    .active:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 30px;
+      background: #FF564A;
+    }
+  }
+
+  .nav-box::-webkit-scrollbar {
+    width: 0 !important
+  }
+
+  .list {
+    padding: 0 32rpx 32rpx;
+
+    .item {
+      position: relative;
+      width: 332rpx;
+      margin: 0 22rpx 24rpx 0;
+
+      .label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 72rpx;
+        height: 60rpx;
+      }
+
+      .cover {
+        width: 332rpx;
+        height: 332rpx;
+        border-radius: 8rpx;
+      }
+
+      .name {
+        height: 64rpx;
+        margin: 4rpx 0;
+        font-size: 34rpx;
+        line-height: 48rpx;
+      }
+
+      .price {
+        color: #DA0000;
+        font-size: 28rpx;
+        line-height: 36rpx;
+
+        .bold {
+          font-size: 34rpx;
+        }
+      }
+    }
+
+    .item:nth-child(2n) {
+      margin-right: 0;
+    }
+
+    .img-nodata {
+      position: relative;
+      top: 40rpx;
+      left: 50%;
+      transform: translate(-50%, 0);
+      width: 352rpx;
+      height: 338rpx;
+    }
+  }
+}
+</style>

pkg_product/views/famousQianxian.vue

@@ -0,0 +1,189 @@
+<template>
+  <view class="county-index">
+    <view v-if="isLoad">
+      <view class="top-img" @click="gotoQianxianShop">
+        <image
+          :src="countyFamous.cover"
+          class="img"
+          mode="widthFix"
+        />
+        <view class="info-wrap">
+          <view class="name">
+            {{ countyFamous.countyName }}
+            <view v-if="countyFamous.content" class="content">
+              {{ countyFamous.content }}
+            </view>
+          </view>
+          <view class="intro">
+            {{ countyFamous.intro }}
+          </view>
+        </view>
+      </view>
+      <view class="list-wrap">
+        <view v-if="isLoad">
+          <view class="list-cont">
+            <view class="list-cont-left">
+              <view
+                v-for="(item, index) in leftList"
+                :key="index"
+                class="item flex"
+              >
+                <xdd-product-item
+                  :item="item"
+                  :show-coupon="false"
+                  name-key="productName"
+                  image-key="productImage"
+                  price-key="productPrice"
+                  @view="goGoodsCon(item)"
+                />
+              </view>
+            </view>
+            <view class="list-cont-right">
+              <view
+                v-for="(item, index) in rightList"
+                :key="index"
+                class="item flex"
+              >
+                <xdd-product-item
+                  :item="item"
+                  :show-coupon="false"
+                  name-key="productName"
+                  image-key="productImage"
+                  price-key="productPrice"
+                  @view="goGoodsCon(item)"
+                />
+              </view>
+            </view>
+          </view>
+        </view>
+        <goo-skeleton
+          v-else
+          :show-avatar="false"
+        />
+      </view>
+    </view>
+    <goo-skeleton
+      v-else
+      :show-avatar="false"
+    />
+  </view>
+</template>
+
+<script>
+import {
+  getCountyFamousCityDetail
+} from '@/api/qianxian'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+import XddProductItem from '@/components/xdd-product-item'
+
+export default {
+  name: 'FamousQianxian',
+  components: {
+    XddProductItem
+  },
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      isLoad: false,
+      countyFamous: {},
+      leftList: [],
+      rightList: [],
+      pageKeyId: Object.freeze('countyFamousIndex')
+    }
+  },
+  onLoad(options) {
+    const id = options.id || ''
+    this.init(id)
+  },
+  methods: {
+    init(id) {
+      this.isLoad = false
+      getCountyFamousCityDetail(id).then(res => {
+        const { success, data } = res
+        if (success) {
+          this.countyFamous = data
+          const products = data.products || []
+          products.map((item, index) => {
+            item.isOldBrand = 0
+            item.isLandmarkGoods = 0
+            item.isCountyFamous = 1
+            if (index % 2 === 0) {
+              this.leftList.push(item)
+            }
+            if (index % 2 === 1) {
+              this.rightList.push(item)
+            }
+          })
+          this.isLoad = true
+        }
+      })
+    },
+    gotoQianxianShop() {
+      uni.navigateTo({ url: `/pkg_product/views/famousQianxianShop?id=${this.countyFamous.id}` })
+    },
+    goGoodsCon(item) {
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${item.productId}&from=famous`
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.county-index {
+  position: relative;
+  min-height: 100vh;
+  background-color: #fff;
+  .top-img {
+    position: relative;
+    z-index: 5;
+    padding: 21rpx;
+    .img {
+      display: block;
+      width: 100%;
+      border-radius: 20rpx;
+    }
+    .info-wrap {
+      padding: 30rpx 0 0 0;
+      .name {
+        display: flex;
+        align-items: flex-end;
+        font-size: 36rpx;
+        line-height: 36rpx;
+        font-weight: bold;
+        color: #333;
+        .content {
+          margin: 0 0 0 8rpx;
+          font-size: 24rpx;
+          color: #aaa;
+        }
+      }
+      .intro {
+        padding: 20rpx 0 0 0;
+        font-size: 24rpx;
+        color: #333;
+        text-indent: 2em;
+        line-height: 36rpx;
+      }
+    }
+  }
+  .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);
+    }
+    .item {
+      position: relative;
+      margin: 21rpx 0 0 0;
+    }
+  }
+}
+</style>

pkg_product/views/festival.vue

@@ -9,6 +9,7 @@
       color='#ffffff'
     />
     <view v-if="isLoad">
+      <view v-if="templateKey === 'default_template'">
         <image
           v-if="topImage"
           :src="topImage"
@@ -35,11 +36,40 @@
               :class="cIndex === 0 ? 'span12' : 'span8'"
               :src="item.image"
               mode="scaleToFill"
-            @click="goGoods(item.id || item.linkId)"
+              @click="goGoodsOrShop(item)"
             />
           </view>
         </view>
       </view>
+      <view v-if="templateKey === 'template_1'">
+        <theme-page-template1
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_2'">
+        <theme-page-template2
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_3'">
+        <theme-page-template3
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_4'">
+        <theme-page-template4
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+    </view>
     <goo-skeleton v-else />
   </view>
 </template>
@@ -48,17 +78,30 @@
  * 节日专题&尖货推荐初始模板
  * options.theme:best-尖货，''-节日
 */
-import { getFestival, getContentBest } from '@/api/product'
+import { getFestivalV2, getContentBest } from '@/api/product'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import ThemePageTemplate1 from '../components/ThemePageTemplate1.vue'
+import ThemePageTemplate2 from '../components/ThemePageTemplate2.vue'
+import ThemePageTemplate3 from '../components/ThemePageTemplate3.vue'
+import ThemePageTemplate4 from '../components/ThemePageTemplate4.vue'
 export default {
   name: 'FestivalPage',
+  components: {
+    ThemePageTemplate1,
+    ThemePageTemplate2,
+    ThemePageTemplate3,
+    ThemePageTemplate4
+  },
   mixins: [pageListenMixins],
   data() {
     return {
       isLoad: false,
       topImage: '',
-      contents: {},
+      contents: [],
-      pageKeyId: ''
+      pageKeyId: '',
+      templateKey: '',
+      // 模板数据
+      templateProperties: {}
     }
   },
   onLoad(options) {
@@ -67,13 +110,41 @@ export default {
     // 尖货
     if (theme === 'best') {
       this.pageKeyId = `appContentBest_id_${id}`
-      getContentBest(id).then(({data}) => {
+      this.getContentBestReq(id)
+    } else {
+      this.pageKeyId = 'appContentFestival'
+      this.getFestivalReq()
+    }
+  },
+  methods: {
+    getFestivalReq() {
+      /*旧接口
+      getFestival().then(({data}) => {
         this.isLoad = true
+        this.topImage = data.topImage
+        this.contents = data.contents
+      })
+      */
+      getFestivalV2().then(res => {
+        const { data } = res
+        this.renderTemplateData(data)
+      })
+    },
+    getContentBestReq(id) {
+      getContentBest(id).then(res => {
+        const { data } = res
+        this.renderTemplateData(data)
+      })
+    },
+    renderTemplateData(data) {
       const contents = []
       if (data.templateProperties) {
+        const templateKey = data.templateKey
         const temp = data.templateProperties
         // 第一页图片
         this.topImage = temp.page1Image
+        // 默认模板
+        if (templateKey === 'default_template') {
           // 第二页数据
           contents.push({
             backgroundImage: temp.page2BackgroundImage,
@@ -85,22 +156,27 @@ export default {
             products: temp.page3Links
           })
         }
-        this.contents = contents
+        // 模板1
-      })
+        if (['template_1', 'template_2', 'template_3', 'template_4'].includes(templateKey)) {
-    } else {
+          this.templateProperties = temp
-      this.pageKeyId = 'appContentFestival'
-      getFestival().then(({data}) => {
-        this.isLoad = true
-        this.topImage = data.topImage
-        this.contents = data.contents
-      })
         }
+      }
+      this.templateKey = data.templateKey
+      this.contents = contents
+      this.isLoad = true
     },
-  methods: {
+    goGoodsOrShop(item) {
-    goGoods(id) {
+      const id = item.linkId
+      const type = item.type || 1
+      if (type === 1) {
         uni.navigateTo({
           url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
         })
+      } else {
+        uni.navigateTo({
+          url: `/pagesInn/inn/innHome?id=${id}&from=festival`
+        })
+      }
     }
   }
 }

pkg_product/views/homestay.vue

@@ -1,38 +1,3 @@
-<script>
-// 民宿专题
-import {getHomestay} from '@/api/product'
-import { pageListenMixins } from '@/mixins/pageListenMixins'
-export default {
-  name: 'HomestayPage',
-  mixins: [pageListenMixins],
-  data() {
-    return {
-      webUrl: this.$VUE_APP_RESOURCES_URL,
-      topImage: '',
-      contents: [],
-      id: null,
-      pageKeyId: ''
-    }
-  },
-  onLoad(options) {
-    const id = options.id
-    this.id = id
-    this.pageKeyId = `appContentHomestay_id_${id}`
-    getHomestay(this.id).then(({data}) => {
-      this.topImage = data.topImage
-      this.contents = data.contents
-    })
-  },
-  methods: {
-    goInnDetail(item) {
-      uni.navigateTo({
-        url: `/pagesInn/inn/innHome?id=${item.id}&from=homestay`
-      })
-    }
-  }
-}
-</script>
-
 <template>
   <view class="pkg-product-homestay">
     <hx-navbar
@@ -43,18 +8,167 @@ export default {
       transparent="auto"
       color='#ffffff'
     />
-    <image class="top-img" mode="widthFix" :src="topImage" v-if="topImage"/>
+    <view v-if="isLoad">
-
+      <view v-if="templateKey === 'default_template_homestay'">
-    <view class="section" v-for="(content,cIndex) in contents" :key="cIndex">
+        <image
-      <image class="section-bg" :src="content.backgroundImage" mode="widthFix"/>
+          v-if="topImage"
-
+          :src="topImage"
-      <view class="list flex flex-wrap" :class="cIndex===2?'section12':'section24'">
+          mode="widthFix"
-        <image :class="cIndex===2?'span12':'span24'" mode="scaleToFill" :src="item.image"
+          class="top-img"
-               v-for="(item,index) in content.hotels" :key="index" @click="goInnDetail(item)"/>
+        />
+        <view
+          v-for="(content, cIndex) in contents"
+          :key="cIndex"
+          class="section"
+        >
+          <image
+            :src="content.backgroundImage"
+            mode="widthFix"
+            class="section-bg"
+          />
+          <view
+            :class="cIndex === 2 ? 'section12' : 'section24'"
+            class="list flex flex-wrap"
+          >
+            <image
+              v-for="(item, index) in content.list"
+              :key="index"
+              :src="item.image"
+              :class="cIndex === 2 ? 'span12' : 'span24'"
+              mode="scaleToFill"
+              @click="goGoodsOrShop(item)"
+            />
           </view>
         </view>
       </view>
+      <view v-if="templateKey === 'template_1'">
+        <theme-page-template1
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_2'">
+        <theme-page-template2
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_3'">
+        <theme-page-template3
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+      <view v-if="templateKey === 'template_4'">
+        <theme-page-template4
+          :top-image="topImage"
+          :template-properties="templateProperties"
+          @view="goGoodsOrShop"
+        />
+      </view>
+    </view>
+    <goo-skeleton v-else />
+  </view>
 </template>
+<script>
+// 民宿专题
+import { getHomestayV2 } from '@/api/product'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+import ThemePageTemplate1 from '../components/ThemePageTemplate1.vue'
+import ThemePageTemplate2 from '../components/ThemePageTemplate2.vue'
+import ThemePageTemplate3 from '../components/ThemePageTemplate3.vue'
+import ThemePageTemplate4 from '../components/ThemePageTemplate4.vue'
+export default {
+  name: 'HomestayPage',
+  components: {
+    ThemePageTemplate1,
+    ThemePageTemplate2,
+    ThemePageTemplate3,
+    ThemePageTemplate4
+  },
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      isLoad: false,
+      topImage: '',
+      contents: [],
+      pageKeyId: '',
+      templateKey: '',
+      // 模板数据
+      templateProperties: {}
+    }
+  },
+  onLoad(options) {
+    const id = options.id
+    this.pageKeyId = `appContentHomestay_id_${id}`
+    this.getHomestayReq(id)
+  },
+  methods: {
+    getHomestayReq(id) {
+      /*旧接口
+      getHomestay(this.id).then(({data}) => {
+        this.topImage = data.topImage
+        this.contents = data.contents
+      })
+      */
+      getHomestayV2(id).then(res => {
+        const { data } = res
+        this.renderTemplateData(data)
+      })
+    },
+    renderTemplateData(data) {
+      const contents = []
+      if (data.templateProperties) {
+        const templateKey = data.templateKey
+        const temp = data.templateProperties
+        // 第一页图片
+        this.topImage = temp.page1Image
+        // 默认模板
+        if (templateKey === 'default_template_homestay') {
+          // 第二页数据
+          contents.push({
+            backgroundImage: temp.page2BackgroundImage,
+            list: temp.page2Links
+          })
+          // 第三页数据
+          contents.push({
+            backgroundImage: temp.page3BackgroundImage,
+            list: temp.page3Links
+          })
+          // 第四页数据
+          contents.push({
+            backgroundImage: temp.page4BackgroundImage,
+            list: temp.page4Links
+          })
+        }
+        // 模板1
+        if (['template_1', 'template_2', 'template_3', 'template_4'].includes(templateKey)) {
+          this.templateProperties = temp
+        }
+      }
+      this.templateKey = data.templateKey
+      this.contents = contents
+      this.isLoad = true
+    },
+    goGoodsOrShop(item) {
+      const id = item.linkId
+      const type = item.type || 1
+      if (type === 1) {
+        uni.navigateTo({
+          url: `/pages/shop/GoodsCon/index?id=${id}&from=festival`
+        })
+      } else {
+        uni.navigateTo({
+          url: `/pagesInn/inn/innHome?id=${id}&from=festival`
+        })
+      }
+    }
+  }
+}
+</script>
 
 <style scoped lang="less">
 .pkg-product-homestay {

pkg_user/components/Coupons.vue

@@ -52,7 +52,7 @@ export default {
       this.isOpen = !this.isOpen
     },
     goGoods() {
-      uni.switchTab({url: '/pages/home/landMark'})
+      uni.navigateTo({url: '/pages/home/landMark'})
       // this.$global.navToGoods(this.data.productId)
     },
     selectCoupon() {