Fix(千县名品):[#2325, #2326]千县名品点击县城直接进入县城详情页且增加产品tab

pkg_product/views/famousList.vue

@@ -299,7 +299,7 @@ export default {
       }).exec()
     },
     countyItemClick(item) {
-      uni.navigateTo({ url: `/pkg_product/views/famousQianxian?id=${item.id}` })
+      uni.navigateTo({ url: `/pkg_product/views/famousQianxianShop?id=${item.id}` })
     }
   }
 }

pkg_product/views/famousQianxianShop.vue

@@ -213,6 +213,11 @@
                   </view>
                 </view>
               </view>
+              <image
+                :src="webUrl + '/home/no-data-bg.png'"
+                mode="widthFix"
+                class="no-data-loadend"
+              />
             </view>
           </view>
           <goo-skeleton v-else />
@@ -283,6 +288,11 @@
                 </view>
               </view>
             </view>
+            <image
+              :src="webUrl + '/home/no-data-bg.png'"
+              mode="widthFix"
+              class="no-data-loadend"
+            />
           </view>
           <goo-skeleton v-else />
         </view>
@@ -485,6 +495,51 @@
             </view>
           </view>
         </view>
+        <!-- 产品 -->
+        <view
+          v-if="activeIndex === 4"
+          class="good-list-wrap"
+        >
+          <view class="good-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>
+          <image
+            :src="webUrl + '/home/no-data-bg.png'"
+            mode="widthFix"
+            class="loadend"
+          />
+        </view>
       </view>
     </view>
     <goo-skeleton v-else />
@@ -526,17 +581,20 @@ import {
   getCountyFamousIndustry,
   getCountyFamousIndustryProject,
   getCountyFamousInvestmentFile,
-  getCountyFamousVillage
+  getCountyFamousVillage,
+  getCountyFamousCityDetail
 } from '@/api/qianxian'
 import {formatDateTime} from '@/utils'
 import {getUrlParam} from '@/utils/common.js'
 import imgBox from '@/components/imageTypeSet/imagebox.vue'
+import XddProductItem from '@/components/xdd-product-item'
 import cookie from '@/utils/store/cookie'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 
 export default {
   components: {
-    imgBox
+    imgBox,
+    XddProductItem
   },
   mixins: [pageListenMixins],
   data() {
@@ -568,7 +626,8 @@ export default {
         { text: '资讯', value: 0, isShow: true },
         { text: '文化', value: 1, isShow: true },
         { text: '攻略', value: 2, isShow: true },
-        { text: '产业', value: 3, isShow: true }
+        { text: '产业', value: 3, isShow: true },
+        { text: '产品', value: 4, isShow: true }
       ],
       // 资讯
       infoArray: [],
@@ -593,7 +652,10 @@ export default {
         { name: '招商政策', icon: '/page/qianxian/icon-03.png' },
         { name: '村屋出租', icon: '/page/qianxian/icon-07.png' }
       ],
-      industryTabIndex: 0
+      industryTabIndex: 0,
+      // 产品
+      leftList: [],
+      rightList: [],
     }
   },
   // 必须在页面加 onPageScroll(e){} ，才能滑动显示背景
@@ -662,6 +724,23 @@ export default {
           this.villageList = data.records || []
         }
       })
+      getCountyFamousCityDetail(this.id).then(res => {
+        const { success, data } = res
+        if (success) {
+          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)
+            }
+          })
+        }
+      })
     },
     getShopDetailReq() {
       const _this = this
@@ -1186,9 +1265,9 @@ export default {
   }
 }
 .top-tab {
-  padding: 40rpx 0 20rpx 0;
+  padding: 40rpx 20rpx 20rpx 20rpx;
   .tab {
-    margin: 0 20rpx;
+    width: 20%;
     .tab-item {
       height: 52rpx;
       padding: 0 30rpx;
@@ -1366,16 +1445,14 @@ export default {
     }
   }
   .pic-list {
-    // display: flex;
-    // flex-wrap: wrap;
-    width: 100%;
+    width: 660rpx;
     padding: 30rpx 0 0 0;
+    margin: 0 auto;
     .item {
-      // width: calc(50% - 10rpx);
       margin: 0 20rpx 20rpx 0;
       .img {
         display: block;
-        width: 100%;
+        width: 320rpx;
         height: 360rpx;
         border-radius: 16rpx;
       }
@@ -1654,10 +1731,34 @@ export default {
     }
   }
 }
+.good-list-wrap {
+  background-color: #f6f6f6;
+  .loadend {
+    width: 100%;
+  }
+}
+.good-list-cont {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 21rpx 21rpx 21rpx;
+  .list-cont-left,
+  .list-cont-right {
+    width: calc(50% - 11rpx);
+  }
+  .item {
+    position: relative;
+    margin: 21rpx 0 0 0;
+  }
+}
 .tab-no-data {
   text-align: center;
   font-size: 32rpx;
   color: #999;
   line-height: 200rpx;
 }
+.no-data-loadend {
+  width: 100%;
+}
 </style>