下拉选择框联动修改

src/components/GroupFormBtns.vue

@@ -2,8 +2,8 @@
 
 <template>
     <div class="btns-wrap flex">
-        <GuipButton type="ignore" @click="cancelClick">取消</GuipButton>
-        <GuipButton type="primary" @click="confirmClick">保存</GuipButton>
+        <GuipButton type="ignore" @click="cancelClick">{{cancelText || '取消'}}</GuipButton>
+        <GuipButton type="primary" @click="confirmClick">{{confirmText ||'保存'}}</GuipButton>
     </div>
 </template>
 <script>
@@ -11,7 +11,7 @@ import GuipButton from '@/components/GuipButton.vue';
 
 export default {
     name: '',
-    props: [''],
+    props: ['cancelText','confirmText'],
     components: {
         GuipButton
     },

src/router/index.js

@@ -10,7 +10,7 @@ const whiteSecondSider = [
 const blackSliderList = [
   '/franchise', '/agreement', '/customizeDoc', '/agent/siteAdd', '/agent/siteServiceList', '/agent/siteTemplate','/agent/siteAddFinally','/agent/siteServiceAdd', '/agent/supplyList',
   '/agent/domainList','/agent/siteAddChooseService'
-  , '/agent/noticeList' , '/agent/expenseDetails', '/agent/siteRank', '/agent/serviceRank', '/agent/payoffDetails'
+  , '/agent/noticeList' , '/agent/expenseDetails', '/agent/siteRank', '/agent/serviceRank', '/agent/payoffDetails','/agent/orderSetting','/agent/addCustomCoupon'
 ];
 // 一级路由
 let first_child_router = []
@@ -383,7 +383,33 @@ const routes = [{
       breadcrumbParent: '代收款结算' // 一级页面不显示面包屑
     }
   },
-
+  // 运营工具 start
+  {
+    path: '/agent/checkCardList',
+    name: '卡券管理',
+    isFirst:true,
+    component: () => import( /* webpackChunkName: "checkCardList" */ '../views/agent/checkCardList.vue'),
+    meta: {
+      hideBreadcrumb: true // 一级页面不显示面包屑
+    }
+  },
+  {
+    path: '/agent/orderSetting',
+    name: '卡/淘宝订单设置',
+    component: () => import( /* webpackChunkName: "orderSetting" */ '../views/agent/orderSetting.vue'),
+    meta: {
+      breadcrumbParent: '卡券管理' // 一级页面不显示面包屑
+    }
+  },
+  {
+    path: '/agent/addCustomCoupon',
+    name: '新增自定义卡券',
+    component: () => import( /* webpackChunkName: "addCustomCoupon" */ '../views/agent/addCustomCoupon.vue'),
+    meta: {
+      breadcrumbParent: '卡券管理' // 一级页面不显示面包屑
+    }
+  },
+  // 运营工具 end
 
   // -----------------分隔符-----------
   // 管理员start
@@ -572,6 +598,7 @@ const routes = [{
     }
   },
   // 管理员end
+
   // 排版 start
   {
     path: '/super/paiban/tpl',
@@ -641,9 +668,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)) {

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: '公众号发券',

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;
@@ -470,6 +479,18 @@ body {
     }
 }
 
+.el-button--often {
+    color: #006AFF;
+    background: #F2F7FF;
+    border: 1px solid transparent;
+
+    // &:hover {
+    //     color: #006AFF;
+    //     background: #F2F7FF;
+    //     border: 1px solid #006AFF;
+    // }
+}
+
 .el-button--text,
 .el-button--grey {
     padding: 0;

src/views/agent/addCustomCoupon.vue

@@ -0,0 +1,411 @@
+<template>
+    <div class="main-content12 ">
+        <div class="flex-common">
+            <el-tabs v-model="curAddTab" class="">
+                <el-tab-pane :label="'新增'+item.name" v-for="item in numsList" :name="item.type" :key="item.name"></el-tab-pane>
+            </el-tabs>
+            <div class="beforeNotice">
+                <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 时间卡使用说明</p>
+                <div class="noticeBot column">
+                    <p>1. 使用规则：领卡用户在规定时间范围内，每天有免费次数，用完后当天不可再用，但第二天次数会重置。适用于名下所有站点。</p>
+                    <p>2. 开放范围：仅开放给图尼丁、CopyCheck、Grammarly、AI智能降重、AI范文、AI论文工具、AI校园写作、AI职业写作下的检测服务类型</p>
+                </div>
+            </div>
+            <el-form class="baseRule_wrap">
+                <p class="littleTitle mb24 mt24">基础规则</p>
+                <GuipRadio v-model="createType" :options="createTypeList" prop="type" label="选择生成方式" @change="domainTypeChange" />
+                <div class="flex coupon_name mb24 gap12">
+                    <label for="" style="width: 90px;text-align: right;">卡券数量</label>
+                    <GuipInput v-model="link" width="488px" unit="张" placeholder="大于0的整数"></GuipInput>
+                </div>
+                <div class="flex coupon_name mb24 gap12">
+                    <label for="" style="width: 90px;text-align: right;">选择发放途径</label>
+                    <div v-for="item in walletList" :key="item.type">
+                        <div v-if="item.show.includes(curAddTab)" 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>
+                    </div>
+                </div>
+                <div v-if="curAddTab != 2 && curAddTab != 1">
+                    <div class="flex coupon_name mb24 gap12">
+                        <label for="" style="width: 90px;text-align: right;">选择公众号</label>
+                        <GuipSelect :options="[]" v-model="link" placeholder="选择品牌" width="488px"></GuipSelect>
+                    </div>   
+                    <div class="flex coupon_name mb24 gap12">
+                        <label for="" style="width: 90px;text-align: right;">关键词</label>
+                        <GuipTextarea v-model="link" width="488px" placeholder="用户获取优惠券在在公众号里回复的词语" height="38px"></GuipTextarea>
+                    </div>   
+                    <div class="flex coupon_name mb24 gap12">
+                        <label for="" style="width: 90px;text-align: right;">回复内容</label>
+                        <GuipTextarea v-model="link" width="488px" placeholder="自动回复用户关键词时，会把这段话回复给用户" height="56px"></GuipTextarea>
+                    </div>
+                </div>
+
+            </el-form>
+        </div>
+        <div class="flex-common mt12">
+            <el-form>
+                <p class="littleTitle mb24 mt24">卡面设置</p>
+                <div class="wrap">
+                    <div class="flex coupon_name mb24 gap12">
+                        <label for="" style="width: 90px;text-align: right;">卡券名称</label>
+                        <GuipInput v-model="link" width="488px"></GuipInput>
+                    </div>
+                  <div class="flex gap8">
+                    <GuipSelect 
+
+                    width="238px"
+                    :options="firstOptions" 
+                    v-model="firstSelected" 
+                    label="适用服务类型"
+                    @change="handleFirstChange"
+                    ></GuipSelect>
+                    <!-- 二级选择框，只有当有二级数据时才显示 -->
+                    <GuipSelect 
+                    width="238px"
+                    v-if="showSecondSelect"
+                    :options="secondOptions" 
+                    v-model="secondSelected"
+                    ></GuipSelect>
+                  </div>
+                    <div class="flex coupon_name mb24 gap12">
+                        <label for="" style="width: 90px;text-align: right;">满减规则</label>
+                        <div class="flex gap8">
+                            <span>满</span>
+                            <GuipInput v-model="link" unit="元"></GuipInput>
+                            <span>减免</span>
+                            <GuipInput v-model="link" unit="元"></GuipInput>
+                        </div>
+                    </div>
+
+                    <GuipRadio v-if="curAddTab == 1" v-model="domainType" :options="domainTypes" prop="type" label="可用时间范围" @change="domainTypeChange" />
+                    <div class="flex coupon_name mb24 gap12">
+                        <label for="" style="width: 90px;text-align: right;">{{ curAddTab == 1 ?'每日可用次数' :'可用次数' }}</label>
+                        <GuipInput v-model="link" unit="次"></GuipInput>
+                    </div>
+                    <div class="flex coupon_name mb24 gap12" v-if="curAddTab != '2'">
+                        <label for="" style="width: 90px;text-align: right;">领取起止时间</label>
+                        <el-date-picker class="mr-32" v-model="searchDate" type="daterange" range-separator="至"
+                            start-placeholder="开始日期" end-placeholder="结束日期" style="min-width:210px;flex:1"  format="yyyy-MM-dd" value-format="yyyy-MM-dd">
+                        </el-date-picker>
+                    </div>   
+                    <GuipInput v-if="curAddTab != 2" v-model="link"  :label="curAddTab == 1 ?'初次使用时间':'使用有效时间'"></GuipInput>
+                </div>
+
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import GuipRadio from '@/components/GuipRadio';
+import GuipInput from '@/components/GuipInput.vue';
+import GuipSelect from '@/components/GuipSelect.vue';
+import GuipTextarea from '@/components/GuipTextarea.vue';
+
+export default {
+    props: {
+        // type: Number,
+    },
+    components: {
+        GuipInput,
+        GuipSelect,
+        GuipTextarea,
+        GuipRadio,
+    },
+    data() {
+        return {
+            searchDate:[],
+            curAddTab:'1',
+            numsList:[
+                {
+                    name:'时间卡',
+                    type:'1',
+                },
+                {
+                    name:'次数卡',
+                    type:'2'
+                },
+                {
+                    name:'折扣卡',
+                    type:'3'
+                },
+                {
+                    name:'满减卡',
+                    type:'4'
+                },
+                {
+                    name:'现金卡',
+                    type:'5'
+                }
+            ],
+            createType:1,
+            createTypeList: [
+                {
+                    value: 1,
+                    label: '批量生成：适用于活动运营，可一次生成多张券同时发放。',
+                },
+                {
+                    value: 2,
+                    label: '单张生成，适用于临时场景，一次仅生成一张券。',
+                }
+            ],
+            domainType:1,
+            domainTypes: [
+                {
+                    value: 1,
+                    label: '1日',
+                },
+                {
+                    value: 2,
+                    label: '3日',
+                },
+                {
+                    value: 3,
+                    label: '1周',
+                },
+                {
+                    value: 4,
+                    label: '1月',
+                },
+                {
+                    value: 5,
+                    label: '一年',
+                },
+            ],
+            walletList:[
+                {
+                    type: 1,
+                    name: '卡密自提',
+                    desc1:'生成链接，用户点击自提',
+                    show:['3','4','5']
+                },
+                {
+                    type: 2,
+                    name: '自有渠道发放',
+                    desc1:'生成卡号，自行发放',
+                    show:['1','2','3','4','5']
+                },
+                {
+                    type: 3,
+                    name: '公众号发放',
+                    desc1:'通过公众号回复，自动发放',
+                    show:['3','4','5']
+                }
+              
+            ],
+            walletType:1,
+            link:'',
+            allData: [
+        {
+          id: '1',
+          name: '餐饮服务',
+          children: [
+            { id: '0', name: '不限服务' },
+            { id: '11', name: '中餐厅' },
+            { id: '12', name: '西餐厅' },
+            { id: '13', name: '快餐店' }
+          ]
+        },
+        {
+          id: '2', 
+          name: '医疗服务',
+          children: [
+            { id: '0', name: '不限服务' },
+            { id: '21', name: '综合医院' },
+            { id: '22', name: '专科医院' },
+            { id: '23', name: '诊所' }
+          ]
+        },
+        {
+          id: '3',
+          name: '教育培训',
+          children: [] // 没有二级数据
+        },
+        {
+          id: '4',
+          name: '金融服务',
+          children: [
+            { id: '0', name: '不限服务' },
+            { id: '41', name: '银行' },
+            { id: '42', name: '证券' },
+            { id: '43', name: '保险' }
+          ]
+        }
+      ],
+            
+            firstSelected: '', // 一级选择值
+            secondSelected: '0', // 二级选择值，默认为"不限服务"
+            showSecondSelect: false, // 是否显示二级选择框
+            firstOptions: [], // 一级选项列表
+            secondOptions: [], // 二级选项列表
+        }
+    },
+    mounted() {
+        const { type } = this.$route.query;
+        if (type) {
+            this.curAddTab = type;
+        }
+        this.firstOptions = this.allData.map(item => ({
+            value: item.id,
+            label: item.name
+        }));
+    },
+    watch: {
+       
+    },
+    methods: {
+        handleFirstChange(value) {
+        // 根据一级选择的值，找到对应的数据项
+            const selectedItem = this.allData.find(item => item.id === value);
+            
+            if (selectedItem && selectedItem.children && selectedItem.children.length > 0) {
+                // 有二级数据，显示二级选择框
+                this.showSecondSelect = true;
+                
+                // 动态赋值二级选项
+                this.secondOptions = selectedItem.children.map(child => ({
+                value: child.id,
+                label: child.name
+                }));
+                
+                // 设置默认值为"不限服务"
+                const hasUnlimited = selectedItem.children.some(child => child.id === '0');
+                if (hasUnlimited) {
+                this.secondSelected = '0';
+                } else if (this.secondOptions.length > 0) {
+                // 如果没有"不限服务"选项，默认选择第一个
+                this.secondSelected = this.secondOptions[0].value;
+                }
+            } else {
+                // 没有二级数据，隐藏二级选择框并重置
+                this.showSecondSelect = false;
+                this.secondOptions = [];
+                this.secondSelected = '';
+            }
+        },
+            
+        handleClickCopy(){
+            this.$copy(this.form.input1, {
+                successMsg: '内容已复制到剪贴板',
+                errorMsg: '复制失败，请按Ctrl+C手动复制',
+                vm: this
+            });
+        },
+        validateSelection() {
+            this.departType = this.departType.filter(item => item !== 0);
+        },
+        cancelClick() {
+            this.$emit('update:hasProjectFee', !this.hasProjectFee)
+            this.$refs.hasProjectFeeRef.toggle();
+        },
+        submitForm() {
+            if (this.departType.length === 0) return this.$message.error('请选择至少一项');
+            // let params = {
+            //     has_project_fee: this.hasProjectFee,
+            // }
+        },
+        onProjectFeeChange(val) {
+            this.$emit('update:hasProjectFee', val);
+        },
+        walletClick(type) {
+            this.walletType = type;
+        },
+        domainTypeChange(val) {
+            console.log(val);
+        }
+    }
+}
+
+</script>
+<style scoped lang="scss">
+  .wallet-item{
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+        padding: 16px 14px;
+        width: 282px;
+        height: auto;
+        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;
+        }
+    }
+.coupon_name{
+    .el-form-item{
+        margin-bottom: 0;
+    }
+}
+.baseRule_wrap{
+    .coupon_name{
+        // align-items: flex-start;
+    }
+}
+
+.beforeNotice {
+    border-radius: 4px;
+    background: #F2F7FF;
+    border: 1px solid #BFDAFF;
+    padding: 20px 14px;
+    color: #1E2226;
+    letter-spacing: 0.08em;
+
+    .noticeTop {
+        gap: 8px;
+        margin-bottom: 12px;
+        font-weight: bold;
+    }
+
+    .noticeBot {
+        gap: 10px;
+    }
+
+}
+.wrap{
+    width: 590px;
+}
+
+</style>

src/views/agent/checkCardList.vue

@@ -0,0 +1,482 @@
+<template>
+    <div class="main-content12 ">
+        <div class="flex-common">
+            <el-tabs v-model="curTab" class="mb12" @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" v-for="(item,index) in numsList1" :key="item.name"
+                        :class="{ active: activeIndex === index }"
+                        @mouseenter="handleMouseEnter(index)"
+                        @mouseleave="handleMouseLeave"
+                        @click="handleClickItem(item)"
+                    >
+                        <span class="posFree">中一个亿</span>
+                        <div class="flex gap8">
+                            <img :src="item.img" alt="">
+                            <span class="cardTitle">{{ item.name }}</span>
+                        </div>
+                        <p>每天有免费使用次数，用完后当天不可再用，但第二天次数会重置</p>
+                        <GuipButton :type="activeIndex === index ? 'primary' : 'often'" :btnstyle="{'width': '254px'}"  @click="addTimeNums" >立即新增</GuipButton>
+                    </div>
+                   
+                </div>
+                <h4>独立卡券</h4>
+                <p class="desc mb12">一些介绍，通过微信链接，用户免费领取。适用于微信社群运营。</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 point" :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 mb24">
+                <div class="numItem gap8 flex" :class="curCardType == item.type ? 'numItemActive' : ''" v-for="item in numsList" :key="item.name" @click="changeCardType(item.type)">
+                    {{ item.name }} <span class="unit">{{ item.num }}</span>
+                </div>
+            </div>
+            <GuipTable v-if="curType == 'only'" :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">
+                        <template slot-scope="scope">
+                            <div class="flex">
+                                {{ scope.row.card }}
+                                <img src="@/assets/form_copy.svg" v-clipboard="(scope.row.card)"/>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="type" label="发行方式" v-if="curCardType != 1" width="120"></el-table-column>
+                    <el-table-column prop="rule" label="使用规则" v-if="[1,2,3].includes(curCardType)" min-width="200"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="余额/面额" min-width="120">
+                        <template slot-scope="scope">
+                            10/20元{{ scope.row.review_status_desc }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="pay" label="支付金额" v-if="[1,2,3].includes(curCardType)" 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="检测价格" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="有效期" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="剩余 / 总检测次数" v-if="curCardType == 5" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="每天限制检测篇数" v-if="curCardType == 4" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测卡生成时间" v-if="[4,5].includes(curCardType)" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测卡生效时间" v-if="curCardType == 4" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测卡过期时间" v-if="curCardType == 4" 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 prop="create" label="创建人" min-width="120"></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>
+            <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
+                :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
+                :total="serviceList.length">
+            </el-pagination>
+
+            <GuipTable v-if="curType == 'more'" :tableData="tableList" :key="tableKey" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
+                <template>
+                    <el-table-column fixed="left" prop="id" label="ID" min-width="100"></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="可检测次数" v-if="curCardType == 5" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测卡类型" v-if="curCardType == 4" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="面额/折扣" min-width="120">
+                        <template slot-scope="scope">
+                            {{ scope.row.review_status_desc }}/1折
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测价格" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="有效期" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="检测卡数量（余/总）" min-width="200"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="每天限制检测篇数" v-if="curCardType == 4" min-width="200"></el-table-column>
+                    <el-table-column prop="review_status_desc" label="用户支付金额（元）" v-if="[1,2,3].includes(curCardType)" 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="规则发售起止时间" v-if="curCardType == 4" 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 prop="review_status_desc" label="H5购买检测卡链接" v-if="[1,2,3].includes(curCardType)" min-width="120"></el-table-column>
+                    <el-table-column prop="create" label="创建人" min-width="120"></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>
+                            <GuipButton type="text" v-if="false" @click="handleRefuse(scope.row)">修改</GuipButton>
+                            <GuipButton type="text" v-if="false" @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: 'add',
+            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:'折扣卡',
+                }
+            ],
+            isActive: false,
+            buttonType:'often',
+            activeIndex:-1,
+            numsList1:[
+                {
+                    name:'时间卡',
+                    type:1,
+                    img:require('@/assets/timesNum.png')
+                },
+                {
+                    name:'次数卡',
+                    img:require('@/assets/usageNum.png'),
+                    type:2
+                },
+                {
+                    name:'折扣卡',
+                    img:require('@/assets/discountNum.png'),
+                    type:3
+                },
+                {
+                    name:'满减卡',
+                    img:require('@/assets/shortNum.png'),
+                    type:4
+                },
+                {
+                    name:'现金卡',
+                    img:require('@/assets/cashNum.png'),
+                    type:5
+                }
+            ],
+            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
+                }
+            ],
+            tableKey: Date.now(),
+            tableLoading: false,
+            currentPage: 1,
+            pageSize: 10,
+            serviceList:[{
+                id:'123456789',
+                name:'检测卡服务名称'
+            }]
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        handleMouseEnter(index) {
+            this.activeIndex = index;
+        },
+        handleMouseLeave() {
+            this.activeIndex = -1;
+        },
+        handleClickItem(item) {
+            this.$router.push({
+                path: '/agent/addCustomCoupon',
+                query: {
+                    type: item.type,
+                }
+            })
+        },
+        // 
+        addTimeNums() {
+            this.$router.push({
+                path: '/agent/addCustomCoupon',
+                query: {
+                    type: 1,
+                }
+            })
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        changeCardType(type) {
+            console.log(type,'type===');
+            this.curCardType = type;
+        },
+        walletClick(type) {
+            this.walletType = type;
+        },
+        handleRefuse() {
+
+        },
+        handlePageChange(page) {
+            this.orderListCurrentPage = page;
+        },
+        handleSizeChange(val) {
+            console.log(`每页 ${val} 条`);
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+        }
+    },
+}
+</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{
+        cursor: pointer;
+        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;
+        cursor: pointer;
+    }
+    .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>

