<!--
|
* @Author: 小明丶
|
* @Date: 2020-11-23 16:35:48
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-07 14:14:49
|
* @Description: 支付方式选择页面
|
-->
|
<template>
|
<div class="choose-payment-method-page">
|
<van-nav-bar title="付款方式" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
</van-nav-bar>
|
<div class="content">
|
<div class="cp-box" @click="goNext(item)" v-for="(item,index) in list" :key="index">
|
<img :src="item.icon" alt="">
|
<p>{{item.typeName}}</p>
|
<p v-if="item.openStatus == 2 && item.payMethod != 1" style="color: #19be6b; margin-top: 4px">
|
已开通
|
</p>
|
<p v-if="item.openStatus == 1 && item.payMethod != 1" style="color: #ed4014; margin-top: 4px">
|
开通中
|
</p>
|
<p v-if="item.openStatus == 3 && item.payMethod != 1" style="color: #ed4014; margin-top: 4px">
|
未通过
|
</p>
|
<p v-if="item.openStatus == 0 && item.payMethod != 1" 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>
|
export default {
|
data() {
|
return {
|
noOpenText: '门店暂未开通此方式', //产品未开通文本内容
|
noOpenShow: false, //产品未开通弹窗控制
|
list:[]
|
}
|
},
|
mounted(){
|
this.init()
|
},
|
methods:{
|
init(){
|
this.$api.shskTypeList().then(res=>{
|
this.list = res.body
|
})
|
},
|
onClickLeft(){
|
this.$router.go(-1)
|
},
|
goNext(item){
|
if(item.payMethod===1){
|
this.$router.push({
|
path:'/channel-selection',
|
query:{
|
...this.$route.query,
|
payMethod:item.payMethod,
|
zfbVersion:item.zfbVersion
|
}
|
})
|
}else{
|
if(item.openStatus !== 2){
|
this.noOpenShow = true
|
}else{
|
this.$router.push({
|
path:'/store-shsk',
|
query:{
|
...this.$route.query,
|
payMethod:item.payMethod,
|
zfbVersion:item.zfbVersion
|
}
|
})
|
}
|
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.choose-payment-method-page{
|
&{
|
background-color: #F5F5F7;
|
min-height: 100vh;
|
}
|
.content{
|
width: 359px;
|
margin: auto;
|
box-sizing: border-box;
|
padding:32px;
|
background: #fff;
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.cp-box{
|
width: 115px;
|
height: 100px;
|
background: #FFFFFF;
|
box-shadow: 0px 0px 15px 0px rgba(66, 61, 93, 0.08);
|
border-radius: 8px;
|
text-align: center;
|
align-content: center;
|
margin-bottom: 28px;
|
padding: 14px;
|
box-sizing: border-box;
|
img{
|
width: 42px;
|
height: 42px;
|
}
|
}
|
}
|
.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>
|
