yandu_WeChat/subPackages/hotelHomestay/order.vue

<template>
	<view class="bg">
		<view class="detail-container">
			<view class="common-container info-container">
				<view class="flex-between" style="align-items: flex-start;">
					<view class="info-title text-overflowRows">{{skuInfo.title}}</view>
					<view class="policy-btn flex-shrink-0 flex flex-items-center" @click="openPopRule">
						房型信息
						<uni-icons color="#71B580" style="height: 32rpx;" type="right" size="12"></uni-icons>
					</view>
				</view>
					
				<view class="tag-container text-overflow">
					<text>{{skuInfo.showTag}}</text>
					<text>{{skuInfo.lastShowTag}}</text>
				</view>
				
				<view class="order-time flex-between" style="justify-content: space-around;">
					<view class="time">
						<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.startDay).Format('MM-dd')}}</view>
						<view style="padding-left:14rpx">{{ ShowDateDay(new Date(selectDate.startDay).getDay()) }}</view>
						<view>入住</view>
					</view>
					<view class="cal-day">
						共{{selectDate.differDays}}晚
					</view>
					<view class="time">
						<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.endDay).Format('MM-dd')}}</view>
						<view style="padding-left:14rpx">{{ShowDateDay(new Date(selectDate.endDay).getDay()) }}</view>
						<view>离店</view>
					</view>
				</view>
				
				<view class="notice-container">
					<view class="flex">
						<view class="flex-shrink-0" style="padding-top: 4rpx;">
							<image :src="showImg('/uploads/20240830/aa84c8b1de80651f645fed67a1997ced.png')"></image>
						</view>
						<view class="flex-1 w-1rpx" style="padding-left: 14rpx;">
							<view>订单确认后，您在{{new Date(selectDate.startDay).Format('yyyy年MM月dd日')}}20:00前之免费取消或 变更订单，20:00后将收取30%房费作为违约费用。</view>
							<view style="color: #F84A56;">预期不可取消或/修改，扣取全额房费</view>
						</view>
					</view>
					
					<view class="flex" style="padding-top: 22rpx;">
						<view class="flex-shrink-0" style="padding-top: 4rpx;">
							<image :src="showImg('/uploads/20240830/59d2f01f0391f72a537cc9004bc2071d.png')"></image>
						</view>
						<view class="flex-1 w-1rpx" style="padding-left: 14rpx;">
							<view>证件要求：大陆居民身份证登记入住</view>
						</view>
					</view>
					
				</view>

			</view>
			
			<view class="common-container form-container">
				<view class="form-title">
					<text style="font-weight: bold;font-size: 35rpx;padding-right: 28rpx;">预订信息</text>
					<text>姓名需与证件一致</text>
				</view>
				<view class="btn-box flex-column">
					<view class="line  w-full" style="border-top: none;">
						<view class="left">房间数</view>
						<view class="input flex" style="justify-content: flex-end;">
							<view class="num-box">
								<view :class="['ctrl',buyNum>1?'':'disabled']" @click="reduce()">-</view>
								<input class="num" type="text" v-model="buyNum" :disabled='true' />
								<view :class="['ctrl']" @click="plus()">+</view>
							</view>
						</view>
					</view>
					<view class="line  w-full" v-for="(user,index) in roomUser" :key="index">
						<view class="left">房间{{index+1}}</view>
						<input class="input" type="text" placeholder="请输入住客姓名" v-model="user.name" />
					</view>
					<view class="line  w-full">
						<view class="left">联系电话</view>
						<view class="flex flex-items-center input">
							<input class="input" type="text" placeholder="请输入联系手机号" v-model="phone" />
							<uni-icons v-if="phone.length>0" style="margin-left: 30rpx;"
								type="closeempty" size="14" @click="phone = ''"></uni-icons>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="btn-list">
			<view class="price-box">
				<view class="text">合计:</view>
				<view class="price">{{ total() }}</view>
				<!-- <view class="post-text" v-if="sendType==1&&post">含邮费:¥{{ post / 100 }}</view> -->
			</view>
			<view class="btn" @click="order()">立即预订</view>
		</view>
		
		<!-- 酒店详情弹窗 -->
		<uni-popup ref="popupRule" type="bottom"  :safe-area="false" background-color="#F7F7F7">
			<view class="popup-content-date" >
				<view class="popup-content-title flex">
					<view class="flex-1 w-1rpx text-overflow">
						{{skuInfo.title}}
					</view>
					<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopupRule"
						style="width: 31rpx;height: 31rpx;" class="flex-shrink-0">
				</view>	
				<view class="content">
					<view class="swipe-box" style="height: 347rpx;" v-if="skuInfo.list_images">
						<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
							indicator-active-color="#fff" @change="popSwiperChange" :current="0">
							<swiper-item v-for="(item, index) in skuInfo.list_images.split(',')" :key="item.id">
								<view class="swiper-item" style="height: 347rpx;">
									<image class="item-img pop-swiper-image" :src="showImg(item)" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper>
						
						<view class="swiper-pointer" style="right:30rpx;bottom: 20rpx;">
							{{popSwiperCurrent}}/{{skuInfo.list_images.split(',').length}}
						</view>
					</view>
				
					<view class="pop-detail-container">
						<view class="pop-detail-title">房型信息</view>
						<view  v-html="formateRichText(skuInfo.use_explain)"></view>
					</view>
				</view>
			</view>
		</uni-popup>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				popSwiperCurrent: 1,

				skuInfo: {}, // 酒店信息
				
				selectDate: {
					startDay:new Date().Format('yyyy-MM-dd'),
					endDay:new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd'),
					differDays: 1
				},
				
				phone: '',
				buyNum: 1,
				roomUser: [{
					name: ''
				}]
				
				
			}
		},
		onShow(options) {
		},
		onLoad(options) {
			this.initOrderDate()
		},
		methods: {
			popSwiperChange (e) {
				this.popSwiperCurrent = e.detail.current+1
			},
			
			// 初始化
			initOrderDate () {
				let data = {}
				try {
					data = JSON.parse(uni.getStorageSync('hotelOrderInfo'));
				} catch (e) {
					data = {}
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
				
				this.skuInfo = data.skuInfo
				this.selectDate = data.selectDate
				this.buyNum = 1
				this.roomUser = [{name: ''}]
				
			},
			// 查看房型
			viewDetail () {
				this.popSwiperCurrent = 1
				this.openPopRule()
			},
			
			plus() {
				this.buyNum += 1;
				this.roomUser.push({name: ''})
			},
			reduce() {
				if (this.buyNum > 1) {
					this.buyNum -= 1;
					this.roomUser.pop()
				}
			},
			
			total () {
				return this.skuInfo.price/100 * this.buyNum || 0
			},
			
			order () {
				// 校验
				if (!this.isTel(this.phone)){
					uni.showToast({
						title: '请输入自提人手机号',
						icon: 'none'
					});
					return;
				}
				if (this.roomUser.some(v=>v.trim().length<0)) {
					uni.showToast({
						title: '请输入住客姓名',
						icon: 'none'
					});
					return;
				}
				
				let goods = []
				let	goodsItem = {
					num:this.buyNum,
					specifications_id: this.skuInfo.id,
					start_date: this.selectDate.startDay,
					end_date: this.selectDate.endDay,
					customer_name: this.roomUser.map(v=>v.name).join('、'),
					reserve_mobile: this.phone,
				}
				goods.push(goodsItem)
				
				let data = {
					goods: goods,
					reserve_phone: this.phone,
				}
				
				return
				this.Post({
					method: 'POST',
					data: JSON.stringify(data)
				},'/api/order/place').then(res => {
					console.log('成功');
					if(res.code == 200){
						uni.removeStorageSync('hotelOrderInfo')
						this.Post({
							order_id: res.data.order_id,
							type: "miniprogram",
							platform: 'miniprogram'
						},'/api/pay/unify').then(res => {
							if(res.data){
								uni.requestPayment({
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.paySign,
									signType: res.data.signType,
									timeStamp: res.data.timeStamp,
									complete() {
										uni.navigateTo({
											url: '/subPackages/order/trades'
										})
									}
								})
							}
						})
					}
				})
				
			},
			
			closePopupRule() {
				this.$refs.popupRule.close()
			},
			openPopRule(){
				this.$refs.popupRule.open()
			},
			
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg{
		min-height: 100vh;
		background: #F8F8F8;
	}
	
	.swipe-box {
		height: 484rpx;
		position: relative;
	
		.swiper-item-num {
			width: 90rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			line-height: 40rpx;
			position: absolute;
			right: 30rpx;
			bottom: 50rpx;
		}
		
		.collect{
			position: absolute;
			right: 36rpx;
			top: 36rpx;
			font-size: 23rpx;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
		.swiper-pointer{
			position: absolute;
			right: 36rpx;
			bottom: 80rpx;
			background: rgba(22,22,22,0.5);
			border-radius: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 6rpx 14rpx;
			
		}
	}
	
	.swiper {
		height: 484rpx;
		position: relative;
	
		.swiper-item {
			width: 100%;
			height: 484rpx;
	
			.item-img {
				width: 750rpx;
				height: 484rpx;
			}
			.item-img.pop-swiper-image{
				height: 347rpx;
				border-radius: 13rpx;
			}
		}
	}
	

	
	.detail-container{
		width: 100%;
		padding: 26rpx;
		padding-bottom: 200rpx;
	}
	
	.common-container{
		background: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 22rpx 26rpx;
	}
	
	
	.info-container{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		
		.info-title{
			width: 100%;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 35rpx;
			color: #000000;
		}
		
		.policy-btn{
			width: 160rpx;
			height: 35rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.tag-container{
			width: 100%;
			padding: 35rpx 0;
		}
		
		.time-container{
			padding: 22rpx 0;

		}
		
		.notice-container{
			background:rgba(232, 246, 235, 0.7);
			border-radius: 13rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #000000;
			padding: 22rpx 16rpx;
			margin-top: 28rpx;
			image{
				width: 25rpx;
				height: 25rpx;
			}
		}
	
}
	

	.order-time{
		.time{
			display: flex;
			font-family: PingFang SC;
			font-size: 24rpx;
			color: #000000;
			align-items: center;
		}
	}
	.cal-day{
		background: #E8F6EB;
		border-radius: 17rpx;
		padding: 5rpx 16rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
	}
	
	
	.popup-content-date{
		position: relative;
		background: #F7F7F7;
		top: -33rpx;
		padding: 25rpx 44rpx;
		border-radius: 33rpx;
		.popup-content-title{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 35rpx;
			color: #000000;
			text-align: center;
			padding-bottom: 26rpx;
		}
		
		.pop-detail-container{
			background: #FFFFFF;
			border-radius: 13rpx;
			padding: 20rpx;
			margin-top: 26rpx;
			max-height: 800rpx;
			overflow-y: auto;
			.pop-detail-title{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
		}
	}
	
	
	.btn-list {
		width: 100%;
		height: 166rpx;
		background: #ffffff;
		box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
		display: flex;
		position: fixed;
		bottom: 0;
		padding: 20rpx 20rpx;
		align-items: center;
		justify-content: space-between;
		.btn {
				width: 294rpx;
				height: 88rpx;
				background: #F84A56;
				border-radius: 43rpx;
				text-align: center;
				line-height: 88rpx;
	
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
		
		}
		.price-box {
			display: flex;
			align-items: center;
			.text {
				font-size: 29rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #333;
			}
			.price {
				margin-left: 15rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #fc5109;
				&:before {
					content: '¥';
					display: inline-block;
					color: #fc5109;
					font-size: 36rpx;
				}
			}
			.post-text {
				margin-left: 15rpx;
				color: #fc5109;
				font-size: 24rpx;
			}
		}
	}
	
	.form-container{
		.form-title{
			font-family: PingFang SC;
			color: #000000;
			font-weight: 500;
			font-size: 23rpx;
			display: flex;
			align-items: baseline;
		}
		.left{
			width: 160rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
			flex-shrink: 0;
		}
		.line{
			display: flex;
			align-items: center;
			border-top:1rpx solid #D8D8D8;
			height: 92rpx;
		}
		.input{
			flex: 1;
		}
		input{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 29rpx;
			color: #000000;
		}
	}
	
	.num-box {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		width: 160rpx;
		justify-content: space-between;
		.num {
			text-align: center;
			width: 50rpx;
		}
		.ctrl {
			width: 47rpx;
			height: 47rpx;
			background: #71B580;
			border-radius: 50%;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
		}
		.ctrl.disabled{
			background: #E8E8E8;
			color: #999999;
		}
	}
</style>