变更
This commit is contained in:
parent
658b79a19e
commit
5021be5ea7
|
|
@ -54,7 +54,7 @@
|
||||||
<span slot="title">类别管理</span>
|
<span slot="title">类别管理</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
<el-sub-menu index="3">
|
<el-sub-menu index="4">
|
||||||
<template #title>
|
<template #title>
|
||||||
<el-icon><HomeFilled /></el-icon>
|
<el-icon><HomeFilled /></el-icon>
|
||||||
<span>优惠券管理</span>
|
<span>优惠券管理</span>
|
||||||
|
|
@ -63,6 +63,10 @@
|
||||||
<el-icon><Menu /></el-icon>
|
<el-icon><Menu /></el-icon>
|
||||||
<span slot="title">添加优惠券</span>
|
<span slot="title">添加优惠券</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/CouponCenter">
|
||||||
|
<el-icon><Menu /></el-icon>
|
||||||
|
<span slot="title">优惠券中心</span>
|
||||||
|
</el-menu-item>
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
|
|
||||||
<el-sub-menu index="3">
|
<el-sub-menu index="3">
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,16 @@ export const routes = [
|
||||||
path: '/OrderList',
|
path: '/OrderList',
|
||||||
name: '订单列表',
|
name: '订单列表',
|
||||||
component: ()=> import("../views/Orders/OrderList.vue")
|
component: ()=> import("../views/Orders/OrderList.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/AddCoupons',
|
||||||
|
name:'添加优惠券',
|
||||||
|
component: ()=> import("../views/Coupons/AddCoupons.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/CouponCenter',
|
||||||
|
name:'优惠券中心',
|
||||||
|
component: ()=> import("../views/Coupons/CouponCenter.vue")
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,135 @@
|
||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<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";
|
||||||
|
|
||||||
</style>
|
|
||||||
|
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 () => {
|
||||||
|
console.log(form)
|
||||||
|
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>
|
||||||
|
|
|
||||||
252
src/views/Coupons/CouponCenter.vue
Normal file
252
src/views/Coupons/CouponCenter.vue
Normal file
|
|
@ -0,0 +1,252 @@
|
||||||
|
<template>
|
||||||
|
<!-- 搜索-->
|
||||||
|
<div>
|
||||||
|
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
|
||||||
|
v-model="Couponsname"></el-input>
|
||||||
|
<el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
|
||||||
|
<el-button type="warning" @click="reset" style="height:25px">重置</el-button>
|
||||||
|
</div>
|
||||||
|
<!-- 批量删除-->
|
||||||
|
<div style="margin: 15px 0">
|
||||||
|
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||||
|
title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
|
||||||
|
<template #reference>
|
||||||
|
<el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
|
||||||
|
<Remove />
|
||||||
|
</el-icon></el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</div>
|
||||||
|
<!-- 数据展示-->
|
||||||
|
<el-table :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||||
|
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||||
|
:header-cell-style="{ 'text-align': 'center' }">
|
||||||
|
<el-table-column type="selection" width="55"></el-table-column>
|
||||||
|
<el-table-column prop="id" label="编号" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="goodImg" label="优惠券图片">
|
||||||
|
<template #default="scope">
|
||||||
|
<div>
|
||||||
|
<img :src="scope.row.image" alt="" style="height: 50px;">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="name" label="优惠券名称"></el-table-column>
|
||||||
|
<el-table-column prop="conditionAmount" label="满减金额" width="180"></el-table-column>
|
||||||
|
<el-table-column prop="totalNum" label="发放数量"></el-table-column>
|
||||||
|
<el-table-column prop="requirePoints" label="兑换积分"></el-table-column>
|
||||||
|
<el-table-column prop="residueNum" label="剩余数量"></el-table-column>
|
||||||
|
<el-table-column prop="limitNum" label="限量领取"></el-table-column>
|
||||||
|
<el-table-column prop="useScope" label="使用范围"></el-table-column>
|
||||||
|
<el-table-column prop="startTime" label="生效时间"></el-table-column>
|
||||||
|
<el-table-column prop="endTime" label="截止时间"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="250px">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
|
||||||
|
详情
|
||||||
|
</el-button>
|
||||||
|
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||||
|
title="是否确认删除" @confirm="deleteCoupons(scope.row.id)" width=180>
|
||||||
|
<template #reference>
|
||||||
|
<el-button class="ml-5" type="danger">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
|
||||||
|
title="您确定删除吗？">
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页-->
|
||||||
|
<div style="padding: 10px 0">
|
||||||
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||||
|
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
||||||
|
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="total" />
|
||||||
|
</div>
|
||||||
|
<!-- 详情，编辑-->
|
||||||
|
<el-dialog v-model="DialogVisible" :title="title">
|
||||||
|
<el-form label-width="100px" :disabled="disabled">
|
||||||
|
<el-form-item label="优惠券编号">
|
||||||
|
<el-input v-model="editForm.id" disabled></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="优惠券图片">
|
||||||
|
<div v-if="editForm.image">
|
||||||
|
<img :src="editForm.image" alt="优惠券图片" class="thumbnail" style="width: 100px; height: 100px;" />
|
||||||
|
</div>
|
||||||
|
<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-item label="优惠券名称">
|
||||||
|
<el-input v-model="editForm.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="满减金额">
|
||||||
|
<el-input v-model="editForm.conditionAmount"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="兑换积分">
|
||||||
|
<el-input v-model="editForm.requirePoints"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="发放数量">
|
||||||
|
<el-input v-model="editForm.totalNum"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="限量领取">
|
||||||
|
<el-input v-model="editForm.limitNum"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用范围">
|
||||||
|
<el-input type="textarea" v-model="editForm.useScope"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="发放时间">
|
||||||
|
<el-input type="textarea" v-model="editForm.startTime"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="截止时间">
|
||||||
|
<el-input type="textarea" v-model="editForm.endTime"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用说明">
|
||||||
|
<el-input type="textarea" v-model="editForm.description"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer >
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
|
||||||
|
<el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {onMounted, ref} from "vue";
|
||||||
|
import myAxios from "@/api/myAxios";
|
||||||
|
import {ElMessage, type UploadProps} from "element-plus";
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getCouponsList()
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleSelectionChange = (row: any) => {
|
||||||
|
id.value = JSON.parse(JSON.stringify(row));
|
||||||
|
}
|
||||||
|
const DialogVisible = ref(false)
|
||||||
|
const total = ref(0)
|
||||||
|
const tableData : any= ref([])
|
||||||
|
const Couponsname = ref('')
|
||||||
|
const title = ref('')
|
||||||
|
const editForm : any = ref({})
|
||||||
|
const fileSimple = ref()
|
||||||
|
const disabled = ref(true)
|
||||||
|
const searchParams: any = ref({ //分页
|
||||||
|
current: 1,
|
||||||
|
pageSize: 5
|
||||||
|
})
|
||||||
|
//删除图片
|
||||||
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||||
|
console.log(uploadFile, uploadFiles)
|
||||||
|
}
|
||||||
|
//处理行数大小变化
|
||||||
|
const handleSizeChange = (newSize: any) => {
|
||||||
|
searchParams.value.pageSize = newSize //新的页面数
|
||||||
|
getCouponsList()
|
||||||
|
}
|
||||||
|
//处理当前表格变化
|
||||||
|
const handleCurrentChange = (Current: any) => {
|
||||||
|
searchParams.value.current = Current
|
||||||
|
getCouponsList()
|
||||||
|
}
|
||||||
|
const delBatch =()=>{
|
||||||
|
//批量删除
|
||||||
|
}
|
||||||
|
//重置搜索
|
||||||
|
const reset = () => {
|
||||||
|
Couponsname.value = '';
|
||||||
|
}
|
||||||
|
//搜索
|
||||||
|
const load =()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
const saveEdit = async () => { //编辑商品
|
||||||
|
const res = await myAxios.post('/coupon/update',{...editForm.value})
|
||||||
|
if( res.data.code === 1 ) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '更新成功'
|
||||||
|
})
|
||||||
|
DialogVisible.value = false
|
||||||
|
} else {
|
||||||
|
ElMessage.error('更新失败，请检查字段')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const ReviseOrView = (index: number, row: any , flag : number) => {
|
||||||
|
//flag值不同显示不同内容 disabled开启和关闭
|
||||||
|
flag ? (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
|
||||||
|
DialogVisible.value = true;
|
||||||
|
editForm.value = row;
|
||||||
|
};
|
||||||
|
const getCouponsList = async ()=> {
|
||||||
|
try {
|
||||||
|
const res = await myAxios.post('/coupon/list/page', {...searchParams.value})
|
||||||
|
console.log(res)
|
||||||
|
if (res.data.code === 1) {
|
||||||
|
tableData.value = res.data.data.records;
|
||||||
|
total.value = parseInt(res.data.data.total)
|
||||||
|
}else {
|
||||||
|
ElMessage({
|
||||||
|
type: 'error',
|
||||||
|
message: '获取数据失败'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}catch (error){
|
||||||
|
ElMessage({
|
||||||
|
type: 'error',
|
||||||
|
message: '发生错误'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleChange = async (file: any, flag: number) => {
|
||||||
|
fileSimple.value = file
|
||||||
|
let formData = new FormData() //这一步很重要 创建一个FormData对象
|
||||||
|
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
|
||||||
|
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") // 取出formData对象中的file
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (res.data.code === 1) {
|
||||||
|
editForm.value.image = res.data.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const deleteCoupons = async (index: number) => {
|
||||||
|
console.log(typeof index)
|
||||||
|
const res = await myAxios.post('/coupon/delete', { id: index })
|
||||||
|
console.log(res)
|
||||||
|
if (res.data.code === 1) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功',
|
||||||
|
})
|
||||||
|
getCouponsList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -1,126 +1,252 @@
|
||||||
<template>
|
<template>
|
||||||
<el-form :model="form" label-width="auto" style="max-width: 600px">
|
<!-- 搜索-->
|
||||||
<el-form-item label="优惠券名称">
|
<div>
|
||||||
<el-input v-model="form.name" />
|
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称"
|
||||||
</el-form-item>
|
v-model="Couponsname"></el-input>
|
||||||
<el-form-item label="兑换积分">
|
<el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
|
||||||
<el-input v-model="form.requirePoints" />
|
<el-button type="warning" @click="reset" style="height:25px">重置</el-button>
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item label="满减金额">
|
<!-- 批量删除-->
|
||||||
<el-input v-model="form.conditionAmount" />
|
<div style="margin: 15px 0">
|
||||||
<!-- <el-select v-model="form.conditionAmount" placeholder="">-->
|
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||||
<!-- <el-option label="Zone one" value="shanghai" />-->
|
title="您确定批量删除这些数据吗？" @confirm="delBatch" width=180>
|
||||||
<!-- <el-option label="Zone two" value="beijing" />-->
|
<template #reference>
|
||||||
<!-- </el-select>-->
|
<el-button style="height: 25px" class="ml-5" type="danger">批量删除 <el-icon style="margin-left: 5px;">
|
||||||
</el-form-item>
|
<Remove />
|
||||||
<el-form-item label="发放数量">
|
</el-icon></el-button>
|
||||||
<el-input v-model="form.totalNum" />
|
</template>
|
||||||
</el-form-item>
|
</el-popconfirm>
|
||||||
<el-form-item label="限量领取">
|
</div>
|
||||||
<el-input v-model="form.limitNum" />
|
<!-- 数据展示-->
|
||||||
</el-form-item>
|
<el-table :data="tableData" border stripe header-cell-class-name="headerBg"
|
||||||
<el-form-item label="使用范围">
|
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
||||||
<el-input v-model="form.useScope" />
|
:header-cell-style="{ 'text-align': 'center' }">
|
||||||
</el-form-item>
|
<el-table-column type="selection" width="55"></el-table-column>
|
||||||
<el-form-item label="开始日期">
|
<el-table-column prop="id" label="编号" width="80"></el-table-column>
|
||||||
<el-col :span="11">
|
<el-table-column prop="goodImg" label="优惠券图片">
|
||||||
<el-date-picker
|
<template #default="scope">
|
||||||
v-model="form.startTime"
|
<div>
|
||||||
type="date"
|
<img :src="scope.row.image" alt="" style="height: 50px;">
|
||||||
placeholder="Pick a date"
|
</div>
|
||||||
style="width: 100%"
|
</template>
|
||||||
/>
|
</el-table-column>
|
||||||
</el-col>
|
<el-table-column prop="name" label="优惠券名称"></el-table-column>
|
||||||
<el-col :span="2" class="text-center">
|
<el-table-column prop="conditionAmount" label="满减金额" width="180"></el-table-column>
|
||||||
<span class="text-gray-500">--------</span>
|
<el-table-column prop="totalNum" label="发放数量"></el-table-column>
|
||||||
</el-col>
|
<el-table-column prop="requirePoints" label="兑换积分"></el-table-column>
|
||||||
<el-col :span="11">
|
<el-table-column prop="residueNum" label="剩余数量"></el-table-column>
|
||||||
<el-time-picker
|
<el-table-column prop="limitNum" label="限量领取"></el-table-column>
|
||||||
v-model="form.date1"
|
<el-table-column prop="useScope" label="使用范围"></el-table-column>
|
||||||
placeholder="Pick a time"
|
<el-table-column prop="startTime" label="生效时间"></el-table-column>
|
||||||
style="width: 100%"
|
<el-table-column prop="endTime" label="截止时间"></el-table-column>
|
||||||
/>
|
<el-table-column label="操作" width="250px">
|
||||||
</el-col>
|
<template #default="scope">
|
||||||
</el-form-item>
|
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row , 0)">
|
||||||
<el-form-item label="截至日期">
|
详情
|
||||||
<el-col :span="11">
|
</el-button>
|
||||||
<el-date-picker
|
<el-button size="small" @click="ReviseOrView(scope.$index, scope.row, 1)">
|
||||||
v-model="form.endTime"
|
编辑
|
||||||
type="date"
|
</el-button>
|
||||||
placeholder="Pick a date"
|
<el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||||
style="width: 100%"
|
title="是否确认删除" @confirm="deleteCoupons(scope.row.id)" width=180>
|
||||||
/>
|
<template #reference>
|
||||||
</el-col>
|
<el-button class="ml-5" type="danger">删除</el-button>
|
||||||
<el-col :span="2" class="text-center">
|
</template>
|
||||||
<span class="text-gray-500">--------</span>
|
</el-popconfirm>
|
||||||
</el-col>
|
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
|
||||||
<el-col :span="11">
|
title="您确定删除吗？">
|
||||||
<el-time-picker
|
</el-popconfirm>
|
||||||
v-model="form.date2"
|
</template>
|
||||||
placeholder="Pick a time"
|
</el-table-column>
|
||||||
style="width: 100%"
|
</el-table>
|
||||||
/>
|
<!-- 分页-->
|
||||||
</el-col>
|
<div style="padding: 10px 0">
|
||||||
</el-form-item>
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||||
<el-form-item label="使用说明">
|
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
||||||
<el-input v-model="form.description" type="textarea" />
|
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
||||||
</el-form-item>
|
:total="total" />
|
||||||
<!-- <el-form-item label="Instant delivery">-->
|
</div>
|
||||||
<!-- <el-switch v-model="form.delivery" />-->
|
<!-- 详情，编辑-->
|
||||||
<!-- </el-form-item>-->
|
<el-dialog v-model="DialogVisible" :title="title">
|
||||||
<!-- <el-form-item label="Activity type">-->
|
<el-form label-width="100px" :disabled="disabled">
|
||||||
<!-- <el-checkbox-group v-model="form.type">-->
|
<el-form-item label="优惠券编号">
|
||||||
<!-- <el-checkbox value="Online activities" name="type">-->
|
<el-input v-model="editForm.id" disabled></el-input>
|
||||||
<!-- Online activities-->
|
</el-form-item>
|
||||||
<!-- </el-checkbox>-->
|
<el-form-item label="优惠券图片">
|
||||||
<!-- <el-checkbox value="Promotion activities" name="type">-->
|
<div v-if="editForm.image">
|
||||||
<!-- Promotion activities-->
|
<img :src="editForm.image" alt="优惠券图片" class="thumbnail" style="width: 100px; height: 100px;" />
|
||||||
<!-- </el-checkbox>-->
|
</div>
|
||||||
<!-- <el-checkbox value="Offline activities" name="type">-->
|
<el-upload
|
||||||
<!-- Offline activities-->
|
action="#"
|
||||||
<!-- </el-checkbox>-->
|
list-type="picture-card"
|
||||||
<!-- <el-checkbox value="Simple brand exposure" name="type">-->
|
:auto-upload="false"
|
||||||
<!-- Simple brand exposure-->
|
multiple="true"
|
||||||
<!-- </el-checkbox>-->
|
:on-remove="handleRemove"
|
||||||
<!-- </el-checkbox-group>-->
|
@change="(event: any) => handleChange(event, 0)"
|
||||||
<!-- </el-form-item>-->
|
limit="1" >
|
||||||
<!-- <el-form-item label="Resources">-->
|
<el-icon>
|
||||||
<!-- <el-radio-group v-model="form.resource">-->
|
<Plus/>
|
||||||
<!-- <el-radio value="Sponsor">Sponsor</el-radio>-->
|
</el-icon>
|
||||||
<!-- <el-radio value="Venue">Venue</el-radio>-->
|
</el-upload>
|
||||||
<!-- </el-radio-group>-->
|
</el-form-item>
|
||||||
<!-- </el-form-item>-->
|
<el-form-item label="优惠券名称">
|
||||||
<!-- <el-form-item label="Activity form">-->
|
<el-input v-model="editForm.name"></el-input>
|
||||||
<!-- <el-input v-model="form.desc" type="textarea" />-->
|
</el-form-item>
|
||||||
<!-- </el-form-item>-->
|
<el-form-item label="满减金额">
|
||||||
<!-- <el-form-item>-->
|
<el-input v-model="editForm.conditionAmount"></el-input>
|
||||||
<!-- <el-button type="primary" @click="onSubmit">Create</el-button>-->
|
</el-form-item>
|
||||||
<!-- <el-button>Cancel</el-button>-->
|
<el-form-item label="兑换积分">
|
||||||
<!-- </el-form-item>-->
|
<el-input v-model="editForm.requirePoints"></el-input>
|
||||||
</el-form>
|
</el-form-item>
|
||||||
|
<el-form-item label="发放数量">
|
||||||
|
<el-input v-model="editForm.totalNum"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="限量领取">
|
||||||
|
<el-input v-model="editForm.limitNum"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用范围">
|
||||||
|
<el-input type="textarea" v-model="editForm.useScope"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="发放时间">
|
||||||
|
<el-input type="textarea" v-model="editForm.startTime"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="截止时间">
|
||||||
|
<el-input type="textarea" v-model="editForm.endTime"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="使用说明">
|
||||||
|
<el-input type="textarea" v-model="editForm.description"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer >
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="DialogVisible = false" :disabled="disabled">取消</el-button>
|
||||||
|
<el-button type="primary" @click="saveEdit" :disabled="disabled">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive } from 'vue'
|
import {onMounted, ref} from "vue";
|
||||||
|
import myAxios from "@/api/myAxios";
|
||||||
|
import {ElMessage, type UploadProps} from "element-plus";
|
||||||
|
|
||||||
// do not use same name with ref
|
onMounted(() => {
|
||||||
const form = reactive({
|
getCouponsList()
|
||||||
name: '',
|
|
||||||
conditionAmount:'',//满减金额
|
|
||||||
totalNum:'',
|
|
||||||
requirePoints:'',//兑换积分
|
|
||||||
limitNum:'',//限量领取
|
|
||||||
useScope:'',//使用范围
|
|
||||||
startTime:'',
|
|
||||||
endTime:'',
|
|
||||||
date1: '',
|
|
||||||
date2: '',
|
|
||||||
description:'',//使用说明
|
|
||||||
})
|
})
|
||||||
const AddCoupon = async () => {
|
|
||||||
|
const handleSelectionChange = (row: any) => {
|
||||||
|
id.value = JSON.parse(JSON.stringify(row));
|
||||||
|
}
|
||||||
|
const DialogVisible = ref(false)
|
||||||
|
const total = ref(0)
|
||||||
|
const tableData : any= ref([])
|
||||||
|
const Couponsname = ref('')
|
||||||
|
const title = ref('')
|
||||||
|
const editForm : any = ref({})
|
||||||
|
const fileSimple = ref()
|
||||||
|
const disabled = ref(true)
|
||||||
|
const searchParams: any = ref({ //分页
|
||||||
|
current: 1,
|
||||||
|
pageSize: 5
|
||||||
|
})
|
||||||
|
//删除图片
|
||||||
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||||
|
console.log(uploadFile, uploadFiles)
|
||||||
|
}
|
||||||
|
//处理行数大小变化
|
||||||
|
const handleSizeChange = (newSize: any) => {
|
||||||
|
searchParams.value.pageSize = newSize //新的页面数
|
||||||
|
getCouponsList()
|
||||||
|
}
|
||||||
|
//处理当前表格变化
|
||||||
|
const handleCurrentChange = (Current: any) => {
|
||||||
|
searchParams.value.current = Current
|
||||||
|
getCouponsList()
|
||||||
|
}
|
||||||
|
const delBatch =()=>{
|
||||||
|
//批量删除
|
||||||
|
}
|
||||||
|
//重置搜索
|
||||||
|
const reset = () => {
|
||||||
|
Couponsname.value = '';
|
||||||
|
}
|
||||||
|
//搜索
|
||||||
|
const load =()=>{
|
||||||
|
|
||||||
}
|
}
|
||||||
const onSubmit = () => {
|
const saveEdit = async () => { //编辑商品
|
||||||
console.log('submit!')
|
const res = await myAxios.post('/coupon/update',{...editForm.value})
|
||||||
|
if( res.data.code === 1 ) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '更新成功'
|
||||||
|
})
|
||||||
|
DialogVisible.value = false
|
||||||
|
} else {
|
||||||
|
ElMessage.error('更新失败，请检查字段')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
const ReviseOrView = (index: number, row: any , flag : number) => {
|
||||||
|
//flag值不同显示不同内容 disabled开启和关闭
|
||||||
|
flag ? (title.value = "编辑商品" , disabled.value = false) : (title.value = "商品详情" , disabled.value = true)
|
||||||
|
DialogVisible.value = true;
|
||||||
|
editForm.value = row;
|
||||||
|
};
|
||||||
|
const getCouponsList = async ()=> {
|
||||||
|
try {
|
||||||
|
const res = await myAxios.post('/coupon/list/page', {...searchParams.value})
|
||||||
|
console.log(res)
|
||||||
|
if (res.data.code === 1) {
|
||||||
|
tableData.value = res.data.data.records;
|
||||||
|
total.value = parseInt(res.data.data.total)
|
||||||
|
}else {
|
||||||
|
ElMessage({
|
||||||
|
type: 'error',
|
||||||
|
message: '获取数据失败'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}catch (error){
|
||||||
|
ElMessage({
|
||||||
|
type: 'error',
|
||||||
|
message: '发生错误'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleChange = async (file: any, flag: number) => {
|
||||||
|
fileSimple.value = file
|
||||||
|
let formData = new FormData() //这一步很重要 创建一个FormData对象
|
||||||
|
formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData
|
||||||
|
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") // 取出formData对象中的file
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (res.data.code === 1) {
|
||||||
|
editForm.value.image = res.data.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const deleteCoupons = async (index: number) => {
|
||||||
|
console.log(typeof index)
|
||||||
|
const res = await myAxios.post('/coupon/delete', { id: index })
|
||||||
|
console.log(res)
|
||||||
|
if (res.data.code === 1) {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功',
|
||||||
|
})
|
||||||
|
getCouponsList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user