easypay-app-wx/pages/users/installment/index.vue

<template>
	<view class="installmentbox">
		<!-- 产品信息 -->
		<view class="mobile">
			<view class="ltpic">
				<image src="../../../static/images/sj1.png" mode=""></image>
			</view>
			<view class="rtcan">
				<text class="title">iPhone 14 Pro Max 现货 支持移动联通电信5q 双卡双待手...</text>
				<view class="combination">
					<text>套餐:</text> <text>256G</text> <text>深空灰</text> <text>到期买断</text>
				</view>
				<view class="tenancy">
					<text>租期:</text> <text>{{num}}期</text>
				</view>
				<view class="tenancy">
					<text>间隔:</text> <text>30天</text>
				</view>
				<view class="tenancy">
					<text>数量:</text> <text>1</text>
				</view>
			</view>
		</view>
		<!-- 租金 -->
		<view class="rent">
			<view class="shouqi">
				<text>￥{{hireshou}} (第1期)</text>
				<view class="wz">
					首期租金
				</view>
			</view>
			<view class="zongzu">
				<text>￥{{sum}}</text>
				<view class="wz">
					总租金
				</view>
			</view>
			<view class="edu">
				<text>￥6680</text>
				<view class="wz">
					销售金额
				</view>
			</view>
		</view>
		<!-- 分期方式 -->
		<view class="repayment">
			<view class="gap">
				<text class="title">分期方式</text> <text class="gapwz">间隔：30天</text>
			</view>
			<view class="qishu">
				<text>期数</text> <text>租期</text> <text>每期租金</text>
			</view>
			<view class="date" style="margin-top: 40rpx;" v-for="(item,index) in installmentlist" :key="index">
				<text>第{{item.installmentNumber}}期</text> <text>间隔：30天</text> <text> {{item.repaymentAmount}}</text>
			</view>
		</view>

		<!-- 返回 -->
		<view class="return">
			<a href="javascript:;" @click="back">返回</a>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				installmentlist: [],
				hireshou: '', //首期租金
				sum:0,
				num:0, //总租期
			}
		},
		onLoad(option) {
			this.installmentlist = JSON.parse(option.list)
			this.hireshou = this.installmentlist[0].repaymentAmount
			// console.log(this.installmentlist)
		},
		methods: {
			// 返回上一页
			back() {
				uni.navigateBack({
					delta: 1,
				})
			}
		},
		mounted() {
			// 计算总金额
			this.installmentlist.forEach((item, index) => {
				   this.num++
			       this.sum += parseFloat(item.repaymentAmount)
			})
		}
	}
</script>

<style lang="less">
	// 分期详情最大盒子
	.installmentbox {
		width: 100%;
		background: rgb(227, 227, 227);
		font-size: 11px !important;

		// 产品信息
		.mobile {
			width: 100%;
			background-color: #fff;
			display: flex;
			padding: 40rpx;
			box-sizing: border-box;

			// 左边图片
			.ltpic {
				margin-right: 80rpx;

				image {
					width: 220rpx;
					height: 165rpx;
				}
			}

			.rtcan {
				.title {
					font-size: 12px;
					color: rgba(33, 37, 41, 1);
					text-align: left;
					vertical-align: top;
					font-weight: 400;
					margin-bottom: 12rpx;
					display: block;
				}

				text {
					color: rgba(166, 166, 166, 1);
					text-align: left;
					vertical-align: top;
					margin-right: 10rpx;
				}
			}
		}

		// 租金
		.rent {
			display: flex;
			width: 100%;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.05);
			text-align: center;
			justify-content: space-between;
			padding: 36rpx 60rpx;
			box-sizing: border-box;

			text {
				color: rgba(56, 56, 56, 1);
				font-size: 14px;
				font-weight: 400;
				line-height: 56rpx;
			}

			.wz {
				font-size: 12px;
				color: rgba(166, 166, 166, 1);
				line-height: 56rpx;
			}
		}

		// 分期方式
		.repayment {
			width: 100%;
			background-color: #fff;
			margin-top: 20rpx;
			text-align: center;
			padding-top: 20rpx;
			box-sizing: border-box;
			padding-bottom: 60rpx;

			.gap {
				display: flex;
				justify-content: space-between;
				padding: 0 70rpx;
				box-sizing: border-box;
				font-size: 14px;

				.gapwz {
					color: rgba(33, 37, 41, 0.6);
				}
			}

			.qishu {
				width: 100%;
				text-align: center;
				margin-top: 50rpx;
				font-size: 13px;

				text {
					display: block;
					flex: 1;
				}

				display: flex;
			}

			.date {
				margin-top: 20rpx;
				width: 100%;
				text-align: center;
				color: rgba(33, 37, 41, 0.6);

				text {
					display: block;
					flex: 1;
				}

				display: flex;
			}
		}

		// 返回
		.return {
			width: 100%;
			border-radius: 10px 10px 0px 0px;
			background: rgba(255, 255, 255, 1);
			margin-top: 314rpx;
			height: 140rpx;
			padding-top: 36rpx;
			box-sizing: border-box;

			a {
				text-decoration: none;
				color: #fff;
				display: block;
				width: 454rpx;
				margin: auto;
				height: 70rpx;
				border-radius: 5px;
				background: rgba(255, 141, 26, 1);
				text-align: center;
				line-height: 70rpx;
				font-size: 13px;
			}
		}
	}
</style>