|
| 1 | +<template> |
| 2 | + <div ref="containerRef" :class="`box-content min-h-30px w-full flex flex-row flex-wrap`"> |
| 3 | + <div |
| 4 | + v-for="(spu, index) in spuList" |
| 5 | + :key="index" |
| 6 | + :style="{ |
| 7 | + ...calculateSpace(index), |
| 8 | + ...calculateWidth(), |
| 9 | + borderTopLeftRadius: `${property.borderRadiusTop}px`, |
| 10 | + borderTopRightRadius: `${property.borderRadiusTop}px`, |
| 11 | + borderBottomLeftRadius: `${property.borderRadiusBottom}px`, |
| 12 | + borderBottomRightRadius: `${property.borderRadiusBottom}px` |
| 13 | + }" |
| 14 | + class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white" |
| 15 | + > |
| 16 | + <!-- 角标 --> |
| 17 | + <div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center"> |
| 18 | + <el-image :src="property.badge.imgUrl" class="h-26px w-38px" fit="cover" /> |
| 19 | + </div> |
| 20 | + <!-- 商品封面图 --> |
| 21 | + <div |
| 22 | + :class="[ |
| 23 | + 'h-140px', |
| 24 | + { |
| 25 | + 'w-full': property.layoutType !== 'oneColSmallImg', |
| 26 | + 'w-140px': property.layoutType === 'oneColSmallImg' |
| 27 | + } |
| 28 | + ]" |
| 29 | + > |
| 30 | + <el-image :src="spu.picUrl" class="h-full w-full" fit="cover" /> |
| 31 | + </div> |
| 32 | + <div |
| 33 | + :class="[ |
| 34 | + ' flex flex-col gap-8px p-8px box-border', |
| 35 | + { |
| 36 | + 'w-full': property.layoutType !== 'oneColSmallImg', |
| 37 | + 'w-[calc(100%-140px-16px)]': property.layoutType === 'oneColSmallImg' |
| 38 | + } |
| 39 | + ]" |
| 40 | + > |
| 41 | + <!-- 商品名称 --> |
| 42 | + <div |
| 43 | + v-if="property.fields.name.show" |
| 44 | + :class="[ |
| 45 | + 'text-14px ', |
| 46 | + { |
| 47 | + truncate: property.layoutType !== 'oneColSmallImg', |
| 48 | + 'overflow-ellipsis line-clamp-2': property.layoutType === 'oneColSmallImg' |
| 49 | + } |
| 50 | + ]" |
| 51 | + :style="{ color: property.fields.name.color }" |
| 52 | + > |
| 53 | + {{ spu.name }} |
| 54 | + </div> |
| 55 | + <!-- 商品简介 --> |
| 56 | + <div |
| 57 | + v-if="property.fields.introduction.show" |
| 58 | + :style="{ color: property.fields.introduction.color }" |
| 59 | + class="truncate text-12px" |
| 60 | + > |
| 61 | + {{ spu.introduction }} |
| 62 | + </div> |
| 63 | + <div> |
| 64 | + <!-- 积分 --> |
| 65 | + <span |
| 66 | + v-if="property.fields.price.show" |
| 67 | + :style="{ color: property.fields.price.color }" |
| 68 | + class="text-16px" |
| 69 | + > |
| 70 | + {{ spu.point }}积分{{ |
| 71 | + !spu.pointPrice || spu.pointPrice === 0 ? '' : `+${fenToYuan(spu.pointPrice)}元` |
| 72 | + }} |
| 73 | + </span> |
| 74 | + <!-- 市场价 --> |
| 75 | + <span |
| 76 | + v-if="property.fields.marketPrice.show && spu.marketPrice" |
| 77 | + :style="{ color: property.fields.marketPrice.color }" |
| 78 | + class="ml-4px text-10px line-through" |
| 79 | + > |
| 80 | + ￥{{ fenToYuan(spu.marketPrice) }} |
| 81 | + </span> |
| 82 | + </div> |
| 83 | + <div class="text-12px"> |
| 84 | + <!-- 销量 --> |
| 85 | + <span |
| 86 | + v-if="property.fields.salesCount.show" |
| 87 | + :style="{ color: property.fields.salesCount.color }" |
| 88 | + > |
| 89 | + 已兑{{ (spu.pointTotalStock || 0) - (spu.pointStock || 0) }}件 |
| 90 | + </span> |
| 91 | + <!-- 库存 --> |
| 92 | + <span v-if="property.fields.stock.show" :style="{ color: property.fields.stock.color }"> |
| 93 | + 库存{{ spu.pointTotalStock || 0 }} |
| 94 | + </span> |
| 95 | + </div> |
| 96 | + </div> |
| 97 | + <!-- 购买按钮 --> |
| 98 | + <div class="absolute bottom-8px right-8px"> |
| 99 | + <!-- 文字按钮 --> |
| 100 | + <span |
| 101 | + v-if="property.btnBuy.type === 'text'" |
| 102 | + :style="{ |
| 103 | + background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}` |
| 104 | + }" |
| 105 | + class="rounded-full p-x-12px p-y-4px text-12px text-white" |
| 106 | + > |
| 107 | + {{ property.btnBuy.text }} |
| 108 | + </span> |
| 109 | + <!-- 图片按钮 --> |
| 110 | + <el-image |
| 111 | + v-else |
| 112 | + :src="property.btnBuy.imgUrl" |
| 113 | + class="h-28px w-28px rounded-full" |
| 114 | + fit="cover" |
| 115 | + /> |
| 116 | + </div> |
| 117 | + </div> |
| 118 | + </div> |
| 119 | +</template> |
| 120 | +<script lang="ts" setup> |
| 121 | +import { PromotionPointProperty } from './config' |
| 122 | +import * as ProductSpuApi from '@/api/mall/product/spu' |
| 123 | +import { PointActivityApi, PointActivityVO, SpuExtension0 } from '@/api/mall/promotion/point' |
| 124 | +import { fenToYuan } from '@/utils' |
| 125 | +
|
| 126 | +/** 积分商城卡片 */ |
| 127 | +defineOptions({ name: 'PromotionPoint' }) |
| 128 | +// 定义属性 |
| 129 | +const props = defineProps<{ property: PromotionPointProperty }>() |
| 130 | +// 商品列表 |
| 131 | +const spuList = ref<SpuExtension0[]>([]) |
| 132 | +const spuIdList = ref<number[]>([]) |
| 133 | +const pointActivityList = ref<PointActivityVO[]>([]) |
| 134 | +
|
| 135 | +watch( |
| 136 | + () => props.property.activityIds, |
| 137 | + async () => { |
| 138 | + try { |
| 139 | + // 新添加的积分商城组件，是没有活动ID的 |
| 140 | + const activityIds = props.property.activityIds |
| 141 | + // 检查活动ID的有效性 |
| 142 | + if (Array.isArray(activityIds) && activityIds.length > 0) { |
| 143 | + // 获取积分商城活动详情列表 |
| 144 | + pointActivityList.value = await PointActivityApi.getPointActivityListByIds(activityIds) |
| 145 | +
|
| 146 | + // 获取积分商城活动的 SPU 详情列表 |
| 147 | + spuList.value = [] |
| 148 | + spuIdList.value = pointActivityList.value.map((activity) => activity.spuId) |
| 149 | + if (spuIdList.value.length > 0) { |
| 150 | + spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value) |
| 151 | + } |
| 152 | +
|
| 153 | + // 更新 SPU 的最低兑换积分和所需兑换金额 |
| 154 | + pointActivityList.value.forEach((activity) => { |
| 155 | + // 匹配spuId |
| 156 | + const spu = spuList.value.find((spu) => spu.id === activity.spuId) |
| 157 | + if (spu) { |
| 158 | + spu.pointStock = activity.stock |
| 159 | + spu.pointTotalStock = activity.totalStock |
| 160 | + spu.point = activity.point |
| 161 | + spu.pointPrice = activity.price |
| 162 | + } |
| 163 | + }) |
| 164 | + } |
| 165 | + } catch (error) { |
| 166 | + console.error('获取积分商城活动细节或 SPU 细节时出错:', error) |
| 167 | + } |
| 168 | + }, |
| 169 | + { |
| 170 | + immediate: true, |
| 171 | + deep: true |
| 172 | + } |
| 173 | +) |
| 174 | +
|
| 175 | +/** |
| 176 | + * 计算商品的间距 |
| 177 | + * @param index 商品索引 |
| 178 | + */ |
| 179 | +const calculateSpace = (index: number) => { |
| 180 | + // 商品的列数 |
| 181 | + const columns = props.property.layoutType === 'twoCol' ? 2 : 1 |
| 182 | + // 第一列没有左边距 |
| 183 | + const marginLeft = index % columns === 0 ? '0' : props.property.space + 'px' |
| 184 | + // 第一行没有上边距 |
| 185 | + const marginTop = index < columns ? '0' : props.property.space + 'px' |
| 186 | +
|
| 187 | + return { marginLeft, marginTop } |
| 188 | +} |
| 189 | +
|
| 190 | +// 容器 |
| 191 | +const containerRef = ref() |
| 192 | +// 计算商品的宽度 |
| 193 | +const calculateWidth = () => { |
| 194 | + let width = '100%' |
| 195 | + // 双列时每列的宽度为：（总宽度 - 间距）/ 2 |
| 196 | + if (props.property.layoutType === 'twoCol') { |
| 197 | + width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px` |
| 198 | + } |
| 199 | + return { width } |
| 200 | +} |
| 201 | +</script> |
| 202 | + |
| 203 | +<style lang="scss" scoped></style> |
0 commit comments