changshu_WeChat/subPackages/venue/venueOrder.vue

<template>
	<view class="bg">
		<view class="top-box flex-between">
		    <view class="top-left">
		        <view class="text-overflow">{{ orderInfo.goodsInfo.title }}</view>
		        <view>
		            <view class="left-subtitle" v-if="dateList.length > 0">{{dateList[dateIndex].date}} {{ShowDateDay(new Date(dateList[dateIndex].date).getDay())}}</view>
		            <view class="left-subtitle" v-if="stockList.length > 0">{{ stockList[stockIndex].start_time }}-{{ stockList[stockIndex].end_time }} 入园</view>
		        </view>
		    </view>
		    <view class="flex-center" style="flex: 1;" @click="$refs.popup.open()">修改 ></view>
		</view>
		
		<view class="info flex-column">
			<view class="flex-between">
				<view class="title text-overflow">{{orderInfo.skuInfo.title}}</view>
				<view class="price" v-if="stockIndex != null">{{(stockList[stockIndex].money * buyNum) / 100 }}</view>
				<view class="price" v-else>{{(dateList[dateIndex].money * buyNum) / 100 }}</view>
				<view style="display: flex;">
					<view class="btn" @click="changeBuyNum(-1)">-</view>
					<view class="num">{{buyNum}}</view>
					<view class="btn" @click="changeBuyNum(1)">+</view>
				</view>
			</view>
			<view class="tag text-overflow" @click="showpopRule(true)">
				<span v-for="(item,index) in orderInfo.skuInfo.specifications_new_tag.split(',').slice(0,3)" :key="index">
					{{item}}<span style="padding: 0 3rpx;">|</span>
				</span>
				<span>预订须知 ></span>
			</view>
			<view class="noCard">无需身份证</view>
		</view>
		
		<view class="travel-info">
			<view style="border-bottom: 1rpx solid #CCCCCC;">出行人信息</view>
			<view class="flex-between">
				<view>联系电话</view>
				<input type="number" placeholder="请输入手机号" v-model="phone" maxlength="11"/>
				<uni-icons v-if="phone.length>0"
					type="closeempty" size="14" @click="phone = ''"></uni-icons>
			</view>
		</view>
		
		<view class="fixed-btn flex-center">
		    <view @tap="order" class="btn" >
		        立即预约
		    </view>
		</view>
		
		<uni-popup ref="popup" type="bottom" background-color="rgba(0,0,0,0)" :safe-area="false" :is-mask-click="false">
			<view class="calendar-box">
				<!-- 日期和分时 -->
				<DateSelector
					v-if="dateList.length > 0"
					:dateList="dateList"
					:dateIndex="dateIndex"
					:stockList="stockList"
					:stockIndex="stockIndex"
					@changeDate="changeDate"
					@changeStock="changeStock"
					@openCal="openCal"
				/>
				<view class="calendar-btn" @click="$refs.popup.close()">确定</view>
			</view>
		</uni-popup>
		
		<!-- 日历弹框 -->
		<uni-calendar 
			ref="calendar"
			:insert="false"
			:start-date="dateList[0].date"
			:end-date="dateList[dateList.length-1].date"
			:date="dateList[0].date"
			:selected="selected"
			:clearDate="false"
			:disabledDay="disabledDay"
			@confirm="confirm"
			v-if="dateList && dateList.length > 0"
		/>
		
		<!-- 预订须知的弹窗 -->
		<uni-popup ref="popupRule" type="bottom" :safe-area="false">
			<view class="popup-content-date flex-column flex" >
				<view class="popup-content-title flex-between">
					<view class="flex-1 w-1rpx text-overflow">
						{{orderInfo.skuInfo.title}}
					</view>
					<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="showpopRule(null)"
						style="width: 20rpx;height: 20rpx;" class="flex-shrink-0">
				</view>	
				<view class="content flex-1 h-1rpx no-scrollbar">
					<view class="detail-content" v-html="formateRichText(orderInfo.skuInfo.reserve_content)"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import DateSelector from '@/components/DateSelector.vue';
	export default {
		components: {
			DateSelector
		},
		data() {
			return {
				orderInfo: this.$store.state.user.orderInfo,
				dateList: [],
				dateIndex: null,
				price: '',
				date: '',
				isTime: false,
				stockList: [],
				stockIndex: null,
				selected: [],
				start_time: '',
				end_time: '',
				isShowCalendar: false,
				buyNum: 1,
				phone: ''
			}
		},
		onReady() {
			this.getPriceCal()
		},
		onShow() {
			console.log(this.orderInfo)
		},
		methods: {
			// 下单
			order() {
				if (!this.IsTel(this.phone)) {
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return;
				}
				
				let goods = []
				let param = {
					specifications_id: this.orderInfo.skuInfo.id,
					num: this.buyNum,
					date: this.dateList[this.dateIndex].date,
					start_time: this.stockIndex != null ? this.stockList[this.stockIndex].start_time : '',
					end_time: this.stockIndex != null ? this.stockList[this.stockIndex].end_time : ''
				}
				goods.push(param)
				
				let data = {
					goods: goods,
					reserve_mobile: this.phone
				}
				
				this.Post({
					method: 'POST',
					data: JSON.stringify(data)
				}, '/api/order/place').then(res => {
					if (res.code == 200) {
						let order_id = res.data.order_id
						this.Post({
							order_id: 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'
										})
									},
								})
							}
						})
					}
				})
			},
			// 选择购买数量
			changeBuyNum(num) {
				this.buyNum += num
				if(this.buyNum < 1){
					this.buyNum = 1
				}
			},
			// 预定须知
			showpopRule(flag) {
				if (flag) {
					this.$refs.popupRule.open('bottom');
				} else {
					this.$refs.popupRule.close();
				}
			},
			// 获取价格日历列表
			getPriceCal() {
				this.Post({
					specifications_id: this.orderInfo.skuInfo.id,
					goods_id: this.orderInfo.goodsInfo.id,
					limit: 60
				}, '/api/goods/getPriceCalendarListBySpecifications').then(res => {
					res.data.forEach(item => {
						if (item.store != 0) {
							this.dateList.push(item)
						}
					})
					console.log(this.dateList, this.dateList.length)
					// this.dateList = res.data
					this.dateList.forEach(item => {
						this.selected.push({
							date: item.date,
							info: '￥' + item.money / 100
						})
					})
					this.dateIndex = this.orderInfo.dateIndex
					this.getTimeStock(this.dateList[this.dateIndex].date)
				})
			},
			// 获取规格分时库存
			getTimeStock(date) {
				this.Post({
					specifications_id: this.orderInfo.skuInfo.id,
					date: date
				}, '/api/goods/getTimeStock').then(res => {
					if (res.data.length > 0) {
						this.stockList = res.data
						this.stockIndex = this.orderInfo.stockIndex
					}
				})
			},
			// 打开日历
			openCal(){
				this.$refs.calendar.open();
			},
			// 确定日历日期
			confirm(e){
				console.log(e)
				for (let i = 0; i < this.dateList.length; i++) {
				    if (this.dateList[i].date == e.fulldate) {
						console.log(this.dateList[i])
						this.dateIndex = i;
						console.log(this.fulldate)
						this.date = e.fulldate
						this.getTimeStock(e.fulldate)
						break;
				    }
				}
			},
			// 选择日期
			changeDate(data){
				let item = data.item
				let index = data.index
				if(item.stock!=0){
					console.log(item)
					this.dateIndex = index
					this.date = item.date
					this.getTimeStock(item.date)
				}
			},
			// 选择入园时间
			changeStock(data){
				let item = data.item
				let index = data.index
				if(item.stock_number!=0){
					this.stockIndex = index
					this.date = item.sale_date
					this.start_time = item.start_time
					this.end_time = item.end_time
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		padding: 30rpx 0 200rpx;
		background-color: #f5f5f5;
	}
	
	.fixed-btn {
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    height: 133rpx;
	    background: #ffffff;
	    box-shadow: -1rpx 1rpx 16rpx 0px rgba(6, 0, 1, 0.1);
	    z-index: 3;
		
		.btn {
		    width: 697rpx;
		    line-height: 80rpx;
		    background: #ED1C18;
		    border-radius: 40rpx;
		    text-align: center;
		    color: #fff;
		    font-size: 31rpx;
		    font-weight: 500;
		}
	}
	
	.top-box {
		width: 697rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 40rpx 20rpx;
		margin: auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		
		.top-left {
			width: 560rpx;
			
			.left-subtitle {
				font-weight: 500;
				font-size: 25rpx;
				color: #999999;
				margin-top: 20rpx;
			}
		}
		
		.flex-center {
			font-weight: bold;
			font-size: 27rpx;
			color: #00AEA0;
		}
	}
	
	.info {
		width: 697rpx;
		height: 215rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin: 20rpx auto;
		justify-content: space-around;
		padding: 20rpx;
		
		.title {
			width: 350rpx;
			font-weight: bold;
			font-size: 31rpx;
			color: #000000;
		}
		
		.price {
			font-weight: bold;
			font-size: 36rpx;
			color: #ED1C18;
		}
		.price::before {
			font-size: 24rpx;
			content: '￥'
		}
		
		.btn {
			width: 47rpx;
			line-height: 47rpx;
			text-align: center;
			background: #00AEA0;
			border-radius: 50%;
			font-weight: bold;
			font-size: 34rpx;
			color: #fff;
		}
		
		.num {
			width: 65rpx;
			line-height: 47rpx;
			text-align: center;
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
		}
		
		.tag {
			font-weight: 500;
			font-size: 23rpx;
			color: #666666;
		}
		
		.noCard {
			font-weight: 500;
			font-size: 23rpx;
			color: #00AEA0;
		}
	}
	
	.calendar-box {
		border-radius: 20rpx 20rpx 0 0;
		padding: 25rpx;
		background: #fff;
		padding-bottom: 80rpx;
		
		.calendar-btn {
			width: 697rpx;
			line-height: 80rpx;
			background: #ED1C18;
			border-radius: 40rpx;
			text-align: center;
			color: #fff;
			font-size: 31rpx;
			font-weight: 500;
			margin: 50rpx auto 0;
		}
	}
	
	.popup-content-date {
		background-color: white;
		padding: 0rpx 28rpx 166rpx;
		height: 70vh;
		border-radius: 20rpx 20rpx 0 0 ;
		.popup-content-title{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 37rpx;
			color: #000000;
			padding: 39rpx 0;
			align-items: center;
			border-bottom: 1px solid #CCCCCC;
		}
		// 预定须知
		.content{
			padding-top: 48rpx;
			overflow-y: auto;
		}
	}
	
	.travel-info {
		width: 697rpx;
		height: 233rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin: auto;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		
		&>view {
			height: 50%;
			padding: 0 18rpx;
			position: relative;
			display: flex;
			align-items: center;
		}
		
		input {
			flex: 1;
			margin-left: 50rpx;
			font-weight: 500;
		}
	}
</style>