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;">
					<text> {{orderinfo.status_text?orderinfo.status_text:''}}</text>
					<text v-show="orderinfo.refund_status!==0&&orderinfo.refund_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.number?orderinfo.number:''}} (人)
						</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" v-if="orderinfo.refund_status==0">
				<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">
				<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&&orderinfo.refund_status==0" @click="goAfterSale">
				<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&&orderinfo.refund_status!==0">
				<view class="navbariconbox">
					<image src="../../static/orderListicon/notepad.png" mode="aspectFill"></image>
				</view>
				<view class="">
					已申请退款
				</view>
			</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 class="navbar-item" @click="moveAfterDetail" v-if="status==5">
				<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=" + encodeURIComponent(JSON.stringify(this.orderinfo))
				})
			},
			goOrderDetail() {
				uni.navigateTo({
					url: "/pages/travel/travelDetails?id=" + this.good_id
				})
			},
			moveAfterDetail() {
				uni.navigateTo({
					url: "/pages/order/orderAfterSale?id=" + this.orderinfo.id
				})
			},
			buyAgin() {
				uni.navigateTo({
					url: "/pages/travel/travelDetails?id=" + this.orderinfo.good_id
				})
			},
			goguide() {
				uni.navigateTo({
					url: "./guide"
				})
			},

			moveGuide() {
				if (this.status == 1) {
					uni.showModal({
						title: "提示",
						content: "订单支付后可进入专属森林向导"
					})
					return
				} else {
					uni.navigateTo({
						url: "/pages/order/guide?muster=" + encodeURIComponent(JSON.stringify(this.orderinfo.plan))
					})
				}

			},
			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.redirectTo({
								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>