RiyueGorge/pages/travel/travelPeople.vue

<template>
	<view class="curpage">
		<view class="top">
			<view class="image">
				<!-- <image src="https://t38.9026.com/uploads/golf/images/2022-05-31/20220531601652.png" mode="widthFix"></image> -->
				<image :src="goodsInfo.cover_picture" ></image>
			</view>
			<view class="">
				<view class="" style="font-size: 32rpx;font-weight: 600;">
					<!-- 夕阳红康养团7日游 -->
					{{goodsInfo.name}}
				</view>
				<view class="" style="font-size: 28rpx;margin-top: 20rpx;">
						日期：{{day}}
				</view>			
			</view>
		</view>
		<view class="house">
			<view class="" style="margin-bottom: 20rpx;font-weight: bold;font-size: 34rpx;">
				入住房型
			</view>
			<view class="houseType">
				<view :class="houseType==index?'houseType-item-active':'houseType-item'" v-for="item,index in houselist" @click="chooseHouse(index,item.price,item.room_id)">
					<view class="image">
						<image :src="item.room_picture" @click="previewImg(item.img,index)"></image>
						<view class="surplus">
							剩余 {{item.number}}
						</view>
					</view>
					<view class="text" >
						{{item.room_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="houseNumber">
			<view class="" style="margin-bottom: 20rpx;font-weight: bold;font-size: 34rpx;">
				房间数量
			</view>
			<view class="housePrice">
				<view class="" style="font-size: 32rpx;color: #666666;">
					套餐标准价格
				</view>
				<view class="" style="font-weight: bold;">
					<!-- ￥12399 -->
					￥{{roomPrice}}
				</view>
				<u-number-box v-model="number" @change="valChange"  bgColor="#ffffff"></u-number-box>
			</view>
		</view>
		
		<view class="travel">
			<u-cell title="出行人" isLink size="large" :border="false" :titleStyle="{color:'#666666'}"  value="选择出行人" @click="choosePeople"></u-cell>
			<u-cell-group :border="false">
				<u-cell v-for="(item,index) in travelers" :title="item.name"  size="large" :border="false" :value="item.phone"></u-cell>
			</u-cell-group>
			
		</view>
		
		<view class="Roommate">
			<view class="roommate-top">
				<view class="">
					同住人
				</view>
				<view class="flex">
					<view :class="chooseroommate==1?'flex-item-active':'flex-item'" @click="chooseroommate=1">
						随机安排
					</view>
					<view :class="chooseroommate==2?'flex-item-active':'flex-item'" @click="chooseroommate=2">
						有同住人
					</view>
				</view>
			</view>
			<view class="travelList" v-if="chooseroommate==2">
				<view class="" style="margin: 20rpx 0;" v-for="(item,index) in cohabits" :key="index">
					<u--input placeholder="输入同住人姓名" border="bottom" clearable  v-model="cohabits[index]" ></u--input>
					
				</view>
				<view class="addpeople" @click="addcohabits">
					增加同住人
				</view>
			</view>
		</view>
		
		<view class="remarks">
			<view class="text">
				日期、房型相同的情况下可选择其他出行人同住，但有时候会出现人数不够分配的情况，会安排同性出行人同住。
			</view>
		</view>
		
		
		
       <view class="navbar">
		   <view class="price">
		   	<view class="">
		   		总金额
		   	</view>
			<view class="" style="margin: 0 10rpx 0 40rpx;"  @click="details = true">
				￥12921
			</view>
			<u-icon name="arrow-up" color="#ffffff"  @click="details = true"></u-icon>
		   </view>
		    
			<view class="next" @click="Submit"  >
				提交订单
			</view>
	    </view>
		

		<u-popup :show="details" @close="details = false" duration="0" @open="open" :overlay="false" :customStyle="{'margin-bottom':'104rpx','background':' #F9F9F9 ','height':'104rpx'}">
            <view class="order">
                <view class="icon" @click="details = false">
                	<u-icon name="arrow-down"></u-icon>
                </view>
				<view class="orderDetails">
					<view class="">
						数量
					</view>
					<view class="">
						<text>1人</text>
						<text>￥12399</text>
					</view>
				</view>
            </view>
		</u-popup>

		<view >
				<u-modal :show="showMoadl" :title="title" confirmText="知道了" confirmColor="#ffffff" @confirm="showMoadl=false">
					<view class="">
						关注日月峡公众号
						<text style="color: #408B68;">日月峡</text>
							及时获取出行信息
					</view>
					
				</u-modal>
			</view>
	</view>	
</template>

<script>
	export default {
		data(){
			return{
				// 房型选择
				houseType:0,
				state:0,
				show:0,
				name:'',
				// 房间类型
				houselist:[
					// {name:"多人间(上铺)",id:0,img:"../../static/house.jpg"},
					// {name:"三人间(3人)",id:1,img:"../../static/house.jpg"},
					// {name:"标间(2人)",id:2,img:"../../static/house.jpg"},
					// {name:"大床房(2人)",id:3,img:"../../static/house.jpg"},
				],
				// 房间价格
				roomPrice:'',
				// 房间数量
				number: 0,
				// 选择样式
				active:false,
             showMoadl:true,
			title:'提示',
			// 添加同住人/随机
			chooseroommate:1,
			// 金额详情
			details:false,
			goodsInfo:{},
			days:{},
			// 日期
			day:"",
			// 出行人
			travelers:[],
			// 同住人
			cohabits:[],
			room_id:0
			}
		},
		onLoad(options) {
			let newdays=JSON.parse(options.days)
			this.days=newdays
			
			let goodsInfo=JSON.parse(options.goodsinfo)
			this.goodsInfo=goodsInfo
			// console.log(options)
			// this.days=days
			// 
			// console.log(this.days,this.goodsInfo)
			this.init()
		},
		onShow() {
			console.log(this.$store.state.peopleList)
			this.travelers=this.$store.state.peopleList
		},
		methods:{
			init(){
				let newdays=this.days
				console.log(newdays)
				let start=newdays.start_at.slice(0,10)
				let  end=newdays.end_at.slice(0,10)
				this.day=`${start}~${end}`
				this.houselist=newdays.rooms
				console.log(this.day,this.houselist)
			},
			// 选择出行人
			choosePeople(){
				uni.navigateTo({
					url:"/pages/peopleList/peopleList",
				})
			},
			// 查看出行人
			edit(item){
				let info=JSON.stringify(item)
				uni.navigateTo({
					url:`/pages/peopleList/addPeople?info=${info}&state=0`
				})
			},
			// 点击放大图片
			previewImg(url,index){
				let imgUrl=[]
				imgUrl.push(url)
				console.log(imgUrl)
				uni.previewImage({
						current: imgUrl[0],
						urls: imgUrl,
					});
			},
			// 选择房间数量
			valChange(e) {
				// console.log(e)
				// console.log(Number(this.roomPrice) * e.value)
				this.roomPrice=Number(this.roomPrice) * e.value
			},
			// 添加同住人e
			addcohabits(){
				this.cohabits.push("")
				console.log(this.cohabits)
			},	
			chooseHouse(index,price,id){
				this.houseType=index
				this.roomPrice=price
				this.room_id=id
				console.log(index,price,id,"<=============")
			},
			// 提交订单
			Submit(){
				let suborder={}
				suborder.good_id=this.goodsInfo.id
				suborder.start_at=this.day.slice(0,10)
				suborder.room_id=this.room_id
				suborder.number=this.number
				suborder.travelers=[]
				suborder.cohabits=this.cohabits
				suborder.cohabit_type=this.chooseroommate
				this.travelers.forEach((item,index)=>{
					// console.log(item.id)
					suborder.travelers.push(item.id)
				})
				console.log(suborder,"<============提交订单的需要")
				uni.$u.http.post('/api/order/add',suborder,{
					custom: {
						auth: true
					}
				}).then((res) => {
					// console.log(res)
					suborder.name=this.goodsInfo.name
					suborder.subtitle=this.goodsInfo.subtitle
					suborder.day=this.day
					suborder.people=[]
					this.travelers.forEach((item,index)=>{
						suborder.people.push(item.name)
					})
					uni.navigateTo({
						url:`/pages/travel/submitOrder?suborder=${JSON.stringify(suborder)}`
					})
				}).catch((err) => {
					console.log( err)
					uni.showToast({
						icon:"error",
						title:err.message,
					})
				})
				
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-size: 32rpx;
	}
	.curpage{
		.top{
			margin-top: 32rpx;
			padding:10rpx 30rpx;
			display: flex;
			align-items: center;
			align-items: center;
			// background-color: #fff;
			margin-bottom: 30rpx;
			.image{
				margin: 20rpx;
				image{
					width: 180rpx;
					height: 110rpx;
				}
			}
		}
		.house{
			border-radius: 16rpx 56rpx 8rpx 8rpx;
			background-color: #FFF;
			padding: 50rpx 30rpx 40rpx;
			box-sizing: border-box;
			.houseType{
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				.houseType-item-active{
					width: calc(90% / 3);
					padding: 10rpx;
					.image{
						width:100%;
						position: relative;
						image{
							box-sizing: border-box;
							// width: 100%;
							width: 100%;
							height: 208rpx;
							border-radius: 8rpx 24rpx 8rpx 24rpx;
							border: 2rpx solid rgba(30, 159, 106, 1);
						}
					}
					.text{
						font-size: 26rpx;
						text-align: center;
						color: #1E9F6A;
						
					}
				}
				
				.houseType-item{
					width: calc(90% / 3);
					padding: 10rpx;
					.image{
						width:100%;
						position: relative;
						image{
							width: 100%;
							height: 208rpx;
							border-radius: 8rpx 24rpx 8rpx 24rpx;
						}
					}
					.text{
						font-size: 26rpx;
						text-align: center;
						color: #101010
;
						
					}
				}
				
				.surplus{
					width: 95rpx;
					height: 34rpx;
					background: #030303;
					box-shadow: 0px 2rpx 11rpx 0px rgba(30, 159, 106, 0.22);
					border-radius: 2rpx 12rpx 2rpx 12rpx;
					opacity: 0.39;
					font-size: 20rpx;
					color: #FFFFFF;
					text-align: center;
					position: absolute;
					top: 0rpx;
					left: 30%;
				}
			}
		}
		.houseNumber{
			background-color: #ffffff;
			margin: 20rpx 0;
			padding: 50rpx 30rpx 40rpx;
			.housePrice{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		.travel{
			// display: flex;
			// justify-content: space-between;
			background-color: #ffffff;
			padding:50rpx 0rpx;
		}
		.Roommate{
			.roommate-top{
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
			}
			.travelList{
				padding: 0 20rpx;
			}
			padding:50rpx 0rpx;
			background-color: #ffffff;
			margin: 20rpx 0;
			.flex{
				display: flex;
				.flex-item{
					margin: 0 20rpx;
					width: 176rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #F4F4F4;
					border-radius: 2rpx 30rpx 2rpx 30rpx;
					font-size: 30rpx;
					text-align: center;
				}
				.flex-item-active{
					box-sizing: border-box;
					width: 176rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: rgba(30, 159, 106, 0.1);
					border-radius: 2rpx 30rpx 2rpx 30rpx;
					border: 1rpx solid #1E9F6A;
					font-size: 30rpx;
					color: #1E9F6A;
					text-align: center;
				}
			}
			.addpeople{
				margin: 40rpx 20rpx 0;
				width: 176rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #F4F4F4;
				border-radius: 2rpx 30rpx 2rpx 30rpx;
				font-size: 30rpx;
				text-align: center;
				margin-left: 490rpx;
			}
		}
		.remarks{
			background-color: #ffffff;
			padding:50rpx 30rpx;
			.text{
				background-color: #F4F4F4;
				padding: 40rpx 24rpx;
				font-size: 32rpx;
			}
			margin-bottom: 104rpx;
		}
		.navbar{
			z-index: 9999;
			box-sizing: border-box;
			padding: 0 30rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 104rpx;
			background: #1E9F6A;
			border-radius: 16rpx 16rpx 0px 0px;
			color: #ffffff;
			position: fixed;
			bottom: 0;left: 0;
			.next{
				width: 50%;
				// background-color: pink;
				text-align: center;
				border-left: 1rpx solid #ffffff;
			}
			.price{
				display: flex;
			}
		}
	}
	.order{
		margin-bottom:104rpx;
		padding: 40rpx 30rpx 0;
		.icon{
			padding-left: 50%;
		}
		.orderDetails{
			display: flex;
			justify-content: space-between;
		}
	}
	.popupstyle{
		background-color: pink;
	}
</style>