源文件

src/views/coupon_manage/coupon_list.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="app-container">
+        <div class="head-container">
+            <el-button type="primary" icon="el-icon-plus" @click="$refs.addCoupon.show()">
+                添加优惠券
+            </el-button>
+        </div>
+        <div class="head-container">
+            <el-table :data="tableData.data" v-loading="tableData.loading">
+                <el-table-column label="优惠券名称" prop="title"></el-table-column>
+                <el-table-column label="类型" prop="classType">
+                    <template v-slot="scope">
+                        {{ scope.row.classType | classTypeFilter }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="优惠类型" prop="type">
+                    <template v-slot="scope">
+                        {{ scope.row.type | typeFilter }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="折扣" prop="ratio"></el-table-column>
+                <el-table-column label="面额" prop="amount"></el-table-column>
+                <el-table-column label="满减限制" prop="limitAmount"></el-table-column>
+                <el-table-column label="发放数量" prop="number"></el-table-column>
+                <el-table-column label="限领数量" prop="limitNumber"></el-table-column>
+                <el-table-column label="剩余数量" prop="leftNumber"></el-table-column>
+                <el-table-column label="有效期" prop="effectType">
+                    <template v-slot="scope">
+                        {{ scope.row.effectType | effectTypeFilter }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="开始时间" prop="fromTime"></el-table-column>
+                <el-table-column label="到期时间" prop="toTime"></el-table-column>
+                <el-table-column label="商品列表" prop="relationIds" width="200">
+                    <template v-slot="scope">
+                        <div style="display: flex;" v-if="scope.row.classType == 'product'">
+                            <el-image :src="scope.row.coverImg" style="width: 30px;height: 30px;"></el-image>
+                            <span style="margin-left: 10px;">{{ scope.row.name }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="head-container">
+            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+                @current-change="paginationChange" @size-change="sizeChange"
+                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        </div>
+        <addCoupon ref="addCoupon" @success="resetHandle" />
+    </div>
+</template>
+
+<script>
+import couponEnum from './couponEnum'
+import addCoupon from './components/addCoupon.vue'
+import { tbMerchantCouponGet } from '@/api/shop'
+export default {
+    components: { addCoupon },
+    data() {
+        return {
+            tableData: {
+                data: [],
+                page: 0,
+                size: 10,
+                loading: false,
+                total: 0
+            }
+        }
+    },
+    filters: {
+        classTypeFilter(value) {
+            return couponEnum.classType.find(item => item.value == value).label
+        },
+        typeFilter(value) {
+            return couponEnum.type.find(item => item.value == value).label
+        },
+        effectTypeFilter(value) {
+            return couponEnum.effectType.find(item => item.value == value).label
+        }
+    },
+    mounted() {
+        this.getTableData()
+    },
+    methods: {
+        // 重置查询
+        resetHandle() {
+            this.page = 0
+            this.getTableData()
+        },
+        // 分页大小改变
+        sizeChange(e) {
+            this.tableData.size = e
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.getTableData()
+        },
+        // 获取商品列表
+        async getTableData() {
+            this.tableData.loading = true
+            try {
+                const res = await tbMerchantCouponGet({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    shopId: localStorage.getItem('shopId')
+                })
+                this.tableData.loading = false
+                this.tableData.data = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>