Copyright: shall not be reproduced without the consent of all the liabilities of the consequences https://blog.csdn.net/xy19950125/article/details/87856070
Description: The code will be added when the same style as shown below click Add remove the code on that line while clicking on Delete
The effect is as follows:
Source:
<template>
<div>
<div class="navigation">
<p>
<span>管理首页 > 应用 > 百信钱袋> 信贷员管理</span>
</p>
</div>
<div class="contentcss">
<Form label-position="left" ref="formValidate" :model="formValidate" :rules="ruleValidate">
<FormItem label="活动标题：" prop="marketName" :label-width="120">
<Input v-model="formValidate.marketName" :disabled="auditing" placeholder="请输入活动标题" style="width:400px;"></Input>
</FormItem>
<FormItem label="时间范围：" :label-width="120">
<div class="contentRightmain">
<div>
<Select v-model="timeType" :disabled="auditing" class='mr10' placeholder="请选择状态" style='width:150px;' @on-change="timeChange">
<Option v-for="item in timeList" :value="item.value" :key="item.typeCode">{{ item.label }}</Option>
</Select>
</div>
<div v-if="timeType==2">
<Row>
<Col span="11">
<FormItem prop="beginTime">
<DatePicker type="datetime" :disabled="auditing" placeholder="开始时间" @on-change='begintimeChange' :options="options3" :value="beginTime"></DatePicker>
</FormItem>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<FormItem prop="endTime">
<DatePicker type="datetime" :disabled="auditing" placeholder="结束时间" @on-change='endtimeChange' :options="options3" :value="endTime"></DatePicker>
</FormItem>
</Col>
</Row>
</div>
</div>
</FormItem>
<FormItem :label-width="120" label="普通用户返利:">
<div v-for="(item,index) in normalMarketingList" :key='index' class="clearfix mb15">
<Input type="text" :disabled="auditing" v-model="normalMarketingList[index].rechargeNumber" class="left inputnum mr20" style="width:180px">
<span slot="prepend">单笔充值</span>
<span slot="append" class="left">赞豆</span>
</Input>
<Input type="text" :disabled="auditing" v-model="normalMarketingList[index].giveNumber" class="left inputnum mr20" style="width:140px">
<span slot="prepend">返</span>
<span slot="append" class="left">赞豆</span>
</Input>
<Input type="text" :disabled="auditing" v-model="normalMarketingList[index].giveVipDays" class="left inputnum mr20" style="width:140px">
<span slot="prepend">送</span>
<span slot="append" class="left">天会员</span>
</Input>
<Input type="text" :disabled="auditing" v-model="normalMarketingList[index].giveCouponNumber" class="left inputnum" style="width:140px">
<span slot="prepend">返</span>
<span slot="append" class="left">抢单券</span>
</Input>
<Button type="primary" class="left ml10" :disabled="auditing" v-if="index==0" @click="addnormal1">+</Button>
<Button type="primary" class="left ml10" :disabled="auditing" v-if="index!=0" @click="addnormal2(index)">-</Button>
</div>
</FormItem>
<FormItem :label-width="120" label="会员返利:" class="clearfix mt50">
<div v-for="(item,index) in vipMarketingList" :key='index' class="clearfix mb15">
<Input type="text" :disabled="auditing" v-model="vipMarketingList[index].rechargeNumber" class="left inputnum mr20" style="width:180px">
<span slot="prepend">单笔充值</span>
<span slot="append" class="left">赞豆</span>
</Input>
<Input type="text" :disabled="auditing" v-model="vipMarketingList[index].giveNumber" class="left inputnum mr20" style="width:140px">
<span slot="prepend">返</span>
<span slot="append" class="left">赞豆</span>
</Input>
<Input type="text" :disabled="auditing" v-model="vipMarketingList[index].giveVipDays" class="left inputnum mr20" style="width:140px">
<span slot="prepend">送</span>
<span slot="append" class="left">天会员</span>
</Input>
<Input type="text" :disabled="auditing" v-model="vipMarketingList[index].giveCouponNumber" class="left inputnum" style="width:140px">
<span slot="prepend">返</span>
<span slot="append" class="left">抢单券</span>
</Input>
<Button type="primary" class="left ml10" :disabled="auditing" v-if="index==0" @click="addmerber1">+</Button>
<Button type="primary" class="left ml10" :disabled="auditing" v-if="index!=0" @click="addmerber2(index)">-</Button>
</div>
</FormItem>
<FormItem :label-width="240" style="margin-top:100px;">
<Button type="primary" :disabled="auditing" @click="handleSubmit('formValidate')">保存提交审核</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
</FormItem>
</Form>
</div>
</div>
</template>
<script>
export default {
data(){
return{
auditing:false,
timeType:1,
beginTime:'',
endTime:'',
timeList:[
{label:'不限时间范围',value:1},
{label:'固定时间范围',value:2}
],
options3: {
disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000;
}
},
normalMarketingList:[
{
rechargeNumber:'',
giveNumber:'',
giveVipDays:'',
giveCouponNumber:''
}
],
vipMarketingList:[
{
rechargeNumber:'',
giveNumber:'',
giveVipDays:'',
giveCouponNumber:''
}
],
formValidate:{
marketName:''
},
ruleValidate:{
marketName: [
{ required: true, message: '请输入活动标题', trigger: 'blur' },
{ type: 'string', max: 50, message: '活动标题不能超过50个字', trigger: 'blur' }
]
},
}
},
methods:{
timeChange(timeType){
this.timeType = timeType
},
begintimeChange(beginTime){
this.beginTime = beginTime
},
endtimeChange(endTime){
this.endTime = endTime
},
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
let date1 = Date.parse(new Date(this.beginTime))/1000
let date2 = Date.parse(new Date(this.endTime))/1000
let res = /^(0|\+?[1-9][0-9]{0,4})$/
if(this.timeType=='2'){
if(this.beginTime==''){
this.$Modal.warning({
title: '温馨提示',
content: '<p>请选择开始时间</p>'
})
return false
}
if(this.endTime==''){
this.$Modal.warning({
title: '温馨提示',
content: '<p>请选择结束时间</p>'
})
return false
}
if(date1>date2){
this.$Modal.warning({
title: '温馨提示',
content: '<p>开始时间不得大于结束时间</p>'
})
return false
}
}
for(var i=0;i<this.normalMarketingList.length;i++){
if(!res.test(this.normalMarketingList[i].rechargeNumber)||!res.test(this.normalMarketingList[i].giveNumber)||!res.test(this.normalMarketingList[i].giveVipDays)||!res.test(this.normalMarketingList[i].giveCouponNumber)){
this.$Message.error("请输入0-99999的正整数")
return false
}
}
for(var i=0;i<this.vipMarketingList.length;i++){
if(!res.test(this.vipMarketingList[i].rechargeNumber)||!res.test(this.vipMarketingList[i].giveNumber)||!res.test(this.vipMarketingList[i].giveVipDays)||!res.test(this.vipMarketingList[i].giveCouponNumber)){
this.$Message.error('请输入0-99999的正整数')
return false
}
}
this.preserve()
}
})
},
handleReset (name) {
window.history.go(-1);
},
addnormal1(){
this.normalMarketingList.push(
{
rechargeNumber:"0",
giveNumber:"0",
giveVipDays:"0",
giveCouponNumber:"0"
}
)
},
addnormal2(index){
this.normalMarketingList.splice(index, 1)
},
addmerber1(){
this.vipMarketingList.push(
{
rechargeNumber:"0",
giveNumber:"0",
giveVipDays:"0",
giveCouponNumber:"0"
}
)
},
addmerber2(index){
this.vipMarketingList.splice(index, 1)
},
// 保存提交审核
preserve(){
this.$Modal.confirm({
title: '温馨提示',
content: '<p>确认保存提交审核？</p>',
onOk: () => {
let data = {
marketName :this.formValidate.marketName,
timeType:this.timeType,
inviteRecharge:{
normalMarketingList:this.normalMarketingList,
vipMarketingList:this.vipMarketingList
},
marketType:3
}
if(data.timeType=='2'){
data.marketBeginTime = this.beginTime,
data.marketEndTime = this.endTime
}
this.http.post(BASE_URL+"后台接口",data).then(data=>{
if(data.code == 'success'){
this.$Message.info('保存提交审核成功！');
this.$router.push('/marketingActivities')
} else {
this.$Message.info(data.message);
}
}).catch(err=>{
console.log(err)
})
},
onCancel: () => {
}
})
}
},
//这里是赋值页面 不必理会
mounted(){
if(this.$route.query.marketCode){
this.http.post(BASE_URL+'后台接口?marketCode='+this.$route.query.marketCode)
.then(data=>{
if(data.code =='success'){
this.auditing = true
this.formValidate.marketName=data.data.marketName
this.timeType = data.data.timeType
this.beginTime = data.data.marketBeginTime
this.endTime = data.data.marketEndTime
this.normalMarketingList = data.data.inviteRecharge.normalMarketingList
this.vipMarketingList = data.data.inviteRecharge.vipMarketingList
}
})
}
}
}
</script>
<style lang="less" scoped>
.contentRightmain{
display: flex;
}
</style>If in doubt leave a message below