src/views/agent/orderSetting.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="main-content12 ">
+        <div class="flex-common">
+            <el-form>
+                <div class="flex gap12 mb24">
+                    <span class="littleTitle">检测卡开关</span>
+                    <GuipSwitch :value="hasProjectFee" ref="hasProjectFeeRef" activeText="开启" inactiveText="关闭" :active-value="1" :inactive-value="0" @change="onProjectFeeChange"></GuipSwitch>
+                </div>
+
+                <GuipFormItem column="column" class="mb24" label="用户可见信息" :required="true">
+                    <!-- <el-checkbox-group slot="formDom" v-model="departType" @change="validateSelection"
+                        class="checkboxGroup"> -->
+                        <div class="flex gap12" slot="formDom"> 
+                            <el-checkbox :label="1">向用户展示总面额</el-checkbox>
+                            <el-checkbox :label="2">向用户展示余额</el-checkbox>
+                        </div>
+                    <!-- </el-checkbox-group> -->
+                </GuipFormItem>
+                <GroupFormBtns @cancel="cancelClick" cancelText="重置" @confirm="submitForm('siteForm')" />
+            </el-form>
+        </div>
+        <div class="flex-common mt12">
+            <el-form>
+                <p class="littleTitle mb12">淘宝订单设置</p>
+
+                <PromptText text='说明：用户一订单拍多件时，未使用部分会自动生成淘宝检测卡，方便用户使用剩余件数' :type="1" />
+                <el-form ref="domainFormRef" :rules="domainRules" :model="domainData">
+                    <div class="mt24 flex-wrap">
+                        <div class="flex-left">
+                            <p class="flex-left-desc">域名来源</p>
+                            <div class="flex mt12 gap20">
+                                <div class="radioItem gap8">
+                                    <el-radio v-model="radio1" :label="1">允许</el-radio>
+                                    <p class="desc">用户一订单多拍，未使用部分下次可用</p>
+                                </div>
+                                <div class="radioItem gap8">
+                                    <el-radio v-model="radio1" :label="1">允许</el-radio>
+                                    <p class="desc">用户一订单多拍，只能使用1次</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-line"></div>
+                        <div class="flex-right">
+                            <GuipRadio v-model="domainType" column="column" :options="domainTypes" prop="type" label="下次使用过期时间" @change="domainTypeChange" />
+                        </div>
+                    </div>
+                </el-form>
+                <GroupFormBtns @cancel="cancelClick" cancelText="重置" @confirm="submitForm('siteForm')" />
+            </el-form>
+        </div>
+
+        <div class="flex-common mt12">
+            <el-form>
+                <GuipTable :tableData="orderList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
+                    <el-table-column prop="sitename" label="站点简称" fixed="left" min-width="212px">
+                        <template slot-scope="scope">
+                            <div class="flex">
+                                {{ scope.row.sitename }}
+                                <img src="@/assets/form_copy.svg" v-clipboard="(scope.row.sitename)"/>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="link" label="购买检测卡的淘宝宝贝链接（站点中，用户若选择购买检测卡支付，可直接跳转淘宝商品）" min-width="610px">
+                        <template slot-scope="scope">
+                            <div class="flex gap8">
+                                <GuipInput v-model="scope.row.link" style="flex:1" placeholder="请输入淘宝宝贝链接"></GuipInput>
+                                <GuipButton type="system">保存</GuipButton>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </GuipTable>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+import GuipSwitch from '@/components/GuipSwitch';
+import GuipFormItem from '@/components/GuipFormItem';
+import GroupFormBtns from '@/components/GroupFormBtns';
+import PromptText from '@/components/PromptText';
+import GuipRadio from '@/components/GuipRadio';
+import GuipTable from '@/components/GuipTable';
+import GuipInput from '@/components/GuipInput.vue';
+import GuipButton from '@/components/GuipButton.vue';
+
+export default {
+    props: {
+        hasProjectFee: Number,
+    },
+    components: {
+        GuipSwitch,
+        GuipFormItem,
+        PromptText,
+        GroupFormBtns,
+        GuipInput,
+        GuipButton,
+        GuipRadio,
+        GuipTable,
+    },
+    data() {
+        return {
+            domainType:1,
+            domainTypes: [
+                {
+                    value: 1,
+                    label: '永久有限',
+                },
+                {
+                    value: 2,
+                    label: '7天',
+                },
+                {
+                    value: 3,
+                    label: '15天',
+                },
+                {
+                    value: 4,
+                    label: '30天',
+                },
+                {
+                    value: 5,
+                    label: '60天',
+                },
+            ],
+            domainData: {
+                type: 1,
+            },
+            domainRules: {
+                type: [
+                    { required: true, message: '请选择域名来源', trigger: 'change' },
+                ],
+            },
+            radio1: 1,
+            orderList:[
+                {
+                    sitename:'轻歌曼舞82（充值）',
+                    link:''
+                },
+                {
+                    sitename:'copycheck旗舰店',
+                    link:'https://www.taobao.com/item.htm?id=1234567890'
+                }
+            ]
+        }
+    },
+    methods: {
+        handleClickCopy(){
+            this.$copy(this.form.input1, {
+                successMsg: '内容已复制到剪贴板',
+                errorMsg: '复制失败，请按Ctrl+C手动复制',
+                vm: this
+            });
+        },
+        validateSelection() {
+            this.departType = this.departType.filter(item => item !== 0);
+        },
+        cancelClick() {
+            this.$emit('update:hasProjectFee', !this.hasProjectFee)
+            this.$refs.hasProjectFeeRef.toggle();
+        },
+        submitForm() {
+            if (this.departType.length === 0) return this.$message.error('请选择至少一项');
+            // let params = {
+            //     has_project_fee: this.hasProjectFee,
+            // }
+        },
+        onProjectFeeChange(val) {
+            this.$emit('update:hasProjectFee', val);
+        }
+    }
+}
+
+</script>
+<style scoped lang="scss">
+.el-form-item{
+    margin-bottom: 0;
+}
+.radioItem{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    .desc{
+        margin-left: 24px;
+    }
+}
+</style>