py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

coupon

Browse Source
branch_lyj
Liuyujie 7 months ago
parent e8a2fc3417
commit f77570e5f0
4 changed files with 478 additions and 321 deletions
Show Stats Download Patch File Download Diff File

15
src/views/sms/coupon/add.vue
Unescape View File

@ -1,14 +1,21 @@
<template>  <template>
<!-- 在模板中使用了coupon-detail组件，并传递isEdit属性值为false，可能用于区分添加或编辑操作 -->
<coupon-detail :isEdit="false"></coupon-detail> <coupon-detail :isEdit="false"></coupon-detail>
</template> </template>
<script> <script>
import CouponDetail from './components/CouponDetail' // 导入名为CouponDetail的组件，其定义在'./components/CouponDetail'文件中
export default { import CouponDetail from './components/CouponDetail';
export default {
// 定义组件名称为addCoupon
name: 'addCoupon', name: 'addCoupon',
// 注册CouponDetail组件，使其能在模板中使用
components: { CouponDetail } components: { CouponDetail }
} }
</script> </script>
<style scoped> <style scoped>
<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件，目前为空 -->
</style> </style>

166
src/views/sms/coupon/history.vue
Unescape View File

@ -1,45 +1,79 @@
<template>  <template>
<!-- 整体的外层容器，用于布局包裹内部各部分内容 -->
<div class="app-container"> <div class="app-container">
<!-- 用于表格布局的容器 -->
<div class="table-layout"> <div class="table-layout">
<!-- el-row行组件，里面放置多个列用于显示表格标题 -->
<el-row> <el-row>
<!-- el-col列组件，设置占4格宽度，显示名称标题 -->
<el-col :span="4" class="table-cell-title">名称</el-col> <el-col :span="4" class="table-cell-title">名称</el-col>
<!-- el-col列组件，设置占4格宽度，显示优惠券类型标题 -->
<el-col :span="4" class="table-cell-title">优惠券类型</el-col> <el-col :span="4" class="table-cell-title">优惠券类型</el-col>
<!-- el-col列组件，设置占4格宽度，显示可使用商品标题 -->
<el-col :span="4" class="table-cell-title">可使用商品</el-col> <el-col :span="4" class="table-cell-title">可使用商品</el-col>
<!-- el-col列组件，设置占4格宽度，显示使用门槛标题 -->
<el-col :span="4" class="table-cell-title">使用门槛</el-col> <el-col :span="4" class="table-cell-title">使用门槛</el-col>
<!-- el-col列组件，设置占4格宽度，显示面值标题 -->
<el-col :span="4" class="table-cell-title">面值</el-col> <el-col :span="4" class="table-cell-title">面值</el-col>
<!-- el-col列组件，设置占4格宽度，显示状态标题 -->
<el-col :span="4" class="table-cell-title">状态</el-col> <el-col :span="4" class="table-cell-title">状态</el-col>
</el-row> </el-row>
<!-- el-row行组件，里面放置多个列用于显示对应优惠券的具体信息，使用了过滤器来格式化显示内容 -->
<el-row> <el-row>
<!-- el-col列组件，设置占4格宽度，显示优惠券名称 -->
<el-col :span="4" class="table-cell">{{coupon.name}}</el-col> <el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
<!-- el-col列组件，设置占4格宽度，显示格式化后的优惠券类型 -->
<el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col> <el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
<!-- el-col列组件，设置占4格宽度，显示格式化后的可使用商品类型 -->
<el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col> <el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
<!-- el-col列组件，设置占4格宽度，按格式显示使用门槛 -->
<el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col> <el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
<!-- el-col列组件，设置占4格宽度，显示优惠券面值 -->
<el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col> <el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
<!-- el-col列组件，设置占4格宽度，显示格式化后的状态 -->
<el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col> <el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
</el-row> </el-row>
<!-- el-row行组件，里面放置多个列用于显示表格另一部分标题 -->
<el-row> <el-row>
<!-- el-col列组件，设置占4格宽度，显示有效期标题 -->
<el-col :span="4" class="table-cell-title">有效期</el-col> <el-col :span="4" class="table-cell-title">有效期</el-col>
<!-- el-col列组件，设置占4格宽度，显示总发行量标题 -->
<el-col :span="4" class="table-cell-title">总发行量</el-col> <el-col :span="4" class="table-cell-title">总发行量</el-col>
<!-- el-col列组件，设置占4格宽度，显示已领取标题 -->
<el-col :span="4" class="table-cell-title">已领取</el-col> <el-col :span="4" class="table-cell-title">已领取</el-col>
<!-- el-col列组件，设置占4格宽度，显示待领取标题 -->
<el-col :span="4" class="table-cell-title">待领取</el-col> <el-col :span="4" class="table-cell-title">待领取</el-col>
<!-- el-col列组件，设置占4格宽度，显示已使用标题 -->
<el-col :span="4" class="table-cell-title">已使用</el-col> <el-col :span="4" class="table-cell-title">已使用</el-col>
<!-- el-col列组件，设置占4格宽度，显示未使用标题 -->
<el-col :span="4" class="table-cell-title">未使用</el-col> <el-col :span="4" class="table-cell-title">未使用</el-col>
</el-row> </el-row>
<!-- el-row行组件，里面放置多个列用于显示对应优惠券相关数量等具体信息，使用了日期格式化等过滤器 -->
<el-row> <el-row>
<!-- el-col列组件，设置占4格宽度，按格式显示有效期，使用了日期格式化过滤器 -->
<el-col :span="4" class="table-cell" style="font-size: 13px"> <el-col :span="4" class="table-cell" style="font-size: 13px">
{{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}} {{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
</el-col> </el-col>
<!-- el-col列组件，设置占4格宽度，显示总发行量 -->
<el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col> <el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
<!-- el-col列组件，设置占4格宽度，显示已领取数量 -->
<el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col> <el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.receiveCount}}</el-col> <!-- el-col列组件，设置占4格宽度，通过计算显示待领取数量 -->
<el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.receiveCount}}</el-col>
<!-- el-col列组件，设置占4格宽度，显示已使用数量 -->
<el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col> <el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
<el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col> <!-- el-col列组件，设置占4格宽度，通过计算显示未使用数量 -->
<el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.useCount}}</el-col>
</el-row> </el-row>
</div> </div>
<!-- 筛选搜索区域的卡片容器，设置无阴影效果 -->
<el-card class="filter-container" shadow="never"> <el-card class="filter-container" shadow="never">
<div> <div>
<!-- 显示搜索图标 -->
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
<!-- 显示筛选搜索文字提示 -->
<span>筛选搜索</span> <span>筛选搜索</span>
<!-- 用于触发查询搜索的按钮，绑定点击事件，设置样式等属性 -->
<el-button <el-button
style="float:right" style="float:right"
type="primary" type="primary"
@ -47,6 +81,7 @@
size="small"> size="small">
查询搜索 查询搜索
</el-button> </el-button>
<!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
<el-button <el-button
style="float:right;margin-right: 15px" style="float:right;margin-right: 15px"
@click="handleResetSearch()" @click="handleResetSearch()"
@ -55,8 +90,11 @@
</el-button> </el-button>
</div> </div>
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<!-- 行内表单，绑定数据模型，设置尺寸、标签宽度等属性 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px"> <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 对应使用状态选择框的表单项 -->
<el-form-item label="使用状态："> <el-form-item label="使用状态：">
<!-- 下拉选择框，双向绑定使用状态数据，设置占位提示等属性，通过循环生成下拉选项 -->
<el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width"> <el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
<el-option v-for="item in useTypeOptions" <el-option v-for="item in useTypeOptions"
:key="item.value" :key="item.value"
@ -65,41 +103,54 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 对应订单编号输入框的表单项 -->
<el-form-item label="订单编号："> <el-form-item label="订单编号：">
<!-- 输入框，双向绑定订单编号数据，设置类名和占位提示 -->
<el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input> <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</el-card> </el-card>
<!-- 放置数据表格的容器 -->
<div class="table-container"> <div class="table-container">
<!-- 数据表格组件，绑定数据、设置宽度等属性以及加载状态 -->
<el-table ref="couponHistoryTable" <el-table ref="couponHistoryTable"
:data="list" :data="list"
style="width: 100%;" style="width: 100%;"
v-loading="listLoading" border> v-loading="listLoading" border>
<!-- 显示优惠码的表格列 -->
<el-table-column label="优惠码" width="160" align="center"> <el-table-column label="优惠码" width="160" align="center">
<template slot-scope="scope">{{scope.row.couponCode}}</template> <template slot-scope="scope">{{scope.row.couponCode}}</template>
</el-table-column> </el-table-column>
<!-- 显示领取会员的表格列 -->
<el-table-column label="领取会员" width="140" align="center"> <el-table-column label="领取会员" width="140" align="center">
<template slot-scope="scope">{{scope.row.memberNickname}}</template> <template slot-scope="scope">{{scope.row.memberNickname}}</template>
</el-table-column> </el-table-column>
<!-- 显示领取方式的表格列，使用过滤器格式化内容 -->
<el-table-column label="领取方式" width="100" align="center"> <el-table-column label="领取方式" width="100" align="center">
<template slot-scope="scope">{{scope.row.getType | formatGetType}}</template> <template slot-scope="scope">{{scope.row.getType | formatGetType}}</template>
</el-table-column> </el-table-column>
<!-- 显示领取时间的表格列，使用日期格式化过滤器 -->
<el-table-column label="领取时间" width="160" align="center"> <el-table-column label="领取时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.createTime | formatTime}}</template> <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
</el-table-column> </el-table-column>
<!-- 显示当前状态的表格列，使用过滤器格式化内容 -->
<el-table-column label="当前状态" width="140" align="center"> <el-table-column label="当前状态" width="140" align="center">
<template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template> <template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template>
</el-table-column> </el-table-column>
<!-- 显示使用时间的表格列，使用日期格式化过滤器 -->
<el-table-column label="使用时间" width="160" align="center"> <el-table-column label="使用时间" width="160" align="center">
<template slot-scope="scope">{{scope.row.useTime | formatTime}}</template> <template slot-scope="scope">{{scope.row.useTime | formatTime}}</template>
</el-table-column> </el-table-column>
<!-- 显示订单编号的表格列，做了空值处理 -->
<el-table-column label="订单编号" align="center"> <el-table-column label="订单编号" align="center">
<template slot-scope="scope">{{scope.row.orderSn===null?'N/A':scope.row.orderSn}}</template> <template slot-scope="scope">{{scope.row.orderSn===null?'N/A':scope.row.orderSn}}</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 分页组件的容器 -->
<div class="pagination-container"> <div class="pagination-container">
<!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
<el-pagination <el-pagination
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@ -114,11 +165,15 @@
</div> </div>
</template> </template>
<script> <script>
import {formatDate} from '@/utils/date'; // 从'@/utils/date'模块导入日期格式化相关的函数formatDate
import {getCoupon} from '@/api/coupon'; import {formatDate} from '@/utils/date';
import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory'; // 从'@/api/coupon'模块导入获取优惠券的函数getCoupon
import {getCoupon} from '@/api/coupon';
// 从'@/api/couponHistory'模块导入获取优惠券历史记录列表的函数，并起别名为fetchCouponHistoryList
import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
const defaultTypeOptions = [ // 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
const defaultTypeOptions = [
{ {
label: '全场赠券', label: '全场赠券',
value: 0 value: 0
@ -135,15 +190,17 @@
label: '注册赠券', label: '注册赠券',
value: 3 value: 3
} }
]; ];
const defaultListQuery = { // 默认的列表查询参数对象，包含页码、每页数量、使用状态等初始值
const defaultListQuery = {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
useStatus: null, useStatus: null,
orderSn: null, orderSn: null,
couponId: null couponId: null
}; };
const defaultUseTypeOptions= [ // 默认的使用类型选项数组，包含未使用、已使用、已过期等状态及对应值
const defaultUseTypeOptions = [
{ {
label: "未使用", label: "未使用",
value: 0 value: 0
@ -156,27 +213,38 @@
label: "已过期", label: "已过期",
value: 2 value: 2
} }
]; ];
export default {
export default {
name: 'couponHistoryList', name: 'couponHistoryList',
data() { data() {
return { return {
// 优惠券相关数据，初始为空对象
coupon: {}, coupon: {},
// 当前列表查询参数，初始为默认值副本
listQuery: Object.assign({}, defaultListQuery), listQuery: Object.assign({}, defaultListQuery),
useTypeOptions:Object.assign({},defaultUseTypeOptions), // 使用类型选项，初始为默认值副本
list:null, useTypeOptions: Object.assign({}, defaultUseTypeOptions),
total:null, // 优惠券历史记录列表数据，初始为null
listLoading:false list: null,
// 数据总条数，初始为null
total: null,
// 列表数据加载状态，初始为false
listLoading: false
} }
}, },
created() { created() {
// 获取优惠券数据，成功后赋值给coupon属性
getCoupon(this.$route.query.id).then(response => { getCoupon(this.$route.query.id).then(response => {
this.coupon = response.data; this.coupon = response.data;
}); });
this.listQuery.couponId=this.$route.query.id; // 设置列表查询参数中的优惠券id
this.listQuery.couponId = this.$route.query.id;
// 调用获取列表数据的方法
this.getList(); this.getList();
}, },
filters: { filters: {
// 根据值格式化优惠券类型显示文本的过滤器
formatType(type) { formatType(type) {
for (let i = 0; i < defaultTypeOptions.length; i++) { for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) { if (type === defaultTypeOptions[i].value) {
@ -185,6 +253,7 @@
} }
return ''; return '';
}, },
// 根据值格式化可使用商品类型显示文本的过滤器
formatUseType(useType) { formatUseType(useType) {
if (useType === 0) { if (useType === 0) {
return '全场通用'; return '全场通用';
@ -194,6 +263,7 @@
return '指定商品'; return '指定商品';
} }
}, },
// 根据值格式化平台类型显示文本的过滤器
formatPlatform(platform) { formatPlatform(platform) {
if (platform === 1) { if (platform === 1) {
return '移动平台'; return '移动平台';
@ -203,6 +273,7 @@
return '全平台'; return '全平台';
} }
}, },
// 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
formatDate(time) { formatDate(time) {
if (time == null || time === '') { if (time == null || time === '') {
return 'N/A'; return 'N/A';
@ -210,6 +281,7 @@
let date = new Date(time); let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd') return formatDate(date, 'yyyy-MM-dd')
}, },
// 根据结束时间判断并格式化状态显示文本的过滤器，对比当前时间判断是否过期
formatStatus(endTime) { formatStatus(endTime) {
let now = new Date().getTime(); let now = new Date().getTime();
if (endTime > now) { if (endTime > now) {
@ -218,13 +290,15 @@
return '已过期'; return '已过期';
} }
}, },
// 根据值格式化领取方式显示文本的过滤器
formatGetType(type) { formatGetType(type) {
if(type===1){ if (type === 1) {
return '主动获取'; return '主动获取';
}else{ } else {
return '后台赠送'; return '后台赠送';
} }
}, },
// 根据值格式化优惠券历史记录使用类型显示文本的过滤器
formatCouponHistoryUseType(useType) { formatCouponHistoryUseType(useType) {
if (useType === 0) { if (useType === 0) {
return '未使用'; return '未使用';
@ -234,6 +308,7 @@
return '已过期'; return '已过期';
} }
}, },
// 格式化时间的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的时间
formatTime(time) { formatTime(time) {
if (time == null || time === '') { if (time == null || time === '') {
return 'N/A'; return 'N/A';
@ -243,51 +318,58 @@
}, },
}, },
methods: { methods: {
getList(){ // 获取优惠券历史记录列表的方法，设置加载状态为true，获取成功后更新数据及加载状态
this.listLoading=true; getList() {
fetchCouponHistoryList(this.listQuery).then(response=>{ this.listLoading = true;
this.listLoading=false; fetchCouponHistoryList(this.listQuery).then(response => {
this.list=response.data.list; this.listLoading = false;
this.total=response.data.total; this.list = response.data.list;
this.total = response.data.total;
}); });
}, },
// 重置搜索条件的方法，恢复为默认查询参数并设置优惠券id
handleResetSearch() { handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery); this.listQuery = Object.assign({}, defaultListQuery);
this.listQuery.couponId=this.$route.query.id; this.listQuery.couponId = this.$route.query.id;
}, },
// 处理搜索列表的方法，重置页码后调用获取列表的方法
handleSearchList() { handleSearchList() {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.getList(); this.getList();
}, },
// 处理每页显示数量改变的方法，重置页码，更新每页数量后调用获取列表的方法
handleSizeChange(val) { handleSizeChange(val) {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.listQuery.pageSize = val; this.listQuery.pageSize = val;
this.getList(); this.getList();
}, },
// 处理当前页码改变的方法，更新页码后调用获取列表的方法
handleCurrentChange(val) { handleCurrentChange(val) {
this.listQuery.pageNum = val; this.listQuery.pageNum = val;
this.getList(); this.getList();
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.app-container { <!-- 定义类名为app-container的样式，设置宽度、外边距使其水平居中 -->
.app-container {
width: 80%; width: 80%;
margin: 20px auto; margin: 20px auto;
} }
<!-- 定义类名为filter-container的样式，设置上边距 -->
.filter-container { .filter-container {
margin-top: 20px; margin-top: 20px;
} }
<!-- 定义类名为table-layout的样式，设置上边距、左边框、上边框 -->
.table-layout { .table-layout {
margin-top: 20px; margin-top: 20px;
border-left: 1px solid #DCDFE6; border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6; border-top: 1px solid #DCDFE6;
} }
<!-- 定义类名为table-cell的样式，设置高度、行高、边框、内边距、字体大小、颜色、文本对齐、溢出处理等属性 -->
.table-cell { .table-cell {
height: 60px; height: 60px;
line-height: 40px; line-height: 40px;
border-right: 1px solid #DCDFE6; border-right: 1px solid #DCDFE6;
@ -297,9 +379,9 @@
color: #606266; color: #606266;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
<!-- 定义类名为table-cell-title的样式，设置边框、内边距、背景色、文本对齐、字体大小、颜色等属性 -->
.table-cell-title { .table-cell-title {
border-right: 1px solid #DCDFE6; border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6; border-bottom: 1px solid #DCDFE6;
padding: 10px; padding: 10px;
@ -307,7 +389,7 @@
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
color: #303133; color: #303133;
} }
</style> </style>

143
src/views/sms/coupon/index.vue
Unescape View File

@ -1,9 +1,14 @@
<template>  <template>
<!-- 页面整体的外层容器，用于布局包裹内部各部分内容 -->
<div class="app-container"> <div class="app-container">
<!-- 筛选搜索区域的卡片容器，设置无阴影效果 -->
<el-card class="filter-container" shadow="never"> <el-card class="filter-container" shadow="never">
<div> <div>
<!-- 显示搜索图标 -->
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
<!-- 显示筛选搜索文字提示 -->
<span>筛选搜索</span> <span>筛选搜索</span>
<!-- 用于触发查询搜索的按钮，绑定点击事件，设置样式等属性 -->
<el-button <el-button
style="float:right" style="float:right"
type="primary" type="primary"
@ -11,6 +16,7 @@
size="small"> size="small">
查询搜索 查询搜索
</el-button> </el-button>
<!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
<el-button <el-button
style="float:right;margin-right: 15px" style="float:right;margin-right: 15px"
@click="handleResetSearch()" @click="handleResetSearch()"
@ -19,12 +25,18 @@
</el-button> </el-button>
</div> </div>
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<!-- 行内表单，绑定数据模型，设置尺寸、标签宽度等属性 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px"> <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 优惠券名称输入框的表单项 -->
<el-form-item label="优惠券名称："> <el-form-item label="优惠券名称：">
<!-- 输入框，双向绑定优惠券名称数据，设置类名和占位提示 -->
<el-input v-model="listQuery.name" class="input-width" placeholder="优惠券名称"></el-input> <el-input v-model="listQuery.name" class="input-width" placeholder="优惠券名称"></el-input>
</el-form-item> </el-form-item>
<!-- 优惠券类型选择框的表单项 -->
<el-form-item label="优惠券类型："> <el-form-item label="优惠券类型：">
<!-- 下拉选择框，双向绑定优惠券类型数据，设置占位提示等属性 -->
<el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width"> <el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
<!-- 通过循环生成下拉选项 -->
<el-option v-for="item in typeOptions" <el-option v-for="item in typeOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
@ -35,54 +47,72 @@
</el-form> </el-form>
</div> </div>
</el-card> </el-card>
<!-- 操作区域的卡片容器，设置无阴影效果 -->
<el-card class="operate-container" shadow="never"> <el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i> <i class="el-icon-tickets"></i>
<span>数据列表</span> <span>数据列表</span>
<!-- 用于触发添加操作的按钮，绑定点击事件 -->
<el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button> <el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
</el-card> </el-card>
<!-- 放置数据表格的容器 -->
<div class="table-container"> <div class="table-container">
<!-- 数据表格组件，绑定数据、设置宽度等属性，还有选择改变等相关事件 -->
<el-table ref="couponTable" <el-table ref="couponTable"
:data="list" :data="list"
style="width: 100%;" style="width: 100%;"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
v-loading="listLoading" border> v-loading="listLoading" border>
<!-- 显示选择框的表格列 -->
<el-table-column type="selection" width="60" align="center"></el-table-column> <el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 显示编号的表格列 -->
<el-table-column label="编号" width="100" align="center"> <el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{scope.row.id}}</template> <template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column> </el-table-column>
<!-- 显示优惠券名称的表格列 -->
<el-table-column label="优惠劵名称" align="center"> <el-table-column label="优惠劵名称" align="center">
<template slot-scope="scope">{{scope.row.name}}</template> <template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column> </el-table-column>
<!-- 显示优惠券类型的表格列，使用过滤器格式化内容 -->
<el-table-column label="优惠券类型" width="100" align="center"> <el-table-column label="优惠券类型" width="100" align="center">
<template slot-scope="scope">{{scope.row.type | formatType}}</template> <template slot-scope="scope">{{scope.row.type | formatType}}</template>
</el-table-column> </el-table-column>
<!-- 显示可使用商品类型的表格列，使用过滤器格式化内容 -->
<el-table-column label="可使用商品" width="100" align="center"> <el-table-column label="可使用商品" width="100" align="center">
<template slot-scope="scope">{{scope.row.useType | formatUseType}}</template> <template slot-scope="scope">{{scope.row.useType | formatUseType}}</template>
</el-table-column> </el-table-column>
<!-- 显示使用门槛的表格列 -->
<el-table-column label="使用门槛" width="140" align="center"> <el-table-column label="使用门槛" width="140" align="center">
<template slot-scope="scope">满{{scope.row.minPoint}}元可用</template> <template slot-scope="scope">满{{scope.row.minPoint}}元可用</template>
</el-table-column> </el-table-column>
<!-- 显示面值的表格列 -->
<el-table-column label="面值" width="100" align="center"> <el-table-column label="面值" width="100" align="center">
<template slot-scope="scope">{{scope.row.amount}}元</template> <template slot-scope="scope">{{scope.row.amount}}元</template>
</el-table-column> </el-table-column>
<!-- 显示适用平台的表格列，使用过滤器格式化内容 -->
<el-table-column label="适用平台" width="100" align="center"> <el-table-column label="适用平台" width="100" align="center">
<template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template> <template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template>
</el-table-column> </el-table-column>
<!-- 显示有效期的表格列，使用日期格式化等过滤器 -->
<el-table-column label="有效期" width="180" align="center"> <el-table-column label="有效期" width="180" align="center">
<template slot-scope="scope">{{scope.row.startTime|formatDate}}至{{scope.row.endTime|formatDate}}</template> <template slot-scope="scope">{{scope.row.startTime|formatDate}}至{{scope.row.endTime|formatDate}}</template>
</el-table-column> </el-table-column>
<!-- 显示状态的表格列，使用过滤器根据结束时间判断并格式化状态 -->
<el-table-column label="状态" width="100" align="center"> <el-table-column label="状态" width="100" align="center">
<template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template> <template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template>
</el-table-column> </el-table-column>
<!-- 显示操作按钮的表格列 -->
<el-table-column label="操作" width="180" align="center"> <el-table-column label="操作" width="180" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- 查看按钮，绑定点击事件 -->
<el-button size="mini" <el-button size="mini"
type="text" type="text"
@click="handleView(scope.$index, scope.row)">查看</el-button> @click="handleView(scope.$index, scope.row)">查看</el-button>
<!-- 编辑按钮，绑定点击事件 -->
<el-button size="mini" <el-button size="mini"
type="text" type="text"
@click="handleUpdate(scope.$index, scope.row)"> @click="handleUpdate(scope.$index, scope.row)">
编辑</el-button> 编辑</el-button>
<!-- 删除按钮，绑定点击事件 -->
<el-button size="mini" <el-button size="mini"
type="text" type="text"
@click="handleDelete(scope.$index, scope.row)">删除</el-button> @click="handleDelete(scope.$index, scope.row)">删除</el-button>
@ -90,7 +120,9 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 分页组件的容器 -->
<div class="pagination-container"> <div class="pagination-container">
<!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
<el-pagination <el-pagination
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@ -105,15 +137,20 @@
</div> </div>
</template> </template>
<script> <script>
import {fetchList,deleteCoupon} from '@/api/coupon'; // 从'@/api/coupon'模块导入获取列表、删除优惠券相关的函数
import {formatDate} from '@/utils/date'; import {fetchList, deleteCoupon} from '@/api/coupon';
const defaultListQuery = { // 从'@/utils/date'模块导入日期格式化相关的函数formatDate
import {formatDate} from '@/utils/date';
// 默认的列表查询参数对象，包含页码、每页数量、优惠券名称、类型等初始值
const defaultListQuery = {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
name: null, name: null,
type: null type: null
}; };
const defaultTypeOptions=[ // 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
const defaultTypeOptions = [
{ {
label: '全场赠券', label: '全场赠券',
value: 0 value: 0
@ -130,102 +167,124 @@
label: '注册赠券', label: '注册赠券',
value: 3 value: 3
} }
]; ];
export default {
name:'couponList', export default {
name: 'couponList',
data() { data() {
return { return {
listQuery:Object.assign({},defaultListQuery), // 当前列表查询参数，初始为默认值副本
typeOptions:Object.assign({},defaultTypeOptions), listQuery: Object.assign({}, defaultListQuery),
list:null, // 优惠券类型选项，初始为默认值副本
total:null, typeOptions: Object.assign({}, defaultTypeOptions),
listLoading:false, // 优惠券列表数据，初始为null
multipleSelection:[] list: null,
// 数据总条数，初始为null
total: null,
// 列表数据加载状态，初始为false
listLoading: false,
// 多选选中的记录，初始为空数组
multipleSelection: []
} }
}, },
created(){ created() {
// 组件创建时调用，用于获取优惠券列表数据
this.getList(); this.getList();
}, },
filters:{ filters: {
formatType(type){ // 根据值格式化优惠券类型显示文本的过滤器
for(let i=0;i<defaultTypeOptions.length;i++){ formatType(type) {
if(type===defaultTypeOptions[i].value){ for (let i = 0; i < defaultTypeOptions.length; i++) {
if (type === defaultTypeOptions[i].value) {
return defaultTypeOptions[i].label; return defaultTypeOptions[i].label;
} }
} }
return ''; return '';
}, },
formatUseType(useType){ // 根据值格式化可使用商品类型显示文本的过滤器
if(useType===0){ formatUseType(useType) {
if (useType === 0) {
return '全场通用'; return '全场通用';
}else if(useType===1){ } else if (useType === 1) {
return '指定分类'; return '指定分类';
}else{ } else {
return '指定商品'; return '指定商品';
} }
}, },
formatPlatform(platform){ // 根据值格式化适用平台显示文本的过滤器
if(platform===1){ formatPlatform(platform) {
if (platform === 1) {
return '移动平台'; return '移动平台';
}else if(platform===2){ } else if (platform === 2) {
return 'PC平台'; return 'PC平台';
}else{ } else {
return '全平台'; return '全平台';
} }
}, },
formatDate(time){ // 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
if(time==null||time===''){ formatDate(time) {
if (time == null || time === '') {
return 'N/A'; return 'N/A';
} }
let date = new Date(time); let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd') return formatDate(date, 'yyyy-MM-dd')
}, },
formatStatus(endTime){ // 根据结束时间判断并格式化优惠券状态显示文本的过滤器，对比当前时间判断是否过期
formatStatus(endTime) {
let now = new Date().getTime(); let now = new Date().getTime();
let endDate = new Date(endTime); let endDate = new Date(endTime);
if(endDate>now){ if (endDate > now) {
return '未过期' return '未过期'
}else{ } else {
return '已过期'; return '已过期';
} }
} }
}, },
methods:{ methods: {
// 重置搜索条件的方法，恢复为默认查询参数
handleResetSearch() { handleResetSearch() {
this.listQuery = Object.assign({}, defaultListQuery); this.listQuery = Object.assign({}, defaultListQuery);
}, },
// 处理搜索列表的方法，重置页码后调用获取列表的方法
handleSearchList() { handleSearchList() {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.getList(); this.getList();
}, },
handleSelectionChange(val){ // 处理多选选择改变的方法，更新多选选中的记录
handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
// 处理每页显示数量改变的方法，重置页码，更新每页数量后调用获取列表的方法
handleSizeChange(val) { handleSizeChange(val) {
this.listQuery.pageNum = 1; this.listQuery.pageNum = 1;
this.listQuery.pageSize = val; this.listQuery.pageSize = val;
this.getList(); this.getList();
}, },
// 处理当前页码改变的方法，更新页码后调用获取列表的方法
handleCurrentChange(val) { handleCurrentChange(val) {
this.listQuery.pageNum = val; this.listQuery.pageNum = val;
this.getList(); this.getList();
}, },
handleAdd(){ // 处理添加操作的方法，通过路由跳转至添加优惠券的页面
handleAdd() {
this.$router.push({path: '/sms/addCoupon'}) this.$router.push({path: '/sms/addCoupon'})
}, },
// 处理查看操作的方法，通过路由跳转至优惠券历史记录页面，并传递对应优惠券的id
handleView(index, row) { handleView(index, row) {
this.$router.push({path: '/sms/couponHistory', query: {id: row.id}}) this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
}, },
// 处理编辑操作的方法，通过路由跳转至编辑优惠券的页面，并传递对应优惠券的id
handleUpdate(index, row) { handleUpdate(index, row) {
this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}}) this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
}, },
// 处理删除操作的方法，弹出确认框，确认后调用删除函数，成功后提示并重新获取列表数据
handleDelete(index, row) { handleDelete(index, row) {
this.$confirm('是否进行删除操作?', '提示', { this.$confirm('是否进行删除操作?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
deleteCoupon(row.id).then(response=>{ deleteCoupon(row.id).then(response => {
this.$message({ this.$message({
type: 'success', type: 'success',
message: '删除成功!' message: '删除成功!'
@ -234,18 +293,20 @@
}); });
}) })
}, },
getList(){ // 获取优惠券列表数据的方法，设置加载状态为true，获取成功后更新数据及加载状态
this.listLoading=true; getList() {
fetchList(this.listQuery).then(response=>{ this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false; this.listLoading = false;
this.list = response.data.list; this.list = response.data.list;
this.total = response.data.total; this.total = response.data.total;
}); });
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
<!-- scoped属性使样式仅作用于当前组件。.input-width类设置元素宽度为203px。 -->
.input-width { .input-width {
width: 203px; width: 203px;
} }

15
src/views/sms/coupon/update.vue
Unescape View File

@ -1,14 +1,21 @@
<template>  <template>
<!-- 在模板中使用了coupon-detail组件，并传递isEdit属性值为true，可能用于告知该组件当前处于编辑模式 -->
<coupon-detail :isEdit="true"></coupon-detail> <coupon-detail :isEdit="true"></coupon-detail>
</template> </template>
<script> <script>
import CouponDetail from './components/CouponDetail' // 从'./components/CouponDetail'文件路径导入名为CouponDetail的组件
export default { import CouponDetail from './components/CouponDetail';
export default {
// 定义当前组件名称为updateCoupon
name: 'updateCoupon', name: 'updateCoupon',
// 注册CouponDetail组件，使其能在模板中使用
components: { CouponDetail } components: { CouponDetail }
} }
</script> </script>
<style scoped> <style scoped>
<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件，目前为空 -->
</style> </style>

Write Preview
Loading…
Cancel
Save