|
|
@@ -0,0 +1,169 @@
|
|
|
+<template>
|
|
|
+ <div class="cash-discount-grant">
|
|
|
+ <el-card>
|
|
|
+ <div slot="header" class="search-section">
|
|
|
+ <div class="search-row">
|
|
|
+ <el-form :model="searchForm" label-width="70px" inline>
|
|
|
+ <el-form-item label="客户号:">
|
|
|
+ <el-input v-model="searchForm.customerId" placeholder="请输入客户号" clearable style="width: 220px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="button-group" style="margin-left: 20px;">
|
|
|
+ <el-button type="primary" @click="handleSearch">查询</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ <el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="pagedData" stripe border style="width: 100%;" v-loading="loading">
|
|
|
+ <el-table-column prop="customerId" label="客户号" width="160"></el-table-column>
|
|
|
+ <el-table-column prop="discountType" label="立减金类型" width="130"></el-table-column>
|
|
|
+ <el-table-column prop="binRestriction" label="是否有bin卡限制" width="140">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.binRestriction === '是' ? 'warning' : 'info'" size="small">{{ scope.row.binRestriction }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="grantDate" label="发放日期" width="120"></el-table-column>
|
|
|
+ <el-table-column prop="grantAmount" label="发放金额" width="110">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>¥{{ scope.row.grantAmount }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="grantReason" label="发放事由" min-width="160" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="validPeriod" label="使用有效期" width="220"></el-table-column>
|
|
|
+ <el-table-column prop="claimed" label="是否领取" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.claimed === '是' ? 'success' : 'danger'" size="small">{{ scope.row.claimed }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="claimTime" label="领取时间" width="160"></el-table-column>
|
|
|
+ <el-table-column prop="used" label="是否使用" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.used === '是' ? 'success' : 'danger'" size="small">{{ scope.row.used }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="useTime" label="使用时间" width="160"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-pagination
|
|
|
+ style="margin-top: 20px; text-align: right;"
|
|
|
+ @current-change="handlePageChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="filteredData.length"
|
|
|
+ ></el-pagination>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const DISCOUNT_TYPES = ['借记卡', '信用卡']
|
|
|
+const GRANT_REASONS = ['新开户礼遇', '月度消费达标奖励', '生日专属福利', '双十一营销活动', '服务补偿', '升级Premier礼遇', '推荐好友奖励', '季度活跃奖励']
|
|
|
+
|
|
|
+function pad(n) { return String(n).padStart(2, '0') }
|
|
|
+
|
|
|
+function randomDate(baseDate, offsetDays) {
|
|
|
+ const d = new Date(baseDate)
|
|
|
+ d.setDate(d.getDate() - Math.floor(Math.random() * offsetDays))
|
|
|
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
|
|
|
+}
|
|
|
+
|
|
|
+function randomDateTime(baseDate, offsetDays) {
|
|
|
+ const d = new Date(baseDate)
|
|
|
+ d.setDate(d.getDate() - Math.floor(Math.random() * offsetDays))
|
|
|
+ d.setHours(Math.floor(Math.random() * 14 + 8), Math.floor(Math.random() * 60), Math.floor(Math.random() * 60))
|
|
|
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
|
|
+}
|
|
|
+
|
|
|
+function generateMockData() {
|
|
|
+ const list = []
|
|
|
+ const base = new Date(2026, 4, 15)
|
|
|
+ const amounts = [10, 20, 30, 50, 88, 100, 128, 200]
|
|
|
+
|
|
|
+ for (let i = 1; i <= 65; i++) {
|
|
|
+ const grantDate = randomDate(base, 90)
|
|
|
+ const validStart = grantDate
|
|
|
+ const validEnd = new Date(grantDate)
|
|
|
+ validEnd.setDate(validEnd.getDate() + 30 + Math.floor(Math.random() * 60))
|
|
|
+ const validEndStr = `${validEnd.getFullYear()}-${pad(validEnd.getMonth() + 1)}-${pad(validEnd.getDate())}`
|
|
|
+
|
|
|
+ const claimed = Math.random() > 0.25 ? '是' : '否'
|
|
|
+ const used = claimed === '是' && Math.random() > 0.35 ? '是' : '否'
|
|
|
+
|
|
|
+ list.push({
|
|
|
+ id: i,
|
|
|
+ customerId: 'CUST' + String(100000 + Math.floor(Math.random() * 900000)),
|
|
|
+ discountType: DISCOUNT_TYPES[Math.floor(Math.random() * DISCOUNT_TYPES.length)],
|
|
|
+ binRestriction: Math.random() > 0.5 ? '是' : '否',
|
|
|
+ grantDate: grantDate,
|
|
|
+ grantAmount: amounts[Math.floor(Math.random() * amounts.length)],
|
|
|
+ grantReason: GRANT_REASONS[Math.floor(Math.random() * GRANT_REASONS.length)],
|
|
|
+ validPeriod: `${validStart} 至 ${validEndStr}`,
|
|
|
+ claimed: claimed,
|
|
|
+ claimTime: claimed === '是' ? randomDateTime(base, 60) : '-',
|
|
|
+ used: used,
|
|
|
+ useTime: used === '是' ? randomDateTime(base, 30) : '-'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ list.sort((a, b) => b.grantDate.localeCompare(a.grantDate))
|
|
|
+ return list
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'CashDiscountGrant',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchForm: { customerId: '' },
|
|
|
+ loading: false,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ tableData: generateMockData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ filteredData() {
|
|
|
+ const keyword = this.searchForm.customerId.trim()
|
|
|
+ if (!keyword) return this.tableData
|
|
|
+ return this.tableData.filter(item => item.customerId.includes(keyword))
|
|
|
+ },
|
|
|
+ pagedData() {
|
|
|
+ const start = (this.currentPage - 1) * this.pageSize
|
|
|
+ return this.filteredData.slice(start, start + this.pageSize)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSearch() {
|
|
|
+ this.currentPage = 1
|
|
|
+ },
|
|
|
+ handleReset() {
|
|
|
+ this.searchForm.customerId = ''
|
|
|
+ this.currentPage = 1
|
|
|
+ },
|
|
|
+ handlePageChange(page) {
|
|
|
+ this.currentPage = page
|
|
|
+ },
|
|
|
+ handleExport() {
|
|
|
+ this.$message.success('导出任务已提交，请稍后在下载中心查看')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.search-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.search-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.button-group {
|
|
|
+ display: inline-flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+</style>
|
Fade