ryx/pages/travel/submitOrder.vue

<template>
	<view class="">
		<view class="top">
			<view class="image">
				<image :src="suborder.cover_picture" mode="aspectFill"></image>
				<!-- <image :src="suborder.cover_picture" ></image> -->
			</view>
			<view class="">
				<view class="" style="font-size: 32rpx;font-weight: 600;">
					{{suborder.name}}
				</view>
				<view class="" style="font-size: 28rpx;margin-top: 20rpx;">
					日期：{{suborder.day}}
				</view>
			</view>
		</view>
		<view class="" style="padding: 0 30rpx;color: #666666;">
			<!-- 夕阳红康养团是为中老年特别定制的康养方案这个团 非常好 -->
			{{suborder.subtitle?suborder.subtitle:''}}
		</view>

		<view class="suborder">
			<view class="name">
				出行人姓名：<text v-for="(item,index) in peoplelist" :key="index" style="margin: 0 10rpx;">{{item}}</text>
			</view>
			<view class="contract">
				<u-cell-group>
					<u-cell title="合同预览" isLink url="./contract" :titleStyle="{'font-weight': 'bold'}" size="large">
					</u-cell>
				</u-cell-group>
			</view>
			<view class="checkbox">
				<u-checkbox-group v-model="agree" size="32" iconPlacement="right" placement="row"
					>
					<u-checkbox activeColor="#31866F" inactiveColor="#0A243F" :name="item.name" :checked="checked" @change="checked=!checked"></u-checkbox>
				</u-checkbox-group>
				<view class="text">
					我已阅读并同意报名须知 <text style="text-decoration: underline;padding: 6rpx;" @click="notification">安全告知
					</text> 和
					<text style="text-decoration: underline;padding: 6rpx;" @click="Policy">隐私政策</text>
				</view>
			</view>
			
		</view>


		<view class="navbar">
				<u-count-down :time="2* 60 * 60 * 1000" format="HH:mm:ss"  @change="onChange">
					<view class="time">
						<text>订单支付倒计时:</text>
					            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
					            <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
					            <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
					        </view>
				</u-count-down>
			<view class="navbar-item">
				总金额 ￥{{suborder.total}}
			</view>
			<view class="navbar-item want" @click="Submit">
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				suborder: {},
				peoplelist: [],
				checked:false,
				timeData:2
			}
		},
		onLoad(options) {
			that=this
			// JSON.parse(val.content);
			// console.log(options.suborder)
			console.log(options)
			let sub = decodeURIComponent(options.suborder)
			let suborder=JSON.parse(sub)
			// this.init(suborder)
			this.suborder = suborder
			console.log(suborder)
			this.suborder.people.forEach((item, index) => {
				this.peoplelist.push(item)
			})

		},

		// onShow() {
		// 	const pages= getCurrentPages();//获取应用页面栈
		// 	let aaa= pages[pages.length - 1].options//获取页面传递的信息
		// 	console.log(aaa)
		// },
		methods: {
			// init(val){
			// 	this.suborder=val
			// 	let list=[]
			// 	this.suborder.forEach((item,index)=>{
			// 		list.push(item.name)
			// 	})
			// 	this.peoplelist=list

			// },
			onChange(e) {
			                this.timeData = e
			            },
			checkboxChange(n) {
				console.log('change', n);
			},
			gocontract() {
				uni.navigateTo({
					url: "./contract"
				})
			},
			// 支付

			Submit(){
				if(!this.checked){
					this.$toast("请阅读安全告知和隐私政策")
					return
				}
				uni.$u.http.post('/api/order/config',{
					order_id:this.suborder.order_id,
				}).then(res=>{
					console.log(res)
				  uni.requestPayment({
				     provider: 'wxpay',    //支付类型-固定值
				     timeStamp: res.timeStamp, // 时间戳（单位：秒）
				     nonceStr: res.nonceStr, // 随机字符串
				     package: res.package, // 固定值
				     signType: res.signType, //固定值
				     paySign: res.paySign, //签名
				     success: function (res) {
				         // console.log('success:' + JSON.stringify(res));
				         console.log("支付成功");
						 uni.redirectTo({
						 	url:"/pages/order/successpay?id="+that.suborder.order_id
						 })
				     },
				     fail: function (err) {
				        uni.redirectTo({
				        	url:"/pages/order/orderDetail?id="+that.suborder.order_id
				        })
				     }
				 });
				 
				}).catch(err=>{
					console.log(err)
					uni.showToast({
						icon:"error",
						title:err.message,
					})
				})
			},
			notification() {
				uni.navigateTo({
					url: "/pages/userCenter/notification"
				})
			},
			Policy() {
				uni.navigateTo({
					url: "/pages/userCenter/Policy"
				})
			}
		}
	}
</script>

<style lang="less">
	.u-cell__body--large.data-v-913eaa32 {
		padding: 48rpx 0 !important;
		box-sizing: border-box;
	}

	page {
		background-color: #F4F4F4;
		font-size: 30rpx;
	}

	.checkbox {
		display: flex;
		padding: 30rpx;

		.text {
			margin-left: 10rpx;
			font-size: 26rpx;
		}
	}

	.top {

		margin-top: 32rpx;
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		align-items: center;
		margin-bottom: 20rpx;

		.image {
			margin-right: 20rpx;

			image {
				width: 180rpx;
				height: 110rpx;
			}
		}
	}

	.suborder {
		position: relative;
		margin-top: 30rpx;
		padding: 48rpx 30rpx;
		background-color: #fff;
		border-radius: 0px 56rpx 0px 0px;
		height: calc(100vh - 323rpx);
		box-sizing: border-box;

		.name {
			// padding: 30rpx;
			margin-bottom: 48rpx;
		}

		.contract {
			margin-top: 50rpx;
		}

		
	}

	.navbar {
		margin-top: 104rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		left: 0;
		position: fixed;
		width: 100%;
		height: 104rpx;
		background: #1E9F6A;
		border-radius: 16rpx 16rpx 0px 0px;
		color: #ffffff;
		z-index: 999;
		.navbar-item {
			width: 50%;
			text-align: center;
		}

		.want {
			border-left: 1rpx solid #FFFFFF;
		}
		.time {
			color:red;
			position: absolute;
			left: 0;
			bottom: 105rpx;
			width: 100%;
			background-color: #F4F4F4;
			border-radius: 16rpx 16rpx 0px 0px;
			display: flex;
			padding: 24rpx 0rpx 24rpx 30rpx;
			box-sizing: border-box;
		}
	}
</style>