[盘债计算器]
This commit is contained in:
251
pages/result/other.vue
Normal file
251
pages/result/other.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user