From f77d364e90e42369976b37c5a9a1407676c503c1 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 11 Dec 2025 15:09:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8D=A1=E5=88=B8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/agent/addCustomCoupon.vue | 313 ++++++++++++++++++++++++++++++++++++
 1 file changed, 313 insertions(+)
 create mode 100644 src/views/agent/addCustomCoupon.vue

diff --git a/src/views/agent/addCustomCoupon.vue b/src/views/agent/addCustomCoupon.vue
new file mode 100644
index 0000000..4ee4f79
--- /dev/null
+++ b/src/views/agent/addCustomCoupon.vue
@@ -0,0 +1,313 @@
+<template>
+    <div class="main-content12 ">
+        <div class="flex-common">
+            <el-tabs v-model="curAddTab" class="" @tab-click="handleClick">
+                <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="张"></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" 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" 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" 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>
+                  
+                    <GuipSelect :options="[]" v-model="link"  label="适用服务类型"></GuipSelect>
+                    <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" />
+                    <GuipInput v-model="link" :label="curAddTab == 1 ?'每日可用次数' :'可用次数'" unit="次"></GuipInput>
+                    <div class="flex coupon_name mb24 gap12">
+                        <label for="" style="width: 90px;text-align: right;">领取起止时间</label>
+                        <el-date-picker v-if="curAddTab != 2"  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 GuipFormItem from '@/components/GuipFormItem';
+// import GroupFormBtns from '@/components/GroupFormBtns';
+import GuipRadio from '@/components/GuipRadio';
+// import GuipTable from '@/components/GuipTable';
+import GuipInput from '@/components/GuipInput.vue';
+import GuipSelect from '@/components/GuipSelect.vue';
+import GuipTextarea from '@/components/GuipTextarea.vue';
+// import GuipButton from '@/components/GuipButton.vue';
+
+export default {
+    props: {
+        hasProjectFee: Number,
+    },
+    components: {
+        // GuipFormItem,
+        // GroupFormBtns,
+        GuipInput,
+        GuipSelect,
+        GuipTextarea,
+        // GuipButton,
+        GuipRadio,
+        // GuipTable,
+    },
+    data() {
+        return {
+            curAddTab:1,
+            numsList:[
+                {
+                    name:'时间卡',
+                    type:1,
+                },
+                {
+                    name:'次数卡',
+                    show:6,
+                    type:2
+                },
+                {
+                    name:'折扣卡',
+                    show:6,
+                    type:3
+                },
+                {
+                    name:'满减卡',
+                    show:6,
+                    type:4
+                },
+                {
+                    name:'现金卡',
+                    show:6,
+                    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
+        }
+    },
+    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);
+        },
+        walletClick(type) {
+            this.walletType = type;
+        },
+    }
+}
+
+</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>
\ No newline at end of file