<!--
|
* @Author: 小明丶
|
* @Date: 2019-10-18 16:12:03
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-16 16:50:51
|
* @Description:
|
-->
|
<template>
|
<div class="hbhy-box">
|
<!-- <van-nav-bar title="办理套餐" left-arrow @click-left="onClickLeft" fixed /> -->
|
<!-- <x-header title="办理套餐" :left-options="{backText:''}"></x-header> -->
|
<v-navbar title="办理套餐" fixed>
|
|
</v-navbar>
|
<div class="mine-box">
|
<div class="left-box" ref="boxLeft" >
|
<!-- <div class="top-tit">
|
<p>常用套餐</p>
|
</div>-->
|
<div
|
class="list-tit"
|
v-for="(item,i) in myList"
|
:key="i"
|
@click="check(item,i)"
|
:class="item.baColor"
|
>
|
<div class="text-box" :class="item.checkColor" :style="{'border-left':`4px solid ${$store.state.backColor}`}">
|
<p v-if="i==0" style="line-height:30px;" :style="{color:$store.state.backColor}">常用套餐</p>
|
<p v-if="i!=0" :style="{color:$store.state.backColor}">{{item.categoryName}}</p>
|
</div>
|
</div>
|
</div>
|
<div class="right-box" ref="boxRight">
|
<div class="right-top" v-if="myContent[0].tit==2">
|
<p>{{this.myContent[0].categoryName}}</p>
|
</div>
|
<div class="right-top" v-if="myContent[0].tit==1">
|
<p>常用套餐</p>
|
</div>
|
<div v-for="(v,i) in myContent" :key="i" style="margin-top:20px;width:94%;margin-left:3%" v-if="v.tit==1">
|
<p>{{v.categoryName}}</p>
|
<div
|
class="right-text-box"
|
v-for="(ele,index) in v.contracts"
|
:key="index"
|
@click="goNext(ele,index)"
|
>
|
<div class="yuan" style="width:5%"></div>
|
<div class="taocan">
|
<p>
|
<span class="one">{{ele.packagePrices}}</span>
|
<span class="two">元套餐</span>
|
</p>
|
</div>
|
<div class="bus">
|
<p style="font-size:14px">{{ele.capitalAmt}}</p>
|
<p style="margin-top:5px;color:#999999">商户到账</p>
|
</div>
|
<div class="huankuan" style="margin-right:5px;margin-left:5px;">
|
<p style="font-size:14px">{{ele.monthlyPayments}}</p>
|
<p style="margin-top:5px;color:#999999">每月还款</p>
|
</div>
|
<div class="zong">
|
<p style="font-size:14px">{{ele.insAmt}}</p>
|
<p style="margin-top:5px;color:#999999">总还款额</p>
|
</div>
|
<div class="yuan" style="width:5%"></div>
|
</div>
|
</div>
|
|
<div v-for="(ele,i) in myContent" :key="i" style="margin-top:20px;width:94%;margin-left:3%" v-if="ele.tit==2">
|
<div
|
class="right-text-box"
|
:key="index"
|
@click="goNext(ele,index)"
|
>
|
<div class="yuan" style="width:5%"></div>
|
<div class="taocan">
|
<p>
|
<span class="one">{{ele.packagePrices}}</span>
|
<span class="two">元套餐</span>
|
</p>
|
</div>
|
<div class="bus">
|
<p style="font-size:14px">{{ele.capitalAmt}}</p>
|
<p style="margin-top:5px;color:#999999">商户到账</p>
|
</div>
|
<div class="huankuan" style="margin-right:5px;margin-left:5px;">
|
<p style="font-size:14px">{{ele.monthlyPayments}}</p>
|
<p style="margin-top:5px;color:#999999">每月还款</p>
|
</div>
|
<div class="zong">
|
<p style="font-size:14px">{{ele.insAmt}}</p>
|
<p style="margin-top:5px;color:#999999">总还款额</p>
|
</div>
|
<div class="yuan" style="width:5%"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { NavBar } from "vant";
|
|
Vue.use(NavBar);
|
export default {
|
data() {
|
return {
|
myList: [
|
{
|
tit: "常用套餐",
|
checkColor: { checkColor: true },
|
baColor: { baColor: true }
|
}
|
], //左侧导航显示内容
|
myContent: [
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "98",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "198",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "298",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
},
|
{
|
taocan: "398",
|
bus: "785",
|
huankuan: "64",
|
zong: "1264"
|
}
|
], //右侧显示套餐内容
|
content: [], //暂存数据
|
typeId:'',
|
};
|
},
|
mounted() {
|
//console.log(this.$route.query)
|
//获取设备高度减去头部高度,防止高度溢出
|
this.$refs.boxLeft.style.height = `${document.body.clientHeight - 46}px`;
|
this.$refs.boxRight.style.height = `${document.body.clientHeight - 46}px`;
|
this.typeId = this.$route.query.typeId
|
this.$api
|
.categoryList({
|
typeId: this.$route.query.typeId
|
})
|
.then(res => {
|
console.log(res);
|
res.body.categoryList.forEach((ele, i) => {
|
ele.checkColor = { checkColor: false };
|
ele.baColor = { baColor: false };
|
});
|
//console.log(res.body.categoryList)
|
if(res.body.commonUse.length > 0){
|
res.body.commonUse.forEach((ele, i) => {
|
ele.checkColor = { checkColor: true };
|
ele.baColor = { baColor: true };
|
ele.tit = 1;
|
});
|
this.myList = [res.body.commonUse[0], ...res.body.categoryList];
|
}
|
if(res.body.commonUse.length <= 0){
|
var arr = res.body.commonUse.push({
|
checkColor : { checkColor: true },
|
baColor : { baColor: true },
|
tit : 1
|
})
|
console.log('arr',arr)
|
this.myList = [...res.body.commonUse, ...res.body.categoryList];
|
}
|
|
this.myContent = [...res.body.commonUse];
|
this.content = res.body.commonUse;
|
console.log(this.myContent)
|
});
|
},
|
computed: {
|
getContent(){
|
|
},
|
},
|
updated() {
|
console.log("修改了");
|
window.onresize;
|
},
|
methods: {
|
//路由回退
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
//左侧点击选中样式改变
|
check(item, i) {
|
console.log('item',item)
|
this.myList.forEach((ele, i) => {
|
ele.checkColor.checkColor = false;
|
ele.baColor.baColor = false;
|
});
|
item.checkColor.checkColor = true;
|
item.baColor.baColor = true;
|
|
if (i > 0) {
|
//console.log(1);
|
item.contracts.forEach((ele)=>{
|
ele.tit = 2
|
})
|
this.myContent = item.contracts;
|
} else {
|
//console.log(2);
|
item.tit = 1
|
this.myContent = this.content;
|
}
|
console.log("content", this.myContent);
|
},
|
//跳转办单页面
|
goNext(ele, index) {
|
console.log(ele)
|
this.$router.push({
|
path: "/hbhy-detail",
|
query: {
|
packageTariff:ele.packagePrices,
|
totalRepayment:ele.insAmt,
|
monthlyRepayment:ele.monthlyPayments,
|
trim:ele.term,
|
merchantArrival:ele.capitalAmt,
|
contId:ele.contId,
|
contName:ele.contName,
|
typeId:this.$route.query.typeId,
|
zfbVersion:this.$route.query.zfbVersion,
|
zfbRate:ele.zfbRate,
|
platRate:ele.platRate
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.hbhy-box {
|
& {
|
height: 100vh;
|
background-color: #f5f5f5;
|
}
|
.mine-box {
|
display: flex;
|
width: 100%;
|
.left-box::-webkit-scrollbar {
|
display: none;
|
}
|
.left-box {
|
margin-top: 46px;
|
overflow-y: scroll;
|
width: 23%;
|
background-color: white;
|
.top-tit,
|
.list-tit {
|
border-bottom: 1px rgb(226, 226, 226) solid;
|
height: 60px;
|
box-sizing: border-box;
|
}
|
.top-tit {
|
padding: 25px 12px 24px 12px;
|
p {
|
color: #666666;
|
width: 100%;
|
text-align: center;
|
}
|
}
|
.baColor {
|
background-color: #f5f5f7;
|
}
|
.list-tit {
|
padding-top: 14px;
|
.checkColor {
|
border-left: 4px solid #896edb;
|
color: #896edb !important;
|
}
|
|
.text-box {
|
height: 30px;
|
color: #666666;
|
font-weight: Medium;
|
p {
|
display: block;
|
height: 30px;
|
width: 70%;
|
margin: auto auto;
|
word-break: break-all;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
.right-box::-webkit-scrollbar {
|
display: none;
|
}
|
.right-box {
|
margin-top: 46px;
|
box-sizing: border-box;
|
padding-top: 15px;
|
width: 77%;
|
overflow-y: scroll;
|
background-color: #f5f5f7;
|
.right-top {
|
background-color: rgba(237, 237, 247, 1);
|
border: 1px dashed rgba(174, 172, 187, 1);
|
border-radius: 4px;
|
text-align: center;
|
width: 94%;
|
height: 36px;
|
margin: auto;
|
p {
|
font-size: 14px;
|
color: #423d5d;
|
line-height: 36px;
|
}
|
}
|
.right-text-box::after {
|
width: 16px;
|
height: 16px;
|
content: "";
|
right: -12px;
|
top: 24px;
|
position: absolute;
|
display: block;
|
background: #f5f5f5;
|
border-radius: 20px;
|
border-left: 1px solid #c3b5ec;
|
}
|
.right-text-box::before {
|
width: 16px;
|
height: 16px;
|
content: "";
|
left: -12px;
|
top: 24px;
|
position: absolute;
|
display: block;
|
background: #f5f5f5;
|
border-radius: 20px;
|
border-right: 1px solid #c3b5ec;
|
}
|
.right-text-box {
|
& {
|
display: flex;
|
width: 100%;
|
height: 62px;
|
margin: auto;
|
margin-top: 10px;
|
margin-bottom: 10px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(195, 181, 236, 1);
|
border-radius: 5px;
|
position: relative;
|
}
|
.taocan {
|
width: 38%;
|
.one {
|
font-size: 14px;
|
color: #ff6666;
|
font-weight: bold;
|
}
|
.two {
|
font-size: 14px;
|
}
|
p {
|
display: inline-block;
|
height: 20px;
|
width: 92%;
|
margin-top: 24px;
|
border-right: 1px solid black;
|
box-sizing: border-box;
|
}
|
}
|
.bus,
|
.huankuan,
|
.zong {
|
width: 25%;
|
font-size: 12px;
|
text-align: center;
|
margin-top: 16px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
