web-base-admin/src/views/configManage/bonus/ztpz.vue

756 lines
22 KiB
Vue

<template>
<div class="page">
<topBar
v-if="topList.length > 0"
:top-list="topList"
:moren="moren"
/>
<div class="main">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<template>
<div class="linetitle">
<div class="tit" />
{{
form.bonusDirectLoopExtsList[0].bonusType == 1
? '三单循环'
: '四单循环'
}}
</div>
<div
v-for="(aitem, aindex) in form.bonusDirectLoopExtsList"
:key="aindex"
class="maincontent"
>
<el-row>
<el-form-item :label="'等级范围'" prop="region">
<el-checkbox-group v-model="aitem.loopDetailsList">
<el-checkbox
v-for="gitem in gradeRangList"
:key="gitem.pkId"
:label="gitem.pkId"
>{{ gitem.gradeName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-row>
<el-row>
<el-col :span="1">
<el-form-item :required="'比例设置'" prop="region" />
</el-col>
<el-col
:span="3"
><el-form-item :label="'第一单'" prop="region">
<el-input v-model="aitem.firstOrder" clearable>
<i slot="suffix" class="neibu">% </i></el-input>
</el-form-item></el-col>
<el-col
:span="3"
><el-form-item :label="'第二单'" prop="region">
<el-input v-model="aitem.secondOrder" clearable>
<i slot="suffix" class="neibu">% </i>
</el-input>
</el-form-item></el-col>
<el-col
:span="3"
><el-form-item :label="'第三单'" prop="region">
<el-input v-model="aitem.thirdOrder" clearable>
<i slot="suffix" class="neibu">% </i>
</el-input>
</el-form-item></el-col>
<el-col
v-if="form.bonusDirectLoopExtsList[0].bonusType == 2"
:span="3"
><el-form-item :label="'第四单'" prop="region">
<el-input v-model="aitem.fourthOrder" clearable>
<i slot="suffix" class="neibu">% </i>
</el-input>
</el-form-item></el-col>
</el-row>
<el-row>
<el-col :span="14">
<el-form-item prop="name" :label="'取值类型'">
<el-select
v-model="aitem.takeValueType"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="titem in takeValueTypeList"
:key="titem.value"
:label="titem.label"
:value="titem.value"
/>
</el-select> </el-form-item></el-col></el-row>
</div>
<div style="text-align: center">
<el-row>
<el-col :span="4">
<el-button
circle
icon="el-icon-plus"
@click="addList3()"
/>
<el-button
circle
icon="el-icon-minus"
@click="subList3()"
/>
</el-col>
</el-row>
</div>
</template>
<div class="linetitle">
<div class="tit" />
{{ '直推奖励配置' }}
</div>
<div class="maincontent">
<el-row>
<el-col
v-for="(item, i) in form.bonusDirectList"
:key="i"
:span="14"
class="flexcol"
>
<el-form-item label-width="0px" prop="name">
<el-select
v-model="form.bonusDirectList[i].pkLevel"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in gradeRangList"
:key="item.pkId"
:label="item.gradeName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
<el-form-item label-width="0px" prop="name">
<el-select
v-model="form.bonusDirectList[i].calType"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in cellTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label-width="0px" prop="age">
<el-input
v-model="form.bonusDirectList[i].bonusValue"
clearable
:placeholder="'请输入'"
>
<i
v-if="form.bonusDirectList[i].calType == 1"
slot="suffix"
class="neibu"
>%
</i>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button
circle
icon="el-icon-plus"
@click="addList()"
/>
<el-button
circle
icon="el-icon-minus"
@click="subList()"
/>
</el-col>
</el-row>
</div>
<div class="linetitle">
<div class="tit" />
{{ '复购直推配置' }}
</div>
<div class="maincontent">
<el-row>
<el-col
v-for="(item, i) in form.repoDirectPushList"
:key="i"
:span="14"
class="flexcol"
>
<el-form-item label-width="0px" prop="name">
<el-select
v-model="form.repoDirectPushList[i].algebra"
clearable
disabled
:placeholder="'请选择'"
>
<el-option
v-for="item in algebraList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label-width="0px" prop="name">
<el-select
v-model="form.repoDirectPushList[i].calType"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in cellTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label-width="0px" prop="age">
<el-input
v-model="form.repoDirectPushList[i].pushValue"
clearable
:placeholder="'请输入'"
>
<i
v-if="form.repoDirectPushList[i].calType == 1"
slot="suffix"
class="neibu"
>%
</i>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button
circle
icon="el-icon-plus"
@click="addList4()"
/>
<el-button
circle
icon="el-icon-minus"
@click="subList4()"
/>
</el-col>
</el-row>
</div>
<div class="linetitle">
<div class="tit" />
{{ '海粉直推奖励配置' }}
</div>
<div class="maincontent">
<el-row>
<el-col
v-for="(item, i) in form.bonusHiPinkList"
:key="i"
:span="14"
class="flexcol"
>
<el-form-item prop="name" label-width="0px">
<el-select
v-model="form.bonusHiPinkList[i].rangeType"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in rangeTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="form.bonusHiPinkList[i].rangeType == 1"
label-width="0px"
prop="name"
>
<el-select
v-model="form.bonusHiPinkList[i].pkLevel"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in gradeRangList"
:key="item.pkId"
:label="item.gradeName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="form.bonusHiPinkList[i].rangeType == 2"
label-width="0px"
prop="name"
>
<el-select
v-model="form.bonusHiPinkList[i].pkLevel"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in awardsList"
:key="item.pkId"
:label="item.gradeName"
:value="item.pkId"
/>
</el-select>
</el-form-item>
<el-form-item label-width="0px" prop="name">
<el-select
v-model="form.bonusHiPinkList[i].calType"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in cellTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label-width="0px" prop="age">
<el-input
v-model="form.bonusHiPinkList[i].bonusValue"
clearable
:placeholder="'请输入'"
>
<i
v-if="form.bonusHiPinkList[i].calType == 1"
slot="suffix"
class="neibu"
>%
</i>
</el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button
circle
icon="el-icon-plus"
@click="addList2()"
/>
<el-button
circle
icon="el-icon-minus"
@click="subList2()"
/>
</el-col>
</el-row>
</div>
<div class="linetitle">
<div class="tit" />
{{ '固定升级奖励' }}
</div>
<div class="maincontent">
<el-row>
<el-col :span="12" class="flexcol" style="padding: 0">
<el-form-item :label="ycsbcLabel" label-width="70px" prop="name">
<el-select
v-model="
form.bonusDifferenceExt.bonusDifferencesList[0].calType
"
clearable
:placeholder="'请选择'"
>
<el-option
v-for="item in cellTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="
form.bonusDifferenceExt.bonusDifferencesList[0].calType == 2
"
label-width="0px"
prop="name"
>
<el-input
v-model="
form.bonusDifferenceExt.bonusDifferencesList[0].rewardValue
"
clearable
:placeholder="'请输入'"
/>
</el-form-item>
<el-form-item
v-if="
form.bonusDifferenceExt.bonusDifferencesList[0].calType == 1
"
label-width="0px"
prop="age"
>
<el-input
v-model="
form.bonusDifferenceExt.bonusDifferencesList[0].rewardValue
"
clearable
:placeholder="'请输入'"
>
<i
v-if="
form.bonusDifferenceExt.bonusDifferencesList[0].calType ==
1
"
slot="suffix"
class="neibu"
>%
</i>
</el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</div>
<div class="twobtn">
<div style="margin: 0 auto">
<el-button class="thebtn btn1">{{ '修改' }}</el-button>
<el-button class="thebtn btn2" @click="savedate">{{ '保存' }}</el-button>
</div>
</div>
</div>
</template>
<script>
import topBar from '@/components/topBar'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
import { getzccsList } from '@/api/system'
import {
getdirectLoopList,
getrangeTypeList,
getcellTypeList,
updateDirectLoop,
getTakeValueTypeList,
getAlgebra
} from '@/api/bonus'
import mixin from './mixin'
export default {
name: 'Ztpz',
components: {
topBar
},
mixins: [mixin],
data() {
return {
moren: 'ztpz',
form: {
bonusDirectLoopExtsList: [
{
bonusType: '', // 三单
loopDetailsList: [], // 等级范围选择
firstOrder: '', // 第一单
secondOrder: '', // 第二单
thirdOrder: '', // 第三单
fourthOrder: '', // 第四单
pkId: '',
takeValueType: '' // 取值类型
}
],
bonusDirectList: [
{
rangeType: '',
pkLevel: '',
calType: '',
bonusValue: ''
}
], // 直推奖励配置列表
bonusHiPinkList: [
{
// rangeType: "",
pkLevel: '',
calType: '',
bonusValue: ''
}
], // 嗨粉直推奖励配置列表
bonusDifferenceExt: {
bonusDifferencesList: [
{
upgradeType: '',
calType: '', // 选择比例/值
rewardValue: '' // 比例||值
}
]
}, // 一次性补差升级
repoDirectPushList: [
{
algebra: '',
calType: '',
pushValue: ''
}
]// 复购直推配置
},
cdSelectList: [
{
value: '1',
label: '覆盖'
},
{
value: '2',
label: '补差'
},
{
value: '3',
label: '累计'
}
], // 升级方式
rules: {},
gradeRangList: [], // 等级范围选择
rangeTypeList: [], // 等级级差枚举类型选择
awardsList: [], // 奖衔选择
cellTypeList: [], // 计算类型枚举值
ycxbcList: [], // 一次性补差升级
ycsbcLabel: '', // 一次性补差升级标题名称
takeValueTypeList: [], // 取值类型
algebraList: [], // 代数枚举
thebonusType: null
}
},
created() {
this.getdirectLoopList()
this.getOthers()
},
methods: {
getOthers() {
// 计算类型枚举值
getcellTypeList().then((res) => {
this.cellTypeList = res.data
})
// 奖衔下拉列表
getAwardsListChiose().then((res) => {
res.rows.forEach((item) => {
item.gradeName = item.awardsName
})
this.awardsList = res.rows
})
// 获取级差枚举类型列表
getrangeTypeList().then((res) => {
this.rangeTypeList = res.data
})
// 等级范围选择
getgradeRanglist().then((res) => {
this.gradeRangList = res.data
})
// 取值类型枚举
getTakeValueTypeList().then((res) => {
this.takeValueTypeList = res.data
})
getAlgebra().then(res => {
this.algebraList = res.data
})
},
// 点击加号
addList() {
this.form.bonusDirectList.push({
rangeType: '',
pkLevel: '',
calType: '',
bonusValue: ''
})
},
addList2() {
this.form.bonusHiPinkList.push({
// rangeType: "",
pkLevel: '',
calType: '',
bonusValue: ''
})
},
addList3() {
this.form.bonusDirectLoopExtsList.push({
// rangeType: "",
bonusType: this.thebonusType,
loopDetailsList: [],
firstOrder: '',
secondOrder: '',
thirdOrder: '',
fourthOrder: '',
takeValueType: ''
})
},
addList4() {
this.form.repoDirectPushList.push({
algebra: '',
calType: '',
pushValue: ''
})
},
subList4() {
this.form.repoDirectPushList.pop()
},
subList3() {
this.form.bonusDirectLoopExtsList.pop()
},
// 点击减号
subList() {
this.form.bonusDirectList.pop()
},
subList2() {
this.form.bonusHiPinkList.pop()
},
// 初始化直推配置请求列表
getdirectLoopList() {
getdirectLoopList().then((res) => {
if (res.data.bonusDirectLoopExtsList.length > 0) {
this.form.bonusDirectLoopExtsList = res.data.bonusDirectLoopExtsList
}
if (res.data.bonusDirectList.length > 0) {
this.form.bonusDirectList = res.data.bonusDirectList
}
if (res.data.bonusHiPinkList.length > 0) {
this.form.bonusHiPinkList = res.data.bonusHiPinkList
}
if (res.data.bonusDifferenceExt.bonusDifferencesList.length > 0) {
this.form.bonusDifferenceExt.bonusDifferencesList =
res.data.bonusDifferenceExt.bonusDifferencesList
}
if (res.data.repoDirectPushList.length > 0) {
this.form.repoDirectPushList = res.data.repoDirectPushList
}
})
// 获取三单循环还是四单循环 1三单2四单
getzccsList({ key: 'RECOMMEND' }).then((res) => {
if (res.data[0].value) {
if (res.data[0].value == 1) {
this.form.bonusDirectLoopExtsList[0].bonusType = 1
this.thebonusType = 1
} else if (res.data[0].value == 2) {
this.form.bonusDirectLoopExtsList[0].bonusType = 2
this.thebonusType = 2
}
}
})
// 一次性补差
getzccsList({ key: 'UPGRADE_WAY' }).then((res) => {
res.data.forEach((item) => {
this.cdSelectList.forEach((element) => {
if (item.value == element.value) {
this.ycsbcLabel = element.label
this.form.bonusDifferenceExt.bonusDifferencesList[0].upgradeType =
item.value
}
})
})
})
},
// 点击保存
savedate() {
updateDirectLoop(this.form).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
})
} else {
this.$message({
message: res.msg,
type: 'warning'
})
}
this.getdirectLoopList()
})
}
}
}
</script>
<style scoped lang="scss">
.tit {
width: 5px;
height: 22px;
background: #c8161d;
border-radius: 0px 0px 0px 0px;
opacity: 1;
position: absolute;
margin-top: -3px;
left: 0;
}
.flexcol {
display: flex;
padding: 0 20px;
}
::v-deep .el-input__inner {
height: 35px;
font-size: 14px;
}
.neibu {
margin-right: 10px;
color: #666666;
}
.page {
padding: 20px 20px 36px 20px;
background: #f9f9f9;
font-size: 14px;
.main {
background: #ffffff;
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
border-radius: 8px;
.linetitle {
padding: 20px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
border-bottom: 4px solid #eeeeee;
position: relative;
}
.maincontent {
padding: 20px 0;
.contentbox1 {
display: flex;
align-items: center;
.inputbox {
width: 97px;
height: 28px;
margin: 0 5px;
}
}
.lastline {
margin-right: 112px;
}
.marginbox {
margin: 0 20px;
}
}
}
.twobtn {
margin-top: 20px;
display: flex;
.thebtn {
width: 120px;
height: 48px;
color: #ffffff;
font-size: 14px;
font-weight: bold;
}
.btn1 {
background: #4391fd;
margin-right: 80px;
}
.btn2 {
background: #ffad41;
}
}
}
</style>