sz-kjsxy-wx-new/pages/book/index.vue

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('alumni-benefits-bg.png')"></image>
		<!-- <image class="profile-icon" src="/static/index_icon1-4.png" @click="goToProfile"></image> -->
		<view class="button-grid">
			<view class="grid-item" @click="handleButtonClick('alumni')">
				<image class="item-bg" :src="base.imgHost('xy1.png')"></image>
				<!-- <view class="item-content">
					<image class="icon" :src="base.imgHost('alumni-benefits-icon1.png')" mode="aspectFit"></image>
					<text class="label-1">校友库</text>
				</view> -->
			</view>
			<view class="grid-item" @click="handleButtonClick('supply-demand')">
				<image class="item-bg" :src="base.imgHost('xy2.png')"></image>
				<!-- <view class="item-content">
					<image class="icon" :src="base.imgHost('alumni-benefits-icon3.png')" mode="aspectFit"></image>
					<text class="label-2">供需发布</text>
				</view> -->
			</view>
			<view class="grid-item" @click="handleButtonClick('booking')">
				<image class="item-bg" :src="base.imgHost('xy3.png')"></image>
				<!-- <view class="item-content">
					<image class="icon" :src="base.imgHost('alumni-benefits-icon2.png')" mode="aspectFit"></image>
					<text class="label-2">场地预约</text>
				</view> -->
			</view>
			
			<view class="grid-item" @click="handleButtonClick('library')">
				<image class="item-bg" :src="base.imgHost('xy4.png')"></image>
				<!-- <view class="item-content">
					<image class="icon" :src="base.imgHost('alumni-benefits-icon4.png')" mode="aspectFit"></image>
					<text class="label-1">图书馆查询</text>
				</view> -->
			</view>
            <view class="grid-item grid-item-wide" @click="handleButtonClick('hr')">
                <image class="item-bg item-bg-wide" :src="base.imgHost('xy5.png')"></image>
				<!-- <view class="item-content">
					<image class="icon" :src="base.imgHost('alumni-benefits-icon4.png')" mode="aspectFit"></image>
					<text class="label-1">图书馆查询</text>
				</view> -->
			</view>
		</view>
		<tabbar :currentPage="2"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				user: {},
				enter_schoolmate: 0
			}
		},
		onShareAppMessage() {
			return{
				title:"苏州科技商学院",
				imageUrl:"/static/share.jpg"
			}
		},
		onShareTimeline() {
			return{
				title:"苏州科技商学院",
				imageUrl:"/static/share.jpg"
			}
		},
		onShow() {
			this.getUser()
		},
		onLoad() {
		},
		methods: {
			getUser() {
				this.$u.api.user().then(res => {
					console.log("res", res)
					this.enter_schoolmate = res.enter_schoolmate
					this.$u.vuex('vuex_user', res.user)
				})
			},
			goToProfile() {
				uni.navigateTo({
					url: '/packages/chat/index'
				});
			},
			handleButtonClick(type) {
				switch (type) {
					case 'alumni':
						if (this.enter_schoolmate) {
							uni.navigateTo({
								url: '/packages/schoolmate/index'
							})
						} else {
							this.base.toast("您还不是校友，无权查看", 1000, function() {
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/course/index'
									})
								}, 1000)

							})
						}
						break;
					case 'booking':
						uni.navigateTo({
							url: '/packages/booksubmit/appointment'
						})
						break;
					case 'supply-demand':
						uni.navigateTo({
							url: '/packages/supply/index'
						})
						break;
					case 'library':
						uni.navigateTo({
							url: '/packages/library/index'
						})
						break;
					case 'hr':
						uni.navigateTo({
							url: '/packages/hr/index'
						})
						break;
				}
			}
		},

	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		padding-bottom: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: -1;
		}

		.profile-icon {
			position: absolute;
			top: 80rpx;
			right: 60rpx;
			width: 60rpx;
			height: 60rpx;
			z-index: 10;
		}

		.button-grid {
			display: grid;
			grid-template-columns: repeat(2, 368rpx);
			// grid-column-gap: 20rpx;
			// grid-row-gap: 20rpx;
			width: 100%;
			justify-content: center;
			padding: 0 40rpx;
			box-sizing: border-box;
		}

		.grid-item {
			position: relative;
			width: 368rpx;
			height: 380rpx;
		}

		/* 最后一张横向大图 */
		.grid-item-wide {
			grid-column: span 2;
			width: 729rpx;
			height: 239rpx;
		}

		.item-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 368rpx;
			height: 380rpx;
		}

		.item-bg-wide {
			width: 729rpx;
			height: 239rpx;
		}

		.item-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 60rpx 40rpx;
			box-sizing: border-box;
		}

		.icon {
			width: 90rpx;
			height: 90rpx;
			margin-bottom: 60rpx;
		}

		.label-1 {
			font-size: 34rpx;
			font-weight: bold;
			color: #4f4a7b;
		}

		.label-2 {
			font-size: 34rpx;
			font-weight: bold;
			color: #8f6e4d;
		}
	}
</style>