自定义卡券文案及新增卡券页面相关修改

12 hours ago · 9e85aa2d74
2 changed files with 93 additions and 50 deletions
--- a/src/views/agent/addCustomCoupon.vue
+++ b/src/views/agent/addCustomCoupon.vue
@ -2,13 +2,13 @@
    <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-tab-pane :label="'新增'+item.name" v-for="(item,index) in numsList" :name="item.type" :key="index"></el-tab-pane>
            </el-tabs>
-            <div class="beforeNotice">
-                <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 时间卡使用说明</p>
+            <div class="beforeNotice" v-if="curTabInfo">
+                <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> {{curTabInfo.name}}使用说明</p>
                <div class="noticeBot column">
-                    <p>1. 使用规则：领卡用户在规定时间范围内，每天有免费次数，用完后当天不可再用，但第二天次数会重置。适用于名下所有站点。</p>
-                    <p>2. 开放范围：仅开放给图尼丁、CopyCheck、Grammarly、AI智能降重、AI范文、AI论文工具、AI校园写作、AI职业写作下的检测服务类型</p>
+                    <p>1. {{ curTabInfo.desc1 }}</p>
+                    <p>2. {{ curTabInfo.desc2 }}</p>
                </div>
            </div>
            <el-form class="baseRule_wrap">
@ -55,9 +55,10 @@
                    </div>
                  <div class="flex gap8">
                    <GuipSelect 
-
                    width="238px"
-                    :options="firstOptions" 
+                    :options="allData" 
+                    labelKey="name"
+                    valueKey="id"
                    v-model="firstSelected" 
                    label="适用服务类型"
                    @change="handleFirstChange"
@ -66,6 +67,8 @@
                    <GuipSelect 
                    width="238px"
                    v-if="showSecondSelect"
+                    labelKey="name"
+                    valueKey="id"
                    :options="secondOptions" 
                    v-model="secondSelected"
                    ></GuipSelect>
