kuailelunwen_new_houtai/src/views/agent/addCustomCoupon.vue

<template>
    <div class="main-content12 ">
        <div class="flex-common">
            <el-tabs v-model="curAddTab" class="">
                <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" v-if="curTabInfo">
                <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> {{curTabInfo.name}}使用说明</p>
                <div class="noticeBot column">
                    <p>1. {{ curTabInfo.desc1 }}</p>
                    <p>2. {{ curTabInfo.desc2 }}</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="allData" 
                    labelKey="name"
                    valueKey="id"
                    v-model="firstSelected" 
                    label="适用服务类型"
                    @change="handleFirstChange"
                    ></GuipSelect>
                    <!-- 二级选择框，只有当有二级数据时才显示 -->
                    <GuipSelect 
                    width="238px"
                    v-if="showSecondSelect"
                    labelKey="name"
                    valueKey="id"
                    :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: this.$route.query.type || '1',
            // curTabInfo:null,
            numsList:[
                {
                    name:'满减卡',
                    type:'1',
                    desc1:'使用规则：领卡用户消费满额立减，永久有效。一张卡券只能使用一次，适用于名下所有站点。',
                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
                },

                {
                    name:'现金卡',
                    type:'2',
                    desc1:'使用规则：领卡用户使用无门槛、永久有效，每订单限用1张',
                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
                },
                {
                    name:'次数卡',
                    type:'3',
                    desc1:'使用规则：领卡用户使用无门槛、永久有效，每订单限用1张',
                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
                },
                {
                    name:'折扣卡',
                    type:'4',
                    title:'满减卡使用说明',
                    desc1:'使用规则：领卡用户付款时按比例打折，每订单限用1张，每张检测卡限用1次。',
                    desc2:'资金冻结：发卡即冻结面额资金；用户使用或卡券过期，资金解冻。CopyCheck不冻结资金，按单独约定结算。'
                },
                {
                    name:'时间卡',
                    type:'5',
                    title:'满减卡使用说明',
                    desc1:'使用规则：领卡用户在规定时间范围内，每天有免费次数，用完后当天不可再用，但第二天次数会重置。适用于名下所有站点。',
                    desc2:'开放范围：仅开放给图尼丁、CopyCheck、Grammarly、AI智能降重、AI范文、AI论文工具、AI校园写作、AI职业写作下的检测服务类型'
                },
            ],

            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() {
        // 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]; // 如果找不到，返回第一个
        }
    },
    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) {
        // 根据一级选择的值，找到对应的数据项
            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>