218 lines
8.1 KiB
JavaScript
218 lines
8.1 KiB
JavaScript
define({
|
||
name:"rebate",
|
||
template:`
|
||
<div class="rebate">
|
||
<el-form>
|
||
<div style="margin:0 auto;width:80%;">
|
||
<el-form-item label="是否参与合作养殖补助" label-width="155px">
|
||
<el-radio v-model="json.is_open" :label="0">关闭</el-radio>
|
||
<el-radio v-model="json.is_open" :label="1">开启</el-radio>
|
||
</el-form-item>
|
||
</div>
|
||
<template v-if="json.is_open == 1">
|
||
<div style="margin:0 auto;width:80%;">
|
||
<el-form-item label="是否独立设置" label-width="155px">
|
||
<el-radio v-model="json.is_alone" :label="0">默认设置</el-radio>
|
||
<el-radio v-model="json.is_alone" :label="1">独立设置</el-radio>
|
||
</el-form-item>
|
||
<el-form-item v-if="json.is_alone == 1" label="返利季度">
|
||
<el-input placeholder="请输入返利总季度" v-model.number="json.total_quarter" min="0" type="number" class="shortInput">
|
||
<template slot="prepend">总共返利</template>
|
||
<template slot="append">个季度</template>
|
||
</el-input>
|
||
<!--循环每个季度-->
|
||
<div v-for="(quarter,index) in json.quarter_list" :key="index" class="quarter-block">
|
||
<div class="title">第 {{ index }} 季度</div>
|
||
<el-input v-model.number="quarter.total_month" min="0" type="number" class="shortInput">
|
||
<template slot="prepend">本季度总</template>
|
||
<template slot="append">个月</template>
|
||
</el-input>
|
||
<div class="tips">本季度总的月数，必须大于等于1</div>
|
||
<div class="isRepurchase">
|
||
是否需要复购：
|
||
<el-radio-group v-model.number="quarter.is_repurchase">
|
||
<el-radio :label="0">不需要</el-radio>
|
||
<el-radio :label="1">需要</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<template v-if="quarter.is_repurchase == 1">
|
||
<el-input v-model.number="quarter.repurchase_money" type="number" class="shortInput">
|
||
<template slot="prepend">复购需要支付</template>
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</template>
|
||
<div class="tips">不需要复购：在下一个季度开始返利时可以直接领取；需要复购：在本季度最后一笔返利领取后指定时间内需要重新购买指定产品，否则后续不在返利，后续未领取返利全部失效！</div>
|
||
<div class="monty-list" v-if="Object.values(quarter.month_list).length > 0">
|
||
<el-input
|
||
v-for="(month,monthIndex) in quarter.month_list"
|
||
:value="month"
|
||
:key="monthIndex"
|
||
placeholder="返利金额"
|
||
type="number"
|
||
step="0.01"
|
||
class="monthInput"
|
||
v-model="quarter.month_list[monthIndex]"
|
||
>
|
||
<template slot="prepend">第 <span class="prepend-month">{{ monthIndex }}</span> 个月返利</template>
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
</template>
|
||
</el-form>
|
||
</div>
|
||
`,
|
||
style:`
|
||
.shortInput{
|
||
width: 500px!important;
|
||
}
|
||
.quarter-block{
|
||
border: 1px solid #DCDFE6;
|
||
margin-top: 20px;
|
||
padding: 0 15px;
|
||
}
|
||
.quarter-block .tips{
|
||
font-size: 12px;
|
||
color: #737373;
|
||
line-height: 20px;
|
||
width: 100%;
|
||
}
|
||
.quarter-block .title{
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
padding-left: 10px;
|
||
position: relative;
|
||
}
|
||
.quarter-block .title:after{
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 11px;
|
||
width: 4px;
|
||
height: 18px;
|
||
background: #29ba9c;
|
||
}
|
||
.quarter-block .isRepurchase{
|
||
margin-top: 15px;
|
||
margin-right: 50px;
|
||
}
|
||
.quarter-block .monthInput{
|
||
min-width: 350px;
|
||
width: calc((100% - 30px) / 4);
|
||
margin-bottom: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
.quarter-block .monthInput:nth-child(4n){
|
||
margin-right: 0!important;
|
||
}
|
||
.quarter-block .monthInput .prepend-month{
|
||
font-weight: bold;
|
||
}
|
||
.quarter-block .monty-list{
|
||
margin-top: 15px;
|
||
}
|
||
`,
|
||
props: {
|
||
form: {
|
||
default() {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
json: {
|
||
is_open: 0,
|
||
is_alone: 0,
|
||
total_quarter: '',
|
||
quarter_list: {},
|
||
}
|
||
}
|
||
},
|
||
computed:{
|
||
countTotalMonth(){
|
||
let json = Object.assign({}, this.json);
|
||
let quarterList = Object.assign({}, json.quarter_list);
|
||
|
||
return Object.values(quarterList).reduce((sum, item) => sum + item.total_month, 0);
|
||
}
|
||
},
|
||
watch:{
|
||
// 总季度信息变更
|
||
'json.total_quarter':{
|
||
handler(val, olVal) {
|
||
let value = Number(val) >= 0 ? Number(val) : 0;
|
||
let newQuarterList = {};
|
||
if(Number(value) > 0){
|
||
let quarterList = Object.assign({}, this.json.quarter_list);
|
||
for(value;value > 0;value--){
|
||
let currentQuarter = quarterList[value] || {};
|
||
if(Object.values(currentQuarter).length <= 0){
|
||
// 当前季度信息不存在
|
||
newQuarterList[value] = {
|
||
total_month: 0,// 本季度总多少月
|
||
is_repurchase: 0,// 是否需要复购
|
||
repurchase_money: 0,// 复购支付金额
|
||
month_list: {},// 每月返利金额
|
||
};
|
||
}else{
|
||
// 当前季度信息存在
|
||
newQuarterList[value] = currentQuarter;
|
||
}
|
||
}
|
||
}
|
||
|
||
this.$set(this.json, 'quarter_list', newQuarterList)
|
||
this.$forceUpdate();
|
||
},
|
||
deep:true
|
||
},
|
||
// 月度信息变更
|
||
countTotalMonth:{
|
||
handler(val, olVal) {
|
||
if(Number(val) !== Number(olVal)){
|
||
let json = Object.assign({}, this.json);
|
||
let quarterList = Object.assign({}, json.quarter_list);
|
||
// 循环处理每个季度
|
||
for(const index in quarterList){
|
||
let currentMonthInfo = quarterList[index] || {};
|
||
let totalMonth = Number(currentMonthInfo.total_month) || 0;
|
||
let monthList = currentMonthInfo.month_list || {};
|
||
let newMonthList = {};
|
||
if(totalMonth > 0){
|
||
for(totalMonth;totalMonth > 0;totalMonth--){
|
||
let currentMonth = monthList[totalMonth] || '';
|
||
newMonthList[totalMonth] = currentMonth || '';
|
||
}
|
||
}
|
||
|
||
quarterList[index].month_list = newMonthList;
|
||
}
|
||
|
||
this.$set(this.json, 'quarter_list', quarterList)
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
deep:true
|
||
},
|
||
},
|
||
mounted() {
|
||
if (this.form) {
|
||
let rebate = this.form || {};
|
||
this.json.is_alone = rebate.is_alone ? rebate.is_alone : 0;
|
||
this.json.is_open = rebate.is_open ? rebate.is_open : 0;
|
||
this.json.total_quarter = rebate.total_quarter ? rebate.total_quarter : '';
|
||
this.json.quarter_list = rebate.quarter_list ? rebate.quarter_list : {};
|
||
}
|
||
},
|
||
methods:{
|
||
validate(){
|
||
|
||
return this.json;
|
||
}
|
||
}
|
||
}) |