@ -118,29 +121,44 @@ export default {
    data() {
        return {
            searchDate:[],
-            curAddTab:'1',
+            curAddTab: this.$route.query.type || '1',
+            // curTabInfo:null,
            numsList:[
                {
-                    name:'时间卡',
+                    name:'满减卡',
                    type:'1',
+                    desc1:'使用规则：领卡用户消费满额立减，永久有效。一张卡券只能使用一次，适用于名下所有站点。',
+                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
+                },
+
+                {
+                    name:'现金卡',
+                    type:'2',
+                    desc1:'使用规则：领卡用户使用无门槛、永久有效，每订单限用1张',
+                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
                },
                {
                    name:'次数卡',
-                    type:'2'
+                    type:'3',
+                    desc1:'使用规则：领卡用户使用无门槛、永久有效，每订单限用1张',
+                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
                },
                {
                    name:'折扣卡',
-                    type:'3'
+                    type:'4',
+                    title:'满减卡使用说明',
+                    desc1:'使用规则：领卡用户付款时按比例打折，每订单限用1张，每张检测卡限用1次。',
+                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
                },
                {
-                    name:'满减卡',
-                    type:'4'
+                    name:'时间卡',
+                    type:'5',
+                    title:'满减卡使用说明',
+                    desc1:'使用规则：领卡用户在规定时间范围内，每天有免费次数，用完后当天不可再用，但第二天次数会重置。适用于名下所有站点。',
+                    desc2:'开放范围：仅开放给图尼丁、CopyCheck、Grammarly、AI智能降重、AI范文、AI论文工具、AI校园写作、AI职业写作下的检测服务类型'
                },
-                {
-                    name:'现金卡',
-                    type:'5'
-                }
            ],
+
            createType:1,
            createTypeList: [
                {
@ -244,17 +262,30 @@ export default {
        }
    },
    mounted() {
-        const { type } = this.$route.query;
-        if (type) {
-            this.curAddTab = type;
+        // this.firstOptions = this.allData.map(item => ({
+        //     value: item.id,
+        //     label: item.name
+        // }));
+    },
+    computed: {
+        // 计算当前tab的信息
+        curTabInfo() {
+            const tab = this.numsList.find(item => item.type == this.curAddTab);
+            return tab || this.numsList[0]; // 如果找不到，返回第一个
        }
-        this.firstOptions = this.allData.map(item => ({
-            value: item.id,
-            label: item.name
-        }));
    },
    watch: {
-       
+        '$route.query.type': function(newVal) {
+            if (newVal && newVal !== this.curAddTab) {
+                this.curAddTab = newVal;
+            }
+        },
+        curAddTab: {
+            handler(newVal) {
+                console.log('curAddTab变化:', newVal, '类型:', typeof newVal);
+            },
+            immediate: true
+        }
    },
    methods: {
        handleFirstChange(value) {
@ -266,18 +297,19 @@ export default {
                this.showSecondSelect = true;
                
                // 动态赋值二级选项
-                this.secondOptions = selectedItem.children.map(child => ({
-                value: child.id,
-                label: child.name
-                }));
+                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';
+                    this.secondSelected = '0';
                } else if (this.secondOptions.length > 0) {
                // 如果没有"不限服务"选项，默认选择第一个
-                this.secondSelected = this.secondOptions[0].value;
+                    this.secondSelected = this.secondOptions[0].value;
                }
            } else {
                // 没有二级数据，隐藏二级选择框并重置
--- a/src/views/agent/checkCardList.vue
+++ b/src/views/agent/checkCardList.vue
@ -18,15 +18,15 @@
                        :class="{ active: activeIndex === index }"
                        @mouseenter="handleMouseEnter(index)"
                        @mouseleave="handleMouseLeave"
-                        @click="handleClickItem(item)"
-                    >
-                        <span class="posFree">中一个亿</span>
+                        >
+                        <!-- @click="handleClickItem(item)" -->
+                        <span class="posFree">{{ item.tip }}</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>
+                        <p>{{ item.desc }}</p>
+                        <GuipButton :type="activeIndex === index ? 'primary' : 'often'" :btnstyle="{'width': '254px'}"  @click="addTimeNums(item)" >立即新增</GuipButton>
                    </div>
                   
                </div>
@ -193,30 +193,41 @@ export default {
            activeIndex:-1,
            numsList1:[
                {
-                    name:'时间卡',
+                    name:'满减卡',
+                    img:require('@/assets/shortNum.png'),
                    type:1,
-                    img:require('@/assets/timesNum.png')
+                    tip:'满额立减',
+                    desc:'消费达到指定金额（如100元），就能减免固定金额（如10元），每张卡只能用一次。',
+                },
+
+                {
+                    name:'现金卡',
+                    img:require('@/assets/cashNum.png'),
+                    type:2,
+                    tip:'直接抵现',
+                    desc:'可以把它当作现金直接使用，无最低消费要求。',
                },
                {
                    name:'次数卡',
+                    tip:'按次使用',
+                    desc:'卡内包含固定的使用次数，用完即止。',
                    img:require('@/assets/usageNum.png'),
-                    type:2
+                    type:3
                },
                {
                    name:'折扣卡',
+                    tip:'直接打折',
+                    desc:'付款时按一定比例（如9折）打折，每张卡在有效期内可多次使用。',
                    img:require('@/assets/discountNum.png'),
-                    type:3
-                },
-                {
-                    name:'满减卡',
-                    img:require('@/assets/shortNum.png'),
                    type:4
                },
                {
-                    name:'现金卡',
-                    img:require('@/assets/cashNum.png'),
-                    type:5
-                }
+                    name:'时间卡',
+                    type:5,
+                    tip:'次日焕新',
+                    desc:'每天有使用次数限制，用完后当天不可再用，但第二天会恢复次数。',
+                    img:require('@/assets/timesNum.png')
+                },
            ],
            walletList:[
                {
@ -289,11 +300,11 @@ export default {
            })
        },
        // 
-        addTimeNums() {
+        addTimeNums(item) {
            this.$router.push({
                path: '/agent/addCustomCoupon',
                query: {
-                    type: 1,
+                    type: item.type,
                }
            })
        },