<!--
|
* @Author: 小明丶
|
* @Date: 2020-04-03 14:58:33
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-29 13:54:19
|
* @Description: 选择通道
|
-->
|
<template>
|
<div class="tdxz-div">
|
<van-nav-bar title="选择通道" left-text="返回" left-arrow @click-left="onClickLeft" fixed style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<div class="proudct-box">
|
<div class="list-box" v-for="(e,i) in list" :key="i" @click="goNext(e)"> <!-- v-show="e.zfbVersion !== 1 && e.zfbVersion !== 4" -->
|
<img :src="e.icon" alt="">
|
<p>{{e.typeName}}</p>
|
<div class="tip-box" :style="e.openStatus==0?{background:'#F2F2F2'}:e.openStatus==1?{background:'#FFF5D9'}:e.openStatus==2?{background:'#E3FAEF'}:e.openStatus==3?{background:'#FCF0F0'}:''">
|
<p v-if="e.openStatus==2" style="color:#19BE6B;">已开通</p>
|
<p v-if="e.openStatus==1" style="color:#FFC421;">开通中</p>
|
<p v-if="e.openStatus==3" style="color:#FF6666;">未通过</p>
|
<p v-if="e.openStatus==0" style="color:#999999;">未开通</p>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Vue from 'vue';
|
import { NavBar } from 'vant';
|
import { mapState } from 'vuex';
|
Vue.use(NavBar);
|
export default {
|
data() {
|
return {
|
noOpenText: '门店暂未开通此通道', //产品未开通文本内容
|
noOpenShow: false, //产品未开通弹窗控制
|
list:[],//通道列表
|
showId: '',
|
path: ''
|
}
|
},
|
created(){
|
|
let typeId = this.$route.query.typeId
|
this.$api.prodZfbVersion({
|
prodId:this.$route.query.prodId*1
|
}).then(res=>{
|
console.log(sessionStorage.isddxt)
|
// this.list = res.body
|
this.list = res.body.filter((item, index) => {
|
if(sessionStorage.isddxt == 1){
|
return item.zfbVersion == 6 || item.zfbVersion == 7
|
}
|
else{
|
return item.zfbVersion != 6 && item.zfbVersion != 7
|
}
|
})
|
})
|
},
|
computed:{
|
...mapState(['userinfo']),
|
isddxt(){
|
if(sessionStorage.isddxt == 1){
|
return true
|
}else{
|
return false
|
}
|
}
|
},
|
methods:{
|
// 返回上一页
|
onClickLeft() {
|
this.$router.push('/main/productManagement');
|
},
|
// 跳转
|
goNext(item){
|
var typeId, openStatus, zfbVersion, prodId, icon, title, query
|
typeId = this.$route.query.typeId
|
openStatus = item.openStatus
|
prodId = this.$route.query.prodId
|
icon = this.$route.query.icon
|
zfbVersion = item.zfbVersion
|
if(typeId =='200010'){
|
title = '商户贴息'
|
if(item.zfbVersion==5){
|
title = '开通通联通道'
|
switch(openStatus){
|
case 0:
|
this.path = '/tonglian/startOpen'
|
break;
|
case 1:
|
case 3:
|
this.path = '/tonglian/open-result';
|
break;
|
case 2:
|
this.path = '/tonglian/staging';
|
break;
|
default:
|
this.path = '/tonglian/startOpen';
|
break;
|
}
|
}else{
|
switch(openStatus){
|
case 0:
|
this.path = '/huabei/open';
|
break;
|
case 1:
|
case 3:
|
this.path = '/huabei/open-result';
|
break;
|
case 2:
|
this.path = '/shtx/staging';
|
break;
|
default:
|
this.path = '/huabei/open';
|
break;
|
}
|
}
|
}
|
if (typeId == '200002' || typeId == '200008' || typeId=='200009') {
|
if(item.zfbVersion==5){
|
title = '开通通联通道'
|
switch (openStatus) {
|
case 0:
|
this.path = '/tonglian/startOpen';
|
break;
|
case 1:
|
case 3:
|
this.path = '/tonglian/open-result';
|
break;
|
case 2:
|
this.path = '/tonglian/staging';
|
break;
|
default:
|
this.path = '/tonglian/startOpen';
|
break;
|
}
|
}else{
|
switch (openStatus) {
|
case 0:
|
this.path = '/huabei/open';
|
break;
|
case 1:
|
case 3:
|
this.path = '/huabei/open-result';
|
break;
|
case 2:
|
if(typeId=='200008'){
|
this.path = '/huabei/staging_dmf';
|
// this.path = '/huabei/staging';
|
}else{
|
this.path = '/huabei/staging';
|
}
|
break;
|
default:
|
this.path = '/huabei/open';
|
break;
|
}
|
}
|
|
if(typeId=='200002'&&item.zfbVersion!=5){
|
title = '用户付息';
|
}else if(typeId=='200008'){
|
title = '商户收款';
|
}else {
|
title = '商品消费';
|
}
|
}
|
if (typeId == '200011') {
|
switch (openStatus) {
|
case 0:
|
this.path = '/huabei/open';
|
break;
|
case 1:
|
case 3:
|
this.path = '/huabei/open-result';
|
break;
|
case 2:
|
this.path = '/huabei/staging';
|
break;
|
default:
|
this.path = '/huabei/open';
|
break;
|
}
|
title = '信用购-花呗分期';
|
}
|
query = {
|
typeId,
|
openStatus,
|
zfbVersion,
|
prodId,
|
title,
|
}
|
this.$router.push({
|
path: this.path,
|
query
|
});
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.tdxz-div{
|
min-height: 100vh;
|
background: #F5F5F7;
|
padding-top: 56px;
|
.proudct-box{
|
width: 359px;
|
margin: auto;
|
box-sizing: border-box;
|
padding:16px 0;
|
// display: flex;
|
// justify-items: space-between;
|
background: #fff;
|
.list-box{
|
display: inline-block;
|
position: relative;
|
width: 115px;
|
height: 90px;
|
box-shadow:0px 0px 15px 0px rgba(66,61,93,0.08);
|
border-radius:8px;
|
margin: 16px 31px 16px 31px;
|
text-align: center;
|
box-sizing: border-box;
|
padding: 14px 0 18px 0;
|
img{
|
width: 42px;
|
height: 42px;
|
}
|
p{
|
font-size: 13px;
|
color: #333;
|
}
|
.tip-box{
|
position: absolute;
|
width:45px;
|
height:16px;
|
line-height: 16px;
|
border-radius:8px 0px 0px 8px;
|
top: 7px;
|
right: 0;
|
p{
|
font-size: 10px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
