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

<template>
  <view class="gift-page">
    <view class="banner" @click="linkTo">
      <view v-if="topBannerImage" class="banner-image-wrap">
        <image
          :src="topBannerImage"
          class="banner-img"
          mode="aspectFill"
        />
      </view>
    </view>
    <view class="province-enter-wrap">
      <view
        class="scroll-x-wrap"
      >
        <view
          :class="!toggleStatus ? '' : 'hide'"
          class="list-cont"
        >
          <view
            v-for="(item, index) in provinceList"
            :key="index"
            class="item"
            @click="provinceItemClick(item)"
          >
            <image :src="item.icon" class="img" />
            <view class="name">{{ item.provinceMergerName }}</view>
          </view>
        </view>
        <view
          :class="toggleStatus ? 'show' : ''"
          class="list-cont list-show-all"
        >
          <view
            v-for="(item, index) in provinceList"
            :key="index"
            class="item"
            @click="provinceItemClick(item)"
          >
            <image :src="item.icon" class="img" />
            <view class="name">{{ item.provinceMergerName }}</view>
          </view>
        </view>
        <view
          v-if="!toggleStatus && provinceList.length > 5"
          class="toggle-btn"
          @click="toggleHandle(true)"
        >
          <view>展</view>
          <view>开</view>
        </view>
        <view
          v-if="toggleStatus"
          class="toggle-btn"
          @click="toggleHandle(false)"
        >
          <view>收</view>
          <view>起</view>
        </view>
      </view>
    </view>
    <view class="province-bg-list">
      <view
        v-for="(item, index) in provinceList"
        :key="index"
        class="item"
      >
        <view class="bg" @click="provinceItemClick(item)">
              <!-- <rich-text :nodes="item.bgHtml" /> -->
          <image
            :src="item.backgroundImage"
            class="bg-img"
            mode="widthFix|aspectFill"
            lazy-load
          />
        </view>
        <view class="good-list">
          <view
            v-for="(goodItem, goodIndex) in item.productList"
            :key="goodIndex"
            class="good-item"
            @click.stop="goodItemClick(goodItem)"
          >
            <view class="good-img">
              <image :src="goodItem.productImage" class="img" lazy-load />
            </view>
            <view class="name">
              {{ goodItem.productName }}
            </view>
            <view class="price">
              <text class="txt">￥</text>
              {{ goodItem.productPrice }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  customizedGift
} from '@/api/product'
import { pageListenMixins } from '@/mixins/pageListenMixins'
export default {
  name: 'GiftList',
  mixins: [pageListenMixins],
  data() {
    return {
      provinceList: [],
      topBannerImage: '',
      topBannerUrl: '',
      toggleStatus: false,
      pageKeyId: Object.freeze('customizedGiftIndex')
    }
  },
  onLoad() {
    this.getPageDataReq()
  },
  methods: {
    getPageDataReq() {
      customizedGift().then(res => {
        const { success, data } = res
        if (success) {
          this.topBannerImage = data.topBanner.image || ''
          this.topBannerUrl = data.topBanner.appUrl || ''
          const list = data.cities || []
          if (list.length > 0) {
            list.map(item => {
              const backgroundImage = item.backgroundImage || ''
              if (backgroundImage && item.productList.length > 0) {
                this.provinceList.push({
                  ...item,
                  backgroundImage
                })
              }
            })
          }
        }
      })
    },
    linkTo() {
      if (!this.topBannerUrl) {
        return
      }
      uni.navigateTo({
        url: this.topBannerUrl
      })
    },
    provinceItemClick(item) {
      const id = item.id
      if (!id) {
        return
      }
      uni.navigateTo({
        url: `/pkg_product/views/giftContent?id=${id}&name=${item.provinceMergerName}`
      })
    },
    goodItemClick(good) {
      const productId = good.productId
      if (!productId) {
        return
      }
      uni.navigateTo({
        url: `/pages/shop/GoodsCon/index?id=${productId}&from=gift`
      })
    },
    toggleHandle(value) {
      this.toggleStatus = value
    }
  }
}
</script>
<style scoped lang="less">
.banner {
  position: relative;
  z-index: 1;
  .banner-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 46%;
    overflow: hidden;
    background-color: #f6f6f6;
  }
  .banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
}
.province-enter-wrap {
  position: relative;
  z-index: 5;
  margin-top: -80rpx;
  padding: 30rpx 30rpx 0 30rpx;
  .scroll-x-wrap {
    position: relative;
    min-height: 140rpx;
    padding: 24rpx 80rpx 16rpx 24rpx;
    border-radius: 24rpx;
    background-color: #fff;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.16);
    .list-cont {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      max-height: 200rpx;
      opacity: 1;
      &.hide {
        max-height: 0;
        opacity: 0;
        margin: 0;
        overflow: hidden;
      }
      .item + .item {
        margin: 0 0 0 24rpx;
      }
      .item {
        .img {
          width: 45px;
          height: 45px;
          border-radius: 4px;
        }
        .name {
          margin: 12rpx 0 0 0;
          font-size: 12px;
          color: #333;
          text-align: center;
        }
      }
    }
    .list-show-all {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      border-radius: 24rpx;
      box-sizing: border-box;
      background-color: #fff;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      &.show {
        max-height: 2000rpx;
        opacity: 1;
      }
      .item {
        margin: 0 24rpx 24rpx 0 !important;
      }
    }
    .toggle-btn {
      position: absolute;
      top: 24rpx;
      right: 24rpx;
      z-index: 5;
      font-size: 14px;
    }
  }
}
.province-bg-list {
  padding: 30rpx;
  .item + .item {
    margin: 30rpx 0 0 0;
  }
  .item {
    position: relative;
    .bg {
      position: relative;
      z-index: 2;
      width: 100%;
      overflow: hidden;
      border-radius: 20rpx;
      background-color: #f6f6f6;
      .bg-img {
        top: 0;
        width: 100%;
        display: block;
      }
    }
    .good-list {
      position: absolute;
      bottom: 12rpx;
      left: 30rpx;
      right: 30rpx;
      z-index: 5;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      .good-item {
        margin: 0 24rpx 0 0;
        text-align: center;
        font-size: 12px;
        color: #fff;
        width: 180rpx;
        .good-img {
          width: 90px;
          height: 90px;
          .img {
            width: 100%;
            height: 100%;
            border-radius: 12rpx;
          }
        }
        .name {
          height: 28px;
          margin: 3px 0;
          box-sizing: border-box;
          line-height: 14px;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price {
          display: inline-block;
          height: 18px;
          padding: 0 20rpx;
          border-radius: 11px;
          border: 1px solid #fff;
          line-height: 18px;
          background-color: rgba(0, 0, 0, .5);
          .txt {
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>