<!--
|
* @Author: 小明丶
|
* @Date: 2019-07-10 16:37:08
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-04 16:28:09
|
* @Description: 模板详情页面 逻辑比较复杂~
|
-->
|
<template>
|
<div class="template-detail-box">
|
<header class="header flex-start-g" :style="{background:$store.state.lastColor}">
|
<svg class="icon" aria-hidden="true" style="width:25px;height:44px;fill:#fff;" @click="$router.back()">
|
<use xlink:href="#iconzuojiantou"></use>
|
</svg>
|
<h4 class="title text-center-g">{{tempId || merId ? '产品管理' : '新增模板'}}</h4>
|
</header>
|
|
<div class="temp-name">
|
<v-cell v-if="merId" label="模板" disabled readonly isLink :value="tempIndex ===0 ? '无模板' : currentTemp.tempName"
|
@click.native="openTempModal()"></v-cell>
|
<v-cell v-else label="模板名称" v-model="info.tempName" max="20" placeholder="请输入模板名称"> </v-cell>
|
</div>
|
|
<div class="product-box">
|
<!-- <v-cell v-if="!merId" label="商户匹配规则" :value="areaIndex ===0 ? '无匹配规则' : currentRules.name" max="20"
|
placeholder="请输入模板名称" readonly disabled isLink @click.native="openAreaModal()" class="det-btn"></v-cell> -->
|
<p class="btn-d" v-if="activeVal !== 1 && !merId && detArr.length > 0" @click="showDet">查看详情</p>
|
<v-cell v-if="!merId" label="商户匹配规则" :value="activeVal == 1 ? '无匹配规则' : activeVal == 2 ? '选择省份规则':'选择渠道规则'" max="20"
|
placeholder="请输入模板名称" readonly disabled isLink @click.native="openAreaModal()"> </v-cell>
|
<!-- 产品 -->
|
<div v-for="item in info.prodInfList" :key="item.prodId"
|
:class="merId && tempIndex!==0 ? 'bg-gray' : 'bg-fff'">
|
<div v-if="item.isShow !==0" style="margin-top:10px;">
|
<div class="flex-between-g p-title" :class="merId && tempIndex!==0 ? 'bg-gray' : ''">
|
<p>{{item.prodName}}</p>
|
<p v-if="item.prodId == 30000006 || item.prodId == 30000011">{{item.capitalStatusName}}</p>
|
<van-switch v-model="item.status" :disabled="merId && tempIndex!==0" size="25px"
|
@change="changeChildStatus(item)" :active-color="$store.state.backColor" inactive-color="#eeecf7" />
|
</div>
|
<div class="slider" v-if="item.issueList.length"></div>
|
<div :class="item.status ? '' : 'bg-gray'" v-if="item.prodId != 30000014 && item.prodId != 30000008">
|
<div class="input-box">
|
<div class="item" v-for="(el,k) in item.issueList" :key="k">
|
<div class="left goujiclass">
|
<p class="label">{{el.term}}期</p>
|
<input type="number" v-model.number="el.fee" :class="item.status ? '' : 'bg-gray'"
|
:disabled="!el.status || merId && tempIndex!==0" maxlength="5"
|
:placeholder="`请为商户设置${el.term}期费率,范围(${el.feeMin}-${el.feeMax})%`">
|
</div>
|
<van-icon v-if="el.status" name="passed" :color="$store.state.backColor" size="22"
|
@click="setChildStatus(item.status,el,false)" />
|
<div v-else class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" @click="setChildStatus(item.status,el,true)"></div>
|
</div>
|
</div>
|
<div class="slider" v-if="item.contractList.length"></div>
|
<div class="hb-box">
|
<div class="item" v-for="(contract, j) in item.contractList" :key="j">
|
<div class="left">
|
<p class="label">{{contract.name}}</p>
|
<div class="info">
|
<p>编号：{{contract.contNo}}</p>
|
<p>套餐资费：{{contract.packagePrices}}元</p>
|
<p class="btn" @click="lookDetails(contract)">查看详情</p>
|
</div>
|
</div>
|
<van-icon v-if="contract.status" name="passed" :color="$store.state.backColor" size="22"
|
@click="setChildStatus(item.status,contract,false)" />
|
<div v-else class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" @click="setChildStatus(item.status,contract,true)"></div>
|
</div>
|
</div>
|
</div>
|
<!-- 商户收款 -->
|
<div :class="item.status ? '' : 'bg-gray'" v-if="item.prodId == 30000008">
|
<div class="input-box">
|
<div class="item" v-for="(el,k) in item.payMethods" :key="k">
|
<div class="left goujiclass">
|
<p class="label" style="width:100px">{{el.payMethodName}}费率</p>
|
<input type="number" style="text-algin:right" v-model.number="el.fee" :class="item.status ? '' : 'bg-gray'"
|
disabled maxlength="5"
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 花呗间联 -->
|
<div :class="item.status ? '' : 'bg-gray'" v-if="item.prodId == 30000014">
|
<div class="input-box">
|
<div class="item-hbjl-box" v-for="(el,k) in item.issueList" :key="k">
|
<p class="label">{{el.term}}期</p>
|
<div>
|
<div class="item-hbjl">
|
<div class="left goujiclass">
|
<input type="number" v-model.number="el.fee" :class="item.status ? '' : 'bg-gray'"
|
:disabled="!el.status || merId && tempIndex!==0" maxlength="5"
|
:placeholder="`请为商户设置${el.term}期费率,范围(${el.feeMin}-${el.feeMax})%`">
|
</div>
|
<!-- <van-icon v-if="el.status" name="passed" color="#896EDB" size="22"
|
@click="setChildStatus(item.status,el,false)" />
|
<div v-else class="circle" @click="setChildStatus(item.status,el,true)"></div> -->
|
</div>
|
<div class="item-hbjl">
|
<div class="left goujiclass">
|
<input type="number" v-model.number="el.amt" :class="item.status ? '' : 'bg-gray'"
|
:disabled="!el.status || merId && tempIndex!==0" maxlength="5"
|
:placeholder="`请为商户设置固定收益金额,范围(${el.amtMin}-${el.amtMax})`">
|
</div>
|
<!-- <van-icon v-if="el.status" name="passed" color="#896EDB" size="22"
|
@click="setChildStatus(item.status,el,false)" />
|
<div v-else class="circle" @click="setChildStatus(item.status,el,true)"></div> -->
|
</div>
|
</div>
|
<div>
|
<van-icon v-if="el.status" name="passed" :color="$store.state.backColor" size="22"
|
@click="setChildStatus(item.status,el,false)" />
|
<div v-else class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" @click="setChildStatus(item.status,el,true)"></div>
|
</div>
|
</div>
|
</div>
|
<div class="slider" v-if="item.contractList.length"></div>
|
<div class="hb-box">
|
<div class="item" v-for="(contract, j) in item.contractList" :key="j">
|
<div class="left">
|
<p class="label">{{contract.name}}</p>
|
<div class="info">
|
<p>编号：{{contract.contNo}}</p>
|
<p>套餐资费：{{contract.packagePrices}}元</p>
|
<p class="btn" @click="lookDetails(contract)">查看详情</p>
|
</div>
|
</div>
|
<van-icon v-if="contract.status" name="passed" :color="$store.state.backColor" size="22"
|
@click="setChildStatus(item.status,contract,false)" />
|
<div v-else class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" @click="setChildStatus(item.status,contract,true)"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 选中模板详情 -->
|
<van-popup v-model="showDetail">
|
<div class="dialog-box">
|
<header class="head">
|
<svg class="icon" aria-hidden="true" style="width:97px;height:97px;">
|
<use xlink:href="#iconshenpidanchuang"></use>
|
</svg>
|
<svg class="icon close" aria-hidden="true" style="width:26px;height:26px;fill:#fff;"
|
@click="showDetail =false;">
|
<use xlink:href="#iconcha"></use>
|
</svg>
|
|
</header>
|
<div class="det-box dialog-content" v-if="tempId && detArr.length > 0">
|
<p>
|
<span>当前匹配规则：</span>
|
<span class="det-span" v-for="(e,i) in detArr" :key="i">{{e.name}}</span>
|
</p>
|
</div>
|
<div class="det-box dialog-content" v-if="detArr.length == 0">
|
<p style="text-align:center;line-height:125px">
|
<span>规则匹配：</span>
|
<span class="det-span">暂无，请选择规则</span>
|
</p>
|
</div>
|
</div>
|
</van-popup>
|
<!-- 匹配规则第一步 -->
|
<van-popup v-model="isShowModal" class="modal-box" position="bottom">
|
<h4 class="title">
|
选择商户匹配规则
|
<svg class="icon close" aria-hidden="true" style="width:24px;height:24px;fill:#999;"
|
@click="isShowModal =false;">
|
<use xlink:href="#iconcha"></use>
|
</svg>
|
</h4>
|
<div class="my-cell" :class="activeVal-1 === index ? 'active':''" v-for="(item, index) in modoulList"
|
:key="item.value" @click="nextStep(item,index)">
|
<p>{{item.name}}</p>
|
<van-icon v-if="activeVal-1 === index" name="passed" :color="$store.state.backColor" size="22" />
|
<div class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" v-else></div>
|
</div>
|
</van-popup>
|
<!-- 选择模板第二步省份 -->
|
<van-popup v-model="isShowModalPr" class="modal-box" position="bottom">
|
<div class="title">
|
<div style="position: absolute;top: 5px;">
|
<svg class="icon" aria-hidden="true" style="width:24px;height:24px;fill:#999;" @click="prToGo">
|
<use xlink:href="#iconzuojiantou"></use>
|
</svg>
|
</div>
|
|
<span>选择商户匹配规则</span>
|
<svg class="icon close" aria-hidden="true" style="width:24px;height:24px;fill:#999;"
|
@click="isShowModalPr =false;">
|
<use xlink:href="#iconcha"></use>
|
</svg>
|
</div>
|
<div class="my-cell" :class="allpr ? 'active':''" @click="getAllpr">
|
<p>全选</p>
|
<van-icon v-if="allpr" name="passed" :color="$store.state.backColor" size="22" />
|
<div class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" v-else></div>
|
</div>
|
<div class="my-cell" :class="item.selected === 1 ? 'active':''" v-for="(item, index) in areaArr"
|
:key="index" @click="chosePr(index)">
|
<p>{{item.name}}</p>
|
<van-icon v-if="item.selected === 1" name="passed" :color="$store.state.backColor" size="22" />
|
<div class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" v-else></div>
|
</div>
|
<!-- <div class="my-cell" :class="areaClassIndex === index ? 'active':''" v-for="(item, index) in areaArr"
|
:key="item.value" @click="areaClassIndex = index;">
|
<p>{{item.name}}</p>
|
<van-icon v-if="areaClassIndex===index" name="passed" color="#896EDB" size="22" />
|
<div class="circle" v-else></div>
|
</div> -->
|
</van-popup>
|
<!-- 选择模板第二步渠道 -->
|
<van-popup v-model="isShowModalChan" class="modal-box" position="bottom">
|
<div class="title">
|
<div style="position: absolute;top: 5px;">
|
<svg class="icon" aria-hidden="true" style="width:24px;height:24px;fill:#999;" @click="chanToGo">
|
<use xlink:href="#iconzuojiantou"></use>
|
</svg>
|
</div>
|
选择商户匹配规则
|
<svg class="icon close" aria-hidden="true" style="width:24px;height:24px;fill:#999;"
|
@click="isShowModalChan =false;">
|
<use xlink:href="#iconcha"></use>
|
</svg>
|
</div>
|
<div class="my-cell" :class="allchan ? 'active':''" @click="getAllchan">
|
<p>全选</p>
|
<van-icon v-if="allchan" name="passed" :color="$store.state.backColor" size="22" />
|
<div class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" v-else></div>
|
</div>
|
<div class="my-cell" :class="item.selected === 1 ? 'active':''" v-for="(item, index) in chanArr"
|
:key="item.value" @click="choseChan(index)">
|
<p>{{item.name}}</p>
|
<van-icon v-if="item.selected === 1" name="passed" :color="$store.state.backColor" size="22" />
|
<div class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" v-else></div>
|
</div>
|
</van-popup>
|
|
<van-button v-show="isShowModal" :color="$store.state.backColor" class="btn-submit" style="z-index:3000;" @click="setInfoRules(1)">{{activeVal == 1 ? '确定':'下一步'}}</van-button>
|
<van-button v-show="isShowModalPr" :color="$store.state.backColor" class="btn-submit" style="z-index:3000;" @click="setInfoRules(2)">确定</van-button>
|
<van-button v-show="isShowModalChan" :color="$store.state.backColor" class="btn-submit" style="z-index:3000;" @click="setInfoRules(3)">确定</van-button>
|
|
<!-- 模板列表 -->
|
<van-popup v-model="isShowTempList" class="modal-box" position="bottom">
|
<h4 class="title">
|
更换模板
|
<svg class="icon close" aria-hidden="true" style="width:24px;height:24px;fill:#999;"
|
@click="isShowTempList =false;">
|
<use xlink:href="#iconcha"></use>
|
</svg>
|
</h4>
|
<div class="my-cell" :class="tempClassIndex===index ? 'active':''" v-for="(item, index) in tempList"
|
:key="item.value" @click="tempClassIndex = index;">
|
<p>{{item.tempName}}</p>
|
<van-icon v-if="tempClassIndex===index" name="passed" :color="$store.state.backColor" size="22" />
|
<div class="circle" :style="{border:`1px solid ${$store.state.backColor}`}" v-else></div>
|
</div>
|
</van-popup>
|
|
<van-button :color="$store.state.backColor" v-show="!isShowModal && !isShowTempList" class="btn-submit save" @click="saveTemp">保存</van-button>
|
|
|
|
<!-- 合约详情 -->
|
<van-popup v-model="showDialogStyle" :close-on-click-overlay="false">
|
<div class="dialog-box">
|
<header class="head">
|
<svg class="icon" aria-hidden="true" style="width:97px;height:97px;">
|
<use xlink:href="#iconmobanxiangqingdanchuang"></use>
|
</svg>
|
<svg class="icon close" aria-hidden="true" style="width:26px;height:26px;fill:#fff;"
|
@click="showDialogStyle =false;">
|
<use xlink:href="#iconcha"></use>
|
</svg>
|
|
</header>
|
<div class="dialog-content">
|
<p class="title text-center-g">{{contractItem.name}}</p>
|
<ul class="message-box">
|
<li class="message-item">合约编号：{{contractItem.contNo}}</li>
|
<li class="message-item">还款期数：{{contractItem.nper}}期</li>
|
<li class="message-item">套餐资费：{{contractItem.packagePrices}}元</li>
|
<li class="message-item">商户结算：{{contractItem.loanAmt}}元</li>
|
<li class="message-item">月缴话费：{{contractItem.monthlyFees}}元</li>
|
<li class="message-item">月还款额：{{contractItem.monthlyPayments}}元</li>
|
</ul>
|
</div>
|
</div>
|
</van-popup>
|
|
<van-button :color="$store.state.backColor" v-show="isShowTempList" class="btn-submit" style="z-index:3001;" @click="setTempId">确定</van-button>
|
|
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex';
|
import Vue from 'vue';
|
import { Tab, Tabs } from 'vant';
|
|
Vue.use(Tab);
|
Vue.use(Tabs);
|
export default {
|
name: 'template_detail',
|
data() {
|
return {
|
detArr:[],//规则详情数组
|
showDetail:false,//详情弹出层
|
allchan:false,//模板渠道全选
|
allpr:false,//模板省份全选
|
activeVal:1,//选择模板第一步,1-无规则,2-省份,3-渠道
|
showDialogStyle: false,
|
isShowModal: false,//模板选择第一步
|
isShowModalChan:false,//模板选择第二步
|
isShowModalPr:false,//模板选择第三步
|
areaArr: [], //地区列表
|
chanArr:[],//渠道列表
|
modoulList:[
|
{
|
value:'999999',
|
name:'无匹配规则'
|
},
|
{
|
value:'1',
|
name:'省份'
|
},
|
{
|
value:'2',
|
name:'渠道'
|
}
|
],//无模板
|
info: {
|
agencyId: '',
|
id: '',
|
prodInfList: [],
|
tempName: '' ,
|
tempRules: [],
|
tempType:''
|
},
|
contractItem: { //当前点击查看的合约
|
|
},
|
isShowTempList: false,
|
tempIndex: 0,
|
tempClassIndex: 0, //样式控制
|
tempList: [], //模板列表
|
areaIndex: 0,
|
areaClassIndex: false, //样式控制
|
modClassIndex:'',
|
chanClassIndex:false
|
}
|
},
|
watch:{
|
'info.prodInfList':{
|
handler: function() {
|
this.info.ruleChange = 1
|
},
|
deep: true
|
},
|
'info.tempRules':{
|
handler: function() {
|
this.info.ruleChange = 1
|
},
|
deep: true
|
},
|
'info.tempType':{
|
handler: function() {
|
this.info.ruleChange = 1
|
},
|
deep: true
|
}
|
},
|
computed: {
|
...mapState(['areaList']),
|
// 选中的地区
|
currentRules() {
|
return this.areaArr[this.areaIndex]
|
},
|
// 选中的模板
|
currentTemp() {
|
return this.tempList[this.tempIndex]
|
},
|
tempId() {
|
return this.$route.query.tempId
|
},
|
merId() {
|
return this.$route.query.merId
|
},
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
chanToGo(){
|
this.isShowModalChan = false
|
this.isShowModal = true
|
},
|
prToGo(){
|
this.isShowModalPr = false
|
this.isShowModal = true
|
},
|
// 选择省份
|
chosePr(index){
|
//按下标打钩，并且存储选中项，取消打钩的去掉存储项
|
if(this.areaArr[index].selected == 0){
|
this.areaArr[index].selected = 1
|
console.log(this.info,this.areaArr[index])
|
this.info.tempRules.push(this.areaArr[index])
|
}else{
|
this.areaArr[index].selected = 0
|
let num = this.info.tempRules.findIndex(item=>{
|
return item.code == this.areaArr[index].code
|
})
|
console.log('num:',num)
|
this.info.tempRules.splice(num,1)
|
}
|
// 有一个未打钩，取消全选，全部勾选则选中全选
|
let i = this.areaArr.findIndex(item => {
|
return item.selected == 0
|
})
|
if(i > -1){
|
this.allpr = false
|
}else{
|
this.allpr = true
|
}
|
console.log(this.info)
|
},
|
// 选择渠道
|
choseChan(index){
|
//按下标打钩，并且存储选中项，取消打钩的去掉存储项
|
if(this.chanArr[index].selected == 0){
|
this.chanArr[index].selected = 1
|
this.info.tempRules.push(this.chanArr[index])
|
}else{
|
this.chanArr[index].selected = 0
|
let num = this.info.tempRules.findIndex(item => {
|
return item.code == this.chanArr[index].code
|
})
|
console.log('num:',num)
|
this.info.tempRules.splice(num,1)
|
}
|
// 有一个未打钩，取消全选，全部勾选则选中全选
|
let i = this.chanArr.findIndex(item => {
|
return item.selected == 0
|
})
|
if(i > -1){
|
this.allchan = false
|
}else{
|
this.allchan = true
|
}
|
console.log(this.info)
|
console.log('this.chanArr:',this.chanArr)
|
},
|
// 详情弹出层
|
showDet(){
|
this.showDetail = !this.showDetail
|
},
|
// 模板渠道全选
|
getAllchan(){
|
this.allchan = !this.allchan
|
if(this.allchan){
|
this.chanArr.forEach(e=>{
|
e.selected = 1
|
})
|
this.info.tempRules = JSON.parse(JSON.stringify(this.chanArr))
|
}else{
|
this.chanArr.forEach(e=>{
|
e.selected = 0
|
})
|
this.info.tempRules = []
|
}
|
console.log(this.info)
|
},
|
// 模板省份全选
|
getAllpr(){
|
this.allpr = !this.allpr
|
if(this.allpr){
|
this.areaArr.forEach(e=>{
|
e.selected = 1
|
})
|
this.info.tempRules = JSON.parse(JSON.stringify(this.areaArr))
|
}else{
|
this.areaArr.forEach(e=>{
|
e.selected = 0
|
})
|
this.info.tempRules = []
|
}
|
console.log(this.info)
|
},
|
// 控制模板选择弹出层
|
nextStep(item,index){
|
this.modClassIndex = index;
|
this.info.tempRules = []
|
if(item.value == '999999'){
|
this.activeVal = 1
|
this.info.tempType = 1
|
}else if(item.value == '1'){
|
this.activeVal = 2
|
this.info.tempType = 2
|
this.areaArr.forEach(e=>{
|
if(e.selected == 1){
|
this.info.tempRules.push(e)
|
}
|
})
|
}else{
|
this.activeVal = 3
|
this.info.tempType = 3
|
this.chanArr.forEach(e=>{
|
if(e.selected == 1){
|
this.info.tempRules.push(e)
|
}
|
})
|
}
|
console.log(this.info)
|
},
|
// 打开 模板弹窗
|
openTempModal() {
|
this.tempClassIndex = this.tempIndex;
|
this.isShowTempList = true;
|
},
|
// 打开模板选择弹窗
|
openAreaModal() {
|
this.areaClassIndex = this.areaIndex;
|
this.isShowModal = true;
|
},
|
init() {
|
//获取地址
|
//let list = this.areaList.province_list;
|
// 增加第一个选项，可以选择无匹配规则
|
// this.areaArr.push({
|
// value:'999999',
|
// name:'无匹配规则'
|
// })
|
// for (let key in list) {
|
// this.areaArr.push({
|
// value: key,
|
// name: list[key]
|
// })
|
|
// }
|
// 初始化模板
|
// 有id的：查询详情，没有是新增
|
if (this.tempId) {
|
this.getTempDetail()
|
} else if (this.merId) {
|
this.initMerInfo()
|
} else {
|
this.initTemp()
|
}
|
},
|
// 初始化从商户管理页面进入的页面逻辑
|
initMerInfo() {
|
// 获取模板列表
|
this.$api.getTempList().then((res) => {
|
let tempList = res.body || [];
|
tempList.unshift({
|
tempName: '无匹配规则',
|
value: '999999'
|
})
|
this.tempList = tempList;
|
// 获取商户产品信息
|
this.$api.tempGetMerRef({
|
merId: this.merId,
|
// tempId: 0
|
}).then((res) => {
|
this.parseTempInfo(res.body)
|
this.setTempIndex(res.body.id)
|
}).catch((err) => {
|
|
});
|
}).catch((err) => {
|
|
});
|
},
|
// 设置当前模板
|
setTempIndex(id) {
|
let index = this.tempList.findIndex(item => {
|
return item.id == id
|
})
|
if (index > -1) {
|
this.tempIndex = index;
|
this.tempClassIndex = index;
|
}
|
},
|
//解析模板信息
|
parseTempInfo(info) {
|
let prodInfList = info.prodInfList || [];
|
prodInfList = prodInfList.map(item => {
|
let contractList = item.contractList || [],
|
issueList = item.issueList || [];
|
contractList.forEach(el => {
|
el.status = !!el.status;
|
})
|
issueList.forEach(el => {
|
el.status = !!el.status;
|
})
|
item.status = !!item.status;
|
return {
|
...item,
|
contractList,
|
issueList
|
}
|
})
|
|
this.chanArr = info.chanIds
|
this.areaArr = info.provCodes
|
this.info.prodInfList = prodInfList
|
this.info.tempName = info.tempName
|
this.activeVal = info.tempType || 1
|
this.modClassIndex = info.tempType//规则选择第一步默认根据返回来确定
|
this.info.id = info.id || ''
|
|
// 访问详情接口时根据规则装载已选项
|
if(info.tempType == 2){
|
info.provCodes.forEach(e=>{
|
if (e.selected == 1){
|
this.info.tempRules.push(e)
|
this.detArr.push(e)
|
}
|
})
|
}
|
if(info.tempType == 3){
|
info.chanIds.forEach(e=>{
|
if (e.selected == 1){
|
this.info.tempRules.push(e)
|
this.detArr.push(e)
|
}
|
})
|
}
|
|
|
// let tempRules = info.tempRules;
|
// let index = this.areaArr.findIndex(item => {
|
// return item.value == tempRules
|
// })
|
// if (index > -1) {
|
// this.areaIndex = index;
|
// this.areaClassIndex = index;
|
// }
|
|
// this.info = {
|
// ...info,
|
// prodInfList
|
// }
|
},
|
// 获取模板详情
|
getTempDetail() {
|
this.$api.getTempDetail(this.tempId).then((res) => {
|
this.parseTempInfo(res.body)
|
}).catch((err) => {
|
|
});
|
},
|
//父开关关闭时 同时关闭所有子开关
|
changeChildStatus(item) {
|
if (!item.status) {
|
item.contractList.forEach(el => {
|
el.status = false;
|
})
|
|
item.issueList.forEach(el => {
|
el.status = false;
|
})
|
}
|
},
|
//设置子开关的状态
|
setChildStatus(parentStatus, item, val) {
|
// 商户进入页面 有模板时只能查看不能点击更改模板的状态
|
if (this.merId && this.tempIndex !== 0) {
|
return
|
}
|
if (!parentStatus) {
|
return
|
}
|
item.status = val;
|
},
|
// 获取初始化数据并重组数据
|
initTemp() {
|
this.$api.getTempInit().then(res => {
|
this.parseTempInfo(res.body)
|
return
|
});
|
},
|
//保存模版
|
saveTemp() {
|
if (!this.info.tempName) {
|
this.$notify(`请输入模板名称`)
|
return
|
}
|
if(this.info.tempRules.length == 0 && this.activeVal != 1){
|
this.$notify(`请选择对应模板规则`)
|
return
|
}
|
// if(this.info.provName=='无匹配规则'){
|
// this.info.provName = '无匹配规则'
|
// this.info.tempRules = '999999'
|
// }
|
// 深拷贝改数据，避免重组数据时ui被更新
|
let prodInfList = JSON.parse(JSON.stringify(this.info.prodInfList))
|
|
//验证被打开的花呗费率是否输入并且在规定范围内
|
for (let index = 0; index < prodInfList.length; index++) {
|
const el = prodInfList[index];
|
if (el.prodId == 30000003) {
|
let issueList = el.issueList;
|
for (let k = 0; k < issueList.length; k++) {
|
const issItem = issueList[k];
|
if ((issItem.fee == null || issItem.fee == '') && issItem.status) {
|
this.$notify(`请输入花呗${issItem.term}期费率！`)
|
return
|
}
|
if (issItem.fee && issItem.fee < issItem.feeMin || issItem.fee > issItem.feeMax) {
|
this.$notify(`请按要求范围输入花呗${issItem.term}期费率！`)
|
return
|
}
|
}
|
}
|
if (el.prodId == 30000010) {
|
let issueList = el.issueList;
|
for (let k = 0; k < issueList.length; k++) {
|
const issItem = issueList[k];
|
if ((issItem.fee == null || issItem.fee == '') && issItem.status) {
|
this.$notify(`请输入商户贴息${issItem.term}期费率！`)
|
return
|
}
|
if (issItem.fee && issItem.fee < issItem.feeMin || issItem.fee > issItem.feeMax) {
|
this.$notify(`请按要求范围输入商户贴息${issItem.term}期费率！`)
|
return
|
}
|
}
|
}
|
}
|
//验证被打开的花呗费率是否输入并且在规定范围内
|
for (let index = 0; index < prodInfList.length; index++) {
|
const el = prodInfList[index];
|
if (el.prodId == 30000014) {
|
let issueList = el.issueList;
|
for (let k = 0; k < issueList.length; k++) {
|
const issItem = issueList[k];
|
if ((issItem.fee ===null || issItem.fee === '') && issItem.status) {
|
this.$notify(`请输入花呗间联${issItem.term}期费率！`)
|
return
|
}
|
if ((issItem.amt === null || issItem.amt === '') && issItem.status) {
|
console.log('000')
|
this.$notify(`请输入花呗间联${issItem.term}期商户固定收益！`)
|
return
|
}
|
if (issItem.fee && issItem.fee < issItem.feeMin || issItem.fee > issItem.feeMax) {
|
this.$notify(`请按要求范围输入花呗间联${issItem.term}期费率！`)
|
return
|
}
|
if (issItem.amt && issItem.amt < issItem.amtMin || issItem.amt > issItem.amtMax) {
|
this.$notify(`请按要求范围输入花呗间联${issItem.term}期商户固定收益！`)
|
return
|
}
|
}
|
}
|
}
|
// return
|
|
//重组状态 boolean转换成number
|
prodInfList = prodInfList.map(item => {
|
let contractList = item.contractList || [],
|
issueList = item.issueList || [];
|
contractList = contractList.map(el => {
|
return {
|
...el,
|
status: +el.status
|
}
|
})
|
issueList = issueList.map(el => {
|
return {
|
...el,
|
status: +el.status
|
}
|
})
|
item.status = +item.status;
|
return {
|
...item,
|
contractList,
|
issueList
|
}
|
})
|
let params = {
|
...this.info,
|
prodInfList
|
}
|
if (this.merId) {
|
this.saveMerTemp(params)
|
return
|
}
|
|
if(this.tempId){
|
this.$api.tempManagerUpdate(params).then((res)=>{
|
this.$notify('保存成功！')
|
this.$router.back()
|
})
|
}else{
|
this.$api.tempSave(params).then((res) => {
|
this.$notify('保存成功！')
|
this.$router.back()
|
}).catch((err) => {
|
|
});
|
}
|
|
},
|
// 保存商户模板信息
|
saveMerTemp(params) {
|
this.$api.tempSaveMerTemp({
|
...params,
|
merId:this.merId
|
}).then((res) => {
|
this.$notify('保存成功！')
|
this.$router.back()
|
}).catch((err) => {
|
|
});
|
},
|
//查看合约详情
|
lookDetails(item) {
|
this.showDialogStyle = true;
|
this.contractItem = item;
|
},
|
//设置商户匹配规则
|
setInfoRules(i) {
|
this.isShowModal = false;
|
if(this.activeVal == 1){
|
this.isShowModalChan = false
|
this.isShowModalPr = false
|
}
|
if(this.activeVal == 2){
|
this.areaIndex = this.areaClassIndex;
|
if(this.areaArr.length > 0){
|
this.isShowModalChan = false
|
this.isShowModalPr = true
|
}else{
|
this.isShowModalPr = false
|
this.$notify('暂无此类型规则')
|
return
|
}
|
//this.info.tempRules = this.currentRules.value;
|
//this.info.provName = this.currentRules.name;
|
if(i==2){
|
this.isShowModalPr = false
|
}
|
}
|
if(this.activeVal == 3){
|
if(this.chanArr.length > 0){
|
this.isShowModalChan = true
|
this.isShowModalPr = false
|
}else{
|
this.isShowModalChan = false
|
this.$notify('暂无此类型规则')
|
return
|
}
|
if(i==3){
|
this.isShowModalChan = false
|
}
|
}
|
|
|
},
|
//获取模板的数据，修改模板id
|
setTempId() {
|
this.tempIndex = this.tempClassIndex;
|
if (this.tempIndex === 0) {
|
this.info.id = 999999;
|
this.isShowTempList = false;
|
return
|
}
|
let id = this.tempList[this.tempIndex].id;
|
this.$api.getTempMerRef({
|
merId: this.merId,
|
tempId: id
|
}).then((res) => {
|
this.info.id = id;
|
this.isShowTempList = false;
|
this.parseTempInfo(res.body)
|
}).catch((err) => {
|
|
});
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.template-detail-box {
|
position: relative;
|
background-color: @c-bg-f5;
|
padding-bottom: 100px;
|
|
.bg-gray {
|
background-color: #FAFAFA !important;
|
}
|
|
.bg-fff {
|
background-color: #ffffff;
|
}
|
}
|
|
|
|
|
|
|
.header {
|
height: 44px;
|
padding: 0 20px 30px 20px;
|
line-height: 24px;
|
font-weight: bold;
|
color: @c-text-fff;
|
background-color: @c-bg-black;
|
background-image: url('../../../static/img/circle-top.png'), url('../../../static/img/circle-bottom.png');
|
background-position: 0 0, 100% 100%;
|
background-size: 78px 65px, 54px 41px;
|
background-repeat: no-repeat;
|
text-align: center;
|
font-size: @font-16;
|
|
.icon {
|
z-index: @zIndex-20;
|
}
|
|
.title {
|
font-size: @font-16;
|
position: absolute;
|
left: 60px;
|
right: 60px;
|
}
|
}
|
|
.temp-name {
|
position: absolute;
|
top: 54px;
|
// width: 360px;
|
left: 8px;
|
right: 8px;
|
height: 50px;
|
box-shadow: 0px 4px 8px 0px rgba(66, 61, 93, 0.05);
|
border-radius: 3px;
|
}
|
|
.product-box {
|
margin-top: 48px;
|
padding: 0 8px;
|
position: relative;
|
.det-btn{
|
width: 80px;
|
height: 20px;
|
border: 1px solid #896EDB;
|
outline: none;
|
background-color: #fff;
|
color: #896EDB;
|
position: absolute;
|
top: 15px;
|
left: 120px;
|
font-size: 12px;
|
}
|
.btn-d{
|
padding: 2px 5px;
|
width: 50px;
|
height: 15px;
|
line-height: 15px;
|
text-align: center;
|
background: rgba(247, 245, 255, 1);
|
border: 1Px solid @c-text-default;
|
border-radius: 3px;
|
color: @c-text-default;
|
font-size: @font-10;
|
position: absolute;
|
top: 15px;
|
left: 120px;
|
font-size: 12px;
|
}
|
.p-title {
|
.lh(50px);
|
padding: 0 12px;
|
font-size: @font-16;
|
}
|
}
|
|
.circle {
|
border: 1px solid @c-bg-default;
|
height: 16px;
|
width: 16px;
|
border-radius: 50%;
|
margin-right: .2em;
|
}
|
|
.input-box {
|
margin-left: 25px;
|
.item-hbjl-box{
|
.flex(space-between);
|
height: 88px;
|
padding-right: 13px;
|
border-bottom:1px solid #DDDDDD;
|
}
|
.item-hbjl-box:last-child{
|
border-bottom:0;
|
}
|
.item {
|
.flex(space-between);
|
height: 44px;
|
padding-right: 13px;
|
border-bottom:1px solid #DDDDDD;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
input[type='number'] {
|
width: 240px;
|
border: none;
|
outline: none;
|
background-color: #fff;
|
font-size: 12px;
|
}
|
|
.left {
|
.flex;
|
flex: 1;
|
}
|
|
.label {
|
font-size: 14px;
|
margin-right: 5px;
|
min-width: 40px;
|
}
|
|
}
|
.item-hbjl {
|
.flex(space-between);
|
height: 44px;
|
padding-right: 13px;
|
border-bottom:1px solid #DDDDDD;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
input[type='number'] {
|
width: 240px;
|
border: none;
|
outline: none;
|
background-color: #fff;
|
font-size: 12px;
|
}
|
|
.left {
|
.flex;
|
flex: 1;
|
}
|
|
.label {
|
font-size: 14px;
|
margin-right: 5px;
|
min-width: 40px;
|
}
|
|
}
|
}
|
|
.hb-box {
|
margin-left: 12px;
|
|
.item {
|
height: 75px;
|
padding-right: 13px;
|
border-bottom: 1px solid #DDDDDD;
|
.flex(space-between);
|
|
|
&:last-child {
|
border-bottom: none;
|
}
|
}
|
|
.left {
|
.flex(flex-start, flex-start, '', column);
|
flex: 1;
|
|
.label {
|
font-size: 14px;
|
}
|
}
|
|
.info {
|
.flex;
|
margin-top: 5px;
|
font-size: 12Px;
|
|
p {
|
margin-right: 15px;
|
color: #999999;
|
}
|
|
.btn {
|
padding: 2px 5px;
|
width: 50px;
|
height: 15px;
|
line-height: 15px;
|
text-align: center;
|
background: rgba(247, 245, 255, 1);
|
border: 1Px solid @c-text-default;
|
border-radius: 3px;
|
color: @c-text-default;
|
font-size: @font-10;
|
}
|
}
|
}
|
|
.dialog-box {
|
.head {
|
.flex(center);
|
height: 135px;
|
background-color: @c-black;
|
.gofront{
|
display: inline-block;
|
position: absolute;
|
right: 355px;
|
top: 10px;
|
}
|
.close {
|
position: absolute;
|
right: 5px;
|
top: 5px;
|
}
|
}
|
.det-box{
|
//width: 200px;
|
//min-height: 200px;
|
box-sizing: border-box;
|
padding: 10px;
|
font-size: 16px;
|
|
.det-span{
|
margin-right: 10px;
|
}
|
}
|
.dialog-content {
|
background-color: #fff;
|
width: 300px;
|
height: 145px;
|
margin: 0 auto;
|
padding: 10px 15px;
|
box-sizing: border-box;
|
|
.title {
|
.lh(50px);
|
}
|
|
.message-box {
|
.flex(space-between);
|
flex-wrap: wrap;
|
color: @c-text-999;
|
text-align: left;
|
}
|
|
.message-item {
|
width: 50%;
|
margin-bottom: 10px;
|
}
|
}
|
}
|
|
.modal-box {
|
overflow-y: scroll;
|
padding-bottom: 54px;
|
font-size: 16px;
|
height: 400px;
|
|
.title {
|
position: relative;
|
.lh(50px);
|
text-align: center;
|
font-weight: normal;
|
color: @c-text-999;
|
border-bottom: 1px solid @c-bg-eee;
|
|
.close {
|
position: absolute;
|
right: 3px;
|
top: 3px;
|
}
|
}
|
}
|
|
.my-cell {
|
.flex(space-between);
|
height: 50px;
|
padding: 0 20px;
|
|
&.active {
|
background-color: #FAFAFA;
|
}
|
}
|
|
.btn-submit {
|
position: fixed;
|
bottom: 0;
|
.lh(50px);
|
width: 100%;
|
border: none;
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
font-size: @font-16;
|
|
&.save {
|
position: fixed;
|
width: 320px;
|
left: 28px;
|
right: 28px;
|
bottom: 25px;
|
margin-top: 25px;
|
z-index: 1000;
|
border-radius: 50px;
|
}
|
}
|
</style>
|
