city-gather/src/subPack-xsb/components/goodsItem/index.vue

<script setup lang="ts">
import { StaticUrl } from '@/config'
import router from '@/router'

defineProps<{ itemGoods: Api.xsbCategoryProductList }>()
</script>

<template>
  <view class="relative overflow-hidden rounded-16rpx bg-white pb16rpx">
    <view @click="router.push({ name: 'xsb-goods', params: { id: itemGoods.prodId } })">
      <view class="relative h344rpx">
        <image
          :src="itemGoods.pic"
          class="h344rpx w344rpx"
        />
        <image
          :src="`${StaticUrl}/xsb-shui-index.png`"
          class="absolute left-0 top-0 h344rpx w344rpx"
        />
      </view>
      <view class="mt20rpx px20rpx">
        <view class="line-clamp-2 text-left text-28rpx font-semibold">
          <!-- <view v-for="i in 2" :key="i" class="mr5px inline-block">
                        <wd-tag type="primary">
                          新品{{ i }}
                        </wd-tag>
                      </view> -->
          {{ itemGoods.prodName }}
        </view>
        <view class="mt12rpx text-22rpx text-#AAAAAA">
          已售{{ itemGoods.soldNum }}
        </view>

        <view class="mt10rpx flex items-center justify-between">
          <view>
            <view class="mt20rpx flex items-end text-#FF4D3A font-semibold">
              <view class="text-24rpx">
                ￥
              </view>
              <view class="text-36rpx line-height-[36rpx]">
                {{ itemGoods.channelProdPrice }}
              </view>
            </view>
          </view>
          <i class="iconfont text-52rpx text-[var(--them-color)]">&#xe64c;</i>
        </view>
      </view>
    </view>
    <view v-if="!itemGoods.spuStock" class="mask absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center">
      <view class="h156rpx w156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white">
        商品已售罄
      </view>
    </view>
    <view v-if="!itemGoods.skuList.some((it) => it.saleStatus)" class="mask absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center">
      <view class="h156rpx w156rpx flex items-center justify-center rounded-full bg-[rgba(0,0,0,.6)] text-28rpx text-white">
        商品不可售
      </view>
    </view>
  </view>
</template>

<style scoped>
.mask{
  background: rgba(255,255,255,0.6);
}
</style>