157 lines
5.2 KiB
Vue
157 lines
5.2 KiB
Vue
<template>
|
|
<!-- 添加商品图片-->
|
|
<div style="height: auto;margin-bottom: 10px;width: 480px;">
|
|
<div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div>
|
|
<el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
|
|
<el-icon><Plus /></el-icon>
|
|
|
|
<template #file="{ file }">
|
|
<div>
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
<span class="el-upload-list__item-actions">
|
|
<span
|
|
class="el-upload-list__item-preview"
|
|
@click="handlePictureCardPreview(file)"
|
|
>
|
|
<el-icon><zoom-in /></el-icon>
|
|
</span>
|
|
<span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleRemove(file)"
|
|
>
|
|
<el-icon><Delete /></el-icon>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
<!-- 添加图文描述-->
|
|
<div style="margin-bottom: 10px;">
|
|
<div style="font-size: 20px;margin-bottom: 10px">添加图文描述</div>
|
|
<el-upload action="#" v-model:file-list="uploadedDescription" list-type="picture-card" :auto-upload="false" multiple="true">
|
|
<el-icon><Plus /></el-icon>
|
|
|
|
<template #file="{ file }">
|
|
<div>
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
|
<span class="el-upload-list__item-actions">
|
|
<span
|
|
class="el-upload-list__item-preview"
|
|
@click="handlePictureCardPreview(file)"
|
|
>
|
|
<el-icon><zoom-in /></el-icon>
|
|
</span>
|
|
<span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="descriptionRemove(file)"
|
|
>
|
|
<el-icon><Delete /></el-icon>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
|
|
<el-dialog v-model="dialogVisible">
|
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<el-dialog v-model="dialogVisible">
|
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 表单-->
|
|
<div style="position: absolute;right: 20px;top: 100px;max-width: 50%" >
|
|
<el-form :model="form" label-width="auto" style="width: 750px" size="large">
|
|
<el-form-item label="产品名称">
|
|
<el-input v-model="form.name" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="产品价格">
|
|
<el-input v-model="form.price" />
|
|
</el-form-item>
|
|
<el-form-item label="产品">
|
|
<el-input v-model="form.quantity" />
|
|
</el-form-item>
|
|
<el-form-item label="是否为限定类产品" >
|
|
<el-select v-model="form.region" placeholder="否">
|
|
<el-option label="是" value="ture" />
|
|
<el-option label="否" value="false" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.region=='ture' " label="节日名称">
|
|
<el-input v-model="form.festivalName" />
|
|
</el-form-item>
|
|
<el-form-item label="产品类型" >
|
|
<el-radio-group v-model="form.resource" >
|
|
<el-radio value="1">材料包</el-radio>
|
|
<el-radio value="2">手持物</el-radio>
|
|
<el-radio value="3">头饰</el-radio>
|
|
<el-radio value="4">定制</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="商品标签">
|
|
<el-input v-model="form.label" type="textarea" placeholder=""/>
|
|
</el-form-item>
|
|
<el-form-item label="详情描述">
|
|
<el-input v-model="form.desc" type="textarea" placeholder="产品尺寸，服务等"/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">上架</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref,reactive,onMounted } from 'vue';
|
|
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
|
|
import type { UploadFile } from 'element-plus';
|
|
import myAxios from "@/api/myAxios";
|
|
|
|
const dialogImageUrl = ref('');
|
|
const dialogVisible = ref(false);
|
|
const disabled = ref(false);
|
|
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
|
|
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
|
|
const handleRemove = (file: UploadFile) => {
|
|
uploadedFiles.value = uploadedFiles.value.filter((f) => f.uid !== file.uid);
|
|
};
|
|
const descriptionRemove = (file: UploadFile) => {
|
|
uploadedDescription.value = uploadedDescription.value.filter((f) => f.uid !== file.uid);
|
|
}
|
|
const handlePictureCardPreview = (file: UploadFile) => {
|
|
dialogImageUrl.value = file.url!;
|
|
dialogVisible.value = true;
|
|
};
|
|
const form = reactive({
|
|
name:'',
|
|
price:'',
|
|
quantity:'',//产品数量
|
|
region:'',//是否为限定
|
|
festivalName:'',//节日名称
|
|
resource:'',//类型
|
|
label:[],//商品标签
|
|
desc:'',//详情描述
|
|
})
|
|
// onMounted(() => {
|
|
// getProductInformation()
|
|
// })
|
|
// const getProductInformation = async () => {
|
|
// const res: any = await myAxios.get('')
|
|
// console.log(res)
|
|
// if (res.code === 1 && res.data) {
|
|
//
|
|
//
|
|
// } else {
|
|
// message.error(`获取数据失败：${res.message}`);
|
|
// backPage()
|
|
// }
|
|
// }
|
|
const onSubmit = () => {
|
|
console.log('submit!')
|
|
}
|
|
</script> |