@@ -1,446 +1,454 @@
< template >
< view class = "content" >
< view class = "top" >
< view class = "top-text" v-if = "userName" >
您好 ! {{ userName.nickname }}
< ! - - {{ userName.parent.sex = = ' 男 ' ? ' 先生 ' : ' 女士 ' }} : - - >
< / view >
以下是根据您的情况为您匹配的机构最佳方案 。 由于银行政策实时变动 , 该方案为预估方案 , 仅供参考 , 具体以协商为准 , 感谢您的支持 !
< / view >
< view class = "white" >
< view class = "list" v-for = "(item, index) in schemesArr" :key="index" >
< view class = "label" : class = "{active : item.schemesShow}" >
< view class = "labelTop" >
< view class = "labelTop-name" >
{ { item . institution . title } }
< / view >
< view class = "labelTop-tips" >
{ { item . business _type . title } }
< / view >
< / view >
< view class = "labelPlan-list" >
< view class = "labelPlan-item" v-for = "(items, itemsIndex) in item.base" :key="itemsIndex" >
< view class = "labelPlan-item-name" > { { items . title } } < / view >
< view class = "nowrap labelPlan-item-text" >
< block v-if = "items.key === 'price'" >
¥ {{ items.value }}
< / block >
< block v-else-if = "items.key === 'overdue_day'" >
{{ items.value }} 天
< / block >
< block v-else >
{{ items.value }}
< / block >
< / view >
< block v-if = "items.value" >
< view v-if = "items.key === 'rush' || items.key === 'remark'" class="labelPlan-item-btn" @click="seeTips(items.title, items.value)" > 查看 < / view >
< / block >
< / view >
< / view >
< view class = "labelPlan" >
< view class = "labelPlan-top" >
< view class = "labelPlan-name" >
预估方案
< / view >
< view class = "labelPlan-tips" >
YGFA
< / view >
< / view >
< view class = "labelPlan-list" >
< view class = "labelPlan-item" v-for = "(paramsItem, paramsIndex) in item.params" :key="paramsIndex" >
< view class = "labelPlan-item-name" > { { paramsItem . title } } < / view >
< view class = "nowrap labelPlan-item- text" >
{ { paramsItem . value } }
< / view >
< view class = "labelPlan-item-btn " v-i f = "paramsItem.title == '协商方案' || paramsItem.title == '减免情况' || paramsItem.title == '关于减免结清减免政策'" @click="seeTips(paramsItem.title, paramsItem.value)" > 查看 < / view >
< / view >
</ view >
< / view >
< view class = "labelNotice" : class = "{active : item.noticeShow}" >
< view class = "labelNotice-top" >
< view class = "labelNotice-name" >
须知 :
< / view >
< view class = "labelNotice-text " >
{ { item . business _type . notic } }
< / view >
< / view >
< view class = "labelNotice-btn" @click ="noticeTap(index)" >
< image class = "labelNotice-img" : class = "{active : item.noticeShow}" src = "@/static/imgs/openArrow_grey.png" mode = "widthFix" > < / image > { { item . noticeShow ? '收起' : '展开' } }
< / view >
< / view >
< / view >
< view class = "ope n" @click ="record Tap(index)" >
< view class = "open-text" >
< image : class = "{active : item.schemesShow}" src = "@/static/imgs/openArrow.png" mode = "widthFix" > < / image > { { item . schemesShow ? '收起' : '展开' } }
< / view >
< / view >
< / view >
< view class = "reminder" >
< image class = "reminder-img" src = "@/static/imgs/reminderIcon.png" > < / image >
< view class = "reminder-text" >
< text > 温馨提示 : < / text >
{ { reminder } }
< / view >
< / view >
< / view >
< mouldTips :see-data = "seeData" @tipsClose ="($event) => {seeData.seeShow = $event}" > < / mouldTips >
< template >
< view class = "content" >
< view class = "top" >
< view class = "top-text" v-if = "userName" >
您好 ! {{ userName.nickname }}
< ! - - {{ userName.parent.sex = = ' 男 ' ? ' 先生 ' : ' 女士 ' }} : - - >
< / view >
以下是根据您的情况为您匹配的机构最佳方案 。 由于银行政策实时变动 , 该方案为预估方案 , 仅供参考 , 具体以协商为准 , 感谢您的支持 !
< / view >
< view class = "white" >
< view class = "list" v-for = "(item, index) in schemesArr" :key="index" >
< view class = "label" : class = "{active : item.schemesShow}" >
< view class = "labelTop" >
< view class = "labelTop-name" >
{ { item . institution . title } }
< / view >
< view class = "labelTop-tips" >
{ { item . business _type . title } }
< / view >
< / view >
< view class = "labelPlan-list" >
< view class = "labelPlan-item" v-for = "(items, itemsIndex) in item.base" :key="itemsIndex" >
< view class = "labelPlan-item-name" > { { items . title } } < / view >
< view class = "nowrap labelPlan-item-text" >
< block v-if = "items.key === 'price'" >
¥ {{ items.value }}
< / block >
< block v-else-if = "items.key === 'overdue_day'" >
{{ items.value }} 天
< / block >
< block v-else >
{{ items.value }}
< / block >
< / view >
< block v-if = "items.value" >
< view v-if = "items.key === 'rush' || items.key === 'remark'" class="labelPlan-item-btn" @click="seeTips(items.title, items.value)" > 查看 < / view >
< / block >
< / view >
< / view >
< view class = "labelPlan" >
< view class = "labelPlan-top" >
< view class = "labelPlan-name" >
预估方案
< / view >
< view class = "labelPlan-tips" >
YGFA
< / view >
< / view >
< view class = "labelPlan-list" v-if = "item.type == 'one'" >
< text class = "labelPlan-item labelPlan-content" >
{ { item . content } }
< / text >
< / view >
< view class = "labelPlan-list" v-else >
< view class = "labelPlan-item" v-for = "( paramsItem, paramsIndex) in item.params" :key="paramsIndex" >
< view class = "labelPlan-item-name" > { { paramsItem . title } } < / view >
< view class = "nowrap labelPlan-item-text" >
{ { paramsItem . value } }
< / view >
< view class = "labelPlan-item-btn" v-if = "paramsItem.title == '协商方案' || paramsItem.title == '减免情况' || paramsItem.title == '关于减免结清减免政策'" @click="seeTips(paramsItem.title, paramsItem.value)" > 查看 < / view >
< / view >
< / view >
< / view >
< view class = "labelNotice" : class = "{active : item.noticeShow} " >
< view class = "labelNotice-top" >
< view class = "labelNotice-name" >
须知 :
< / view >
< text class = "labelNotice-text" >
{ { item . business _type . notic } }
< / text >
< / view >
< view class = "labelNotice-bt n" @click ="notice Tap(index)" >
< image class = "labelNotice-img" : class = "{active : item.noticeShow}" src = "@/static/imgs/openArrow_grey.png" mode = "widthFix" > < / image > { { item . noticeShow ? '收起' : '展开' } }
< / view >
< / view >
< / view >
< view class = "open" @click ="recordTap(index)" >
< view class = "open-text" >
< image : class = "{active : item.schemesShow}" src = "@/static/imgs/openArrow.png" mode = "widthFix" > < / image > { { item . schemesShow ? '收起' : '展开' } }
< / view >
< / view >
< / view >
< view class = "reminder" >
< image class = "reminder-img" src = "@/static/imgs/reminderIcon.png" > < / image >
< view class = "reminder-text" >
< text > 温馨提示 : < / text >
{ { reminder } }
< / view >
< / view >
< / view >
< mouldTips :see-data = "seeData" @tipsClose ="($event) => {seeData.seeShow = $event}" > < / mouldTips >
< / view >
< / template >
< script >
import { Schemes } from '@/apis/interfaces/index'
import mouldTips from '@/components/mould-tips.vue'
export default {
components : {
mouldTips
} ,
data ( ) {
return {
schemesArr : [ ] , // 预估方案列表
reminder : '' , // 温馨提示
userName : '' , // 用户
// 查看提示组件
seeData : {
seeShow : false ,
seeTitle : '' ,
seeText : '' ,
} ,
noticeShow : false , // 须知展开
baleShow : false , // 服务包弹出
}
} ,
onShow ( ) { } ,
onLoad ( ) {
// 获取方案
this . schemesInfo ( ) ;
} ,
methods : {
// 方案
schemesInfo ( ) {
// this.$Route.query.id
Schemes ( this . $Route . query . id ) . then ( res => {
this . reminder = res . tips
let esArr = res . schemes
esArr . forEach ( ( item , index ) => {
index == 0 ? item . schemesShow = true : item . schemesShow = false
index == 0 ? item . noticeShow = true : item . noticeShow = false
} )
this . schemesArr = esArr
this . userName = res . user
} ) . catch ( err => {
uni . showToast ( {
title : err . message ,
icon : "none"
} )
} )
} ,
// 提示组件 -- 赋值
seeTips ( title , text ) {
this . seeData . seeShow = true
this . seeData . seeTitle = title
this . seeData . seeText = text
} ,
// 列表展开
recordTap ( index ) {
var listData = this . schemesArr
var helpFlag = this . schemesArr [ index ] . schemesShow
listData . forEach ( ( item ) => {
item . schemesShow = false
} )
listData [ index ] . schemesShow = ! helpFlag
this . schemesArr = listData
} ,
// 须知展开
noticeTap ( index ) {
var listData = this . schemesArr
var helpFlag = this . schemesArr [ index ] . noticeShow
listData . forEach ( ( item ) => {
item . noticeShow = false
} )
listData [ index ] . noticeShow = ! helpFlag
this . schemesArr = listData
}
}
< script >
import { Schemes } from '@/apis/interfaces/index'
import mouldTips from '@/components/mould-tips.vue'
export default {
components : {
mouldTips
} ,
data ( ) {
return {
schemesArr : [ ] , // 预估方案列表
reminder : '' , // 温馨提示
userName : '' , // 用户
// 查看提示组件
seeData : {
seeShow : false ,
seeTitle : '' ,
seeText : '' ,
} ,
noticeShow : false , // 须知展开
baleShow : false , // 服务包弹出
}
} ,
onShow ( ) { } ,
onLoad ( ) {
// 获取方案
this . schemesInfo ( ) ;
} ,
methods : {
// 方案
schemesInfo ( ) {
// this.$Route.query.id
Schemes ( this . $Route . query . id ) . then ( res => {
this . reminder = res . tips
let esArr = res . schemes
esArr . forEach ( ( item , index ) => {
index == 0 ? item . schemesShow = true : item . schemesShow = false
index == 0 ? item . noticeShow = true : item . noticeShow = false
} )
this . schemesArr = esArr
this . userName = res . user
} ) . catch ( err => {
uni . showToast ( {
title : err . message ,
icon : "none"
} )
} )
} ,
// 提示组件 -- 赋值
seeTips ( title , text ) {
this . seeData . seeShow = true
this . seeData . seeTitle = title
this . seeData . seeText = text
} ,
// 列表展开
recordTap ( index ) {
var listData = this . schemesArr
var helpFlag = this . schemesArr [ index ] . schemesShow
listData . forEach ( ( item ) => {
item . schemesShow = false
} )
listData [ index ] . schemesShow = ! helpFlag
this . schemesArr = listData
} ,
// 须知展开
noticeTap ( index ) {
var listData = this . schemesArr
var helpFlag = this . schemesArr [ index ] . noticeShow
listData . forEach ( ( item ) => {
item . noticeShow = false
} )
listData [ index ] . noticeShow = ! helpFlag
this . schemesArr = listData
}
}
}
< / script >
< style lang = "scss" scoped >
. content {
background - color : # f6f6f6 ;
overflow - y : scroll ;
height : 100 vh ;
// height: calc(100vh - 44px);
}
. top {
background - color : $mian - color ;
color : # ffffff ;
padding : $padding * 2 $padding 280 rpx ;
box - sizing : border - box ;
font - size : $title - size - m ;
line - height : 42 rpx ;
opacity : .9 ;
text - align : justify ;
. top - text {
margin - bottom : $margin ;
}
}
. white {
position : relative ;
top : - 200 rpx ;
left : 0 ;
width : 100 % ;
padding : $padding ;
box - sizing : border - box ;
z - index : 9 ;
border - bottom : transparent 40 rpx solid ;
. list {
padding : $padding ;
box - sizing : border - box ;
background - color : # ffffff ;
border - radius : $radius - 4 ;
position : relative ;
margin - top : $margin * 3 ;
box - shadow : 0 0 20 rpx rgba ( 0 , 0 , 0 , .05 ) ;
& : : after ,
& : : before {
position : absolute ;
content : '' ;
background - color : rgba ( 255 , 255 , 255 , .4 ) ;
left : 20 rpx ;
border - radius : $radius - 4 $radius - 4 0 0 ;
}
& : : after {
z - index : 2 ;
width : calc ( 100 % - 40 rpx ) ;
left : 20 rpx ;
top : - 25 rpx ;
height : 25 px ;
}
& : : before {
z - index : 1 ;
width : calc ( 100 % - 80 rpx ) ;
left : 40 rpx ;
top : - 50 rpx ;
height : 50 rpx ;
}
& : first - child {
margin - top : 0 ;
}
. label {
position : relative ;
height : 84 rpx ;
overflow : hidden ;
& . active {
height : auto ;
}
& : : after ,
& : : before {
position : absolute ;
content : '' ;
width : 30 rpx ;
height : 30 rpx ;
border - radius : 50 % ;
background - color : # f6f6f6 ;
top : 33 % ;
}
& : : after {
left : - 45 rpx ;
}
& : : before {
right : - 45 rpx ;
}
. labelTop {
line - height : 80 rpx ;
margin - bottom : $margin - 20 ;
display : flex ;
. labelTop - name {
flex : 1 ;
font - size : $title - size + 2 ;
font - weight : 600 ;
}
. labelTop - tips {
margin - left : 20 rpx ;
background - color : # FBE7EE ;
color : $mian - color ;
font - size : $title - size - sm ;
font - weight : normal ;
padding : 0 15 rpx ;
border : 2 rpx solid $mian - color ;
border - radius : $radius * 2 ;
height : 44 rpx ;
line - height : 44 rpx ;
display : inline - block ;
margin - top : 18 rpx ;
}
}
. labelPlan {
border - top : 2 rpx dotted # e7e7e7 ;
padding - top : $padding ;
margin - top : $margin ;
. labelPlan - top {
display : flex ;
line - height : 54 rpx ;
color : $mian - color ;
margin - bottom : $margin ;
. labelPlan - name {
flex : 1 ;
font - size : $title - size + 4 ;
font - weight : 600 ;
}
. labelPlan - tips {
opacity : .2 ;
font - size : $title - size + 2 ;
}
}
}
. labelPlan - item {
line - height : 40 rpx ;
margin - bottom : $margin + 10 ;
display : flex ;
font - size : $title - size - m ;
color : # 111111 ;
& : last - child {
margin - bottom : 10 rpx ;
}
. labelPlan - item - name {
color : # 999999 ;
flex : 1 ;
margin - right : $margin ;
}
. labelPlan - item - text {
width : 30 % ;
text - align : right ;
}
. labelPlan - item - btn {
color : $mian - color ;
border : $mian - color 2 rpx solid ;
width : 80 rpx ;
text - align : center ;
border - radius : $radius - m ;
height : 40 rpx ;
line - height : 40 rpx ;
margin - left : 20 rpx ;
font - size : $title - size - sm - 2 ;
}
}
. labelNotice {
font - size : $title - size - m ;
background - color : # F6F6F6 ;
border - radius : $radius - m ;
margin - top : $margin ;
height : 240 rpx ;
overflow : hidden ;
position : relative ;
& . active {
height : auto ;
}
. labelNotice - top {
padding : $padding $padding 0 ;
box - sizing : border - box ;
. labelNotice - name {
color : # 111111 ;
margin - bottom : $margin - 10 ;
font - weight : 600 ;
}
. labelNotice - text {
color : # 666666 ;
line - height : 52 rpx ;
text - align : justify ;
margin - bottom : 100 rpx ;
}
}
. labelNotice - btn {
text - align : center ;
line - height : 100 rpx ;
color : # 999999 ;
positio n: absolu te;
bottom : 0 ;
left : 0 ;
width : 100 % ;
background - color : # F6F6F6 ;
. labelNotice - img {
width : 24 rpx ;
height : 24 rpx ;
margin - right : 10 rpx ;
transition : .2 s ;
& . active {
transform : rotate ( 18 0 deg )
}
}
}
}
}
. open {
text - align : center ;
margin - top : $margin - 10 ;
width : 100 % ;
background - color : # ffffff ;
. ope n - text {
background - color : # FBE7EE ;
display : inline - block ;
color : $mian - color ;
padding : 0 $padding - 10 ;
line - height : 58 rpx ;
font - size : $title - size - m ;
border - radius : $r adius - sm ;
image {
width : 22 rpx ;
height : 22 rpx ;
margin - right : 10 rpx ;
transition : . 2s ;
& . active {
transform : rotate ( 18 0 deg )
}
}
}
}
}
}
. reminder {
position : fixed ;
left : 0 ;
bottom : 0 ;
background - color : # f6f6f6 ;
z - index : 1 0;
width : 100 % ;
height : 240 rpx ;
overflow : hidden ;
padding : $padding ;
box - sizing : border - bo x;
display : flex ;
color : # FEA044 ;
font - size : $title - size - m ;
border - bottom : 2 rpx solid # f5f5f5 ;
. reminder - img {
width : 32 rpx ;
height : 3 2rpx ;
margin - top : 8 rpx ;
}
. reminder - text {
overflow - y : scroll ;
height : 200 rpx ;
width : calc ( 100 % - 52 rpx ) ;
margin - left : 20 rpx ;
line - height: 4 0rpx ;
text - align : justify ;
font - size : $title - size - sm ;
text {
display : block ;
}
}
}
< style lang = "scss" scoped >
. content {
background - color : # f6f6f6 ;
overflow - y : scroll ;
height : 100 vh ;
// height: calc(100vh - 44px);
}
. top {
background - color : $mian - color ;
color : # ffffff ;
padding : $padding * 2 $padding 280 rpx ;
box - sizing : border - box ;
font - size : $title - size - m ;
line - height : 42 rpx ;
opacity : .9 ;
text - align : justify ;
. top - text {
margin - bottom : $margin ;
}
}
. white {
position : relative ;
top : - 200 rpx ;
left : 0 ;
width : 100 % ;
padding : $padding ;
box - sizing : border - box ;
z - index : 9 ;
border - bottom : transparent 40 rpx solid ;
. list {
padding : $padding ;
box - sizing : border - box ;
background - color : # ffffff ;
border - radius : $radius - 4 ;
position : relative ;
margin - top : $margin * 3 ;
box - shadow : 0 0 20 rpx rgba ( 0 , 0 , 0 , .05 ) ;
& : : after ,
& : : before {
position : absolute ;
content : '' ;
background - color : rgba ( 255 , 255 , 255 , .4 ) ;
left : 20 rpx ;
border - radius : $radius - 4 $radius - 4 0 0 ;
}
& : : after {
z - index : 2 ;
width : calc ( 100 % - 40 rpx ) ;
left : 20 rpx ;
top : - 25 rpx ;
height : 25 px ;
}
& : : before {
z - index : 1 ;
width : calc ( 100 % - 80 rpx ) ;
left : 40 rpx ;
top : - 50 rpx ;
height : 50 rpx ;
}
& : first - child {
margin - top : 0 ;
}
. label {
position : relative ;
height : 84 rpx ;
overflow : hidden ;
& . active {
height : auto ;
}
& : : after ,
& : : before {
position : absolute ;
content : '' ;
width : 30 rpx ;
height : 30 rpx ;
border - radius : 50 % ;
background - color : # f6f6f6 ;
top : 33 % ;
}
& : : after {
left : - 45 rpx ;
}
& : : before {
right : - 45 rpx ;
}
. labelTop {
line - height : 80 rpx ;
margin - bottom : $margin - 20 ;
display : flex ;
. labelTop - name {
flex : 1 ;
font - size : $title - size + 2 ;
font - weight : 600 ;
}
. labelTop - tips {
margin - left : 20 rpx ;
background - color : # FBE7EE ;
color : $mian - color ;
font - size : $title - size - sm ;
font - weight : normal ;
padding : 0 15 rpx ;
border : 2 rpx solid $mian - color ;
border - radius : $radius * 2 ;
height : 44 rpx ;
line - height : 44 rpx ;
display : inline - block ;
margin - top : 18 rpx ;
}
}
. labelPlan {
border - top : 2 rpx dotted # e7e7e7 ;
padding - top : $padding ;
margin - top : $margin ;
. labelPlan - top {
display : flex ;
line - height : 54 rpx ;
color : $mian - color ;
margin - bottom : $margin ;
. labelPlan - name {
flex : 1 ;
font - size : $title - size + 4 ;
font - weight : 600 ;
}
. labelPlan - tips {
opacity : .2 ;
font - size : $title - size + 2 ;
}
}
}
. labelPlan - item {
line - height : 40 rpx ;
margin - bottom : $margin + 10 ;
display : flex ;
font - size : $title - size - m ;
color : # 111111 ;
& : last - child {
margin - bottom : 10 rpx ;
}
. labelPlan - item - name {
color : # 999999 ;
flex : 1 ;
margin - right : $margin ;
}
. labelPlan - item - text {
width : 30 % ;
text - align : right ;
}
. labelPlan - item - btn {
color : $mian - color ;
border : $mian - color 2 rpx solid ;
width : 80 rpx ;
text - align : center ;
border - radius : $radius - m ;
height : 40 rpx ;
line - height : 40 rpx ;
margin - left : 20 rpx ;
font - size : $title - size - sm - 2 ;
}
& . labelPlan - content {
line - height : 52 rpx ;
}
}
. labelNotice {
font - size : $title - size - m ;
background - color : # F6F6F6 ;
border - radius : $radius - m ;
margin - top : $margin ;
height : 240 rpx ;
overflow : hidden ;
position : relative ;
& . active {
height : auto ;
}
. labelNotice - top {
padding : $padding $padding 0 ;
box - sizing : border - box ;
. labelNotice - name {
color : # 111111 ;
margin - bottom : $margin - 10 ;
font - weight : 600 ;
}
. labelNotice - text {
color : # 666666 ;
line - height : 52 rpx ;
text - align : justify ;
margin - bottom : 100 rpx ;
}
}
. labelNotice - btn {
text - alig n: cen ter ;
line - height : 100 rpx ;
color : # 999999 ;
position : absolute ;
bottom : 0 ;
left : 0 ;
width : 100 % ;
background - color : # F6F6F6 ;
. labelNotice - img {
width : 24 rpx ;
height : 24 rpx ;
margin - right : 10 rpx ;
transition : .2 s ;
& . active {
transform : rotate ( 180 deg )
}
}
}
}
}
. open {
text - align : center ;
margin - t op: $margi n - 10 ;
width : 100 % ;
background - color : # ffffff ;
. open - text {
background - color : # FBE7EE ;
display : inline - block ;
color : $mian - color ;
padding : 0 $p adding - 10 ;
line - height : 58 rpx ;
font - size : $title - size - m ;
border - radius : $radius - sm ;
image {
width : 2 2rpx ;
height : 22 rpx ;
margin - right : 10 rpx ;
transition : .2 s ;
& . active {
transform : rotate ( 180 deg )
}
}
}
}
}
}
. reminder {
position : fixed ;
left : 0 ;
bottom : 0 ;
background - color : # f6f6f6 ;
z - index : 10 ;
width : 100 % ;
height : 240 rp x;
overflow : hidden ;
padding : $padding ;
box - sizing : border - box ;
display : flex ;
color : # FEA044 ;
font - size : $title - size - m ;
border - bottom : 2 rpx solid # f5f5f5 ;
. reminder - img {
width : 32 rpx ;
height : 32 rpx ;
margin - top : 8 rpx ;
}
. reminder - text {
overflow - y : scroll ;
height : 20 0rpx ;
width : calc ( 100 % - 52 rpx ) ;
margin - left : 20 rpx ;
line - height : 40 rpx ;
text - align : justify ;
font - size : $title - size - sm ;
text {
display : block ;
}
}
}
< / style >