flavorOfTimeSz/subPackages/homestay/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.sku_name}}</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">
					{{skuInfo.sku_model.bed_type}} | {{skuInfo.sku_model.area}}
					| {{skuInfo.sku_model.window}} | 可入住{{skuInfo.sku_model.max_room_num}}人
					| {{skuInfo.sku_model.breakfast}}
				</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" style="align-items: center;">
						<view class="flex-shrink-0" style="padding-top: 4rpx;">
							<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/dui.png"></image>
						</view>
						<view class="flex-1 w-1rpx" style="padding-left: 14rpx;">
							<view v-html="formateRichText(skuInfo.sku_model.bookinfo)"></view>
						</view>
					</view>

					<view class="flex" style="padding-top: 22rpx;align-items: center;">
						<view class="flex-shrink-0" style="padding-top: 4rpx;">
							<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/tanhao.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>
			
			<navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ skuInfo.id" class="coupon-box flex-between">
			    <text>优惠券</text>
			    <view style="display: flex;align-items: center;">
					<view class="add-btn" v-if="!coupon">选择优惠券</view>
					<view style="display: flex;align-items: center;color: #6A8A2D;font-weight: bold;" v-if="coupon && coupon.activity">
						<view v-if="coupon.activity.discount_type == 'pricebreak'">-￥{{coupon.activity.money/100}}</view>
						<view v-else>{{coupon.activity.fold}}折</view>
					</view>
					<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon">
				</view>
			</navigator>

		</view>


		<view class="btn-list">
			<view class="price-box">
				<view class="text">合计:</view>
				<view class="price">{{ total() / 100 }}</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.sku_name}}
					</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.listimg && skuInfo.listimg.length > 0">
						<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.listimg" :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.listimg.length}}
						</view>
					</view>

					<view class="pop-detail-container">
						<view class="pop-detail-title">房型信息</view>
						<view v-html="formateRichText(skuInfo.sku_model.detailinfo)"></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: ''
				}],
				allSeldDate: [],
				coupon: '',
				price: 0
			}
		},
		onReady() {
			// 清除优惠券
			this.$store.commit("choseCoupon", "");
		},
		onShow() {
			this.coupon = this.$store.state.user.coupon
			console.log(this.coupon)
		},
		onLoad(options) {
			this.initOrderDate()
		},
		methods: {
			popSwiperChange(e) {
				this.popSwiperCurrent = e.detail.current + 1
			},

			// 初始化
			initOrderDate() {
				let data = {}
				try {
					data = JSON.parse(uni.getStorageSync('hotelOrderInfo'));
					console.log(data)
				} catch (e) {
					data = {}
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}

				this.skuInfo = data.skuInfo
				this.selectDate = data.selectDate
				this.buyNum = 1
				this.roomUser = [{
					name: ''
				}]
				try {
					this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile
				} catch (e) {
					this.phone = ''
				}

				this.getPriceCal(this.skuInfo.id)

			},
			// 查看房型
			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() {
				let disfferMoney = 0
				this.allSeldDate.forEach(v => {
					disfferMoney += (v.price || 0)
				})
				this.price = ((disfferMoney * this.buyNum) || 0).toFixed(2)
				
				if(this.coupon) {
					if (this.coupon.activity.discount_type == 'pricebreak') {
						disfferMoney = disfferMoney - this.coupon.activity.money
					} else{
						disfferMoney = disfferMoney - (disfferMoney * this.coupon.activity.fold/10)
					}
				}
				return disfferMoney < 0 ? 0 : disfferMoney
			},

			order() {
				this.roomUser.forEach(v => v.name = v.name.trim())
				// 校验
				if (!this.IsTel(this.phone)) {
					uni.showToast({
						title: '手机号格式校验失败',
						icon: 'none'
					});
					return;
				}
				if (this.roomUser.some(v => {
						return v.name.length == 0
					})) {
					uni.showToast({
						title: '请输入住客姓名',
						icon: 'none'
					});
					return;
				}

				let roomNames = []
				this.roomUser.forEach(item => {
					roomNames.push(item.name)
				})

				if (roomNames.length != Array.from(new Set(roomNames)).length) {
					uni.showToast({
						title: '住客姓名不能相同',
						icon: 'none'
					});
					return;
				}

				let data = {
					coupon_id: this.coupon ? this.coupon.id : null,
					product_list: [
						{
							type: 'hotel',
							customer_name: roomNames.toString(),
							reserve_mobile: this.phone,
							product_id: this.skuInfo.product_id,
							sku_id: this.skuInfo.id,
							start_date: this.selectDate.startDay,
							end_date: this.selectDate.endDay,
							product_num: this.buyNum
						}
					]
				}

				this.Post({
					method: 'POST',
					data: JSON.stringify(data)
				}, '/api/order/create').then(res => {
					console.log('成功');
					if (res.code == 1) {
						return;
						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()
			},


			getPriceCal(skuId, goodId) {
				this.Post({
					sku_id: skuId,
					start_date: this.selectDate.startDay,
					end_date: this.selectDate.endDay,
				}, '/api/product/product_date_price').then(res => {
					this.allSeldDate = res.data || []

					if (this.allSeldDate.length > 0) {
						this.allSeldDate.pop()
					}

				})
			},

		}
	}
</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: #6A8A27;
			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(237, 245, 220, 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: #EDF5DC;
		border-radius: 18rpx;
		padding: 5rpx 16rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #6A8A27;
	}


	.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: 233rpx;
			height: 73rpx;
			background: #6A8A2D;
			border-radius: 11rpx;
			text-align: center;
			line-height: 73rpx;
			font-weight: bold;
			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: #DC2525;

				&:before {
					content: '¥';
					display: inline-block;
					color: #DC2525;
					font-size: 36rpx;
				}
			}

			.post-text {
				margin-left: 15rpx;
				color: #DC2525;
				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: #6A8A27;
			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;
		}
	}
	
	.coupon-box {
		height: 113rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		padding: 0 20rpx;
		
		.add-btn {
			width: 153rpx;
			line-height: 40rpx;
			background: #6A8A2D;
			border-radius: 9rpx;
			text-align: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		
		.icon-coupon{
			width: 20rpx;
			height: 20rpx;
			margin-left: 15rpx;
		}
	}
</style>