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

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>