<template>
|
<div class="hbcp-page">
|
<v-navbar title="花呗分期"></v-navbar>
|
<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>
|
</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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
list: [],
|
list2:[],
|
};
|
},
|
created() {
|
JSON.parse(localStorage.hbcp).forEach(e=>{
|
if(e.lineType==1){
|
this.list.push(e)
|
}else{
|
this.list2.push(e)
|
}
|
})
|
|
},
|
methods: {
|
go(item) {
|
console.log(item)
|
// return
|
var path = "",
|
text = "";
|
item.typeId = Number(item.typeId);
|
if (item.isHbProd == 1) {
|
path = "/channel-selection";
|
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,
|
text: text
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hbcp-page {
|
& {
|
min-height: 100vh;
|
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 13px;
|
& > p {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
& > .cp-box {
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
.box {
|
text-align: center;
|
width: 115px;
|
height: 90px;
|
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;
|
}
|
img {
|
width: 46px;
|
height: 46px;
|
}
|
}
|
& > .cp-box-2 {
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
.box {
|
text-align: center;
|
width: 115px;
|
height: 90px;
|
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;
|
}
|
img {
|
width: 46px;
|
height: 46px;
|
}
|
}
|
}
|
}
|
</style>
|
