<template>
|
<div class="hbcp-page">
|
<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="list-box">
|
<p v-if="list.length > 0">请选择产品</p>
|
<div class="cp-box">
|
<div style="margin-top:16px" v-for="(item,i) in list" :key="i" >
|
<div class="box" @click="go(item)">
|
<img :src="item.icon" alt />
|
<p>{{item.typeName}}</p>
|
<!-- <p v-if="item.openStatus==2" class="open">已开通</p>
|
<p v-if="item.openStatus==1" class="notOpen">开通中</p>
|
<p v-if="item.openStatus==3" style="color:#ED4014;margin-top: 8px;">未通过</p>
|
<p v-if="item.openStatus==0" style="color:#B3B3B3;margin-top: 8px;">未开通</p> -->
|
</div>
|
</div>
|
</div>
|
<p style="margin-top:40px" v-if="list2.length > 0">请选择消费场景</p>
|
<div class="cp-box-2">
|
<div style="margin-top:16px" v-for="(item,i) in list2" :key="i">
|
<div class="box" @click="go(item)">
|
<img :src="item.icon" alt />
|
<p>{{item.typeName}}</p>
|
<!-- <p v-if="item.openStatus==2 && item.typeId == 200011" class="open">已开通</p>
|
<p v-if="item.openStatus==1 && item.typeId == 200011" class="notOpen">开通中</p>
|
<p v-if="item.openStatus==3 && item.typeId == 200011" style="color:#ED4014;margin-top: 8px;">未通过</p>
|
<p v-if="item.openStatus==0 && item.typeId == 200011" style="color:#B3B3B3;margin-top: 8px;">未开通</p> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
list: [],
|
list2:[],
|
};
|
},
|
created() {
|
let list = JSON.parse(localStorage.getItem('hbcp_sh'))
|
list.forEach(e=>{
|
if(e.lineType==1){
|
this.list.push(e)
|
}else{
|
if(e.prodId != 30000008){
|
this.list2.push(e)
|
}
|
}
|
})
|
|
},
|
methods: {
|
onClickLeft(){
|
this.$router.push('/main/productManagement');
|
},
|
go(item) {
|
console.log(item)
|
// return
|
var path = "",
|
text = "";
|
item.typeId = Number(item.typeId);
|
if (item.isHbProd == 1) {
|
path = "/channel-selection_sh";
|
switch (item.typeId) {
|
case 200002:
|
text = "用户付息通道";
|
break;
|
case 200009:
|
text = "商品消费通道";
|
break;
|
case 200010:
|
text = "商户贴息通道";
|
break;
|
case 200011:
|
text = "运营商消费通道";
|
break;
|
}
|
} else {
|
// switch (item.typeId) {
|
// case 200011:
|
// path = "/xyg/list";
|
// break;
|
// }
|
}
|
this.$router.push({
|
path,
|
query: {
|
typeId: item.typeId,
|
prodId: item.prodId,
|
openStatus: item.openStatus
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hbcp-page {
|
& {
|
min-height: 100vh;
|
padding-top: 56px;
|
background: #f5f5f7;
|
}
|
.list-box {
|
width: 94%;
|
min-height: 335px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 3px;
|
margin-top: 10px;
|
margin-left: 3%;
|
box-sizing: border-box;
|
padding: 24px 23px;
|
& > p {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
& > .cp-box {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.box {
|
text-align: center;
|
width: 140px;
|
height: 100px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 15px 0px rgba(66, 61, 93, 0.08);
|
border-radius: 8px;
|
padding-top: 15px;
|
box-sizing: border-box;
|
.open{
|
color:#19BE6B;
|
margin-top: 8px;
|
}
|
.notOpen{
|
color:#ED4014;
|
margin-top: 8px;
|
}
|
}
|
img {
|
width: 46px;
|
height: 46px;
|
}
|
}
|
& > .cp-box-2 {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.box {
|
text-align: center;
|
width: 140px;
|
height: 100px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 15px 0px rgba(66, 61, 93, 0.08);
|
border-radius: 8px;
|
padding-top: 15px;
|
box-sizing: border-box;
|
.open{
|
color:#19BE6B;
|
margin-top: 8px;
|
}
|
.notOpen{
|
color:#ED4014;
|
margin-top: 8px;
|
}
|
}
|
img {
|
width: 46px;
|
height: 46px;
|
}
|
}
|
}
|
}
|
</style>
|
