zq
4 days ago
1 changed files with 313 additions and 0 deletions
@ -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> |
||||
Loading…
Reference in new issue