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">{{userInfo.username?userInfo.username:'-'}}</view>
			<view class="menu">
				<view @click="tourl(1)">个人中心</view>
				<view @click="tourl(2)">我的课程</view>
				<view @click="tourl(3)">我的预约</view>
				<view @click="showCard = true">电子校友卡</view>
				<view @click="showGzh = true">关注公众号</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 class="modal-tip">提示</view>
				<view class="modal-content">
					<view>您还未绑定账号，请先绑定。</view>
					<view>如您还不是我方校友，请先注册。</view>
				</view>

				<view class="modal-btn">
					<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>
			</u-popup>
		</view>
		<!-- 都需要手机验证码 -->
		<view class="modal">
			<u-popup v-model="showBind" mode="bottom">
				<view class="modal-tip">手机验证</view>
				<view class="modal-content">
					<view>
						<u-input v-model="form.mobile" placeholder="手机号" type="number" :maxlength="11" />
					</view>
					<view>
						<u-input v-model="form.code" placeholder="验证码" />
						<u-button size="mini" type="primary" @click="getSmsCode">获取验证码</u-button>
					</view>
				</view>

				<view class="modal-btn">
					<u-button type="primary" @click="toBind">绑定</u-button>
				</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',
				showBind: false,
				showGzh:false,
				showCard:false,
				form: {
					mobile: '',
					code: '',
					is_bind: 1
				},
				userInfo: {}
			}
		},
		onShow() {
			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
					}
				})
			},
			// 获取验证码 绑定
			getSmsCode() {
				if (this.base.isNull(this.form.mobile)) {
					this.base.toast('手机号码不能为空')
					return
				}
				if (!this.base.isMobile(this.form.mobile)) {
					this.base.toast('手机号码错误')
					return
				}
				this.$u.api.sendSms({
					mobile: this.form.mobile
				}).then(res => {
					this.base.toast("发送成功")
				})
			},
			//  绑定手机号 就是
			toBind() {
				if (this.base.isNull(this.form.mobile)) {
					this.base.toast('手机号码不能为空')
					return
				}
				if (!this.base.isMobile(this.form.mobile)) {
					this.base.toast('手机号码错误')
					return
				}
				if (this.base.isNull(this.form.code)) {
					this.base.toast('验证码不能为空')
					return
				}

				this.$u.api.bindMobile({
					mobile: this.form.mobile,
					code: this.form.code,
					is_bind: this.form.is_bind
				}).then(res => {
					this.base.toast("绑定成功")
					this.showBind = false
					// if(this.type=='bind'){
					// 	this.getUserInfo()
					// }else if(this.type=='register'){
					// 	uni.navigateTo({
					// 		url:'/packages/register/index'
					// 	})
					// }
					// uni.navigateTo({
					// 	url:'/packages/apply/index?id='+this.course_id
					// })
				})

			},
		}

	}
</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;
			.me{
				background-color: #ceab8a;
				padding:30rpx;
				text-align: center;
				color:#fff;
				border-radius: 20rpx;
			}
			.menu{
				&>view{
					padding:20rpx;
					border-bottom: 1px solid #ddd;
				}
			}
		}
		.modal {
			&-tip {
				text-align: center;
				padding: 30rpx;
				font-size: 28rpx;
			}

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