135 lines
3.7 KiB
Vue
135 lines
3.7 KiB
Vue
<template>
|
|
<el-form ref="resetFormData" :model="form" label-width="auto" style="width: 750px" size="large">
|
|
<el-form-item label="添加优惠券图片">
|
|
<el-upload
|
|
action="#"
|
|
list-type="picture-card"
|
|
:auto-upload="false"
|
|
multiple="true"
|
|
:on-remove="handleRemove"
|
|
@change="(event: any) => handleChange(event, 0)"
|
|
limit="1" >
|
|
<el-icon>
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
|
<el-form-item label="优惠券名称">
|
|
<el-input v-model="form.name" />
|
|
</el-form-item>
|
|
<el-form-item label="兑换积分">
|
|
<el-input v-model="form.requirePoints" />
|
|
</el-form-item>
|
|
<el-form-item label="满减金额">
|
|
<el-input v-model="form.conditionAmount" />
|
|
</el-form-item>
|
|
<el-form-item label="发放数量">
|
|
<el-input v-model="form.totalNum" />
|
|
</el-form-item>
|
|
<el-form-item label="限量领取">
|
|
<el-input v-model="form.limitNum" />
|
|
</el-form-item>
|
|
<el-form-item label="使用范围">
|
|
<el-input v-model="form.useScope" />
|
|
</el-form-item>
|
|
<el-form-item label="开始日期">
|
|
<el-date-picker
|
|
v-model="form.startTime"
|
|
type="datetime"
|
|
placeholder="Pick a Date"
|
|
format="YYYY-MM-DD hh:mm:ss"
|
|
value-format="YYYY-MM-DD hh:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="截至日期">
|
|
<el-date-picker
|
|
v-model="form.endTime"
|
|
type="datetime"
|
|
placeholder="Pick a Date"
|
|
format="YYYY-MM-DD hh:mm:ss"
|
|
value-format="YYYY-MM-DD hh:mm:ss"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="使用说明">
|
|
<el-input v-model="form.description" type="textarea" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="AddCoupon">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref,onMounted} from 'vue'
|
|
import {Plus} from "@element-plus/icons-vue";
|
|
import {ElMessage, type UploadProps} from "element-plus";
|
|
import myAxios from "@/api/myAxios";
|
|
|
|
|
|
const fileSimple = ref()
|
|
const form = ref({
|
|
name: '',
|
|
conditionAmount:0,//满减金额
|
|
totalNum:0,
|
|
requirePoints:0,//兑换积分
|
|
residueNum:0,//剩余数量
|
|
limitNum:0,//限量领取
|
|
useScope:'',//使用范围
|
|
startTime: '',
|
|
endTime: '',
|
|
description:'',//使用说明
|
|
image:''
|
|
})
|
|
onMounted(() => {
|
|
|
|
})
|
|
const AddCoupon = async () => {
|
|
const values = Object.values(form.value);
|
|
if (values.some(value => value === null || value === undefined || value === '')) {
|
|
ElMessage({
|
|
type: 'warning',
|
|
message: '请检查表单数据是否完整填写'
|
|
});
|
|
return;
|
|
}
|
|
const res = await myAxios.post('/coupon/add ', {...form.value });
|
|
if (res.data.code === 1) {
|
|
ElMessage({
|
|
type: 'success',
|
|
message: "提交成功"
|
|
});
|
|
} else {
|
|
ElMessage.error("服务错误");
|
|
}
|
|
console.log(form.value.startTime)
|
|
}
|
|
|
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
|
console.log(uploadFile, uploadFiles)
|
|
}
|
|
//上传图片
|
|
const handleChange = async (file: any, flag: number) => {
|
|
fileSimple.value = file
|
|
let formData = new FormData()
|
|
formData.append("file", fileSimple.value.raw)
|
|
const res = await myAxios({
|
|
url: '/file/upload/server/not_login',
|
|
method: 'post',
|
|
headers: {
|
|
'content-Type': 'multipart/form-data'
|
|
},
|
|
data: {
|
|
biz: "test",
|
|
file: formData.get("file")
|
|
}
|
|
})
|
|
// console.log(res.data,123213213213)
|
|
if (res.data.code === 1) {
|
|
form.value.image = res.data.data
|
|
}
|
|
|
|
}
|
|
</script>
|