shasteel-ui.git

houzhongjian

2024-10-09 314507f8ddadd9c66e98d260c3b2a5dad1a04015

提交 \| 用户 \| 时间
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	<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">
	11	<el-radio-button label="oneColBigImg">
	12	<Icon icon="fluent:text-column-one-24-filled" />
	13	</el-radio-button>
	14	</el-tooltip>
	15	<el-tooltip class="item" content="单列小图" placement="bottom">
	16	<el-radio-button label="oneColSmallImg">
	17	<Icon icon="fluent:text-column-two-left-24-filled" />
	18	</el-radio-button>
	19	</el-tooltip>
	20	<el-tooltip class="item" content="双列" placement="bottom">
	21	<el-radio-button label="twoCol">
	22	<Icon icon="fluent:text-column-two-24-filled" />
	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.introduction.show">
	34	<div class="flex gap-8px">
	35	<ColorInput v-model="formData.fields.introduction.color" />
	36	<el-checkbox v-model="formData.fields.introduction.show" />
	37	</div>
	38	</el-form-item>
	39	<el-form-item label="商品价格" prop="fields.price.show">
	40	<div class="flex gap-8px">
	41	<ColorInput v-model="formData.fields.price.color" />
	42	<el-checkbox v-model="formData.fields.price.show" />
	43	</div>
	44	</el-form-item>
	45	<el-form-item label="市场价" prop="fields.marketPrice.show">
	46	<div class="flex gap-8px">
	47	<ColorInput v-model="formData.fields.marketPrice.color" />
	48	<el-checkbox v-model="formData.fields.marketPrice.show" />
	49	</div>
	50	</el-form-item>
	51	<el-form-item label="商品销量" prop="fields.salesCount.show">
	52	<div class="flex gap-8px">
	53	<ColorInput v-model="formData.fields.salesCount.color" />
	54	<el-checkbox v-model="formData.fields.salesCount.show" />
	55	</div>
	56	</el-form-item>
	57	<el-form-item label="商品库存" prop="fields.stock.show">
	58	<div class="flex gap-8px">
	59	<ColorInput v-model="formData.fields.stock.color" />
	60	<el-checkbox v-model="formData.fields.stock.show" />
	61	</div>
	62	</el-form-item>
	63	</el-card>
	64	<el-card header="角标" class="property-group" shadow="never">
	65	<el-form-item label="角标" prop="badge.show">
	66	<el-switch v-model="formData.badge.show" />
	67	</el-form-item>
	68	<el-form-item label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
	69	<UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
	70	<template #tip> 建议尺寸：36 * 22 </template>
	71	</UploadImg>
	72	</el-form-item>
	73	</el-card>
	74	<el-card header="按钮" class="property-group" shadow="never">
	75	<el-form-item label="按钮类型" prop="btnBuy.type">
	76	<el-radio-group v-model="formData.btnBuy.type">
	77	<el-radio-button label="text">文字</el-radio-button>
	78	<el-radio-button label="img">图片</el-radio-button>
	79	</el-radio-group>
	80	</el-form-item>
	81	<template v-if="formData.btnBuy.type === 'text'">
	82	<el-form-item label="按钮文字" prop="btnBuy.text">
	83	<el-input v-model="formData.btnBuy.text" />
	84	</el-form-item>
	85	<el-form-item label="左侧背景" prop="btnBuy.bgBeginColor">
	86	<ColorInput v-model="formData.btnBuy.bgBeginColor" />
	87	</el-form-item>
	88	<el-form-item label="右侧背景" prop="btnBuy.bgEndColor">
	89	<ColorInput v-model="formData.btnBuy.bgEndColor" />
	90	</el-form-item>
	91	</template>
	92	<template v-else>
	93	<el-form-item label="图片" prop="btnBuy.imgUrl">
	94	<UploadImg v-model="formData.btnBuy.imgUrl" height="56px" width="56px">
	95	<template #tip> 建议尺寸：56 * 56 </template>
	96	</UploadImg>
	97	</el-form-item>
	98	</template>
	99	</el-card>
	100	<el-card header="商品样式" class="property-group" shadow="never">
	101	<el-form-item label="上圆角" prop="borderRadiusTop">
	102	<el-slider
	103	v-model="formData.borderRadiusTop"
	104	:max="100"
	105	:min="0"
	106	show-input
	107	input-size="small"
	108	:show-input-controls="false"
	109	/>
	110	</el-form-item>
	111	<el-form-item label="下圆角" prop="borderRadiusBottom">
	112	<el-slider
	113	v-model="formData.borderRadiusBottom"
	114	:max="100"
	115	:min="0"
	116	show-input
	117	input-size="small"
	118	:show-input-controls="false"
	119	/>
	120	</el-form-item>
	121	<el-form-item label="间隔" prop="space">
	122	<el-slider
	123	v-model="formData.space"
	124	:max="100"
	125	:min="0"
	126	show-input
	127	input-size="small"
	128	:show-input-controls="false"
	129	/>
	130	</el-form-item>
	131	</el-card>
	132	</el-form>
	133	</ComponentContainerProperty>
	134	</template>
	135
	136	<script setup lang="ts">
	137	import { ProductCardProperty } from './config'
	138	import { usePropertyForm } from '@/components/DiyEditor/util'
	139	import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
	140
	141	// 商品卡片属性面板
	142	defineOptions({ name: 'ProductCardProperty' })
	143
	144	const props = defineProps<{ modelValue: ProductCardProperty }>()
	145	const emit = defineEmits(['update:modelValue'])
	146	const { formData } = usePropertyForm(props.modelValue, emit)
	147	</script>
	148
	149	<style scoped lang="scss"></style>