wx-dangyuanjiaoyujidi/pages/index/index.vue

<template>
	<view class="content">
		<view class="box-top">
			<image src="../../static/img/index_bg.jpg" class="index_bg"></image>
		</view>
		<view class="box-notice">
			<u-notice-bar @click="openInfo" :text="list" direction="column" color="#9E8F8B"></u-notice-bar>
		</view>
		<view class="box-body">
			<view class="box-body-title">
				<image src="../../static/img/index_name.png" class="box-body-title-img"></image>
				<view class="box-body-sub-title">开馆时间：{{info.sub_title||""}}</view>
			</view>
			<view style="margin-top: 56rpx;">
				<view class="box-row">
					<view class="box-col" @click="handleBook(1)">
						<image src="../../static/img/index_icon_1.png" class="box-body-icon"></image>
					</view>
					<view class="box-col" @click="handleBook(2)">
						<image src="../../static/img/index_icon_2.png" class="box-body-icon"></image>
					</view>
					<view class="box-col" @click="handleBook(3)">
						<image src="../../static/img/index_icon_3.png" class="box-body-icon"></image>
					</view>
					</u-row>
				</view>
			</view>
		</view>
		<view class="box-footer"
			style="position: fixed;bottom: -60rpx;left: 0;text-align: center;width: 100%;z-index: -1;">
			<image src="../../static/img/footer_logo.png" class="footer-img"></image>
		</view>

		<u-popup :show="showBook" mode="bottom" @close="closeBook" :round="10" closeable>
			<view class="mpopup">
				<view class="mpopup-title">
					参观预约
				</view>
				<view class="mpopup-content">
					<view class="book-box">
						<view class="book-box-card">
							<view class="book-box-title">
								日期
							</view>
							<view class="book-box-row">
								<view class="book-box-row-date">
									<block v-for="(item,index) in listDatePrice" :key="index">
										<view class="book-box-row-dateitem" :class="{'book-box-row-dateitem-on':item.checked,
										'book-box-row-dateitem-none':item.is_open==0,
										'book-box-row-dateitem-none':item.remain_count==0}" @click="handleDate(index)">
											<view class="book-box-row-dateitem-status">
												<u-icon name="checkmark" color="#fff" size="20rpx" v-if="item.checked">
												</u-icon>
												<view v-else>
													<text
														v-if="item.is_open==1">{{item.remain_count==0?"售罄":"余票"}}</text>
													<text v-else>闭馆</text>
												</view>
											</view>
											<view>{{item.week}}</view>
											<view>{{item.datef}}</view>
										</view>
									</block>
								</view>
								<view class="book-box-row-select" @click="openCalendar">
									<view>
										<view>指定</view>
										<view>日期</view>
									</view>
									<view class="book-box-row-select-more">
										<u-icon name="arrow-right" color="#EF9525" size="20rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="book-box-card">
							<view class="book-box-title">
								参观时间
							</view>

							<view class="book-box-timerow">
								<view class="book-box-row-timeitem" v-for="(item,index) in currentDate.rules"
									:class="{'book-box-row-timeitem-on':item.checked,'timeitem-none':item.remain_count==0}"
									:key="index" @click="handleSelectTime(index)">
									<view class="book-box-row-timeitem-status" v-if="item.checked">
										<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
									</view>
									<view class="book-box-row-timeitem-txt">{{item.start_time+'-'+item.end_time}}</view>
									<view class="book-box-row-timeitem-txt" v-if="item.remain_count>0">
										{{item.remain_count}}张
									</view>
									<view class="book-box-row-timeitem-txt" v-else>售罄</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="book-box-selectInfo">
					<view class="book-box-selectInfo-left">已选：{{currentDate.datef||""}}
						{{(currentTime.start_time||"")+"-"+(currentTime.end_time||"")}}
					</view>
					<view class="book-box-selectInfo-right">
					</view>
				</view>
				<view class="mpopup-footer">
					<view style="margin-right: 14rpx;flex: 1;">
						<u-button type="primary" @click="tobook('team')">团体预约</u-button>
					</view>
					<view style="margin-left: 14rpx;flex: 1;">
						<u-button type="primary" @click="tobook('user')">个人预约</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-calendar ref="calendar" :show-confirm="false" :show="showCalendar" :minDate="minDate" :maxDate="maxDate"
			color="#EF9525" round="20" defaultDate="2022-02-15" @confirm="handleSelectDate" @close="closecalendar">
		</u-calendar>
		<u-popup :show="showInfo" mode="center" @close="closeInfo" :round="10" closeable>
			<view class="mpopup">
				<view class="mpopup-title">
					{{currentNotice.name}}
				</view>
				<view class="mpopup-content" style="padding: 40rpx 20rpx;">
					<rich-text :nodes="currentNotice.content"></rich-text>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
			<view class="box">
				<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
					请授权您的手机号
				</view>
				<view class="box-content" style="padding: 20px;">
					<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
					</u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			const d = new Date()
			const year = d.getFullYear()
			let month = d.getMonth() + 1
			month = month < 10 ? `0${month}` : month
			const date = d.getDate()
			return {
				showInfo: false,
				showBook: false,
				minDate: `${year}-${month}-${date + 1}`,
				maxDate: `${year}-${month}-${date + 7}`,
				showCalendar: false,
				list: ["暂无通知通告"],
				info: {},
				listDatePrice: [],
				currentDate: {},
				currentTime: {},
				currentIndex: 0,
				listCalendar: [],
				listNotice: [],
				currentNotice: {},
				showAuthorization: false,
				openType: 1
			}
		},
		onLoad() {
			this.loadInfo();
			this.loadNotice();
		},
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			this.$refs.calendar.setFormatter(this.formatter)
		},
		methods: {
			closePhone() {
				this.showAuthorization = false
			},
			getPhoneNumber(e) {
				var that = this;
				this.util.request({
					api: '/api/mobile/user/mobile',
					data: {
						code: e.detail.code
					},
					utilSuccess: function(res) {
						that.util.getUserInfo(function(r) {
							that.checkUser();
						}, true)

					},
					utilFail: function(res) {

					}
				})
			},

			closecalendar() {
				this.showCalendar = false;
			},
			handleSelectDate(e) {
				let that = this;

				if (e.length != 0) {
					var date = e[0]
					var mod = this.listCalendar.filter((p) => {
						return p.is_open == 1 && p.remain_count != 0 && p.date == date;
					})
					if (mod.length != 0) {
						this.load3Day(date, function(isCanbook) {
							if (isCanbook) {
								that.showCalendar = false;
							} else {
								that.util.toast("您选择的日期不可预约")
							}
						});
					} else {
						that.util.toast("您选择的日期不可预约")
					}
				}
			},
			openCalendar() {
				var that = this;
				var edate = this.$moment().add('days', 7).format("yyyy-MM-DD");
				var ndate = this.$moment().add('days', 1).format("yyyy-MM-DD")
				this.loadCalendar(ndate, edate, function(res) {
					that.listCalendar = res;
					that.showCalendar = true;
				});
			},
			formatter(day) {
				for (var m of this.listCalendar) {
					let date = this.$moment(day.date).format("yyyy-MM-DD");
					if (date == m.date) {
						if (m.is_open == 1)
							if (m.remain_count == 0) {
								day.bottomInfo = '售罄'
							} else {
								day.bottomInfo = '余票'
							}
						else {
							day.bottomInfo = '闭馆'
						}
					}
				}
				return day
			},
			handleDate(index) {
				var nt = this.$moment().format("yyyy-MM-DD");
				let list = this.listDatePrice;
				let cdate = list[index];

				if (cdate.is_open === 0) {
					uni.showToast({
						icon: "none",
						title: "该日期已经闭馆"
					})
					return;
				}
				if (cdate.remain_count === 0) {
					uni.showToast({
						icon: "none",
						title: "该日期已经售罄"
					})
					return;
				}

				for (var m of list) {
					m.checked = false;
				}
				cdate.checked = true;

				this.loadDefaultTime(cdate.rules);

				this.currentDate = cdate;
				this.listDatePrice = list;
				this.$forceUpdate();
			},
			handleSelectTime(index) {
				var mod = this.currentDate.rules[index];
				if (mod.remain_count == 0) {
					this.util.toast("该时段已售罄");
					return false
				}
				for (var m of this.currentDate.rules) {
					m.checked = false;
				}
				mod.checked = true;
				this.currentTime = mod;
				this.$forceUpdate();
			},
			openActivity() {
				uni.navigateTo({
					url: "../activity/index"
				})
			},
			openPark() {
				uni.navigateTo({
					url: "/pages/park/index"
				})
			},
			openInfo(e) {
				this.currentNotice = this.listNotice[e];
				this.showInfo = true;
			},
			closeInfo() {
				this.showInfo = false;
			},
			loadUser(cb) {
				var that = this;
				this.util.getOpenidInfo(function(res) {
					that.util.getUserInfo(function(r) {
						cb(r);
					}, true)
				}, true);
			},
			handleBook(type) {
				this.openType = type;
				uni.$u.throttle(this.checkUser, 1500)
			},
			checkUser() {
				let type = this.openType;
				var that = this;
				that.loadUser(function(res) {
					if (that.util.isNull(res.mobile)) {
						that.showAuthorization = true;
					} else {
						that.showAuthorization = false;
						if (type == 1) that.openBook();
						else if (type == 2) that.openActivity()
						else if (type == 3) that.openPark()
					}
				})
			},
			openBook() {
				var that = this;
				this.currentTime = this.currentDate = {};

				var sdate = that.$moment().format("yyyy-MM-DD");
				that.showBook = true;
				that.load3Day(sdate)
			},
			closeBook() {
				this.showBook = false;
			},
			tobook(type) {

				if (this.util.isNull(this.currentDate.date)) {
					this.util.toast("请选择预约的日期");
					return false;
				}
				if (this.util.isNull(this.currentTime.id)) {
					this.util.toast("请选择预约的时段");
					return false;
				}
				uni.navigateTo({
					url: "/pages/visit/book?from=" + type + "&currentDate=" + JSON.stringify(this.currentDate) +
						"&currentTime=" + JSON.stringify(this.currentTime)
				})
			},
			loadInfo() {
				var that = this;
				this.util.request({
					api: '/api/mobile/visit/introduce',
					utilSuccess: function(res) {
						console.log(res);
						that.info = res;
					},
					utilFail: function(res) {

					}
				})

			},
			loadNotice() {
				var that = this;
				this.util.request({
					api: '/api/mobile/other/notice-index',
					utilSuccess: function(res) {
						let arr = [];
						for (var m of res.data) {
							arr.push(m.name)
						}
						that.listNotice = res.data;
						that.list = arr;
					},
					utilFail: function(res) {

					}
				})

			},
			load3Day(sdate, callbak) { //加载7天数据
				var that = this;
				that.listDatePrice = [];
				var edate = this.$moment(sdate).add('days', 2).format("yyyy-MM-DD");
				var ndate = this.$moment(sdate).add('days', 0).format("yyyy-MM-DD")
				var nt = this.$moment().format("yyyy-MM-DD");
				var mt = this.$moment().add('days', 1).format("yyyy-MM-DD");
				var ht = this.$moment().add('days', 2).format("yyyy-MM-DD");
				var selectDate = (nt == sdate) ? ndate : sdate;
				this.loadCalendar(sdate, edate, function(res) {
					that.listDatePrice = res;
					var i = 0;
					let isOpenDate = false;
					for (var m of that.listDatePrice) {
						m.checked = false;
						m.datef = that.$moment(m.date).format("MM月DD日");
						var week = that.$moment(m.date).format("dddd");
						if (m.date == nt)
							m.week = "今天";
						else if (m.date == mt) {
							m.week = "明天";
						} else if (m.date == ht) {
							m.week = "后天";
						} else {
							m.week = week;
						}
						if (m.date == selectDate) {
							if (m.is_open == 1 && m.remain_count > 0) {
								m.checked = true;
								that.currentDate = m;
								that.currentIndex = i;
								that.loadDefaultTime(m.rules);
								isOpenDate = true;
							} else {
								isOpenDate = false;
								/* uni.showToast({
									icon: "none",
									title: selectDate + "不可以预约",
									complete() {
										setTimeout(function() {
											that.load3Day(that.$moment(selectDate).add('days', 1)
												.format("yyyy-MM-DD"))
										}, 2000)
									}
								}, 2000) */
							}
						}
						i++;
					}
					if (callbak)
						callbak(isOpenDate);

				})


			},
			loadDefaultTime(rules) {
				var that = this;
				that.currentTime = {};
				let isDefault = false;
				for (var mod of rules) {
					mod.checked = false;

					if (!isDefault && mod.remain_count > 0) {
						isDefault = true;
						mod.checked = true;
						that.currentTime = mod;
					}
				}

			},
			loadCalendar(sdate, edate, cb) {
				var that = this;
				this.util.request({
					api: '/api/mobile/visit/get-calendar',
					data: {
						start_date: sdate,
						end_date: edate
					},
					utilSuccess: function(res) {
						cb(res);
					},
					utilFail: function(res) {

					}
				})
			}
		}
	}
</script>

<style>
	@import url("@/static/css/bookbox.css");


	.timeitem-none {
		color: #ccc;
	}


	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.box-row {
		display: flex;
		justify-content: space-around;
		padding: 0rpx 37rpx;
	}

	.box-top {
		width: 100%;
	}

	.index_bg {
		width: 100%;
		height: 613rpx;
	}

	.box-notice {
		width: 100%;
		background-color: #F9F7F3;
		height: 63rpx;
		margin-top: -20rpx;
		border-top-left-radius: 15rpx !important;
		border-top-right-radius: 15rpx !important;
	}

	.u-notice-bar {
		border-top-left-radius: 15rpx !important;
		border-top-right-radius: 15rpx !important;
	}

	.box-body {
		width: 100%;
		padding: 82rpx 0;
	}

	.box-body-title {
		padding: 0rpx 37rpx;
	}

	.box-body-title-img {
		height: 36rpx;
		width: 329rpx;

	}

	.box-body-sub-title {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8A8A8A;
		margin-top: 20rpx;
	}

	.box-body-icon {
		width: 217rpx;
		height: 230rpx;
	}

	.footer-img {
		width: 421rpx;
		height: 364rpx;
	}
</style>