ryx/pages/travel/submitOrder.vue

<template>
	<view class="">
		<view class="top">
			<view class="image">
				<image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" ></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}}
		</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"></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 class="time">
				<view>订单支付倒计时:</view><u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
			</view>
		</view>
		
	
		<view class="navbar">
		    <view class="navbar-item">
				总金额  ￥12929
			</view>
			<view class="navbar-item want" @click="Submit"  >
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				suborder:{},
				peoplelist:[]
			}
		},
		onLoad(options) {
			// JSON.parse(val.content);
			// console.log(options.suborder)
			let suborder=JSON.parse(options.suborder)
			// 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
				
			// },
			gocontract(){
				uni.navigateTo({
					url:"./contract"
				})
			},
			// 支付
			Submit(){
				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("支付成功");
				     },
				     fail: function (err) {
				         console.log('fail:' + JSON.stringify(err));
				         console.log("支付失败");
				     }
				 });
				 
				}).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;
		}
		.time{
			position: absolute;
			left: 0;bottom: 75rpx;
			width: 100%;
			background-color: #F4F4F4;
			border-radius: 16rpx 16rpx 0px 0px;
			display: flex;
			padding: 24rpx 0rpx 24rpx 30rpx;
		}
	}
	.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;
		.navbar-item{
			width: 50%;
			text-align: center;
		}	
		.want{
			border-left: 1rpx solid #FFFFFF;
		}
	}
</style>