318 lines
7.1 KiB
Vue
318 lines
7.1 KiB
Vue
<template>
|
||
<view class="content">
|
||
<image class="indexTop" src="/static/index_top.png" mode="scaleToFill"></image>
|
||
<view class="indexTips">
|
||
<view class="indexTips-name">其他还款方式</view>
|
||
<view class="indexTips-text">根据您填写的内容生成以下结果</view>
|
||
</view>
|
||
<view class="indexCont">
|
||
<view class="indexCont-white">
|
||
<view class="item">
|
||
<view class="item-label">
|
||
<view class="item-label-name">
|
||
机构名称：
|
||
</view>
|
||
<view class="item-label-text">
|
||
{{listsInfo.title}}
|
||
</view>
|
||
</view>
|
||
<view class="item-label">
|
||
<view class="item-label-name">
|
||
欠款金额：
|
||
</view>
|
||
<view class="item-label-text">
|
||
{{listsInfo.total}}元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tipsTitle">
|
||
<view class="tipsTitle-name">其他还款表（单位：元）</view>
|
||
<view class="tipsTitle-bottom">
|
||
<picker :range="periodsPay" class="tipsTitle-picker" @change="periodsChange">
|
||
<view class="uni-input">选择还款期数：{{periodsPay[periodsIndex]}}期</view>
|
||
<image src="/static/basic_down.png" class="tipsTitle-picker-img" mode="widthFix"></image>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tipsList">
|
||
<view class="tipsList-tab">
|
||
<view class="tips-label-item">期数</view>
|
||
<view class="tips-tab-item">刷POS</view>
|
||
<view class="tips-tab-item">分期还款</view>
|
||
<view class="tips-tab-item">最低还款</view>
|
||
<view class="tips-tab-item">逾期不还</view>
|
||
</view>
|
||
<view class="tipsList-data">
|
||
<view class="tipsList-label" v-for="(items, index) in listsArr" :key="index">
|
||
<view class="tips-label-item">第{{index+1}}期</view>
|
||
<view class="tips-label-item">{{items.pos}}</view>
|
||
<view class="tips-label-item">{{items.stages}}</view>
|
||
<view class="tips-label-item">{{items.mincash}}</view>
|
||
<view class="tips-label-item">{{items.overdue}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="list-label">
|
||
<view class="list-name">POS费用合计：</view>
|
||
<view class="list-text">{{listsTotal.pos_add}}元</view>
|
||
</view>
|
||
<view class="list-label">
|
||
<view class="list-name">分期费用合计：</view>
|
||
<view class="list-text">{{listsTotal.stages_add}}元</view>
|
||
</view>
|
||
<view class="list-label">
|
||
<view class="list-name">最低费用合计：</view>
|
||
<view class="list-text">{{listsTotal.mincash_add}}元</view>
|
||
</view>
|
||
<view class="list-label">
|
||
<view class="list-name">逾期费用合计：</view>
|
||
<view class="list-text">{{listsTotal.overdue_add}}元</view>
|
||
</view>
|
||
<view class="list-label border-top">
|
||
<view class="list-name">外加偿还本金：</view>
|
||
<view class="list-text">{{listsTotal.principal}}元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<navigator hover-class="none" open-type="navigateBack" class="return">返回</navigator>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
periodsPay : [],
|
||
periodsIndex : 0,
|
||
listsArr : [], // 结果列表
|
||
listsTotal : '',
|
||
listsInfo : {
|
||
title: '',
|
||
total: ''
|
||
}
|
||
|
||
}
|
||
},
|
||
onLoad(options){
|
||
let dData = decodeURIComponent(options.data);
|
||
let newdData = JSON.parse(dData)
|
||
|
||
this.listsInfo.title = newdData.institution
|
||
this.listsInfo.total = newdData.total
|
||
this.periodsPay = newdData.periods
|
||
this.otherArr = newdData.other
|
||
|
||
console.log(this.periodsIndex)
|
||
|
||
let newValue = newdData.periods[this.periodsIndex]
|
||
for(var item in this.otherArr){
|
||
if(newValue == item){
|
||
var tValue = this.otherArr[item];
|
||
this.listsArr = tValue.data
|
||
this.listsTotal = tValue.total
|
||
}
|
||
}
|
||
},
|
||
|
||
created() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
// 选择期数
|
||
periodsChange(e) {
|
||
this.periodsIndex = e.detail.value
|
||
let newValue = this.periodsPay[this.periodsIndex]
|
||
for(var item in this.otherArr){
|
||
if(newValue == item){
|
||
var tValue = this.otherArr[item];
|
||
this.listsArr = tValue.data
|
||
this.listsTotal = tValue.total
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.indexTop {
|
||
width: 100%;
|
||
height: 440rpx;
|
||
}
|
||
|
||
.indexTips {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding: 60rpx 40rpx 0;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
}
|
||
|
||
.indexTips-name {
|
||
font-weight: 600;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.indexTips-text {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.indexCont {
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
margin-top: 240rpx;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.indexCont-white {
|
||
height: 100%;
|
||
background: white;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 30rpx;
|
||
position: relative;
|
||
}
|
||
.indexCont-white::after,
|
||
.indexCont-white::before {
|
||
position: absolute;
|
||
content: '';
|
||
background-color: rgba(255, 255, 255, .4);
|
||
left: 20rpx;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
}
|
||
.indexCont-white::after {
|
||
z-index: 2;
|
||
width: calc(100% - 40rpx);
|
||
left: 20rpx;
|
||
top: -25rpx;
|
||
height: 25px;
|
||
}
|
||
.indexCont-white::before {
|
||
z-index: 1;
|
||
width: calc(100% - 80rpx);
|
||
left: 40rpx;
|
||
top: -50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.item {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.item-label {
|
||
line-height: 48rpx;
|
||
padding: 15rpx 0;
|
||
display: flex;
|
||
margin-right: 20rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.item-label-name {
|
||
color: #999999;
|
||
}
|
||
|
||
.list {
|
||
border-top: 2rpx dotted #eeeeee;
|
||
margin-top: 30rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
.list-label {
|
||
display: flex;
|
||
padding: 30rpx 0 10rpx;
|
||
}
|
||
|
||
.border-top {
|
||
border-top: 4rpx solid #999999;
|
||
padding-top: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.list-name {
|
||
flex: 1;
|
||
}
|
||
|
||
.list-text {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.return {
|
||
margin-top: 50rpx;
|
||
margin-bottom: 30rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 80rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
color: #0c58d2;
|
||
border: 2rpx solid #0c58d2;
|
||
}
|
||
|
||
.tipsTitle-name {
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
text-align: center;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.tipsTitle-bottom {
|
||
text-align: right;
|
||
position: relative;
|
||
margin: 30rpx 0;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tipsTitle-picker {
|
||
padding-right: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tipsTitle-picker-img {
|
||
width: 24rpx;
|
||
position: absolute;
|
||
top: 6rpx;
|
||
right: 0;
|
||
}
|
||
|
||
.tipsList {
|
||
margin: 20rpx 0;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
border: 1px solid #eee;;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.tipsList-tab {
|
||
display: flex;
|
||
background: #e5edf8;
|
||
line-height: 90rpx;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
}
|
||
|
||
.tips-tab-item, .tips-label-item {
|
||
flex: 4;
|
||
text-align: center;
|
||
}
|
||
|
||
.tipsList-label {
|
||
display: flex;
|
||
line-height: 80rpx;
|
||
background: #fafafa;
|
||
border-bottom: 2rpx solid #eeeeee;
|
||
}
|
||
|
||
.tipsList-label:last-child {
|
||
border: none;
|
||
}
|
||
</style> |