From 66b9251a0323fa217449193475320942e718062d Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Tue, 9 Dec 2025 18:36:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=A1=E5=88=B8=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B8=83=E5=B1=80=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/timesNum.png           | Bin 0 -> 5357 bytes
 src/router/index.js               |  16 +-
 src/store/index.js                |  26 ++-
 src/style/theme/common.scss       |   9 +
 src/views/agent/checkCardList.vue | 382 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 422 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/timesNum.png
 create mode 100644 src/views/agent/checkCardList.vue

diff --git a/src/assets/timesNum.png b/src/assets/timesNum.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e9f0eacb883b935d1fde951e2522b82d3a4d2ec
GIT binary patch
literal 5357
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
LNkvXXu0mjf{JCji

literal 0
HcmV?d00001

diff --git a/src/router/index.js b/src/router/index.js
index 7c90cd6..a2492a1 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -383,7 +383,17 @@ const routes = [{
       breadcrumbParent: '代收款结算' // 一级页面不显示面包屑
     }
   },
-
+  // 运营工具 start
+  {
+    path: '/agent/checkCardList',
+    name: '卡券管理',
+    isFirst:true,
+    component: () => import( /* webpackChunkName: "checkCardList" */ '../views/agent/checkCardList.vue'),
+    meta: {
+      hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  // 运营工具 end
 
   // -----------------分隔符-----------
   // 管理员start
@@ -641,9 +651,11 @@ router.beforeEach((to, from, next) => {
       store.commit('SET_CUSTOMIZE', true);
       store.commit('SET_SLIDER_MENU', 'rankMenuData');
     }
-
+    
     if (to.path.includes('/super/paiban/')) { //匹配包含此路径的 侧边栏数据
       store.commit('SET_SIDEBAR', false);
+      store.commit('SET_CUSTOMIZE', true);
+      store.commit('SET_SLIDER_MENU', 'lunyiData');
     }
   }
   if (blackFooterList.includes(to.path)) {
diff --git a/src/store/index.js b/src/store/index.js
index d7beab7..225cc16 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -229,18 +229,26 @@ export default new Vuex.Store({
         title: '运营工具',
         icon: 'operatingTools',
         children: [
+
             {
               index: '6-1',
-              title: '检测卡',
-              path: '/card/check_card_list',
-              external: true,//是否跳转外部链接
-            }, 
-            {
-              index: '6-2',
-              title: '微信代金券',
-              path: '/service/coupon_stocks',
-              external: true,//是否跳转外部链接
+              title: '卡券管理',
+              path: '/agent/checkCardList',
+              external: false,//是否跳转外部链接
             }, 
+          
+            // {
+            //   index: '6-1',
+            //   title: '检测卡',
+            //   path: '/card/check_card_list',
+            //   external: true,//是否跳转外部链接
+            // }, 
+            // {
+            //   index: '6-2',
+            //   title: '微信代金券',
+            //   path: '/service/coupon_stocks',
+            //   external: true,//是否跳转外部链接
+            // }, 
             {
               index: '6-3',
               title: '公众号发券',
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index e7805c9..5dc4bd9 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -100,6 +100,14 @@ body {
     display: flex;
     gap: 12px;
 }
+.gap20{
+    display: flex;
+    gap: 20px;
+}
+.gap24{
+    display: flex;
+    gap: 24px;
+}
 
 .mt16 {
     margin-top: 16px;
@@ -142,6 +150,7 @@ body {
     margin-top: 10px;
 }
 
+
 .ceshi {
     transition: all .5s;
     box-sizing: border-box;
diff --git a/src/views/agent/checkCardList.vue b/src/views/agent/checkCardList.vue
new file mode 100644
index 0000000..925d6e0
--- /dev/null
+++ b/src/views/agent/checkCardList.vue
@@ -0,0 +1,382 @@
+<template>
+    <div class="main-content12 ">
+        <div class="flex-common">
+            <el-tabs v-model="curTab" class="mb24" @tab-click="handleClick">
+                <el-tab-pane label="新增卡券" name="add"></el-tab-pane>
+                <el-tab-pane label="管理卡券" name="manage"></el-tab-pane>
+            </el-tabs>
+            <div v-if="curTab == 'add'" class="customize_box">
+                <div class="flex-between mb24">
+                    <div>
+                        <h4>自定义卡券（原检测卡）</h4>
+                        <p class="desc">为用户发放高度自定义的卡券,可通过卡券自提、公众号自动回复、自行与第三方合作（如：阿奇索）的形式发放</p>
+                    </div>
+                    <GuipButton type="system" :btnstyle="{'width': '142px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                </div>
+                <div class="flex customizeWrap mb24">
+                    <div class="customizeItem active">
+                        <span class="posFree">中一个亿</span>
+                        <div class="flex gap8">
+                            <img src="@/assets/timesNum.png" alt="">
+                            <span class="cardTitle">时间卡</span>
+                        </div>
+                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
+                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                    </div>
+                    <div class="customizeItem">
+                        <span class="posFree">中一个亿</span>
+                        <div class="flex gap8">
+                            <img src="@/assets/timesNum.png" alt="">
+                            <span class="cardTitle">时间卡</span>
+                        </div>
+                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
+                        <GuipButton type="ignore" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                    </div>
+                    <div class="customizeItem">
+                        <span class="posFree">中一个亿</span>
+                        <div class="flex gap8">
+                            <img src="@/assets/timesNum.png" alt="">
+                            <span class="cardTitle">时间卡</span>
+                        </div>
+                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
+                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                    </div>
+                    <div class="customizeItem">
+                        <span class="posFree">中一个亿</span>
+                        <div class="flex gap8">
+                            <img src="@/assets/timesNum.png" alt="">
+                            <span class="cardTitle">时间卡</span>
+                        </div>
+                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
+                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                    </div>
+                    <div class="customizeItem">
+                        <span class="posFree">中一个亿</span>
+                        <div class="flex gap8">
+                            <img src="@/assets/timesNum.png" alt="">
+                            <span class="cardTitle">时间卡</span>
+                        </div>
+                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
+                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                    </div>
+                </div>
+                <h4>独立卡券</h4>
+                <p class="desc mb20">一些介绍，通过微信链接，用户免费领取。适用于微信社群运营。</p>
+                <div class="flex customizeWrap">
+                    <div class="customizeItem">
+                        <span class="posFree">免费代金券</span>
+                        <div class="flex gap8">
+                            <img src="@/assets/timesNum.png" alt="">
+                            <span class="cardTitle">时间卡</span>
+                        </div>
+                        <p>用户不需支付，领取指定代金券使用微信支付可用</p>
+                        <GuipButton type="primary" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                    </div>
+                </div>
+            </div>
+            <div v-if="curTab == 'manage'" class="manageBox">
+                <h4 class="mb24">选择卡券类型</h4>
+                <div class="cardTypeList gap20 flex">
+                    <div v-for="item in walletList" :key="item.type" class="wallet-item" :class="walletType == item.type ? 'wallet-item-active' : ''" @click="walletClick(item.type)">
+                        <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="walletType == item.type">
+                        <div class="wallet-name">{{item.name}}</div>
+                        <div class="desc">{{ item.desc1 }}</div>
+                        <div class="desc">{{ item.desc2 }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex-common mt12" v-if="curTab == 'manage'">
+            <el-tabs v-model="curType" class="mb12" @tab-click="handleClick">
+                <el-tab-pane label="单张发售卡" name="only"></el-tab-pane>
+                <el-tab-pane label="批量发售卡" name="more"></el-tab-pane>
+            </el-tabs>
+            <div class="flex numsList gap12">
+                <div class="numItem gap8 flex" :class="curCardType == item.type ? 'numItemActive' : ''" v-for="item in numsList" :key="item.name">
+                    {{ item.name }} <span class="unit">{{ item.num }}</span>
+                </div>
+            </div>
+            <GuipTable :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
+                <template>
+                    <el-table-column fixed="left" prop="card" label="检测卡号" min-width="200"></el-table-column>
+                    <el-table-column prop="type" label="发行方式" width="120"></el-table-column>
+                    <el-table-column prop="rule" label="使用规则" min-width="200"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="余额/面额" min-width="120"></el-table-column>
+                    <el-table-column prop="pay" label="支付金额" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测系统" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测服务" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测价格" min-width="120"></el-table-column>
+                    <el-table-column prop="status" label="状态" min-width="120">
+                        <template slot-scope="scope">
+                            <span :class="['status','status'+[scope.row.status]]">{{ scope.row.status_desc }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column fixed="right" prop="tid" label="操作" min-width="100">
+                        <template slot-scope="scope">
+                            <GuipButton type="text" @click="handleRefuse(scope.row)">关闭</GuipButton>
+                        </template>
+                    </el-table-column>
+                </template>
+            </GuipTable>
+        </div>
+    </div>
+</template>
+<script>
+import GuipButton from '@/components/GuipButton'
+import GuipTable from '@/components/GuipTable.vue';
+export default {
+    components: {
+        GuipButton,
+        GuipTable,
+    },
+    watch: {
+        curType(val) {
+            if (val == 'only') {
+                this.curCardType = 1;
+            } else {
+                this.curCardType = 2;
+            }
+        }
+    },
+    data() {
+        return {
+            curTab: 'manage',
+            curType: 'only',
+            curCardType: 1,
+            tableList:[
+                {
+                    card: '123456789',
+                    type:'单张发售卡',
+                    rule:'满减卡',
+                    review_status_desc:'10元',
+                    pay:'￥10.00',
+                    status: 1,
+                    status_desc: '使用中',
+                    tid: ''
+                },
+                {
+                    card: '123456789',
+                    type:'批量发售卡',
+                    rule:'折扣卡',
+                }
+            ],
+            walletList:[
+                {
+                    type: 1,
+                    name: '自定义卡券（原检测卡）',
+                    desc1:'为用户发放高度自定义的卡券',
+                    desc2:'分折扣、满减、现金、时间、次数的卡类型'
+                },
+                {
+                    type: 2,
+                    name: '微信代金券',
+                    desc1:'通过微信链接，用户免费领取',
+                    desc2:'适用于微信社群运营'
+                }
+            ],
+            walletType:1,
+            numsList:[
+                {
+                    name:'现金卡',
+                    type:1,
+                    num:6
+                },
+                {
+                    name:'折扣卡',
+                    num:6,
+                    type:2
+                },
+                {
+                    name:'满减卡',
+                    num:6,
+                    type:3
+                },
+                {
+                    name:'时间卡',
+                    num:6,
+                    type:4
+                },
+                {
+                    name:'次数卡',
+                    num:6,
+                    type:5
+                }
+            ]
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        // 
+        addTimeNums() {
+
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        walletClick(type) {
+            this.walletType = type;
+        },
+        handleRefuse() {
+
+        }
+    },
+}
+</script>
+<style scoped lang="scss">
+.customize_box,.manageBox{
+    h4{
+        margin: 0;
+        text-align: left;
+    }
+    .desc{
+        text-align: left;
+        margin: 6px 0 0px;
+    }
+}
+.gap20{
+    gap: 20px;
+}
+.manageBox{
+
+}
+.customizeWrap{
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 20px;
+    .customizeItem{
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        position: relative;
+        width: 281.5px;
+        height: 160px;
+        padding: 16px 14px;
+        box-sizing: border-box;
+        border-radius: 8px;
+        background: #FFFFFF;
+        border: 1px solid #DFE2E6;
+        box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
+        img{
+            width: 32px;
+            height: 32px;
+        }
+        .cardTitle{   
+            font-weight: bold;
+            color: #23242B;
+        }
+        p{
+            font-size: 12px;
+            font-weight: normal;
+            line-height: 15px;
+            letter-spacing: 0.08em;
+            color: #8A9099;
+            text-align: left;
+        }
+        .posFree{
+            position: absolute;
+            top: 0;
+            right: 0;
+            font-size: 12px;
+            color: #FF4D4F;
+            border-radius: 2px;
+            width: 68px;
+            height: 24px;
+            padding: 4px 10px;
+            box-sizing: border-box;
+            border-radius: 0px 8px 0px 8px;
+            background: #FFF2F2;
+        }
+    }
+    .active{
+        border-color: #006AFF;
+    }
+}
+.cardTypeList{
+    .wallet-item{
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+        padding: 16px 14px;
+        width: 282px;
+        height: 96px;
+        letter-spacing: 0.08em;
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.47);
+        box-sizing: border-box;
+        border: 1px solid #DFE2E6;
+        .desc{
+            font-size: 12px;
+            color: #626573;
+            letter-spacing: 0.08em;
+        }
+
+        .wallet-name{
+        color: #1E2226;
+        font-size: 14px;
+        font-weight: bold;
+        margin-bottom: 12px;
+        }
+        .wallet-num{
+            font-size: 12px;
+            color: #626573;
+            padding: 0 2px;
+            display: flex;
+            align-items: baseline;
+        }
+        .wallet-price{
+        font-size: 22px;
+        font-weight: bold;
+        color: #626573;
+        }
+    }
+
+    .wallet-item-active{
+        position: relative;
+        background: #F2F7FF;
+        border-color: #006AFF;
+        .tem-active{
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 30px;
+        height: 30px;
+        }
+        .wallet-name{
+        color: #006AFF;
+        }
+    }
+}
+
+.numsList{
+    .numItem{
+        width: 111px;
+        height: 34px;
+        padding: 8px 17px;
+        border-radius: 80px;
+        background: #FFFFFF;
+        box-sizing: border-box;
+        border: 1px solid #DFE2E6;
+        color: #626573;
+    }
+    .unit{
+        width: 24px;
+        height: 17px;
+        padding: 2px 8px;
+        box-sizing: border-box;
+        border-radius: 100px;
+        background: #E8F0FE;
+        font-size: 12px;
+        line-height: 13px;
+        letter-spacing: 0.08em;
+        color: #006AFF;
+    }
+    .numItemActive{
+        font-weight: bold;
+        color: #FFFFFF;
+        border-radius: 80px;
+        background: #006AFF;
+    }
+}
+</style>
\ No newline at end of file