From f9dae30f3b5ab49655ee6a71118f66915fe4a917 Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期三, 01 十月 2025 16:43:41 +0800 Subject: [PATCH] 更新 --- seller/src/views/store-coupon/coupon_store.vue | 607 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ seller/src/api/coupon-store.js | 16 + 2 files changed, 623 insertions(+), 0 deletions(-) diff --git a/seller/src/api/coupon-store.js b/seller/src/api/coupon-store.js new file mode 100644 index 0000000..2438175 --- /dev/null +++ b/seller/src/api/coupon-store.js @@ -0,0 +1,16 @@ +import service from "../libs/axios"; + +export const getPage = (params) =>{ + return service({ + url: "/lmk/storeCoupon", + method: "GET", + params: params + }) +} +export const getPageByStoreCoupon = (params) =>{ + return service({ + url: "/lmk/storeCoupon/getPageByStoreCoupon", + method: "GET", + params: params + }) +} diff --git a/seller/src/views/store-coupon/coupon_store.vue b/seller/src/views/store-coupon/coupon_store.vue new file mode 100644 index 0000000..64862b6 --- /dev/null +++ b/seller/src/views/store-coupon/coupon_store.vue @@ -0,0 +1,607 @@ +<template> + <div class="coupon-management"> + <!-- 鎼滅储鍖哄煙 --> + <Card class="filter-container"> + <div class="filter-header"> + <Icon type="ios-search" size="18" /> + <span class="filter-title">绛涢�夋悳绱�</span> + <div class="filter-actions"> + <Button type="primary" @click="getList" size="small">鏌ヨ鎼滅储</Button> + <Button @click="handleResetSearch" size="small" style="margin-left: 10px;">閲嶇疆</Button> + </div> + </div> + <div class="filter-content"> + <Form + :model="listQuery" + :label-width="90" + class="search-form" + inline + > + <FormItem label="鐢熸垚鐘舵��:"> + <Select + v-model="listQuery.generateStatus" + placeholder="鍏ㄩ儴鐘舵��" + clearable + style="width: 180px" + > + <Option value="NOT_GENERATE">娌℃湁鐢熸垚</Option> + <Option value="GENERATE">鐢熸垚</Option> + </Select> + </FormItem> + <FormItem label="鍚敤鐘舵��:"> + <Select + v-model="listQuery.status" + placeholder="鍏ㄩ儴鐘舵��" + clearable + style="width: 180px" + > + <Option value="ENABLE">鍚敤</Option> + <Option value="DISABLE">绂佺敤</Option> + </Select> + </FormItem> + </Form> + </div> + </Card> + + <!-- 琛ㄦ牸鍖哄煙 --> + <Card class="table-container"> + <Table + :loading="listLoading" + border + :columns="tableColumns" + :data="list" + ref="table" + class="coupon-table" + > + <!-- 鐢熸垚鐘舵�佸垪 --> + <template slot-scope="{ row }" slot="generateStatus"> + <Tag :color="getStatusColor(row.generateStatus)"> + {{ formatGenerateStatus(row.generateStatus) }} + </Tag> + </template> + + <template slot-scope="{ row }" slot="action"> + + <Button + @click="detail(row)" + style="margin-left: 10px;" + type="primary" + class="add-btn" + :disabled="row.generateStatus === 'NOT_GENERATE'" + >鏌ョ湅</Button> + </template> + </Table> + </Card> + + <!-- 鍒嗛〉鍖哄煙 --> + <div class="pagination-container"> + <Page + :current="listQuery.pageNumber" + :page-size="listQuery.pageSize" + :total="total" + :page-size-opts="[10, 20, 30, 50]" + show-elevator + show-sizer + show-total + @on-change="handleCurrentChange" + @on-page-size-change="handleSizeChange" + /> + </div> + <Modal + v-model="showGeneralQrCode" + title="浜岀淮鐮�" + width="800" + :mask-closable="false" + :loading="codeLoading" + > + <vue-qr + :text="QRCodeUrl" + :margin="0" + colorDark="#000" + colorLight="#fff" + :size="150" + ></vue-qr> + <div slot="footer"> + <Button type="text" @click="closeGeneralQrCode">鍏抽棴</Button> + <!-- <Button type="primary" @click="generalQrCode">纭</Button>--> + </div> + </Modal> + + <Modal + v-model="showCouponStore" + width="1200" + :mask-closable="false" + @on-cancel="handleCancelCouponStore" + > + <Table + :loading="couponStoreLoading" + border + :columns="couponStoreColumns" + :data="couponStoreData" + ref="table" + > + <template slot-scope="{ row }" slot="action"> + <Button + @click="generalQrCode(row)" + type="primary" + class="add-btn" + v-if="row.claimStatus === 'NOT_CLAIM'" + >鏌ョ湅浜岀淮鐮�</Button> + </template> + </Table> + <Row type="flex" justify="center" class="mt_10"> + <Page + :current="storeCouponSingleQuery.pageNumber" + :total="couponStoreTotal" + :page-size="storeCouponSingleQuery.pageSize" + @on-change="couponStoreChangePage" + @on-page-size-change="couponStoreChangePageSize" + :page-size-opts="[10, 20, 50]" + size="small" + show-total + show-elevator + show-sizer + ></Page> + </Row> + </Modal> + + </div> +</template> + +<script> +import vueQr from "vue-qr"; +import { getPage, getPageByStoreCoupon} from "@/api/coupon-store.js"; +// import * as API_Order from "@/api/order"; +// import {promotionsScopeTypeRender, promotionsStatusRender} from "../../../utils/promotions"; +// import {getPlatformCouponList} from "../../../api/promotion"; + + +export default { + components:{ + "vue-qr": vueQr, + }, + name: 'CouponManagement', + data() { + return { + QRCodeUrl:"", + showGeneralQrCode:false, + codeLoading:false, + + codeUrl: this.QRcodeBaseUrl+ '/scanpage/couponStore', + + showCouponStore:false, + couponStoreTotal:0, + couponStoreData:[], + couponStoreLoading:false, + couponStoreColumns: [ + { + title: "浼樻儬鍒稿悕绉�", + key: "couponName", + width: 200, + align: "center", + tooltip: true + }, + { + title: "浼樻儬鍒哥紪鍙�", + key: "couponNo", + width: 200, + align: "center", + tooltip: true + }, + { + title: "棰嗗彇鐘舵��", + key: "claimStatus", + width: 200, + align: "center", + tooltip: true, + render: (h, params) => { + const status = params.row.claimStatus; + const color = status === 'CLAIM' ? 'success' : status === 'NOT_CLAIM' ? 'default' : 'warning'; + const text = status === 'CLAIM' ? '宸查鍙�' : status === 'NOT_CLAIM' ? '鏈鍙�' : '鏈煡'; + + return h('Tag', { + props: { + color: color + } + }, text); + } + }, + { + title: "鎿嶄綔", + slot: "action", + align: "center", + width: 200, + fixed: "right" + } + ], + + + couponSearchForm: { + // 鎼滅储妗嗗垵濮嬪寲瀵硅薄 + pageNumber: 1, // 褰撳墠椤垫暟 + pageSize: 10, // 椤甸潰澶у皬 + sort: "create_time", // 榛樿鎺掑簭瀛楁 + order: "desc", // 榛樿鎺掑簭鏂瑰紡 + getType: "", // 榛樿鎺掑簭鏂瑰紡 + promotionStatus:"START", + }, + showCoupon:'', + selectedRowId:'', + + couponData:[], + couponLoading:false, + + list: [], + total: 0, + listLoading: false, + submitLoading: false, + storeCouponSingleQuery:{ + pageNumber: 1, + pageSize: 10, + refId:"" + }, + + listQuery: { + pageNumber: 1, + pageSize: 10, + storeId: "", + generateStatus: "", + status: "" + }, + temp: { + storeId: '', + storeName: '', + couponId: '', + couponNum: 1, + couponName: '', + }, + dialogVisible: false, + dialogStatus: '', + dialogTitle: '', + + // 琛ㄥ崟楠岃瘉瑙勫垯 + formRules: { + storeId: [ + { required: true, message: '搴楅摵涓嶈兘涓虹┖', trigger: 'blur' } + ], + storeName: [ + { required: true, message: '搴楅摵鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' } + ], + couponId: [ + { required: true, message: '浼樻儬鍔典笉鑳戒负绌�', trigger: 'blur' } + ], + couponName: [ + { required: true, message: '浼樻儬鍒稿悕绉颁笉鑳戒负绌�', trigger: 'blur' } + ], + couponNum: [ + { required: true, type: 'number', message: '鐢熸垚鏁伴噺涓嶈兘涓虹┖', trigger: 'blur' } + ], + }, + + // 琛ㄥご閰嶇疆 + tableColumns: [ + { + type: 'selection', + width: 60, + align: 'center' + }, + { + title: '搴楅摵鍚嶇О', + key: 'storeName', + align: 'center', + ellipsis: true, + tooltip: true + }, + { + title: '浼樻儬鍒稿悕绉�', + key: 'couponName', + align: 'center', + ellipsis: true, + tooltip: true + }, + { + title: '鐢熸垚鏁伴噺', + key: 'couponNum', + width: 100, + align: 'center' + }, + { + title: '宸查鍙栨暟閲�', + key: 'couponClaimNum', + width: 120, + align: 'center' + }, + { + title: '鐢熸垚鐘舵��', + slot: 'generateStatus', + width: 120, + align: 'center' + }, + { + title: '鍚敤鐘舵��', + key: 'status', + width: 120, + align: 'center', + render: (h, params) => { + const status = params.row.status; + const color = status === 'ENABLE' ? 'success' : status === 'DISABLE' ? 'default' : 'warning'; + const text = status === 'ENABLE' ? '鍚敤' : status === 'DISABLE' ? '鏈惎鐢�' : '鏈煡'; + + return h('Tag', { + props: { + color: color + } + }, text); + } + }, + { + title: '鎿嶄綔', + slot: 'action', + width: 200, + align: 'center' + }, + ] + } + }, + methods: { + closeGeneralQrCode(){ + this.showGeneralQrCode = false; + this.QRCodeUrl = ''; + }, + generalQrCode(row){ + this.QRCodeUrl = ''; + this.showGeneralQrCode = true + this.codeLoading = true; + + this.QRCodeUrl = this.codeUrl + "?id="+ row.id; + + }, + detail(row){ + console.log(row) + this.showCouponStore = true; + this.storeCouponSingleQuery.refId = row.id + this.storeCouponSingleQuery.pageSize = 10 + this.storeCouponSingleQuery.pageNumber = 1 + this.getCouponStoreDataList(); + }, + + couponStoreChangePage(v) { + // 鏀瑰彉椤电爜 + this.storeCouponSingleQuery.pageNumber = v; + this.getCouponStoreDataList(); + }, + couponStoreChangePageSize(v) { + // 鏀瑰彉椤垫暟 + this.storeCouponSingleQuery.pageNumber = 1; + this.storeCouponSingleQuery.pageSize = v; + this.getCouponStoreDataList(); + }, + + + getCouponStoreDataList(){ + this.couponStoreLoading = true; + getPageByStoreCoupon(this.storeCouponSingleQuery).then((res) =>{ + this.couponStoreLoading =false; + if (res.code === 200){ + this.couponStoreData = res.data; + this.couponStoreTotal = res.total; + } + }) + + }, + getCouponDataList() { + // 鑾峰彇鏁版嵁 + this.couponLoading = true; + getPlatformCouponList(this.couponSearchForm).then((res) => { + this.couponLoading = false; + if (res.success) { + this.couponData = res.result.records; + this.couponTotal = res.result.total; + } + }); + this.couponTotal = this.couponData.length; + this.couponLoading = false; + }, + + // 鑾峰彇鍒楄〃鏁版嵁 + getList() { + this.listLoading = true; + // 妯℃嫙API璋冪敤 + getPage(this.listQuery).then(res =>{ + this.listLoading = false; + this.list = res.data; + this.total = res.total; + }) + }, + + // 閲嶇疆鎼滅储鏉′欢 + handleResetSearch() { + this.listQuery = { + pageNumber: 1, + pageSize: 10, + storeName: "", + couponName: "", + generateStatus: "", + status: "" + }; + this.getList(); + }, + + // 鍒嗛〉澶у皬鏀瑰彉 + handleSizeChange(size) { + this.listQuery.pageSize = size; + this.listQuery.pageNumber = 1; + this.getList(); + }, + + // 褰撳墠椤电爜鏀瑰彉 + handleCurrentChange(pageNumber) { + this.listQuery.pageNumber = pageNumber; + this.getList(); + }, + + // 鏍煎紡鍖栫敓鎴愮姸鎬� + formatGenerateStatus(status) { + const statusMap = { + 'NOT_GENERATE': '娌℃湁鐢熸垚', + 'GENERATE': '鐢熸垚', + }; + return statusMap[status] || '鏈煡鐘舵��'; + }, + + // 鑾峰彇鐘舵�侀鑹� + getStatusColor(status) { + const colorMap = { + 'GENERATE': 'success', + 'NOT_GENERATE': 'warning' + }; + return colorMap[status] || 'default'; + }, + handleCancelCouponStore(){ + this.showCouponStore = false; + }, + + + // 鎻愪氦琛ㄥ崟 + handleSubmit() { + this.$refs.dataForm.validate((valid) => { + if (valid) { + let form = {...this.temp}; + addStoreCoupon(form).then(res=>{ + if (res.code === 200 ){ + this.$Message.success(res.msg) + } + this.dialogVisible = false; + this.getList(); + }) + + } + }); + } + }, + mounted() { + this.getList(); + } +} +</script> + +<style scoped lang="less"> +.coupon-management { + padding: 16px; + background: #f5f7f9; + min-height: 100vh; +} + +.filter-container { + margin-bottom: 16px; + + .filter-header { + display: flex; + align-items: center; + margin-bottom: 16px; + + .filter-title { + margin-left: 8px; + font-weight: 600; + font-size: 16px; + } + + .filter-actions { + margin-left: auto; + } + } + + .filter-content { + .search-form { + /deep/ .ivu-form-item { + margin-bottom: 16px; + margin-right: 16px; + } + } + } +} + +.operation-container { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + padding: 12px 16px; + background: #fff; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + + .operation-info { + color: #999; + font-size: 14px; + } +} + +.table-container { + margin-bottom: 16px; + + .coupon-table { + /deep/ .ivu-table-cell { + padding: 8px 12px; + } + + .action-btns { + display: flex; + justify-content: center; + + button { + margin: 0 2px; + } + } + } +} + +.pagination-container { + display: flex; + justify-content: flex-end; + background: #fff; + padding: 12px 16px; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); +} + +// 鍝嶅簲寮忚皟鏁� +@media (max-width: 768px) { + .coupon-management { + padding: 8px; + } + + .filter-content .search-form { + /deep/ .ivu-form-item { + width: 100%; + margin-right: 0; + + .ivu-form-item-content { + width: 100%; + + .ivu-input, .ivu-select { + width: 100% !important; + } + } + } + } + + .operation-container { + flex-direction: column; + align-items: flex-start; + + .add-btn { + margin-bottom: 8px; + } + } + + .action-btns { + flex-direction: column; + + button { + margin: 2px 0 !important; + width: 100%; + } + } +} +</style> -- Gitblit v1.8.0