From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/mobile/CouponCard/index.vue | 149 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 149 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/CouponCard/index.vue b/src/components/DiyEditor/components/mobile/CouponCard/index.vue
new file mode 100644
index 0000000..48d01c5
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/CouponCard/index.vue
@@ -0,0 +1,149 @@
+<template>
+ <el-scrollbar class="z-1 min-h-30px" wrap-class="w-full" ref="containerRef">
+ <div
+ class="flex flex-row text-12px"
+ :style="{
+ gap: `${property.space}px`,
+ width: scrollbarWidth
+ }"
+ >
+ <div
+ class="box-content"
+ :style="{
+ background: property.bgImg
+ ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
+ : '#fff',
+ width: `${couponWidth}px`,
+ color: property.textColor
+ }"
+ v-for="(coupon, index) in couponList"
+ :key="index"
+ >
+ <!-- 甯冨眬1锛�1鍒�-->
+ <div v-if="property.columns === 1" class="m-l-16px flex flex-row justify-between p-8px">
+ <div class="flex flex-col justify-evenly gap-4px">
+ <!-- 浼樻儬鍊� -->
+ <CouponDiscount :coupon="coupon" />
+ <!-- 浼樻儬鎻忚堪 -->
+ <CouponDiscountDesc :coupon="coupon" />
+ <!-- 鏈夋晥鏈� -->
+ <CouponValidTerm :coupon="coupon" />
+ </div>
+ <div class="flex flex-col justify-evenly">
+ <div
+ class="rounded-20px p-x-8px p-y-2px"
+ :style="{
+ color: property.button.color,
+ background: property.button.bgColor
+ }"
+ >
+ 绔嬪嵆棰嗗彇
+ </div>
+ </div>
+ </div>
+ <!-- 甯冨眬2锛�2鍒�-->
+ <div
+ v-else-if="property.columns === 2"
+ class="m-l-16px flex flex-row justify-between p-8px"
+ >
+ <div class="flex flex-col justify-evenly gap-4px">
+ <!-- 浼樻儬鍊� -->
+ <CouponDiscount :coupon="coupon" />
+ <!-- 浼樻儬鎻忚堪 -->
+ <CouponDiscountDesc :coupon="coupon" />
+ <!-- 棰嗗彇璇存槑 -->
+ <div v-if="coupon.totalCount >= 0">
+ 浠呭墿锛歿{ coupon.totalCount - coupon.takeCount }}寮�
+ </div>
+ <div v-else-if="coupon.totalCount === -1">浠呭墿锛氫笉闄愬埗</div>
+ </div>
+ <div class="flex flex-col">
+ <div
+ class="h-full w-20px rounded-20px p-x-2px p-y-8px text-center"
+ :style="{
+ color: property.button.color,
+ background: property.button.bgColor
+ }"
+ >
+ 绔嬪嵆棰嗗彇
+ </div>
+ </div>
+ </div>
+ <!-- 甯冨眬3锛�3鍒�-->
+ <div v-else class="flex flex-col items-center justify-around gap-4px p-4px">
+ <!-- 浼樻儬鍊� -->
+ <CouponDiscount :coupon="coupon" />
+ <!-- 浼樻儬鎻忚堪 -->
+ <CouponDiscountDesc :coupon="coupon" />
+ <div
+ class="rounded-20px p-x-8px p-y-2px"
+ :style="{
+ color: property.button.color,
+ background: property.button.bgColor
+ }"
+ >
+ 绔嬪嵆棰嗗彇
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-scrollbar>
+</template>
+<script setup lang="ts">
+import { CouponCardProperty } from './config'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { CouponDiscount } from './component'
+import {
+ CouponDiscountDesc,
+ CouponValidTerm
+} from '@/components/DiyEditor/components/mobile/CouponCard/component'
+
+/** 鍟嗗搧鍗＄墖 */
+defineOptions({ name: 'CouponCard' })
+// 瀹氫箟灞炴��
+const props = defineProps<{ property: CouponCardProperty }>()
+// 鍟嗗搧鍒楄〃
+const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
+watch(
+ () => props.property.couponIds,
+ async () => {
+ if (props.property.couponIds?.length > 0) {
+ couponList.value = await CouponTemplateApi.getCouponTemplateList(props.property.couponIds)
+ }
+ },
+ {
+ immediate: true,
+ deep: true
+ }
+)
+
+// 鎵嬫満瀹藉害
+const phoneWidth = ref(375)
+// 瀹瑰櫒
+const containerRef = ref()
+// 婊氬姩鏉″搴�
+const scrollbarWidth = ref('100%')
+// 浼樻儬鍒哥殑瀹藉害
+const couponWidth = ref(375)
+// 璁＄畻甯冨眬鍙傛暟
+watch(
+ () => [props.property, phoneWidth, couponList.value.length],
+ () => {
+ // 姣忓垪鐨勫搴︿负锛氾紙鎬诲搴� - 闂磋窛 * (鍒楁暟 - 1)锛�/ 鍒楁暟
+ couponWidth.value =
+ (phoneWidth.value - props.property.space * (props.property.columns - 1)) /
+ props.property.columns
+ // 鏄剧ず婊氬姩鏉�
+ scrollbarWidth.value = `${
+ couponWidth.value * couponList.value.length +
+ props.property.space * (couponList.value.length - 1)
+ }px`
+ },
+ { immediate: true, deep: true }
+)
+onMounted(() => {
+ // 鎻愬彇鎵嬫満瀹藉害
+ phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375
+})
+</script>
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0