zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增卡券页面

couponManage-zq-1209
zq 2 days ago
parent
cc6aa647b0
commit
f77d364e90
1 changed files with 313 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 313
      src/views/agent/addCustomCoupon.vue

313
src/views/agent/addCustomCoupon.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save