| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef"> |
| 3 | <div | |
| 4 | class="flex flex-row text-12px" | |
| 5 | :style="{ | |
| 6 | gap: `${property.space}px`, | |
| 7 | width: scrollbarWidth | |
| 8 | }" | |
| 9 | > | |
| 10 | <div | |
| 11 | class="box-content" | |
| 12 | :style="{ | |
| 13 | background: property.bgImg | |
| 14 | ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat` | |
| 15 | : '#fff', | |
| 16 | width: `${couponWidth}px`, | |
| 17 | color: property.textColor | |
| 18 | }" | |
| 19 | v-for="(coupon, index) in couponList" | |
| 20 | :key="index" | |
| 21 | > | |
| 22 | <!-- 布局1：1列--> | |
| 23 | <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px"> | |
| 24 | <div class="flex flex-col justify-evenly gap-4px"> | |
| 25 | <!-- 优惠值 --> | |
| 26 | <CouponDiscount :coupon="coupon" /> | |
| 27 | <!-- 优惠描述 --> | |
| 28 | <CouponDiscountDesc :coupon="coupon" /> | |
| 29 | <!-- 有效期 --> | |
| 30 | <CouponValidTerm :coupon="coupon" /> | |
| 31 | </div> | |
| 32 | <div class="flex flex-col justify-evenly"> | |
| 33 | <div | |
| 34 | class="rounded-20px p-x-8px p-y-2px" | |
| 35 | :style="{ | |
| 36 | color: property.button.color, | |
| 37 | background: property.button.bgColor | |
| 38 | }" | |
| 39 | > | |
| 40 | 立即领取 | |
| 41 | </div> | |
| 42 | </div> | |
| 43 | </div> | |
| 44 | <!-- 布局2：2列--> | |
| 45 | <div | |
| 46 | v-else-if="property.columns === 2" | |
| 47 | class="m-l-16px flex flex-row justify-between p-8px" | |
| 48 | > | |
| 49 | <div class="flex flex-col justify-evenly gap-4px"> | |
| 50 | <!-- 优惠值 --> | |
| 51 | <CouponDiscount :coupon="coupon" /> | |
| 52 | <div>{{ coupon.name }}</div> | |
| 53 | </div> | |
| 54 | <div class="flex flex-col"> | |
| 55 | <div | |
| 56 | class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center" | |
| 57 | :style="{ | |
| 58 | color: property.button.color, | |
| 59 | background: property.button.bgColor | |
| 60 | }" | |
| 61 | > | |
| 62 | 立即领取 | |
| 63 | </div> | |
| 64 | </div> | |
| 65 | </div> | |
| 66 | <!-- 布局3：3列--> | |
| 67 | <div v-else class="flex flex-col items-center justify-around gap-4px p-4px"> | |
| 68 | <!-- 优惠值 --> | |
| 69 | <CouponDiscount :coupon="coupon" /> | |
| 70 | <div>{{ coupon.name }}</div> | |
| 71 | <div | |
| 72 | class="rounded-20px p-x-8px p-y-2px" | |
| 73 | :style="{ | |
| 74 | color: property.button.color, | |
| 75 | background: property.button.bgColor | |
| 76 | }" | |
| 77 | > | |
| 78 | 立即领取 | |
| 79 | </div> | |
| 80 | </div> | |
| 81 | </div> | |
| 82 | </div> | |
| 83 | </el-scrollbar> | |
| 84 | </template> | |
| 85 | <script setup lang="ts"> | |
| 86 | import { CouponCardProperty } from './config' | |
| 87 | import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate' | |
| 88 | import { CouponDiscount } from './component' | |
| 89 | import { | |
| 90 | CouponDiscountDesc, | |
| 91 | CouponValidTerm | |
| 92 | } from '@/components/DiyEditor/components/mobile/CouponCard/component' | |
| 93 | ||
| 94 | /** 商品卡片 */ | |
| 95 | defineOptions({ name: 'CouponCard' }) | |
| 96 | // 定义属性 | |
| 97 | const props = defineProps<{ property: CouponCardProperty }>() | |
| 98 | // 商品列表 | |
| 99 | const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([]) | |
| 100 | watch( | |
| 101 | () => props.property.couponIds, | |
| 102 | async () => { | |
| 103 | if (props.property.couponIds?.length > 0) { | |
| 104 | couponList.value = await CouponTemplateApi.getCouponTemplateList(props.property.couponIds) | |
| 105 | } | |
| 106 | }, | |
| 107 | { | |
| 108 | immediate: true, | |
| 109 | deep: true | |
| 110 | } | |
| 111 | ) | |
| 112 | ||
| 113 | // 手机宽度 | |
| 114 | const phoneWidth = ref(375) | |
| 115 | // 容器 | |
| 116 | const containerRef = ref() | |
| 117 | // 滚动条宽度 | |
| 118 | const scrollbarWidth = ref('100%') | |
| 119 | // 优惠券的宽度 | |
| 120 | const couponWidth = ref(375) | |
| 121 | // 计算布局参数 | |
| 122 | watch( | |
| 123 | () => [props.property, phoneWidth, couponList.value.length], | |
| 124 | () => { | |
| 125 | // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数 | |
| 126 | couponWidth.value = | |
| 127 | (phoneWidth.value * 0.95 - props.property.space * (props.property.columns - 1)) / | |
| 128 | props.property.columns | |
| 129 | // 显示滚动条 | |
| 130 | scrollbarWidth.value = `${ | |
| 131 | couponWidth.value * couponList.value.length + | |
| 132 | props.property.space * (couponList.value.length - 1) | |
| 133 | }px` | |
| 134 | }, | |
| 135 | { immediate: true, deep: true } | |
| 136 | ) | |
| 137 | onMounted(() => { | |
| 138 | // 提取手机宽度 | |
| 139 | phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375 | |
| 140 | }) | |
| 141 | </script> | |
| 142 | <style scoped lang="scss"></style> | |
