174 lines
7.7 KiB
JavaScript
174 lines
7.7 KiB
JavaScript
define({
|
||
name: "distribution",
|
||
template: `
|
||
<div>
|
||
<el-form ref="form" label-width="15%">
|
||
<div id="vue_head">
|
||
<div class="base_set">
|
||
<div class="vue-main-title">
|
||
<div class="vue-main-title-left"></div>
|
||
<div class="vue-main-title-content">分销设置</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div class="vue-main-form">
|
||
<el-form-item label="开启分销">
|
||
<el-radio v-model="is_open_commission" :label="0">关闭</el-radio>
|
||
<el-radio v-model="is_open_commission" :label="1">开启</el-radio>
|
||
<div class="help-block">如果不开启分销，则不产生直推奖励</div>
|
||
</el-form-item>
|
||
<el-form-item label="独立规则">
|
||
<el-switch v-model="has_rule_commission" :active-value="1" :inactive-value="0"></el-switch>
|
||
<span>启用独立佣金比例</span>
|
||
<div class="help-block">启用独立佣金设置，此商品拥有独自的佣金比例,不受分销商等级比例及默认设置限制</div>
|
||
</el-form-item>
|
||
<el-form-item prop="defaultRatio" v-show="has_rule_commission">
|
||
<el-row :gutter="15" class="gutter">
|
||
<el-col :span="3">
|
||
<div class="grid-content bg-purple">等级名称</div>
|
||
</el-col>
|
||
<el-col :span="7" v-for="(title, index) in headerList" :key="index">
|
||
<div class="grid-content bg-purple">{{title}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="gutter" v-for="(level, index) in levelList" :key="index">
|
||
<el-col :span="3">
|
||
<div class="grid-content bg-purple">{{level.levelName}}</div>
|
||
</el-col>
|
||
<el-col :span="7" class="flex-col" v-if="headerList.length >= 1">
|
||
<el-input placeholder="请输入百分比" v-model="level.first_level_rate" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">% 固定</template>
|
||
</el-input>
|
||
<el-input placeholder="请输入金额" v-model="level.first_level_pay" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-col>
|
||
|
||
<el-col :span="7" class="flex-col" v-if="headerList.length >= 2">
|
||
<el-input placeholder="请输入百分比" v-model="level.second_level_rate" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">% 固定</template>
|
||
</el-input>
|
||
<el-input placeholder="请输入金额" v-model="level.second_level_pay" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-col>
|
||
|
||
<el-col :span="7" class="flex-col" v-if="headerList.length >= 3">
|
||
<el-input placeholder="请输入百分比" v-model="level.third_level_rate" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">% 固定</template>
|
||
</el-input>
|
||
<el-input placeholder="请输入金额" v-model="level.third_level_pay" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div class="help-block">如果比例为空或等于0，则使用固定规则，如果都为空或等于0则无分销佣金</div>
|
||
</el-form-item>
|
||
<el-divider></el-divider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
`,
|
||
style: `
|
||
.help-block{
|
||
font-size:12px;
|
||
}
|
||
.location{
|
||
display:flex;
|
||
justify-content:flex-end;
|
||
}
|
||
.gutter{
|
||
text-align:center;
|
||
}
|
||
.flex-col{
|
||
display:flex;
|
||
margin-top:5px;
|
||
}
|
||
`,
|
||
props: {
|
||
form: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
is_open_commission: 0,
|
||
has_rule_commission: 0,
|
||
maxLevel: '',
|
||
headerList: [],
|
||
levelList: [],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.maxLevel = this.form.setLevel ? this.form.setLevel : 0;
|
||
// 数据为空时会返回空数组
|
||
if (this.form.item && !Array.isArray(this.form.item)) {
|
||
this.is_open_commission = this.form.item.is_commission ? this.form.item.is_commission : 0;
|
||
this.has_rule_commission = this.form.item.has_commission ? this.form.item.has_commission : 0;
|
||
}
|
||
this.setLevelList(this.maxLevel, this.form.levels);
|
||
},
|
||
methods: {
|
||
setLevelList (max_level=0, levelData) {
|
||
let levels = [];
|
||
let headerList = [];
|
||
let maxLevel = parseInt(max_level);
|
||
switch (maxLevel) {
|
||
case 1:
|
||
headerList.push("一级分销");
|
||
break;
|
||
case 2:
|
||
headerList.push("一级分销", "二级分销");
|
||
break;
|
||
case 3:
|
||
headerList.push("一级分销", "二级分销", "三级分销");
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
levelData.forEach((item, index) => {
|
||
let level = {
|
||
levelName: item.name,
|
||
levelKey: item.fromName
|
||
};
|
||
if (headerList.length >= 1) {
|
||
level.first_level_rate = item.first_level_rate;
|
||
level.first_level_pay = item.first_level_pay;
|
||
}
|
||
if(headerList.length >= 2) {
|
||
level.second_level_rate = item.second_level_rate;
|
||
level.second_level_pay = item.second_level_pay;
|
||
}
|
||
if (headerList.length == 3) {
|
||
level.third_level_rate = item.third_level_rate;
|
||
level.third_level_pay = item.third_level_pay;
|
||
}
|
||
levels[index] = level;
|
||
})
|
||
this.headerList = headerList;
|
||
this.levelList = levels;
|
||
// 将数组从首位默认值， 移到末尾
|
||
this.levelList.push(this.levelList.shift())
|
||
},
|
||
filterList (list = []) {
|
||
let ruleArr = {};
|
||
list.forEach((item) => {
|
||
ruleArr[item.levelKey] = item;
|
||
})
|
||
return ruleArr;
|
||
},
|
||
validate () {
|
||
return {
|
||
is_commission: this.is_open_commission,
|
||
has_commission: this.has_rule_commission,
|
||
rule: this.filterList(this.levelList)
|
||
}
|
||
},
|
||
},
|
||
}) |