xdd-uniapp-new/pkg_product/views/famousQianxian.vue

<template>
  <view class="county-index v12-grey">
    <view v-if="isLoad">
      <view class="top-img v12-white" @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>
          <image
            :src="webUrl + '/home/no-data-bg.png'"
            mode="widthFix"
            class="loadend"
          />
        </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-wrap {
    background-color: #F0F0F0;
    .loadend {
      width: 100%;
    }
  }
  .list-cont {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 21rpx 21rpx 21rpx;
    .list-cont-left,
    .list-cont-right {
      width: calc(50% - 11rpx);
    }
    .item {
      position: relative;
      margin: 21rpx 0 0 0;
    }
  }
}
</style>