<!--
|
* @Author: 小明丶
|
* @Date: 2020-04-03 14:58:33
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-04 16:56:16
|
* @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 v-for="(e, i) in list" :key="i" @click="goNext(e)">
|
<img :src="e.icon" alt="" />
|
<p>{{ e.typeName }}</p>
|
<p v-if="e.openStatus == 2" style="color: #19be6b; margin-top: 4px">
|
已开通
|
</p>
|
<p v-if="e.openStatus == 1" style="color: #ed4014; margin-top: 4px">
|
开通中
|
</p>
|
<p v-if="e.openStatus == 3" style="color: #ed4014; margin-top: 4px">
|
未通过
|
</p>
|
<p v-if="e.openStatus == 0" style="color: #b3b3b3; margin-top: 4px">
|
未开通
|
</p>
|
</div>
|
</div>
|
<van-popup v-model="noOpenShow" class="no-open">
|
<div class="no-open-img">
|
<img src="../../../assets/imgs/openpic.png" alt="" />
|
</div>
|
<p>{{ noOpenText }}</p>
|
<van-button
|
:color="$store.state.backColor"
|
type="default"
|
class="no-open-btn"
|
@click="noOpenShow = false"
|
round
|
>确定</van-button
|
>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { NavBar } from "vant";
|
|
Vue.use(NavBar);
|
export default {
|
data() {
|
return {
|
noOpenText: "门店暂未开通此通道", //产品未开通文本内容
|
noOpenShow: false, //产品未开通弹窗控制
|
list: [], //通道列表
|
showId: "",
|
};
|
},
|
computed: {
|
isddxt() {
|
if (sessionStorage.isddxt == 1) {
|
return true;
|
} else {
|
return false;
|
}
|
},
|
},
|
created() {
|
let typeId = this.$route.query.typeId;
|
this.$api
|
.prodZfbVersion({
|
prodId: this.$route.query.prodId * 1,
|
})
|
.then((res) => {
|
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;
|
}
|
});
|
});
|
},
|
methods: {
|
// 返回上一页
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
// 跳转
|
goNext(item) {
|
console.log(item);
|
var id = this.$route.query.typeId,
|
path = "",
|
obj = {};
|
if (item.openStatus == 2) {
|
switch (Number(id)) {
|
case 200008:
|
path = "/store-shsk";
|
obj.payMethod = this.$route.query.payMethod;
|
break;
|
case 200002:
|
path = "/hb-credit-installment";
|
break;
|
case 200009:
|
path = "/hbhy-installment";
|
break;
|
case 200010:
|
path = "/shtx";
|
break;
|
case 200011:
|
path = "/xyg/list";
|
break;
|
}
|
} else {
|
this.noOpenShow = true;
|
return;
|
}
|
this.$router.push({
|
path: path,
|
query: {
|
...obj,
|
typeId: this.$route.query.typeId,
|
prodId: this.$route.query.prodId,
|
zfbVersion: item.zfbVersion,
|
},
|
});
|
},
|
},
|
};
|
</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;
|
div {
|
display: inline-block;
|
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;
|
}
|
}
|
}
|
.no-open {
|
width: 280px;
|
height: 190px;
|
text-align: center;
|
border-radius: 6px;
|
&-img {
|
width: 100%;
|
margin-top: 13px;
|
img {
|
width: 75px;
|
height: 75px;
|
}
|
}
|
p {
|
font-size: 14px;
|
color: #666666;
|
margin-top: 7px;
|
}
|
&-btn {
|
height: 36px;
|
width: 60%;
|
margin: 0 20%;
|
background: #896edb;
|
color: #fff;
|
margin-top: 28px;
|
line-height: 36px;
|
}
|
}
|
}
|
</style>
|
