ryx/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?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" @touchend="dblclick(item.room_picture)"></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 -->
					￥{{totalromprice}}
				</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" isLink size="large" :border="false"
					:value="item.phone" @click="moveAdd(index)" :key="index"></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">
						随机安排
					</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="clearmore" style="margin: 20rpx 0;" v-for="(item,index) in cohabits" :key="index">
					<view class="clearbox"  @click="clearCohabits(index)"><u-icon name="close" ></u-icon></view>
					<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">
				{{chooseroommate==1?cohabitexplan.random:cohabitexplan.fixed}}
			</view>
		</view>



		<view class="navbar">
			<view class="price">
				<view class="">
					总金额
				</view>
				<view class="" style="margin: 0 10rpx 0 40rpx;" @click="details = true">
					￥{{totalromprice}}
				</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" :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>{{value}}人</text>
						<text>￥{{totalromprice}}</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>
	let that
	export default {
		data() {
			return {
				// 房型选择
				houseType: 0,
				state: 0,
				show: 0,
				name: '',
				touchNum: 0,
				// 房间类型
				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: '',
				totalromprice: '',
				// 房间数量
				number: 0,
				// 选择样式
				active: false,
				showMoadl: true,
				title: '提示',
				// 添加同住人/随机
				chooseroommate: 1,
				// 金额详情
				details: false,
				goodsInfo: {},
				days: {},
				// 日期
				day: "",
				// 出行人
				travelers: [],
				// 同住人
				cohabits: [],
				room_id: 0,
				value: 1,
				ur1:'',
				ur2:'',
				cohabitexplan:""
			}
		},
		onLoad(options) {
			that = this
			let newdays = decodeURIComponent(options.obj)
			let datainfo = JSON.parse(newdays)
			this.days = datainfo.days
			
			
			// let goodsInfo=JSON.parse(options.goodsinfo)
			this.goodsInfo = datainfo.goodsinfo
			let conexplan=JSON.parse(datainfo.goodsinfo.cohabit)
			this.cohabitexplan=conexplan
			// this.days=days
			// 
			// console.log(this.days,this.goodsInfo)
			this.init()
		},
		onShow() {
			let open = this.$store.state.openpeopleList
			if (open == 0) {
				this.$store.commit('getpeopleList', [])
			} else {
				let arr = this.$store.state.peopleList
				this.travelers = []
				arr.forEach(item => {
					if (item.checked) {
						this.travelers.push(item)
					}
				})
			}
			// console.log(this.$store.state.peopleList,7789789)

		},
		onUnload(event) { //监听是否跳转页面
			if (this.tjzt) {
				//tjzt为变量
			} else {
				let arr = []
				this.$store.commit("getpeopleList", arr)
				this.$store.commit("getopenpeopleList", 0)
			}

		},
		
		methods: {
			moveAdd(index) {
				let addPel = this.travelers[index]
				addPel.state = 0
				uni.navigateTo({
					url: `/pages/peopleList/addPeople?state=0&info=${JSON.stringify(addPel)}`
				})
			},
			clearCohabits(index){
				this.cohabits.splice(index, 1); 
			},
			dblclick(url) {
				this.touchNum++
				if(this.touchNum==1){
					this.ur1=url
				}else if(this.touchNum==2){
					this.ur2=url
					console.log(this.ur1,this.ur2)
					if(this.ur1==this.ur2){
						setTimeout(()=>{
							if (this.touchNum >= 2) {
								let imgUrl = []
								imgUrl.push(this.ur2)
								console.log(imgUrl)
								uni.previewImage({
									current: imgUrl[0],
									urls: imgUrl,
								});
								this.touchNum = 0
							}
							
						},600)
							
					}else{
						this.touchNum = 0
					}
				}
	
				console.log(this.touchNum)

			},
			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
				this.room_id = this.houselist[0].room_id
				this.houseType = 0
				this.roomPrice = Number(this.houselist[0].price).toFixed(2)
				this.totalromprice = Number(this.houselist[0].price).toFixed(2)
			},
			chooseRoomMate(){
				this.chooseroommate=1			
				this.cohabits=[]
			},
			// 选择出行人
			choosePeople() {
				let list = this.$store.state.peopleList
				let obj = {
					value: this.value,
					list: list
				}
				uni.navigateTo({
					url: "/pages/peopleList/peopleList?obj=" + JSON.stringify(obj),
				})
			},
			// 查看出行人
			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) {
				let arr = []
				this.$store.commit("getpeopleList", arr)
				this.travelers = []
				this.value = e.value
				this.totalromprice =(this.roomPrice * e.value).toFixed(2)
			},
			// 添加同住人e
			addcohabits() {
				if(this.cohabits.length==6){
					this.$toast("同住人不能超过6人")
					return
				}
				for (let i in this.cohabits) {
					console.log(i)
					if (this.cohabits[i] == ''||this.cohabits[i] == null) {
						console.log(i)
						this.$toast("请输入正确的同住人姓名")
						return
					}
				}
				this.cohabits.push("")
				console.log(this.cohabits)
			},
			chooseHouse(index, price, id) {
				this.houseType = index
				this.roomPrice = price
				this.room_id = id
				this.totalromprice =(this.roomPrice * this.value).toFixed(2)
			},
			// 提交订单
			Submit() {
				if(this.travelers.length<this.value){
					this.$toast("请选择"+this.value+"位出行人")
					return
				}
				if (this.chooseroommate == 2) {
					for (let i in this.cohabits) {
						console.log(i)
						if (this.cohabits[i] == '') {
							console.log(i)
							this.$toast("请输入正确的同住人姓名")
							return
						}
					}
				}
				if(this.chooseroommate==2){
					if(this.cohabits.length==0){
						this.$toast("请输入同住人姓名")
						return
					}
				}
				if (this.travelers.length == 0) {
					this.$toast("请选择出行人")
					return
				}
				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.value
				suborder.travelers = []
				suborder.cohabits = this.cohabits
				suborder.cohabit_type = this.chooseroommate
				suborder.total = this.totalromprice
				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.order_id = res.id // 订单id
					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="+encodeURIComponent(JSON.stringify(suborder))
						// url: `/pages/travel/submitOrder?suborder=${JSON.stringify(suborder)}`
					})
				}).catch((err) => {
					console.log(err)
					this.$toast(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: 158rpx;
							border-radius: 8rpx 24rpx 8rpx 24rpx;
							border: 4rpx 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: 158rpx;
							border-radius: 8rpx 24rpx 8rpx 24rpx;
						}
					}

					.text {
						font-size: 26rpx;
						text-align: center;
						color: #101010;

					}
				}

				.surplus {
					width: 95rpx;
					height: 34rpx;
					line-height: 34rpx;
					padding: 0 10rpx;
					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: 0;
					right: 0;
					margin: 0 auto;
					margin-top: 15rpx;
				}
			}
		}

		.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;
				.clearmore{
					position: relative;
				}
				.clearbox{
					z-index: 999;
					position: absolute;
					width: 45rpx;
					height: 45rpx;
					border-radius: 50%;
					background-color: #F4F4F4;
					display: flex;
					align-items: center;
					justify-content: center;
					right:10rpx;
					top: 0;
					bottom: 0;
					margin: auto 0;
				}
			}

			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: 530rpx;
			}
		}

		.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>