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

<template>
	<view class="container">
		<image class="cbg" src="../../static/common_bg.png"></image>
		<view class="wrap">
			<view class="me">
				<image class="me-top" src="../../static/me-top.png"></image>
				<view class="me-name" @click="tourl(1)">
					{{userInfo.username?userInfo.username:'-'}}
					<u-icon name="arrow-right" size="32" style="margin-left:40rpx"></u-icon>
				</view>
			</view>
			<view class="menu">
				<view @click="tourl(2)">
					<view>
						<image src="../../static/me-icon1.png" style="width:52rpx;height:48rpx;"></image>
						<text>我的课程</text>
					</view>
					<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
				</view>
				<view @click="tourl(3)">
					<view>
						<image src="../../static/me-icon2.png" style="width:50rpx;height:50rpx;"></image>
						<text>我的预约</text>
					</view>
					<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
				</view>
				<view @click="showCard = true">
					<view>
						<image src="../../static/me-icon3.png" style="width:51rpx;height:46rpx;"></image>
						<text>电子校友卡</text>
					</view>
					<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
				</view>
				<view @click="showGzh = true">
					<view>
						<image src="../../static/me-icon4.png" style="width:50rpx;height:47rpx;"></image>
						<text>关注公众号</text>
					</view>
					<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
				</view>
			</view>
		</view>
		<!-- 校友卡 -->
		<view class="modal-wrap" @click="showCard = false" v-if="showCard">
			<image mode="widthFix" src="../../static/me-xyk.png"></image>
		</view>
		<!-- 公众号 -->
		<view class="modal-wrap" @click="showGzh = false" v-if="showGzh">
			<image mode="widthFix" src="../../static/me-gzh.png"></image>
		</view>
		<!-- 进入后没有手机号的话 绑定 或者 注册 -->
		<view class="modal">
			<u-popup v-model="showRegister" mode="bottom">
				<view>
					<view class="modal-tip">提示</view>
					<view class="modal-content">
						<view>您还未绑定账号，请先绑定。</view>
						<view>如您还不是我方校友，请先注册。</view>
					</view>

					<view class="modal-btn">
						<u-button type="primary" @click="goBind">去绑定</u-button>
						<u-button type="primary" @click="toRegister">去注册</u-button>
						<!-- <u-button type="primary"
							@click="showBind = true,showRegister=false,type='bind',form.is_bind=0">绑定</u-button>
						<u-button type="primary"
							@click="showBind = true,showRegister=false,type='register',form.is_bind=1">注册</u-button>
					 -->
					</view>
				</view>

			</u-popup>
		</view>

		<tabbar :currentPage="3"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				showRegister: false,
				type: 'register',
				showGzh: false,
				showCard: false,
				userInfo: {}
			}
		},
		onShow() {
			this.showRegister = false
			this.getUserInfo()
		},
		onLoad() {

		},
		methods: {
			tourl(type) {
				if (type === 1) {
					uni.navigateTo({
						url: '/packages/my/index'
					})
				} else if (type === 2) {
					uni.navigateTo({
						url: '/packages/mycourse/index'
					})
				} else if (type === 3) {
					uni.navigateTo({
						url: '/packages/mybook/index'
					})
				}
			},
			getUserInfo() {
				this.$u.api.user().then(res => {
					console.log("res", res)
					this.$u.vuex('vuex_user', res.user)
					this.userInfo = res.user
					if (this.base.isNull(res.user.mobile)) {
						this.showRegister = true
					} else {
						this.showRegister = false
					}
				})
			},
			// 去绑定登录
			goBind() {
				console.log("qwe")
				uni.navigateTo({
					url: '/packages/register/login'
				})
			},
			// 去注册
			toRegister() {
				uni.navigateTo({
					url: '/packages/register/index'
				})
			},
		}

	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;

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

		.wrap {
			position: relative;
			height: calc(100% - 60rpx);

			.me {
				width: 690rpx;
				height: 435rpx;
				position: relative;

				&-top {
					width: 690rpx;
					height: 435rpx;
				}

				&-name {
					color: #fff;
					font-size: 32rpx;
					position: absolute;
					top: 120rpx;
					left: 30rpx;
				}
			}

			// .me{
			// 	background-color: #ceab8a;
			// 	padding:30rpx;
			// 	text-align: center;
			// 	color:#fff;
			// 	border-radius: 20rpx;
			// }
			.menu {
				position: absolute;
				top: 240rpx;
				width: 100%;
				background-color: #fff;
				// z-index: 999;
				border-radius: 40rpx 40rpx 0 0;
				height: calc(100% - 240rpx);
				padding: 40rpx;

				&>view {
					padding: 30rpx;
					color:#666;
					border-bottom: 1px solid #ddd;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&>view:first-child{
						display: flex;
						align-items: center;
						text{
							margin-left:20rpx
						}
					}
				}
				
			}
		}

		.modal {
			::v-deep .u-drawer-bottom {
				border-radius: 40rpx;
			}

			&-tip {
				text-align: center;
				padding: 30rpx;
				font-size: 32rpx;
			}

			&-content {
				height: 300rpx;
				padding: 0 30rpx;
			}

			&-btn {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;

				u-button {
					width: 45%;
				}
			}
		}

		.modal-wrap {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);

			&>image {
				width: 90%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>