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}}
					</view>
					<view class="" style="font-size: 22rpx;margin-top: 28rpx;">
					订单号  {{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}}
						</view>
						<view class="" style="margin: 20rpx 0 20rpx;font-size: 22rpx;color: #333333;">
							日期：{{orderinfo.start_at}} ~ {{orderinfo.end_at}}
						</view>
						<view class="" style="color: #333333;">
							<!-- 标间床位 1人 -->
							<text >{{orderinfo.room.name}}</text>
							<text style="margin-left:160rpx ;">
								x {{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}}
						</view>
						<view class="" >
						合计	<text style="font-size: 36rpx;font-weight: 600;color: #333333;">￥{{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;">
						<image src="../../static/orderListicon/user@2x.png" mode="widthFix"></image>
						<text class="">
							{{item.name}}
						</text>
					</view>

					<view class="listIcon" @click="goaggMes">
						<image src="../../static/orderListicon/mobile@2x.png" mode="widthFix"></image>
						<text class="">
							{{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}}</view>
					<view class="" style="margin: 30rpx 0;">证件类型：{{item.certificate_type_text}}</view>
					<view class="">性别：{{item.gender_text}}</view>
					<view class="" style="margin: 30rpx 0;">证件号码：{{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="widthFix"></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">
				<view class="navbar-item" @click="goafter" v-if="state==1">
					<image src="../../static/orderListicon/login.png" mode="heightFix"></image>
					<view class="">
						申请退款
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="navbar-item">
					<image src="../../static/orderListicon/bookmark.png" mode="heightFix"></image>
					<view class="" @click="goguide">
						专属森林向导
					</view>
				</view>
			</view>
			
			<!-- 待付款 -->
			<view class="navbar" v-if="state==0">
				<view class="navbar-item">
					<image src="../../static/orderListicon/box-cancel.png" mode="heightFix"></image>
					<text class="">
						取消订单
					</text>
				</view>
				<view class="line">
					
				</view>
				<view class="navbar-item">
					<image src="../../static/orderListicon/notepad.png" mode="heightFix"></image>
					<text class="">
						去支付
					</text>
				</view>
				<view class="line">
					
				</view>
				<view class="navbar-item">
					<image src="../../static/orderListicon/bookmark.png" mode="heightFix"></image>
					<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>
		export default{
			data(){
				return{
					// 0待付款 1待出行 2退框
					state:0,
					orderinfo:{}
				}
			},
			onLoad(options) {
				// if(options.id==1){
				// 	this.state=0
				// }if(options.id==2){
				// 	this.state=1
				// }if(options.id==3){
				// 	this.state=2
				// }
				this.init(options.id)
			},
			methods:{
				init(id){
					uni.$u.http.post('/api/order/show',{order_id:id},{
						custom: {
							auth: true
						}
					}).then((res) => {
						console.log(res)
						this.orderinfo=res
					}).catch((err) => {
						console.log( err)
					})
				},
				goguide(){
					uni.navigateTo({
						url:"./guide"
					})
				},
				// 退款
				goafter(){
					uni.navigateTo({
						url:"./applyAfterSale"
					})
				}
			}
		}
	</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;
			}
			image{
				width: 24rpx;
				margin-right: 10rpx;
			}
		}
	}
	.travel{
		margin:0 60rpx;
		.travelList{
			display: flex;
			justify-content: space-between;
			image{
				width: 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;
			}
		}
		.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;
			image{
				height: 28rpx;
				margin-right: 10rpx;
			}
		}
	}
	</style>