Refactor(千县名品):模块首页和县主页界面使用新版UI调整

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 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() {

pages.json

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

pkg_product/views/famousList.vue

@@ -1,51 +1,179 @@
 <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 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>
-
+    </view>
-      <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
+    <view class="top-img">
-             v-if="dataList.length===0"/>
+      <image
+        :src="countyFamousTopImage"
+        class="img"
+        mode="widthFix"
+      />
+      <view v-if="list.length > 0" class="province-wrap">
+        <view
+          :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>
+        <view
+          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 { famousShareImage } from '@/api/share'
-import {getProducts} from '@/api/store'
+import {
-import {famousShareImage} from '@/api/share'
+  getCountyFamousIndex,
-import {mapGetters} from 'vuex'
+  getCountyFamousCityTree
+} from '@/api/qianxian'
+import { mapGetters } from 'vuex'
 import cookie from '@/utils/store/cookie'
-import {userBindParent} from '@/api/user'
+import { userBindParent } from '@/api/user'
-import {getUrlParam} from '@/utils/common.js'
+import { getUrlParam } from '@/utils/common.js'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 
 export default {
@@ -55,206 +183,296 @@ 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();
+      title: '探寻有趣有味的生活方式',
-      if (status === 200) {
+      path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
-        resolve({
+      imageUrl: this.shareData
-          title: '探寻有趣有味的生活方式',
+    }
-          path: '/pkg_product/views/famousList?partnerId=' + this.userInfo.uid,
-          imageUrl: data
-        })
-      }
-    })
   },
   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
+      })
+      // 顶部图片
+      getCountyFamousIndex().then(res => {
+        const { success, data } = res
+        if (success) {
+          this.countyFamousTopImage = data.countyFamousTopImage || ''
+        }
+      })
+      // 列表数据
+      this.getListReq()
     },
-    navTap(index) {
+    toggleStatusHandle() {
-      if (index === this.navIndex) return;
+      this.toggleStatus = !this.toggleStatus
-      this.navIndex = index;
-      this.search();
     },
-    fetchList() {
+    getListReq() {
-      let param = {
+      this.isLoad = false
-        isCountyFamous: 1,
+      getCountyFamousCityTree({
-        page: this.page,
+        keyword: this.keyword || ''
-        limit: 10,
+      }).then(res => {
-        keyword: this.keyword,
+        const { success, data } = res
-        countyFamousArea: this.navList.length > 0 ? this.navList[this.navIndex].key : ""
+        if (success) {
-      }
+          this.list = data || []
-
+          this.list.map(item => {
-      getProducts(param).then(({data}) => {
+            const total = item.county.length || 0
-        for (let i = 0; i < data.length; i++) {
+            item.countyTotal = total
-          this.dataList.push(data[i]);
+            // 偶数列
+            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 {
-
+  position: relative;
-.pkg-product-list {
   min-height: 100vh;
-  box-sizing: border-box;
+  background-color: #fff;
-  padding-top: 16rpx;
+  .search-wrap {
-  background: #fff;
+    padding: 20rpx 50rpx;
-  color: #333;
+    background-color: #fff;
-
+    .search-inner {
-  .swiper-box {
+      display: flex;
-    margin: 18rpx 32rpx 0;
+      padding: 8rpx;
-  }
+      border-radius: 40px;
-
+      border: 2px solid #379748;
-  .banner {
+      .inp {
-    width: 686rpx;
+        flex: 1;
-    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;
+        padding: 0 20rpx 0 30rpx;
-        font-size: 34rpx;
+        line-height: 84rpx;
-        line-height: 48rpx;
-      }
-
-      .price {
-        color: #DA0000;
         font-size: 28rpx;
-        line-height: 36rpx;
+      }
-
+      .btn {
-        .bold {
+        display: flex;
-          font-size: 34rpx;
+        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;
         }
       }
     }
-
+  }
-    .item:nth-child(2n) {
+  .top-img {
-      margin-right: 0;
+    position: relative;
+    z-index: 5;
+    .img {
+      display: block;
+      width: 100%;
     }
-
+    .province-wrap {
-    .img-nodata {
+      position: absolute;
-      position: relative;
+      left: 30rpx;
-      top: 40rpx;
+      right: 30rpx;
-      left: 50%;
+      bottom: -50rpx;
-      transform: translate(-50%, 0);
+      display: flex;
-      width: 352rpx;
+      padding: 30rpx 20rpx 30rpx 30rpx;
-      height: 338rpx;
+      border-radius: 20rpx;
+      background-color: #fff;
+      box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
+      .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 {
+            width: 80rpx;
+            padding: 10rpx 0 0 0;
+            font-size: 24rpx;
+            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;
+        }
+      }
     }
   }
 }
+.img-nodata {
+  position: relative;
+  top: 40rpx;
+  left: 50%;
+  transform: translate(-50%, 0);
+  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>