ryx/pages/order/orderDetails.vue

<template>
		<view class="orderDetails">
			<view class="list" @click="goOrderDetail">
				<view class="list-top">
					<view class="" style="font-size: 36rpx;font-weight: bold;color: #1E9F6A;">
						<!-- 待付款   --> {{orderinfo.status_text?orderinfo.status_text:''}}
					</view>
					<view class="" style="font-size: 22rpx;margin-top: 28rpx;">
						订单号 {{orderinfo.code?orderinfo.code:''}}
					</view>
				</view>
				<view class="listcenter">
					<view class="l">
						<view class="" style="font-size: 36rpx;font-weight: 600;color: #333333;">
							<!-- 夕阳红康养团7日游 -->{{orderinfo.good_name?orderinfo.good_name:''}}
						</view>
						<view class="" style="margin: 20rpx 0 20rpx;font-size: 22rpx;color: #333333;">
							日期：{{orderinfo.start_at?orderinfo.start_at:''}} ~ {{orderinfo.end_at?orderinfo.end_at:''}}
						</view>
						<view class="" style="color: #333333;">
							<!-- 标间床位 1人 -->
							<text>{{orderinfo.room.name?orderinfo.room.name:''}}</text>
							<text style="margin-left:160rpx ;">
								x {{orderinfo.cohabits.length?orderinfo.cohabits.length:''}} (人)
							</text>
						</view>

					</view>

					<view class="r">
						<view class="">
							<image :src="orderinfo.cover_picture" mode="widthFix"></image>
						</view>
						<view class="" style="margin: 28rpx 0 16rpx;">
							￥{{orderinfo.price?orderinfo.price:''}}
						</view>
						<view class="">
							合计 <text
								style="font-size: 36rpx;font-weight: 600;color: #333333;">￥{{orderinfo.amount?orderinfo.amount:''}}</text>
						</view>
					</view>
				</view>

				<view class="list-bottom">
					<view style="margin-top: 10rpx;" v-for="item,index in orderinfo.travelers" :key="index">
						<view class="listIcon" style="margin-bottom: 20rpx;">
							<view class="listIconbox">
								<image src="../../static/orderListicon/user@2x.png" mode="aspectFit"></image>
							</view>
							
							<text >
								{{item.name?item.name:''}}
							</text>
						</view>

						<view class="listIcon" @click="goaggMes">
							<view class="listIconbox">
								<image src="../../static/orderListicon/mobile@2x.png" mode="aspectFit"></image>
							</view>
							
							<text class="">
								{{item.phone?item.phone:''}}
							</text>
						</view>
					</view>
				</view>
			</view>

			<view class="travel">
				<view class="travelList">
					<view class="" style="font-size: 32rpx;font-weight: 600;color: #333333;margin-bottom: 70rpx;">
						出行人列表
					</view>
					<image src="../../static/orderListicon/users02@2x.png" mode="widthFix"></image>
				</view>
				<view class="" v-for="item,index in orderinfo.travelers" :key="index">
					<view class="">{{item.name?item.name:''}}</view>
					<view class="" style="margin: 30rpx 0;">
						证件类型：{{item.certificate_type_text?item.certificate_type_text:''}}</view>
					<view class="">性别：{{item.gender_text?item.gender_text:''}}</view>
					<view class="" style="margin: 30rpx 0;">证件号码：{{item.certificate_no?item.certificate_no:''}}</view>
				</view>
			</view>

			<view class="room">
				<view class=" title">
					<view class="" style="font-size: 32rpx;font-weight: 600;color: #333333;">
						同住人列表
					</view>
					<image src="../../static/orderListicon/users02@2x.png" mode="aspectFit"></image>
				</view>
				<view class="roomList" v-for="item,index in orderinfo.cohabits" :key="index">
					<view class="">
						同住人{{index+1}}
					</view>
					<view class="">
						{{item}}
					</view>
				</view>
			</view>

			<!-- 待出行 -->
			<view class="navbar" v-if="state==1">
				<view class="navbar-item" @click="goafter" >
					<image src="../../static/orderListicon/login.png" mode="aspectFill"></image>
					<view class="">
						申请退款
					</view>
				</view>
				<view class="line">

				</view>
				<view class="navbar-item">
					<image src="../../static/orderListicon/bookmark.png" mode="aspectFill"></image>
					<view class="" @click="goguide">
						专属森林向导
					</view>
				</view>
			</view>

			<!-- 待付款 -->
			<view class="navbar" >
				<view class="navbar-item"  @click="cancelOrder" v-if="status==1">
					<view class="navbariconbox">
						<image src="../../static/orderListicon/box-cancel.png" mode="aspectFill"></image>
					</view>
					<text class="">
						取消订单
					</text>
				</view>
				<view class="line"  v-if="status==1">

				</view>
				<view class="navbar-item" @click="goPay" v-if="status==1">
					<view class="navbariconbox">
						<image src="../../static/orderListicon/notepad.png" mode="aspectFill"></image>
					</view>
					<text class="">
						去支付
					</text>
				</view>
				<view class="navbar-item" @click="buyAgin" v-if="status==4||status==3||status==5">
					<view class="navbariconbox">
						<image src="../../static/orderListicon/notepad.png" mode="aspectFill"></image>
					</view>
					<text class="">
						再次预订
					</text>
				</view>
				<view class="navbar-item"  v-if="status==2" @click="goAfterSale">
					<view class="navbariconbox">
						<image src="../../static/orderListicon/notepad.png" mode="aspectFill"></image>
					</view>
					<text class="">
						申请退款
					</text>
				</view>
				<view class="line"  v-if="status==1||status==2">

				</view>
				<view class="navbar-item" @click="moveGuide"  v-if="status==1||status==3||status==2">
					<view class="navbariconbox">
						<image src="../../static/orderListicon/bookmark.png" mode="aspectFill"></image>
					</view>
					<text class="">
						专属森林向导
					</text>
				</view>
			</view>

			<!-- 已退订 已完成 -->
			<!-- <view class="navbar"  v-if="state==2">
				<view class="navbar-item">
					<image src="../../static/orderListicon/login.png" mode="heightFix"></image>
					<text class="">
						退款详情
					</text>
				</view>
			</view> -->
		</view>
	</template>

	<script>
		let that
		export default {
			data() {
				return {
					// 0待付款 1待出行 2退框
					state: 0,
					orderinfo: {},
					id:0,
					status:'',
					good_id:''
				}
			},
			onLoad(options) {
				// if(options.id==1){
				// 	this.state=0
				// }if(options.id==2){
				// 	this.state=1
				// }if(options.id==3){
				// 	this.state=2
				// }
				that=this
				this.id=Number(options.id)
				this.init(options.id)
			},
			methods: {
				init(id) {
					this.$showLoadding("加载中")
					uni.$u.http.post('/api/order/show', {
						order_id: id
					}, {
						custom: {
							auth: true
						}
					}).then((res) => {
						uni.hideLoading()
						// console.log(res)
						this.orderinfo = res
						this.status=res.status
						this.good_id=res.good_id
						// console.log(this.status,7788)
					}).catch((err) => {
						console.log(err)
					})
				},
				goAfterSale(){
					uni.navigateTo({
						url:"/pages/order/applyAfterSale?obj="+JSON.stringify(this.orderinfo)
					})
				},
				goOrderDetail(){
					uni.navigateTo({
						url:"/pages/travel/travelDetails?id="+this.good_id
					})
				},
				buyAgin(){
					uni.navigateTo({
						url:"/pages/travel/travelDetails?id="+this.orderinfo.good_id
					})
				},
				goguide() {
					uni.navigateTo({
						url: "./guide"
					})
				},
				// 退款
				goafter() {
					uni.navigateTo({
						url: "./applyAfterSale"
					})
				},
				moveGuide(){
					if (this.status == 1) {
						uni.showModal({
							title: "提示",
							content: "订单支付后可进入专属森林向导"
						})
						return
					} else {
						uni.navigateTo({
							url: "/pages/order/guide"
						})
					}
				
				},
				goPay(){
					uni.$u.http.post('/api/order/config',{
						order_id:that.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) {
							 uni.navigateTo({
							 	url:"/pages/order/successpay?id"+that.id
							 })
					         // 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,
						})
					})
				},
				cancelOrder() {
					uni.showModal({
						title: "提示",
						content: "是否取消订单?",
						success:(res)=> {
							if (res.confirm) {
								that.$showLoadding("加载中")
								uni.$u.http.post('/api/order/cancel', {
									order_id: that.id
								}, {
									custom: {
										auth: true
									}
								}).then((res) => {
									uni.hideLoading()
										// uni.hideLoading()
										that.$toast("取消成功")
										setTimeout(() => {
											uni.navigateTo({
												url:"/pages/order/order"
											})
										}, 500)
								}).catch((err) => {
									console.log(err)
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}

					})

				}
			}
		}
	</script>

	<style lang="less">
		page {
			background-color: #F4F4F4;
			font-size: 28rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
		}

		.list {
			box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.02);
			border-radius: 16rpx 16rpx 16rpx 56rpx;
			background-color: #FFFFFF;
			// padding: 30rpx;
			margin: 57rpx 30rpx;

			.list-top {

				padding-bottom: 20rpx;
				border-bottom: 1px solid #efefef;
				padding: 30rpx;
			}

			.listcenter {
				display: flex;
				justify-content: space-between;
				// margin: 24rpx 0 40rpx;
				padding: 30rpx;

				.r {
					text-align: right;

					.image {
						// width: 140rpx;
					}

					image {
						width: 140rpx;
						height: 84rpx;
						border-radius: 6rpx;
					}
				}

			}

			.list-bottom {
				border-top: 1rpx solid #E3E3E3;
				border-radius: 0px 0px 16rpx 56rpx;
				background-color: #FBFBFB;
				padding: 30rpx 0 30rpx 60rpx;
				color: #1E9F6A;
				font-weight: 600;

				.listIcon {
			 	display: flex;
					align-items: center;
					font-size: 26rpx;
					.listIconbox{
						width: 20rpx;
						height: 24rpx;
						margin-right: 10rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					
				}

				
			}
		}

		.travel {
			margin: 0 60rpx;

			.travelList {
				display: flex;
				justify-content: space-between;

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

		.room {
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #E3E3E3;
				padding: 30rpx;
				margin: 50rpx 30rpx 30rpx;

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

			.roomList {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 60rpx;

			}

			margin-bottom:200rpx;
		}

		.navbar {
			// margin-top: 104rpx;
			width: 100%;
			height: 104rpx;
			background: #1E9F6A;
			border-radius: 16rpx 16rpx 0px 0px;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;

			.line {
				width: 1px;
				height: 24rpx;
				background-color: #FFFFFF;
			}

			.navbar-item {
				display: flex;
				color: #FFFFFF;
				flex: 1;
				align-items: center;
				justify-content: center;
				.navbariconbox{
					height: 28rpx;
					width: 28rpx;
					margin-right: 10rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				
			}
		}
	</style>