|
|
@@ -1,167 +1,182 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
|
|
|
- <el-form-item label="会员ID" prop="userId">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.userId"
|
|
|
- placeholder="请输入会员ID"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="会员名称" prop="nickname">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.nickname"
|
|
|
- placeholder="请输入会员名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="手机号" prop="phone">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.phone"
|
|
|
- placeholder="请输入手机号"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="优惠券" prop="couponTitle">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.couponTitle"
|
|
|
- placeholder="请输入优惠券名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="优惠券类型" prop="couponType">
|
|
|
- <el-select v-model="queryParams.couponType" placeholder="请选择类型" clearable size="small">
|
|
|
- <el-option
|
|
|
- v-for="item in couponTypeOptions"
|
|
|
- :key="item.dictValue"
|
|
|
- :label="item.dictLabel"
|
|
|
- :value="item.dictValue"
|
|
|
+ <div class="app-container coupon-user-page">
|
|
|
+ <el-card shadow="never" class="search-card">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="88px" size="small">
|
|
|
+ <el-form-item label="会员ID" prop="userId">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.userId"
|
|
|
+ placeholder="请输入会员ID"
|
|
|
+ clearable
|
|
|
+ style="width: 140px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
- <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
|
|
|
- <el-option
|
|
|
- v-for="item in statusOptions"
|
|
|
- :key="item.dictValue"
|
|
|
- :label="item.dictLabel"
|
|
|
- :value="item.dictValue"
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会员名称" prop="nickname">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.nickname"
|
|
|
+ placeholder="请输入会员名称"
|
|
|
+ clearable
|
|
|
+ style="width: 150px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="领取时间">
|
|
|
- <el-date-picker
|
|
|
- v-model="dateRange"
|
|
|
- size="small"
|
|
|
- style="width: 220px"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- type="daterange"
|
|
|
- range-separator="-"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <el-row :gutter="10" class="mb8">
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="warning"
|
|
|
- icon="el-icon-download"
|
|
|
- size="mini"
|
|
|
- @click="handleExport"
|
|
|
- >导出</el-button>
|
|
|
- </el-col>
|
|
|
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
- </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.phone"
|
|
|
+ placeholder="请输入完整手机号"
|
|
|
+ clearable
|
|
|
+ style="width: 160px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="优惠券" prop="couponTitle">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.couponTitle"
|
|
|
+ placeholder="请输入优惠券名称"
|
|
|
+ clearable
|
|
|
+ style="width: 170px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="优惠券类型" prop="couponType">
|
|
|
+ <el-select v-model="queryParams.couponType" placeholder="全部类型" clearable style="width: 130px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in couponTypeOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="全部状态" clearable style="width: 120px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="领取时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
|
|
|
- <el-table
|
|
|
- height="500"
|
|
|
- border
|
|
|
- size="mini"
|
|
|
- v-loading="loading"
|
|
|
- :data="storeCouponUserList"
|
|
|
- >
|
|
|
- <el-table-column label="会员ID" prop="userId" width="90" align="center" />
|
|
|
- <el-table-column label="会员" min-width="120" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="cell-main">{{ scope.row.nickname || '-' }}</div>
|
|
|
- <div class="cell-sub">{{ scope.row.phone || '-' }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="会员归属" min-width="120" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.bindCompanyUserName || '-' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="直播间" min-width="140" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="cell-main">{{ scope.row.liveName || '-' }}</div>
|
|
|
- <div class="cell-sub" v-if="scope.row.liveId">ID {{ scope.row.liveId }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="优惠券" min-width="140" show-overflow-tooltip>
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="cell-main">{{ scope.row.couponTitle || '-' }}</div>
|
|
|
- <div class="cell-sub">面值 {{ scope.row.couponPrice }} / 满 {{ scope.row.useMinPrice }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="优惠券类型" width="100" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag size="mini" :type="couponTypeTagType(scope.row.couponType)">
|
|
|
- {{ couponTypeLabel(scope.row.couponType) }}
|
|
|
- </el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="领取/有效期" min-width="150">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="cell-sub">领：{{ formatTime(scope.row.createTime) }}</div>
|
|
|
- <div class="cell-sub">止：{{ formatTime(scope.row.limitTime) }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="核销信息" min-width="150">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="cell-main">{{ scope.row.verifyUserName || '-' }}</div>
|
|
|
- <div class="cell-sub">{{ formatTime(scope.row.verifyTime || scope.row.useTime) }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="状态" width="80" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag size="mini" :type="statusTagType(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="70" align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
+ <el-card shadow="never" class="table-card">
|
|
|
+ <div class="toolbar">
|
|
|
+ <div class="toolbar-left">
|
|
|
<el-button
|
|
|
- v-if="canVerify(scope.row)"
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
size="mini"
|
|
|
- type="text"
|
|
|
- @click="handleVerify(scope.row)"
|
|
|
- >核销</el-button>
|
|
|
- <span v-else class="cell-sub">-</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ @click="handleExport"
|
|
|
+ >导出</el-button>
|
|
|
+ <span class="toolbar-tip">仅核销券支持核销；普通券状态为待使用/已使用</span>
|
|
|
+ </div>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ height="520"
|
|
|
+ border
|
|
|
+ size="mini"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="storeCouponUserList"
|
|
|
+ class="coupon-table"
|
|
|
+ >
|
|
|
+ <el-table-column label="会员" min-width="150" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell-main">{{ scope.row.nickname || '-' }}</div>
|
|
|
+ <div class="cell-sub">ID {{ scope.row.userId || '-' }} · {{ scope.row.phone || '-' }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="会员归属" min-width="140" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell-main">{{ scope.row.bindCompanyUserName || '-' }}</div>
|
|
|
+ <div class="cell-sub">{{ scope.row.bindCompanyName || '-' }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="直播间" min-width="140" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell-main">{{ scope.row.liveName || '-' }}</div>
|
|
|
+ <div class="cell-sub" v-if="scope.row.liveId">ID {{ scope.row.liveId }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="优惠券" min-width="160" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell-main">{{ scope.row.couponTitle || '-' }}</div>
|
|
|
+ <div class="cell-sub">面值 ¥{{ scope.row.couponPrice }} · 满 ¥{{ scope.row.useMinPrice }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="类型" width="96" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag size="mini" :type="couponTypeTagType(scope.row.couponType)" effect="plain">
|
|
|
+ {{ couponTypeLabel(scope.row.couponType) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="领取 / 有效期" min-width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="cell-sub">领 {{ formatTime(scope.row.createTime) }}</div>
|
|
|
+ <div class="cell-sub">止 {{ formatTime(scope.row.limitTime) }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="使用信息" min-width="160" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <template v-if="isVerifyCouponType(scope.row.couponType)">
|
|
|
+ <div class="cell-main">{{ scope.row.verifyUserName || '-' }}</div>
|
|
|
+ <div class="cell-sub">{{ scope.row.verifyCompanyName || '-' }}</div>
|
|
|
+ <div class="cell-sub">{{ formatTime(scope.row.verifyTime || scope.row.useTime) }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="cell-main cell-muted">普通券不可核销</div>
|
|
|
+ <div class="cell-sub">{{ formatTime(scope.row.useTime) !== '-' ? ('使用 ' + formatTime(scope.row.useTime)) : '-' }}</div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" width="88" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag size="mini" :type="statusTagType(scope.row.status)">
|
|
|
+ {{ statusLabel(scope.row.status) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="72" align="center" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="canVerify(scope.row)"
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ @click="handleVerify(scope.row)"
|
|
|
+ >核销</el-button>
|
|
|
+ <span v-else class="cell-sub">-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
|
|
|
- <pagination
|
|
|
- v-show="total > 0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.pageNum"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getList"
|
|
|
- />
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -217,7 +232,6 @@ export default {
|
|
|
}
|
|
|
return 'info';
|
|
|
},
|
|
|
- /** 仅核销类券且未核销可操作；普通券不可核销 */
|
|
|
isVerifyCouponType(type) {
|
|
|
const label = this.couponTypeLabel(type) || '';
|
|
|
return label.includes('核销') || label.includes('代金券');
|
|
|
@@ -247,8 +261,8 @@ export default {
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
listStoreCouponUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
|
|
- this.storeCouponUserList = response.rows;
|
|
|
- this.total = response.total;
|
|
|
+ this.storeCouponUserList = response.rows || [];
|
|
|
+ this.total = response.total || 0;
|
|
|
this.loading = false;
|
|
|
}).catch(() => {
|
|
|
this.loading = false;
|
|
|
@@ -281,7 +295,6 @@ export default {
|
|
|
}
|
|
|
}).catch(() => {});
|
|
|
},
|
|
|
- /** 本页单独带 Authorization 下载，避免 location 跳转丢 token，不影响全局 download */
|
|
|
handleExport() {
|
|
|
const queryParams = this.addDateRange({ ...this.queryParams }, this.dateRange);
|
|
|
this.$confirm('是否确认导出所有优惠券发放记录数据项？', "警告", {
|
|
|
@@ -330,13 +343,53 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.coupon-user-page {
|
|
|
+ padding-bottom: 12px;
|
|
|
+}
|
|
|
+.search-card {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+.search-card >>> .el-card__body {
|
|
|
+ padding: 14px 16px 2px;
|
|
|
+}
|
|
|
+.table-card {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+.table-card >>> .el-card__body {
|
|
|
+ padding: 12px 16px 8px;
|
|
|
+}
|
|
|
+.toolbar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+.toolbar-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+.toolbar-tip {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+.coupon-table {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
.cell-main {
|
|
|
line-height: 18px;
|
|
|
color: #303133;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.cell-muted {
|
|
|
+ color: #909399;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
.cell-sub {
|
|
|
line-height: 18px;
|
|
|
font-size: 12px;
|
|
|
color: #909399;
|
|
|
+ margin-top: 2px;
|
|
|
}
|
|
|
</style>
|
