| 提交 | 用户 | 时间 | ||
| 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 | <SpuShowcase v-model="formData.spuIds" /> | |
| 6 | </el-card> | |
| 7 | <el-card header="商品样式" class="property-group" shadow="never"> | |
| 8 | <el-form-item label="布局" prop="type"> | |
| 9 | <el-radio-group v-model="formData.layoutType"> | |
| 10 | <el-tooltip class="item" content="双列" placement="bottom"> | |
| 9259c2 | 11 | <el-radio-button value="twoCol"> |
| 820397 | 12 | <Icon icon="fluent:text-column-two-24-filled" /> |
| H | 13 | </el-radio-button> |
| 14 | </el-tooltip> | |
| 15 | <el-tooltip class="item" content="三列" placement="bottom"> | |
| 9259c2 | 16 | <el-radio-button value="threeCol"> |
| 820397 | 17 | <Icon icon="fluent:text-column-three-24-filled" /> |
| H | 18 | </el-radio-button> |
| 19 | </el-tooltip> | |
| 20 | <el-tooltip class="item" content="水平滑动" placement="bottom"> | |
| 9259c2 | 21 | <el-radio-button value="horizSwiper"> |
| 820397 | 22 | <Icon icon="system-uicons:carousel" /> |
| H | 23 | </el-radio-button> |
| 24 | </el-tooltip> | |
| 25 | </el-radio-group> | |
| 26 | </el-form-item> | |
| 27 | <el-form-item label="商品名称" prop="fields.name.show"> | |
| 28 | <div class="flex gap-8px"> | |
| 29 | <ColorInput v-model="formData.fields.name.color" /> | |
| 30 | <el-checkbox v-model="formData.fields.name.show" /> | |
| 31 | </div> | |
| 32 | </el-form-item> | |
| 33 | <el-form-item label="商品价格" prop="fields.price.show"> | |
| 34 | <div class="flex gap-8px"> | |
| 35 | <ColorInput v-model="formData.fields.price.color" /> | |
| 36 | <el-checkbox v-model="formData.fields.price.show" /> | |
| 37 | </div> | |
| 38 | </el-form-item> | |
| 39 | </el-card> | |
| 40 | <el-card header="角标" class="property-group" shadow="never"> | |
| 41 | <el-form-item label="角标" prop="badge.show"> | |
| 42 | <el-switch v-model="formData.badge.show" /> | |
| 43 | </el-form-item> | |
| 44 | <el-form-item label="角标" prop="badge.imgUrl" v-if="formData.badge.show"> | |
| 45 | <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px"> | |
| 46 | <template #tip> 建议尺寸：36 * 22 </template> | |
| 47 | </UploadImg> | |
| 48 | </el-form-item> | |
| 49 | </el-card> | |
| 50 | <el-card header="商品样式" class="property-group" shadow="never"> | |
| 51 | <el-form-item label="上圆角" prop="borderRadiusTop"> | |
| 52 | <el-slider | |
| 53 | v-model="formData.borderRadiusTop" | |
| 54 | :max="100" | |
| 55 | :min="0" | |
| 56 | show-input | |
| 57 | input-size="small" | |
| 58 | :show-input-controls="false" | |
| 59 | /> | |
| 60 | </el-form-item> | |
| 61 | <el-form-item label="下圆角" prop="borderRadiusBottom"> | |
| 62 | <el-slider | |
| 63 | v-model="formData.borderRadiusBottom" | |
| 64 | :max="100" | |
| 65 | :min="0" | |
| 66 | show-input | |
| 67 | input-size="small" | |
| 68 | :show-input-controls="false" | |
| 69 | /> | |
| 70 | </el-form-item> | |
| 71 | <el-form-item label="间隔" prop="space"> | |
| 72 | <el-slider | |
| 73 | v-model="formData.space" | |
| 74 | :max="100" | |
| 75 | :min="0" | |
| 76 | show-input | |
| 77 | input-size="small" | |
| 78 | :show-input-controls="false" | |
| 79 | /> | |
| 80 | </el-form-item> | |
| 81 | </el-card> | |
| 82 | </el-form> | |
| 83 | </ComponentContainerProperty> | |
| 84 | </template> | |
| 85 | ||
| 86 | <script setup lang="ts"> | |
| 87 | import { ProductListProperty } from './config' | |
| 88 | import { usePropertyForm } from '@/components/DiyEditor/util' | |
| 89 | import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue' | |
| 90 | ||
| 91 | // 商品栏属性面板 | |
| 92 | defineOptions({ name: 'ProductListProperty' }) | |
| 93 | ||
| 94 | const props = defineProps<{ modelValue: ProductListProperty }>() | |
| 95 | const emit = defineEmits(['update:modelValue']) | |
| 96 | const { formData } = usePropertyForm(props.modelValue, emit) | |
| 97 | </script> | |
| 98 | ||
| 99 | <style scoped lang="scss"></style> | |
