[更新邀请码]
This commit is contained in:
@@ -1,251 +1,318 @@
|
||||
<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">
|
||||
{{listsArr.institution}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-label">
|
||||
<view class="item-label-name">
|
||||
欠款金额：
|
||||
</view>
|
||||
<view class="item-label-text">
|
||||
{{listsArr.total}}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tipsTitle">其他还款表（单位：元）</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.other" :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">{{listsArr.other_total.pos_add}}元</view>
|
||||
</view>
|
||||
<view class="list-label">
|
||||
<view class="list-name">分期合计：</view>
|
||||
<view class="list-text">{{listsArr.other_total.stages_add}}元</view>
|
||||
</view>
|
||||
<view class="list-label">
|
||||
<view class="list-name">最低合计：</view>
|
||||
<view class="list-text">{{listsArr.other_total.mincash_add}}元</view>
|
||||
</view>
|
||||
<view class="list-label">
|
||||
<view class="list-name">逾期合计：</view>
|
||||
<view class="list-text">{{listsArr.other_total.overdue_add}}元</view>
|
||||
</view>
|
||||
<view class="list-label">
|
||||
<view class="list-name">外加偿还本金：</view>
|
||||
<view class="list-text">{{listsArr.other_total.principal}}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<navigator hover-class="none" open-type="navigateBack" class="return">返回</navigator>
|
||||
</view>
|
||||
<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 {
|
||||
listsArr : '', // 结果列表
|
||||
}
|
||||
},
|
||||
onLoad(options){
|
||||
let dData = decodeURIComponent(options.data);
|
||||
let newdData = JSON.parse(dData)
|
||||
this.listsArr = newdData
|
||||
console.log(newdData)
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 28rpx;
|
||||
margin-top: 30rpx;
|
||||
color: #0c58d2;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
<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>
|
||||
Reference in New Issue
Block a user