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" mode="link" 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">开馆时间：周二～周日 9:00-17:00 周一闭馆</view>
			</view>
			<view style="margin-top: 56rpx;">
				<view class="box-row">
					<view class="box-col" @click="openBook">
						<image src="../../static/img/index_icon_1.png" class="box-body-icon"></image>
					</view>
					<view class="box-col" @click="openActivity">
						<image src="../../static/img/index_icon_2.png" class="box-body-icon"></image>
					</view>
					<view class="box-col">
						<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" @open="openBook" :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">
									<view class="book-box-row-dateitem book-box-row-dateitem-none">
										<view class="book-box-row-dateitem-status">售罄</view>
										<view>今天</view>
										<view>5月6日</view>
									</view>
									<view class="book-box-row-dateitem book-box-row-dateitem-on">
										<view class="book-box-row-dateitem-status">
											<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
										</view>
										<view>今天</view>
										<view>5月6日</view>
									</view>
									<view class="book-box-row-dateitem">
										<view class="book-box-row-dateitem-status">余票</view>
										<view>今天</view>
										<view>5月6日</view>
									</view>
								</view>
								<view class="book-box-row-select">
									<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">
									<view class="book-box-row-timeitem-txt">09:00-10:00</view>
									<view class="book-box-row-timeitem-txt">41张</view>
								</view>
								<view class="book-box-row-timeitem">
									<view class="book-box-row-timeitem-txt">09:00-10:00</view>
									<view class="book-box-row-timeitem-txt">41张</view>
								</view>
								<view class="book-box-row-timeitem">
									<view class="book-box-row-timeitem-txt">09:00-10:00</view>
									<view class="book-box-row-timeitem-txt">41张</view>
								</view>
								<view class="book-box-row-timeitem book-box-row-timeitem-on">
									<view class="book-box-row-timeitem-status">
										<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
									</view>
									<view class="book-box-row-timeitem-txt">09:00-10:00</view>
									<view class="book-box-row-timeitem-txt">41张</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="book-box-selectInfo">
					<view class="book-box-selectInfo-left">已选：5月6日 09:00-10:00</view>
					<view class="book-box-selectInfo-right">
						<text class="book-box-selectInfo-righttxt">预约须知</text>
						<u-icon name="arrow-right" color="#EF9525" size="20rpx"></u-icon>
					</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-popup :show="showInfo" mode="center" @close="closeInfo" @open="openInfo" :round="10" closeable>
			<view class="mpopup">
				<view class="mpopup-title">
					通知
				</view>
				<view class="mpopup-content">
					<text>人生若只如初见，何事秋风悲画扇</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showInfo: false,
				showBook: false,
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				]
			}
		},
		onLoad() {
			console.log(this.util)
		},
		methods: {
			openActivity() {
				uni.navigateTo({
					url: "../activity/index"
				})
			},
			openInfo() {
				this.showInfo = true;
			},
			closeInfo() {
				this.showInfo = false;
			},
			openBook() {
				this.showBook = true;
			},
			closeBook() {
				this.showBook = false;
			},
			tobook(type) {
				if (type == "user") {
					uni.navigateTo({
						url: "/pages/visit/book"
					})
				} else {
					uni.navigateTo({
						url: "/pages/visit/teambook"
					})
				}
			}
		}
	}
</script>

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





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