add: 1.新增各类优惠券
2.新增已领取详情弹窗 3.新增已关联弹窗
This commit is contained in:
229
src/views/marketing_center/discount_coupon/index.vue
Normal file
229
src/views/marketing_center/discount_coupon/index.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="app_main">
|
||||
<div class="card">
|
||||
<headerCard
|
||||
icon="xfzq"
|
||||
name="满减券"
|
||||
intro="用户满足指定金额后，可使用优惠券立减相应金额，如：设置满100-50券，符合要求的订单满100元后，立减50元。"
|
||||
/>
|
||||
<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="fullAmount" label="使用门槛" width="180">
|
||||
<template #default="scope">
|
||||
满{{ scope.row.fullAmount }}元减{{ scope.row.discountAmount }}元
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="validStartTime" label="有效期" width="200">
|
||||
<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="giveNum" label="总发放数量" width="100" />
|
||||
<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)"
|
||||
v-if="!scope.row.syncId"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-button type="danger link" v-else>删除</el-button>
|
||||
</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(1);
|
||||
const tableData = reactive({
|
||||
loading: true,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
list: [],
|
||||
});
|
||||
|
||||
// 改变状态
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user