fangtanhua/pagesA/index/counter-info.vue

<template>
	<view class="counter-info" v-if="show">
		<view class="info-box" v-if="type == 3">
			<view class="">
				<view class="box-title">
					贷款总计
				</view>
				<view class="box-list u-flex u-row-between u-flex-wrap">
					<text class="text" style="width: 55%;">首月月供:￥{{detail.general_info.first_monthly_payment.toFixed(2)}}元</text>
					<text class="text u-flex-1">贷款年限:{{detail.general_info.age_limit}}年</text>
					<text class="text" style="width: 55%;">贷款总额:￥{{detail.general_info.calculate_amount_all.toFixed(2)}}元</text>
					<text class="text u-flex-1">累计利息:￥{{detail.general_info.interest_total.toFixed(2)}}元</text>
					<text class="text" style="width: 55%;">累计还款总额:￥{{detail.general_info.repayment_amount_all.toFixed(2)}}元</text>
				</view>
			</view>
			<view class="">
				<view class="box-title">
					公积金贷款
				</view>
				<view class="box-list u-flex u-row-between u-flex-wrap">
					<text class="text" style="width: 55%;">首月月供:￥{{detail.accumulation_info.first_monthly_payment.toFixed(2)}}元</text>
					<text class="text u-flex-1">贷款年限:{{detail.general_info.age_limit}}年</text>
					<text class="text" style="width: 55%;">贷款总额:￥{{detail.accumulation_info.calculate_amount_all.toFixed(2)}}元</text>
					<text class="text u-flex-1">累计利息:￥{{detail.accumulation_info.interest_total.toFixed(2)}}元</text>
					<text class="text" style="width: 55%;">累计还款总额:￥{{detail.accumulation_info.repayment_amount_all.toFixed(2)}}元</text>
				</view>
			</view>
			<view class="">
				<view class="box-title">
					商业贷款
				</view>
				<view class="box-list u-flex u-row-between u-flex-wrap">
					<text class="text" style="width: 55%;">首月月供:￥{{detail.business_info.first_monthly_payment.toFixed(2)}}元</text>
					<text class="text u-flex-1">贷款年限:{{detail.general_info.age_limit}}年</text>
					<text class="text" style="width: 55%;">贷款总额:￥{{detail.business_info.calculate_amount_all.toFixed(2)}}元</text>
					<text class="text u-flex-1">累计利息:￥{{detail.business_info.interest_total.toFixed(2)}}元</text>
					<text class="text" style="width: 55%;">累计还款总额:￥{{detail.business_info.repayment_amount_all.toFixed(2)}}元</text>
				</view>
			</view>
			
			<view class="box-btn" @click="toback">
				重新计算
			</view>
		</view>
		<view class="info-box" v-else>
			<view class="box-title">
				贷款总计
			</view>
			<view class="box-list u-flex u-row-between u-flex-wrap">
				<text class="text" style="width: 55%;">首月月供:￥{{Number(detail.first_monthly_payment).toFixed(2)}}元</text>
				<text class="text u-flex-1">贷款年限:{{detail.age_limit}}年</text>
				<text class="text" style="width: 55%;">贷款总额:￥{{detail.calculate_amount.toFixed(2)}}元</text>
				<text class="text u-flex-1">累计利息:￥{{detail.interest_total.toFixed(2)}}元</text>
				<text class="text" style="width: 55%;">累计还款总额:￥{{detail.repayment_amount_all.toFixed(2)}}元</text>
			</view>
			<view class="box-btn" @click="toback">
				重新计算
			</view>
		</view>
		<view class="info-list">
			<view class="list-header u-flex u-row-between">
				<text>期数</text>
				<text>月供(元)</text>
				<text>本金(元)</text>
				<text>利息(元)</text>
			</view>
			<view class="list-item u-flex u-row-between" v-for="(item,index) in detail.repayment_info" :key="index">
				<text>第{{item.periods}}期</text>
				<text>{{item.monthly_payment}}</text>
				<text>{{item.principal}}</text>
				<text>{{item.interest}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {},
				type: 1,
				detail: {
					general_info:{},
					accumulation_info:{},
					business_info:{},
					repayment_info:[]
				},
				show:false
			}
		},
		onLoad(option) {
			this.params = JSON.parse(decodeURIComponent(option.params))
			this.type = option.type
			this.getdata()
		},
		methods: {
			toback() {
				uni.navigateBack()
			},
			getdata() {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				if (this.type == 1 || this.type == 2) {
					this.$u.post('/api/Calculator/not_group_loans', this.params).then(res => {
						if (res.code == 1) {
							this.detail = res.data
						} else {
							this.$u.toast(res.msg)
						}
						this.show = true
					})
				} else {
					this.$u.post('/api/Calculator/group_loans', this.params).then(res => {
						if (res.code == 1) {
							this.detail = res.data
						} else {
							this.$u.toast(res.msg)
						}
						this.show = true
					})
				}

			}
		}
	}

</script>

<style lang="scss">
	.counter-info {
		position: relative;
		z-index: 1;
		padding: 1rpx 0;
		background: linear-gradient(180deg, #1E7DFF 0%, #F6F6F6 284rpx, #F6F6F6 100%);
		min-height: 100vh;

		.info-list {
			width: 722rpx;
			// height: 650rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx auto;
			padding: 20rpx 10rpx 1rpx 10rpx;

			.list-item {
				margin-bottom: 20rpx;

				text {
					flex: 1;
					text-align: center;
					line-height: 66rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.list-header {
				height: 66rpx;
				background: #C6DDFD;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				text {
					flex: 1;
					text-align: center;
					line-height: 66rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.info-box {
			width: 702rpx;
			// height: 390rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 108rpx auto 20rpx auto;
			padding: 0 24rpx 1rpx 24rpx;

			.box-btn {
				width: 100%;
				line-height: 80rpx;
				background: linear-gradient(143deg, #8DBDFF 0%, #1F7EFF 100%);
				border-radius: 40rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin: 40rpx auto;
			}

			.box-list {
				.text {
					margin-bottom: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.box-title {
				padding: 24rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
	}

</style>