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/property.vue | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/CouponCard/property.vue b/src/components/DiyEditor/components/mobile/CouponCard/property.vue
new file mode 100644
index 0000000..604afe9
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/CouponCard/property.vue
@@ -0,0 +1,119 @@
+<template>
+ <ComponentContainerProperty v-model="formData.style">
+ <el-form label-width="80px" :model="formData">
+ <el-card header="浼樻儬鍒稿垪琛�" class="property-group" shadow="never">
+ <div
+ v-for="(coupon, index) in couponList"
+ :key="index"
+ class="flex items-center justify-between"
+ >
+ <el-text size="large" truncated>{{ coupon.name }}</el-text>
+ <el-text type="info" truncated>
+ <span v-if="coupon.usePrice > 0">婊{ floatToFixed2(coupon.usePrice) }}鍏冿紝</span>
+ <span v-if="coupon.discountType === PromotionDiscountTypeEnum.PRICE.type">
+ 鍑弡{ floatToFixed2(coupon.discountPrice) }}鍏�
+ </span>
+ <span v-else> 鎵搟{ coupon.discountPercent }}鎶� </span>
+ </el-text>
+ </div>
+ <el-form-item label-width="0">
+ <el-button @click="handleAddCoupon" type="primary" plain class="m-t-8px w-full">
+ <Icon icon="ep:plus" class="mr-5px" /> 娣诲姞
+ </el-button>
+ </el-form-item>
+ </el-card>
+ <el-card header="浼樻儬鍒告牱寮�" class="property-group" shadow="never">
+ <el-form-item label="鍒楁暟" prop="type">
+ <el-radio-group v-model="formData.columns">
+ <el-tooltip class="item" content="涓�鍒�" placement="bottom">
+ <el-radio-button :value="1">
+ <Icon icon="fluent:text-column-one-24-filled" />
+ </el-radio-button>
+ </el-tooltip>
+ <el-tooltip class="item" content="浜屽垪" placement="bottom">
+ <el-radio-button :value="2">
+ <Icon icon="fluent:text-column-two-24-filled" />
+ </el-radio-button>
+ </el-tooltip>
+ <el-tooltip class="item" content="涓夊垪" placement="bottom">
+ <el-radio-button :value="3">
+ <Icon icon="fluent:text-column-three-24-filled" />
+ </el-radio-button>
+ </el-tooltip>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="鑳屾櫙鍥剧墖" prop="bgImg">
+ <UploadImg v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" />
+ </el-form-item>
+ <el-form-item label="鏂囧瓧棰滆壊" prop="textColor">
+ <ColorInput v-model="formData.textColor" />
+ </el-form-item>
+ <el-form-item label="鎸夐挳鑳屾櫙" prop="button.bgColor">
+ <ColorInput v-model="formData.button.bgColor" />
+ </el-form-item>
+ <el-form-item label="鎸夐挳鏂囧瓧" prop="button.color">
+ <ColorInput v-model="formData.button.color" />
+ </el-form-item>
+ <el-form-item label="闂撮殧" prop="space">
+ <el-slider
+ v-model="formData.space"
+ :max="100"
+ :min="0"
+ show-input
+ input-size="small"
+ :show-input-controls="false"
+ />
+ </el-form-item>
+ </el-card>
+ </el-form>
+ </ComponentContainerProperty>
+ <!-- 浼樻儬鍒搁�夋嫨 -->
+ <CouponSelect
+ ref="couponSelectDialog"
+ v-model:multiple-selection="couponList"
+ :take-type="CouponTemplateTakeTypeEnum.USER.type"
+ @change="handleCouponSelect"
+ />
+</template>
+
+<script setup lang="ts">
+import { CouponCardProperty } from './config'
+import { useVModel } from '@vueuse/core'
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import { floatToFixed2 } from '@/utils'
+import { CouponTemplateTakeTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
+import CouponSelect from '@/views/mall/promotion/coupon/components/CouponSelect.vue'
+
+// 浼樻儬鍒稿崱鐗囧睘鎬ч潰鏉�
+defineOptions({ name: 'CouponCardProperty' })
+
+const props = defineProps<{ modelValue: CouponCardProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 浼樻儬鍒稿垪琛�
+const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([])
+const couponSelectDialog = ref()
+// 娣诲姞浼樻儬鍒�
+const handleAddCoupon = () => {
+ couponSelectDialog.value.open()
+}
+const handleCouponSelect = () => {
+ formData.value.couponIds = couponList.value.map((coupon) => coupon.id)
+}
+
+watch(
+ () => formData.value.couponIds,
+ async () => {
+ if (formData.value.couponIds?.length > 0) {
+ couponList.value = await CouponTemplateApi.getCouponTemplateList(formData.value.couponIds)
+ }
+ },
+ {
+ immediate: true,
+ deep: true
+ }
+)
+</script>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0