| 提交 | 用户 | 时间 | ||
| 314507 | 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 | <el-form-item label="拼团活动" prop="activityId"> | |
| 6 | <el-select v-model="formData.activityId"> | |
| 7 | <el-option | |
| 8 | v-for="activity in activityList" | |
| 9 | :key="activity.id" | |
| 10 | :label="activity.name" | |
| 11 | :value="activity.id" | |
| 12 | /> | |
| 13 | </el-select> | |
| 14 | </el-form-item> | |
| 15 | </el-card> | |
| 16 | <el-card header="商品样式" class="property-group" shadow="never"> | |
| 17 | <el-form-item label="布局" prop="type"> | |
| 18 | <el-radio-group v-model="formData.layoutType"> | |
| 19 | <el-tooltip class="item" content="单列" placement="bottom"> | |
| 20 | <el-radio-button label="oneCol"> | |
| 21 | <Icon icon="fluent:text-column-one-24-filled" /> | |
| 22 | </el-radio-button> | |
| 23 | </el-tooltip> | |
| 24 | <el-tooltip class="item" content="三列" placement="bottom"> | |
| 25 | <el-radio-button label="threeCol"> | |
| 26 | <Icon icon="fluent:text-column-three-24-filled" /> | |
| 27 | </el-radio-button> | |
| 28 | </el-tooltip> | |
| 29 | </el-radio-group> | |
| 30 | </el-form-item> | |
| 31 | <el-form-item label="商品名称" prop="fields.name.show"> | |
| 32 | <div class="flex gap-8px"> | |
| 33 | <ColorInput v-model="formData.fields.name.color" /> | |
| 34 | <el-checkbox v-model="formData.fields.name.show" /> | |
| 35 | </div> | |
| 36 | </el-form-item> | |
| 37 | <el-form-item label="商品价格" prop="fields.price.show"> | |
| 38 | <div class="flex gap-8px"> | |
| 39 | <ColorInput v-model="formData.fields.price.color" /> | |
| 40 | <el-checkbox v-model="formData.fields.price.show" /> | |
| 41 | </div> | |
| 42 | </el-form-item> | |
| 43 | </el-card> | |
| 44 | <el-card header="角标" class="property-group" shadow="never"> | |
| 45 | <el-form-item label="角标" prop="badge.show"> | |
| 46 | <el-switch v-model="formData.badge.show" /> | |
| 47 | </el-form-item> | |
| 48 | <el-form-item label="角标" prop="badge.imgUrl" v-if="formData.badge.show"> | |
| 49 | <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px"> | |
| 50 | <template #tip> 建议尺寸：36 * 22 </template> | |
| 51 | </UploadImg> | |
| 52 | </el-form-item> | |
| 53 | </el-card> | |
| 54 | <el-card header="商品样式" class="property-group" shadow="never"> | |
| 55 | <el-form-item label="上圆角" prop="borderRadiusTop"> | |
| 56 | <el-slider | |
| 57 | v-model="formData.borderRadiusTop" | |
| 58 | :max="100" | |
| 59 | :min="0" | |
| 60 | show-input | |
| 61 | input-size="small" | |
| 62 | :show-input-controls="false" | |
| 63 | /> | |
| 64 | </el-form-item> | |
| 65 | <el-form-item label="下圆角" prop="borderRadiusBottom"> | |
| 66 | <el-slider | |
| 67 | v-model="formData.borderRadiusBottom" | |
| 68 | :max="100" | |
| 69 | :min="0" | |
| 70 | show-input | |
| 71 | input-size="small" | |
| 72 | :show-input-controls="false" | |
| 73 | /> | |
| 74 | </el-form-item> | |
| 75 | <el-form-item label="间隔" prop="space"> | |
| 76 | <el-slider | |
| 77 | v-model="formData.space" | |
| 78 | :max="100" | |
| 79 | :min="0" | |
| 80 | show-input | |
| 81 | input-size="small" | |
| 82 | :show-input-controls="false" | |
| 83 | /> | |
| 84 | </el-form-item> | |
| 85 | </el-card> | |
| 86 | </el-form> | |
| 87 | </ComponentContainerProperty> | |
| 88 | </template> | |
| 89 | ||
| 90 | <script setup lang="ts"> | |
| 91 | import { PromotionCombinationProperty } from './config' | |
| 92 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 93 | import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity' | |
| 94 | import { CommonStatusEnum } from '@/utils/constants' | |
| 95 | ||
| 96 | // 拼团属性面板 | |
| 97 | defineOptions({ name: 'PromotionCombinationProperty' }) | |
| 98 | ||
| 99 | const props = defineProps<{ modelValue: PromotionCombinationProperty }>() | |
| 100 | const emit = defineEmits(['update:modelValue']) | |
| 101 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 102 | // 活动列表 | |
| 103 | const activityList = ref<CombinationActivityApi.CombinationActivityVO>([]) | |
| 104 | onMounted(async () => { | |
| 105 | const { list } = await CombinationActivityApi.getCombinationActivityPage({ | |
| 106 | status: CommonStatusEnum.ENABLE | |
| 107 | }) | |
| 108 | activityList.value = list | |
| 109 | }) | |
| 110 | </script> | |
| 111 | ||
| 112 | <style scoped lang="scss"></style> | |
