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

下拉选择框联动修改

couponManage-zq-1209
zq 3 days ago
parent
cf27fc6351
commit
37aeda6eb6
1 changed files with 105 additions and 9 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. 114
      src/views/agent/addCustomCoupon.vue

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

@ -16,7 +16,7 @@
<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>
<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>
@ -31,15 +31,15 @@
<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>
<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" height="38px"></GuipTextarea>
<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" height="56px"></GuipTextarea>
<GuipTextarea v-model="link" width="488px" placeholder="自动回复用户关键词时，会把这段话回复给用户" height="56px"></GuipTextarea>
</div>
</div>
@ -53,8 +53,23 @@
<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 gap8">
<GuipSelect
width="238px"
:options="firstOptions"
v-model="firstSelected"
label="适用服务类型"
@change="handleFirstChange"
></GuipSelect>
<!-- 二级选择框，只有当有二级数据时才显示 -->
<GuipSelect
width="238px"
v-if="showSecondSelect"
: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">
@ -64,11 +79,15 @@
<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;">{{ 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 v-if="curAddTab != 2" class="mr-32" v-model="searchDate" type="daterange" range-separator="至"
<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>
@ -178,7 +197,50 @@ export default {
],
walletType:1,
link:''
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() {
@ -186,11 +248,45 @@ export default {
if (type) {
this.curAddTab = type;
}
this.firstOptions = this.allData.map(item => ({
value: item.id,
label: item.name
}));
},
watch: {
},
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: '内容已复制到剪贴板',

Write Preview
Loading…
Cancel
Save