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

<script>
import {seasonHomeData} from '@/api/product'
import { pageListenMixins } from '@/mixins/pageListenMixins'

export default {
  mixins: [pageListenMixins],
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      typeList: ['时令果蔬', '水产海鲜', '肉禽蛋白', '全部分类'],
      list: [],
      typeIndex: 0,
      pageKeyId: Object.freeze('seasonalFoodIndex')
    }
  },
  onLoad() {
    this.init()
  },
  methods: {
    changeType(index){
      this.typeIndex=index
    },
    init() {
      seasonHomeData().then(({data}) => this.list = data.seasonalFoodType || [])
    },
    goDetail() {
      uni.navigateTo({
        url: "/pkg_product/views/season?id=" + this.list[this.typeIndex].contents[0].id
      })
    }
  }
}
</script>

<template>
  <view class="product-season">
    <template v-if="typeList.length">
      <view class="type-box">
        <u-grid col="4">
          <u-grid-item v-for="(item,index) in list" :key="index" @click="changeType(index)">
            <image class="icon-logo" :class="{'choose-icon':typeIndex===index}" :src="item.logo" mode="scaleToFill"/>
            <text class="type-name" :class="{'choose-name':typeIndex===index}">{{ item.name }}</text>
          </u-grid-item>
          <u-grid-item>
            <image class="icon-logo" :src="webUrl+'/20231010130532811085.png'" mode="scaleToFill"/>
            <text class="type-name">全部</text>
          </u-grid-item>
        </u-grid>
      </view>

      <view class="title-line flex ai-center">
        <image class="title-icon" :src="list[typeIndex].titleIcon" mode="scaleToFill"/>
        <text>{{ list[typeIndex].title }}</text>
      </view>

      <image class="type-img" :src="list[typeIndex].contents[0].image" mode="widthFix" @click="goDetail"/>

      <view class="goods-list flex flex-wrap">
        <view class="item flex flex-col ai-end" :style="{backgroundColor:list[typeIndex].backgroundColor}" v-for="item in list[typeIndex].products" :key="item"
              @click="$global.navToGoods(item.id)">
          <view class="img-box">
            <image :src="item.image" mode="scaleToFill"/>
            <view class="img-mask flex jc-center ai-center">
              <view class="name one-t">{{ item.storeName }}</view>
            </view>
          </view>
          <view class="more-t">{{ item.storeInfo }}</view>
          <view class="price tc">￥{{ item.price }}</view>
        </view>
      </view>
    </template>
  </view>
</template>

<style scoped lang="less">
.product-season {
  min-height: 100vh;
  background: #FFFFFF;
  color: #333333;

  image {
    vertical-align: middle;
  }

  .type-box {
    padding: 32rpx 32rpx 0;

    .icon-logo {
      width: 120rpx;
      height: 120rpx;
    }

    .type-name {
      margin-top: 8rpx;
      font-size: 24rpx;
    }

    .choose-icon {
      width: 160rpx;
      height: 160rpx;
    }

    .choose-name {
      color: #f66;
      font-size: 26rpx;
    }
  }

  .title-line {
    padding: 50rpx 32rpx 20rpx;

    .title-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
    }

    text {
      line-height: 1;
      font-size: 32rpx;
      font-weight: bold;
    }
  }

  .type-img {
    width: 690rpx;
    padding: 0 30rpx;
  }

  .goods-list {
    padding: 24rpx 32rpx;

    .item {
      position: relative;
      width: 328rpx;
      height: 480rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      margin-bottom: 24rpx;
      margin-right: 30rpx;
      padding: 16rpx;

      .img-box {
        position: relative;
        width: 296rpx;
        height: 296rpx;

        image {
          width: 296rpx;
          height: 296rpx;
          border-radius: 20rpx;
        }

        .img-mask {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 296rpx;
          height: 60rpx;
          box-sizing: border-box;
          padding: 0 20rpx;
          background: rgba(0, 0, 0, .5);
          border-radius: 0 0 20rpx 20rpx;

          .name {
            color: #FFFFFF;
            font-size: 32rpx;
          }
        }
      }

      .more-t {
        width: 100%;
        margin-top: 10rpx;
        color: #FFFFFF;
        font-size: 26rpx;
        line-height: 38rpx;
        text-align: left;
      }

      .price {
        position: absolute;
        bottom: 16rpx;
        right: 16rpx;
        display: inline-block;
        height: 48rpx;
        border-radius: 24rpx;
        margin-top: 8rpx;
        padding: 0 12rpx;
        background: #FFFFFF;
        font-size: 32rpx;
        line-height: 48rpx;
      }
    }

    .item:nth-child(2n) {
      margin-right: 0;
    }
  }
}
</style>