hwnc/pagesE/pages/renewal/renewal.vue

<template>
	<view class="container" :class="[AppTheme]">
		<view class="parcel_information" v-if="orderdeleti">
			<view class="mess_deitle_1">
				<view class="soil_mass">
					<image mode="aspectFill" :src="orderdeleti.soil_cover_pic"></image>
				</view>
				<view class="soil_mass_1">
					<view class="soil_mass_2">{{ orderdeleti.soil_name }} {{orderdeleti.subdivision.name}}</view>
					<view class="soil_mass_3">{{orderdeleti.subdivision.name}} {{orderdeleti.serve_name}}  
						{{orderdeleti.subdivision.area}} m²
					</view>
				</view>

			</view>
			<view class="mess_deitle_2">
				<view class="farm_name">续租服务</view>
				<view class="bor_solp"></view>
				<view class="box_form_1">
					<view class="titem" v-for="(item, index) in orderdeleti.period" :key="index">
						<view class="titems">
							<view class="titem_1">
								<view class="titem_2">{{item.periodname}}</view>
							</view>
							<view class="titem_3">

								<u-radio-group v-model="value" iconPlacement="right">
									<u-radio size="18" :labelDisabled="true" :label="item.content" labelSize='14'
										iconSize='11' :name="index" @change="radioChange"></u-radio>
								</u-radio-group>


							</view>

						</view>

					</view>


				</view>
			</view>


		</view>
		<view class="page-bottom">
			<view class="page-bottom_1">
				<view class="p-b-btn">
					<view class="setnt_inion_p1">合计:</view>
					<view class="setnt_inion_p2 text-neutral">￥{{ parseFloat(totalpricenum).toFixed(2) }}</view>
				</view>
			</view>
			<view class="action-btn-group"><button type="primary"
					class=" bg-linear-gradient action-btn no-border buy-now-btn" @click="settlement">立即支付</button>
			</view>
		</view>
		<payment ref="payment" :channel="6" :alipay="true" :weixinpay="true" :zhtpay="true"></payment>
	</view>
</template>

<script>
	import Landapi from '@/api/land/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				//顶部距离
				scrollTop: 0,
				orderdeleti: null,
				customstyle: {
					background: '#F4F6F8'
				},
				wxpay: '微信支付',
				yepay: '余额支付',
				servicemess: [],
				logo: '',
				name: '',
				value: '',
				totalpricenum: 0,
				serve_price: '',
				price: '',
				days: '',
				updaordermess: {},
				yuantotalprice: ''
			};
		},
		onLoad(options) {

			this.lookorderbyid(options.orderid);
		},

		methods: {
			radioChange(e) {
				let that = this;
				that.value = that.orderdeleti.period[e]['content'];
				that.days = that.orderdeleti.period[e]['days'];
				that.totalpricenums = parseFloat(that.price) + that.serve_price * that.days;
				that.totalpricenum = parseFloat(that.totalpricenums * (that.orderdeleti.level_radio / 100)).toFixed(2);
				that.yuantotalprice = parseFloat(that.totalpricenums);
			},

			//根据id获取订单信息
			lookorderbyid(orderid) {

				let that = this;
				let parms = {
					id: orderid
				};
				Landapi.renewal(parms).then(res => {
					console.log(res, "订单信息")
					if (res.status == 1) {
						that.orderdeleti = res.data;
						that.serve_price = res.data.serve_price;
						that.price = res.data.subdivision.price;
					} else {
						that.$api.msg(res.msg);
					}
				});
			},

			settlement() {
				let that = this
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['orderSuccess']], tmplIdsone, function() {
						that.settlement2()
					});
				} else {
					that.settlement2()
				}
			},


			// 结算订单
			settlement2() {
				var that = this;
				if (!that.days) {
					uni.showToast({
						title: "请选择续租时间",
						icon: "none"
					})
					return false
				}
				//土地id赋值
				that.updaordermess.soil_id = that.orderdeleti.soil_id;
				// 选中地块id
				that.updaordermess.subdivision_id = that.orderdeleti.subdivision_id;
				//订单金额
				that.updaordermess.order_money = that.totalpricenum;
				// 服务id
				that.updaordermess.service_id = that.orderdeleti.service_id;
				//订单号
				that.updaordermess.order_sn = that.orderdeleti.order_sn;
				that.updaordermess.type = 1;
				that.updaordermess.orderid = that.orderdeleti.id;
				// 租赁周期
				that.updaordermess.period_days = that.days;
				that.updaordermess.payprice = that.totalpricenum;
				that.updaordermess.money = that.totalpricenum;
				that.updaordermess.yuantotalprice = that.yuantotalprice
				if (that.updaordermess.id) {
					that.$refs.payment.payopen(that.updaordermess);
				} else {
					that.$paycenter.ct_renewal_order(that.updaordermess).then(res => {
						if (res.status === 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						} else {
							// 已授权,跳转去支付页面
							that.updaordermess.id = res.data;
							that.$refs.payment.payopen(that.updaordermess);
						}
					})
				}

			},

		}
	};
