add: 1.新增各类优惠券
2.新增已领取详情弹窗 3.新增已关联弹窗
This commit is contained in:
258
src/views/marketing_center/half_price/index.vue
Normal file
258
src/views/marketing_center/half_price/index.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="app_main">
|
||||
<div class="card">
|
||||
<headerCard icon="dejbjq" name="第二件半价券" intro="设置第二件半价券。" />
|
||||
<div class="tab_wrap">
|
||||
<div class="row">
|
||||
<el-button type="primary" @click="CouponDialogRef.show(couponType)">
|
||||
添加第二件半价券
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-table :data="tableData.list" border stripe v-loading="tableData.loading">
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="title" label="名称" width="180" />
|
||||
<el-table-column prop="validStartTime" label="有效期" width="320">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.validType == 'fixed'">
|
||||
领券后{{ scope.row.validDays }}天过期
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ scope.row.validStartTime }} - {{ scope.row.validEndTime }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="getMode" label="用户领取方式" width="180">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.getType == 'no'">
|
||||
<el-text>用户不可自行领取</el-text>
|
||||
</div>
|
||||
<div class="column" v-else>
|
||||
<div v-for="item in getModeFilter(scope.row.getMode)">
|
||||
<el-tag :type="item.type" disable-transitions>
|
||||
{{ item.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giveNum" label="总发放数量" width="100">
|
||||
<template #default="scope">
|
||||
{{ scope.row.giveNum == -10086 ? "无限" : scope.row.giftNum }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="giftNum" label="已领取" width="180">
|
||||
<template #default="scope">
|
||||
<div class="center">
|
||||
<el-text>{{ scope.row.giftNum }}</el-text>
|
||||
<el-text>|</el-text>
|
||||
<el-link
|
||||
type="primary"
|
||||
@click="GetDetailDialogRef.show(scope.row)"
|
||||
>
|
||||
详情
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="useNum" label="已使用" width="180" />
|
||||
<el-table-column prop="leftNum" label="剩余" width="180" />
|
||||
<el-table-column prop="" label="已关联功能" width="180">
|
||||
<template #default="scope">
|
||||
<el-link type="primary" @click="RelevanceDialogRef.show(scope.row)">
|
||||
查看
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="启用状态" width="100">
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
:disabled="scope.row.syncId"
|
||||
@change="statusChange($event, scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column prop="actions" label="操作" align="center" width="140" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="CouponDialogRef.show(couponType, scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
title="确认要删除吗？"
|
||||
@confirm="deleteHandle(scope.row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-pagination
|
||||
v-model:current-page="tableData.page"
|
||||
v-model:page-size="tableData.pageSize"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CouponDialog ref="CouponDialogRef" @success="resetPage" />
|
||||
<RelevanceDialog ref="RelevanceDialogRef" name="营销中心/第二件半价券" />
|
||||
<GetDetailDialog ref="GetDetailDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import headerCard from "@/views/marketing_center/components/headerCard.vue";
|
||||
import CouponDialog from "@/views/marketing_center/components/couponDialog.vue";
|
||||
import RelevanceDialog from "@/views/marketing_center/components/relevanceDialog.vue";
|
||||
import GetDetailDialog from "@/views/marketing_center/components/getDetailDialog.vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { couponPage, addCoupon, delCoupon } from "@/api/coupon/index.js";
|
||||
|
||||
const CouponDialogRef = ref(null);
|
||||
const RelevanceDialogRef = ref(null);
|
||||
const GetDetailDialogRef = ref(null);
|
||||
const couponType = ref(4);
|
||||
const tableData = reactive({
|
||||
loading: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
list: [],
|
||||
});
|
||||
|
||||
// 返回新的领取方式数组
|
||||
function getModeFilter(arrStr) {
|
||||
let arr = JSON.parse(arrStr);
|
||||
const m = [
|
||||
{
|
||||
value: "home",
|
||||
label: "首页-优惠券",
|
||||
type: "primary",
|
||||
},
|
||||
{
|
||||
value: "eat",
|
||||
label: "点餐页-自动弹出",
|
||||
type: "success",
|
||||
},
|
||||
{
|
||||
value: "order",
|
||||
label: "订单支付页面",
|
||||
type: "warning",
|
||||
},
|
||||
];
|
||||
return m.filter((item) => arr.includes(item.value));
|
||||
}
|
||||
|
||||
// 改变状态
|
||||
async function statusChange(e, row) {
|
||||
try {
|
||||
tableData.loading = true;
|
||||
await addCoupon(row);
|
||||
couponPageAjax();
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function deleteHandle(row) {
|
||||
try {
|
||||
tableData.loading = true;
|
||||
await delCoupon({
|
||||
id: row.id,
|
||||
type: 0,
|
||||
});
|
||||
couponPageAjax();
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
// 分页大小发生变化
|
||||
function handleSizeChange(e) {
|
||||
console.log("handleSizeChange===", e);
|
||||
tableData.pageSize = e;
|
||||
resetPage();
|
||||
}
|
||||
|
||||
// 分页发生变化
|
||||
function handleCurrentChange(e) {
|
||||
console.log("handleCurrentChange===", e);
|
||||
tableData.page = e;
|
||||
resetPage();
|
||||
}
|
||||
|
||||
// 重置列表请求
|
||||
function resetPage() {
|
||||
tableData.page = 1;
|
||||
tableData.list = [];
|
||||
couponPageAjax();
|
||||
}
|
||||
|
||||
// 获取优惠券分页
|
||||
async function couponPageAjax() {
|
||||
try {
|
||||
tableData.loading = true;
|
||||
const res = await couponPage({
|
||||
couponType: couponType.value,
|
||||
page: tableData.page,
|
||||
size: tableData.pageSize,
|
||||
});
|
||||
tableData.total = res.totalRow;
|
||||
tableData.list = res.records;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
tableData.loading = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
couponPageAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app_main {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
padding: 14px;
|
||||
|
||||
.tab_wrap {
|
||||
padding-top: 14px;
|
||||
|
||||
.row {
|
||||
padding-top: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user