feat: 商品属性

feature/task1.0.0__0514__ch
向文可 3 years ago
parent 31f81aaddb
commit 8e0d8d3645

@ -2,7 +2,25 @@
<div v-loading="loading" class="step-container"> <div v-loading="loading" class="step-container">
<el-scrollbar class="step-content"> <el-scrollbar class="step-content">
<el-form ref="refsForm" label-width="110px" :model="form" :rules="rules"> <el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
<el-form-item label="商品属性" prop="category">设置商品属性</el-form-item> <el-form-item label="商品属性" prop="category">
<div class="flex">
<span class="label">属性规格:</span>
<el-input v-model="skuName">
<template #append>
<el-button @click="handleAddSku"><el-icon name="Check" /></el-button>
</template>
</el-input>
</div>
<div v-for="(sku, i) in form.skus" :key="i" class="flex">
<span class="label">尺码:</span>
<el-tag v-for="(item, j) in sku.values" :key="i + '' + j">{{ item }}</el-tag>
<el-input v-model="skuValue[i]">
<template #append>
<el-button><el-icon name="Check" /></el-button>
</template>
</el-input>
</div>
</el-form-item>
<el-form-item label="商品图片" prop="picture"> <el-form-item label="商品图片" prop="picture">
<el-upload-image v-model="form.picture" config-id="product" :limit="5" /> <el-upload-image v-model="form.picture" config-id="product" :limit="5" />
</el-form-item> </el-form-item>
@ -29,8 +47,11 @@
loading: false, loading: false,
refsForm: null, refsForm: null,
currentTab: 'APP', currentTab: 'APP',
skuName: null,
skuValue: [],
form: { form: {
id: '123', id: '123',
skus: [],
picture: [], picture: [],
desc: null, desc: null,
}, },
@ -48,6 +69,7 @@
} }
}; };
onActivated(handleLoad); onActivated(handleLoad);
const handleAddSku = () => {};
const handleSave = async () => { const handleSave = async () => {
state.loading = true; state.loading = true;
try { try {
@ -69,6 +91,7 @@
...toRefs(state), ...toRefs(state),
opts, opts,
handleSave, handleSave,
handleAddSku,
}; };
}, },
}); });
@ -88,6 +111,10 @@
width: 50%; width: 50%;
} }
} }
.label {
word-break: keep-all;
margin-right: @layout-space;
}
} }
.step-footer { .step-footer {
margin: 10px 0; margin: 10px 0;

Loading…
Cancel
Save