</script>
<style lang="scss">
	table {
		width: 100%;
		border-color: #DFE2E5;
		border-collapse: collapse;
		text-align: center;
		color: #303133;
	}

	table,
	th,
	td {
		border: 1px solid #999;
		padding: 10rpx;
	}

	.container {
		position: relative;
	}

	.head_backn {
		width: 100%;
		z-index: 99;
		padding: 20rpx 20rpx 0rpx 20rpx;

		.icon_view {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		// justify-content: center;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 140upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);

		.page-bottom_1 {
			display: flex;
			flex-direction: column;

			.p-b-btn {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 35rpx;
				width: 100%;
				height: 80upx;

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;
				}

				&.active,
				&.active .yticon {
					color: $tab-color-1;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}

			.page-bottom_2 {
				display: flex;
				justify-content: flex-start;
				font-size: 29rpx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			margin-left: 20upx;
			position: relative;

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
			}
		}
	}

	.parcel_information {
		padding-top: 20rpx;
	}

	.mess_deitle {
		width: 100%;
		padding: 30rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
		border-radius: 15rpx;
	}

	.mess_deitle_2 {
		width: 95%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;
		border-radius: 15rpx;
		margin-left: 2.5%;

		.farm_name_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.farm_name_2 {
				font-size: 38rpx;
			}

			.farm_name_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 28rpx;
				margin-right: 2vh;
			}
		}

		.titems_one {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.titems_one_1 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 20rpx;

				image {
					background-color: #DFE2E5;
					width: 150rpx;
					height: 150rpx;
				}

				.titems_one_2 {
					margin-left: 2vh;
					font-size: 30rpx;
					font-weight: 600;
				}
			}


			.titems_one_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 4vh;
				font-size: 30rpx;
				color: #999;
			}
		}
	}

	.mess_deitle_3 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.farm_name_2 {
				font-size: 38rpx;
			}

			.farm_name_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 28rpx;
				margin-right: 2vh;
			}
		}

		.tab_vie {

			text-align: center;
			padding: 30rpx 0;

		}
	}


	.mess_deitle_4 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_4 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.farm_name_5 {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				font-size: 32rpx;
			}

			.farm_name_6 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 26rpx;
				margin-right: 2vh;
			}
		}

	}

	.mess_deitle_1 {
		width: 90%;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
		margin-left: 2.5%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.soil_mass {

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.soil_mass_1 {
			margin-left: 2vh;
               display: flex;
               justify-content: flex-start;
               align-items: flex-end;
               flex-wrap: wrap;
			.soil_mass_2 {
				color: #3f3f3f;
				font-size: 32rpx;
				font-weight: 600;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.soil_mass_3 {
				font-size: 28rpx;
				color: #999;
				padding: 30rpx 0;
			}

			.soil_mass_4 {
				background-color: palegreen;
				width: 90rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 26rpx;
				color: #fff;
			}
		}

		.soil_mass_5 {
			margin-left: 9vh;
			font-weight: 600;
		}
	}

	.order_item {
		width: 100%;
		margin: 25rpx 0;
		padding: 30rpx 0;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	}

	.farm_name {
		font-size: 32rpx;
		color: #000;
		padding: 0 20rpx;
	}

	.bor_solp {
		background-color: #999;
		height: 1rpx;
		width: 100%;
		transform: scaleY(0.3);
		margin: 25rpx 0;
	}

	.order_detil {
		padding: 0 20rpx;
		text-align: center;
	}

	.seed_item_thumbnail {
		object-fit: cover;
		border-radius: 10rpx;
		width: 100%;
		height: 300rpx;
	}

	.right_deile {
		width: 100%;
	}

	.article_title_p2 {
		font-size: 26rpx;
		color: #000;
		margin: 15rpx 0;
	}

	.box_form {
		margin: 0 5%;
		width: 95%;
	}

	.box_form_1 {
		padding: 20rpx;

		.titem {
			display: flex;
			flex-direction: column;

			.titems {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;

				.titem_1 {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						width: 150rpx;
						height: 150rpx;
					}

					.titem_2 {
						margin-left: 2vh;
						font-size: 32rpx;

					}
				}

				.titem_3 {
					margin-left: 1vh;
				}
			}


			.titem_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 2vh;
				color: #999;
				font-size: 28rpx;

				.titem_4 {}

				.titem_5 {
					size: 18rpx;
				}
			}
		}
	}

	.u-border-bottom:after,
	.u-border-left:after,
	.u-border-right:after,
	.u-border-top-bottom:after,
	.u-border-top:after,
	.u-border:after {
		border-bottom-color: #999;
	}

	.tab_vie {
		padding-left: 15rpx;
		padding-right: 15rpx;

		.theard {
			display: flex;
			padding: 10rpx;
			justify-content: space-evenly;
			// background-color: #d5d5d5;
		}

		.titem {
			display: flex;
			padding-top: 25rpx;
			font-size: 26rpx;
			color: #767676;
			justify-content: space-evenly;

			.titem_1 {

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
		}

		.td {
			width: 25%;
			text-align: center;
		}
	}

	.all_box {
		padding: 0 5%;
		background-color: #ffffff;

		.time_1 {
			float: right;
			margin-top: 20px;
			color: #999;
			font-size: 25rpx;

		}

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}
		}
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 26rpx;
		margin: 15rpx 0;
	}

	.u-order-time {
		font-size: 26rpx;
		color: #000;
	}

	.imgitem {
		width: 120rpx;
		height: 120rpx;
	}

	.wl_statui {
		color: #2979ff;
		width: 100%;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		font-size: 22rpx;
		background-color: rgba(41, 121, 255, 0.2);
		line-height: 27rpx;
	}
</style>