<!--
|
* @Author: 小明丶
|
* @Date: 2020-12-29 11:35:46
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2021-01-05 17:49:40
|
* @Description:
|
-->
|
<template>
|
<div class="chose-mer">
|
<van-nav-bar
|
left-arrow
|
left-text="返回"
|
@click-left="onClickLeft"
|
>
|
<div slot="title">
|
<h4>选择通道</h4>
|
</div>
|
</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 !== 5"> <!-- 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>
|
export default {
|
data() {
|
return {
|
list:[],
|
}
|
},
|
computed:{
|
prodId(){
|
return Number(this.$route.query.prodId)
|
}
|
},
|
mounted(){
|
this.$api.prodZfbVersion({prodId:this.prodId}).then(res=>{
|
this.list = res.body
|
})
|
},
|
methods:{
|
onClickLeft(){
|
this.$router.go(-1)
|
},
|
goNext(e){
|
let path,obj={};
|
obj.title = e.typeName;
|
obj.zfbVersion = e.zfbVersion;
|
obj.isApp = 1;
|
if(e.zfbVersion == 5){
|
switch(e.openStatus){
|
case 0:
|
path='/tonglian/startOpen';
|
break;
|
case 1:
|
path="/tonglian/open-result";
|
break;
|
case 2:
|
this.$route.query.prodId == 30000003?path="/app/zfbVersionDetail":path="/app/shskVersionDetail";
|
break;
|
}
|
}else{
|
switch(e.openStatus){
|
case 0:
|
path='/huabei/open';
|
break;
|
case 1:
|
path="/huabei/open-result";
|
break;
|
case 2:
|
this.$route.query.prodId == 30000003?path="/app/zfbVersionDetail":path="/app/shskVersionDetail";
|
break;
|
}
|
}
|
|
|
this.$router.push({
|
path:path,
|
query:{
|
...obj,
|
...this.$route.query
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.chose-mer{
|
&{
|
min-height: 100vh;
|
background: #fafafa;
|
}
|
.proudct-box{
|
width: 359px;
|
margin: auto;
|
margin-top: 10px;
|
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>
|
