| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <ComponentContainerProperty v-model="formData.style"> |
| 3 | <el-form label-width="80px" :model="formData"> | |
| 4 | <el-card header="优惠券列表" class="property-group" shadow="never"> | |
| 5 | <div | |
| 6 | v-for="(coupon, index) in couponList" | |
| 7 | :key="index" | |
| 8 | class="flex items-center justify-between" | |
| 9 | > | |
| 10 | <el-text size="large" truncated>{{ coupon.name }}</el-text> | |
| 11 | <el-text type="info" truncated> | |
| 12 | <span v-if="coupon.usePrice > 0">满{{ floatToFixed2(coupon.usePrice) }}元，</span> | |
| 13 | <span v-if="coupon.discountType === PromotionDiscountTypeEnum.PRICE.type"> | |
| 14 | 减{{ floatToFixed2(coupon.discountPrice) }}元 | |
| 15 | </span> | |
| 16 | <span v-else> 打{{ coupon.discountPercent }}折 </span> | |
| 17 | </el-text> | |
| 18 | </div> | |
| 19 | <el-form-item label-width="0"> | |
| 20 | <el-button @click="handleAddCoupon" type="primary" plain class="m-t-8px w-full"> | |
| 21 | <Icon icon="ep:plus" class="mr-5px" /> 添加 | |
| 22 | </el-button> | |
| 23 | </el-form-item> | |
| 24 | </el-card> | |
| 25 | <el-card header="优惠券样式" class="property-group" shadow="never"> | |
| 26 | <el-form-item label="列数" prop="type"> | |
| 27 | <el-radio-group v-model="formData.columns"> | |
| 28 | <el-tooltip class="item" content="一列" placement="bottom"> | |
| 9259c2 | 29 | <el-radio-button :value="1"> |
| 820397 | 30 | <Icon icon="fluent:text-column-one-24-filled" /> |
| H | 31 | </el-radio-button> |
| 32 | </el-tooltip> | |
| 33 | <el-tooltip class="item" content="二列" placement="bottom"> | |
| 9259c2 | 34 | <el-radio-button :value="2"> |
| 820397 | 35 | <Icon icon="fluent:text-column-two-24-filled" /> |
| H | 36 | </el-radio-button> |
| 37 | </el-tooltip> | |
| 38 | <el-tooltip class="item" content="三列" placement="bottom"> | |
| 9259c2 | 39 | <el-radio-button :value="3"> |
| 820397 | 40 | <Icon icon="fluent:text-column-three-24-filled" /> |
| H | 41 | </el-radio-button> |
| 42 | </el-tooltip> | |
| 43 | </el-radio-group> | |
| 44 | </el-form-item> | |
| 45 | <el-form-item label="背景图片" prop="bgImg"> | |
| 46 | <UploadImg v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" /> | |
| 47 | </el-form-item> | |
| 48 | <el-form-item label="文字颜色" prop="textColor"> | |
| 49 | <ColorInput v-model="formData.textColor" /> | |
| 50 | </el-form-item> | |
| 51 | <el-form-item label="按钮背景" prop="button.bgColor"> | |
| 52 | <ColorInput v-model="formData.button.bgColor" /> | |
| 53 | </el-form-item> | |
| 54 | <el-form-item label="按钮文字" prop="button.color"> | |
| 55 | <ColorInput v-model="formData.button.color" /> | |
| 56 | </el-form-item> | |
| 57 | <el-form-item label="间隔" prop="space"> | |
| 58 | <el-slider | |
| 59 | v-model="formData.space" | |
| 60 | :max="100" | |
| 61 | :min="0" | |
| 62 | show-input | |
| 63 | input-size="small" | |
| 64 | :show-input-controls="false" | |
| 65 | /> | |
| 66 | </el-form-item> | |
| 67 | </el-card> | |
| 68 | </el-form> | |
| 69 | </ComponentContainerProperty> | |
| 70 | <!-- 优惠券选择 --> | |
| 71 | <CouponSelect ref="couponSelectDialog" v-model:multiple-selection="couponList" /> | |
| 72 | </template> | |
| 73 | ||
| 74 | <script setup lang="ts"> | |
| 75 | import { CouponCardProperty } from './config' | |
| 76 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 77 | import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate' | |
| 78 | import { floatToFixed2 } from '@/utils' | |
| 79 | import { PromotionDiscountTypeEnum } from '@/utils/constants' | |
| 80 | import CouponSelect from '@/views/mall/promotion/coupon/components/CouponSelect.vue' | |
| 81 | ||
| 82 | // 优惠券卡片属性面板 | |
| 83 | defineOptions({ name: 'CouponCardProperty' }) | |
| 84 | ||
| 85 | const props = defineProps<{ modelValue: CouponCardProperty }>() | |
| 86 | const emit = defineEmits(['update:modelValue']) | |
| 87 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 88 | ||
| 89 | // 优惠券列表 | |
| 90 | const couponList = ref<CouponTemplateApi.CouponTemplateVO[]>([]) | |
| 91 | const couponSelectDialog = ref() | |
| 92 | // 添加优惠券 | |
| 93 | const handleAddCoupon = () => { | |
| 94 | couponSelectDialog.value.open() | |
| 95 | } | |
| 96 | watch( | |
| 97 | () => couponList.value, | |
| 98 | () => { | |
| 99 | formData.value.couponIds = couponList.value.map((coupon) => coupon.id) | |
| 100 | } | |
| 101 | ) | |
| 102 | </script> | |
| 103 | ||
| 104 | <style scoped lang="scss"></style> | |
