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

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<view class="me">
				<image class="me-top" :src="base.imgHost('me-top.png')"></image>
				<view class="me-wrap">
					<view class="me-name">
						<view class="me-name-left">
							<image mode="widthFix" :src="base.imgHost('login-logo.png')"></image>
							<view class="userinfo">
								<view class="userinfo-img" @click="changeAvatar">
									<image :src="userAvatar?userAvatar:base.imgHost('logo-add.png')"></image>
								</view>
								<view>
									<view class="usersigns">
										<text>姓名：</text>
										<text>{{userInfo.username?userInfo.username:'-'}}</text>
									</view>
									<view class="usersigns" v-if="userInfo.no">
										<text>学号：</text>
										<text>{{userInfo.no?userInfo.no:'-'}}</text>
									</view>
									<view class="usersigns" v-if="course_signs.length>0">
										<block v-if="course_signs[0]['course']">
											<text>学籍：</text>
											<text>{{course_signs[0]['course'].year?course_signs[0]['course'].year+'年':''}}{{course_signs[0]['course'].type_detail?course_signs[0]['course']['type_detail'].name+"|":''}}{{course_signs[0]['course'].name}}</text>
										</block>
									</view>
								</view>
							</view>
						</view>
						<view v-if="myQrcode" class="me-name-right usercode" @click="showBigCode=true">
							<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode"
								:sizeUnit="'rpx'" :size="160" 
								:options="{ 
									margin: 10,
									foregroundImageSrc: '/static/index_icon1.png',
								 }"></uqrcode>
						</view>
					</view>
				</view>

			</view>
			<view class="menu">
				<view @click="refreshCode">
					<view>
						<image :src="base.imgHost('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="toUrl(2)">
					<view>
						<image :src="base.imgHost('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(6)">
					<view>
						<image :src="base.imgHost('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="base.imgHost('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="toUrl(5)">
					<view>
						<image :src="base.imgHost('me-icon6.png')" style="width:47rpx;height:50rpx;"></image>
						<text>我要捐赠</text>
					</view>
					<u-icon name="arrow-right" size="32" color="#666" style="margin-left:40rpx"></u-icon>
				</view>
				<view @click="toUrl(1)">
					<view>
						<image :src="base.imgHost('me-icon7.png')" style="width:48rpx;height:52rpx;"></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="base.imgHost('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 @click="toUrl(4)">
					<view>
						<image :src="base.imgHost('me-icon5.png')" style="width:48rpx;height:52rpx;"></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" v-if="showCard">
			<view class="modal-image">
				<view class="modal-close" @click="showCard = false">X</view>
				<image mode="widthFix" :src="base.imgHost('me-xyk1.png')"></image>
			</view>

			<view class="modal-xyk">
				<view>
					<!-- <view style="margin-bottom:40rpx;text-align: center;">电子校园卡</view> -->
					<view class="modal-xyk-between">
						<view class="modal-xyk-item modal-xyk-code">
							<view style="display: flex;justify-content: center;" @click="bigCode">
								<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode"
									:sizeUnit="'rpx'" :size="200" :options="{ 
									margin: 10,
									foregroundImageSrc: '/static/index_icon1.png',
								 }"></uqrcode>
							</view>
							<view class="modal-xyk-item-reload" @click="getQrCode" v-if="myQrcode">
								<image :src="base.imgHost('me-reload.png')"></image>
								<view>点击二维码刷新</view>
							</view>
						</view>
						<view class="modal-xyk-item modal-xyk-name">
							<view class="modal-xyk-name-img">
								<image :src="userAvatar?userAvatar:base.imgHost('logo-user.png')"></image>
							</view>
							<view class="modal-xyk-name-course">
								<text>姓名：</text>
								<text>{{userInfo.username}}</text>
							</view>
							<view class="modal-xyk-name-course">
								<text>学号：</text>
								<text>{{userInfo.no?userInfo.no:'-'}}</text>
							</view>
							<view class="modal-xyk-name-course" v-if="course_signs.length>0">
								<block v-if="course_signs[0]['course']">
									<text>学籍：</text>
									<text>{{course_signs[0]['course'].year?course_signs[0]['course'].year+'年':''}}{{course_signs[0]['course'].type_detail?course_signs[0]['course']['type_detail'].name+"|":''}}{{course_signs[0]['course'].name}}</text>
								</block>
							</view>
						</view>
					</view>
					

				</view>

			</view>
		</view>
		<!-- 公众号 -->
		<view class="modal-wrap" v-if="showGzh">
			<view class="modal-image" style="height:68%;text-align: center;">
				<view class="modal-close" @click="showGzh = false">X</view>
				<image mode="heightFix" style="height:100%" show-menu-by-longpress :show-menu-by-longpress="true"
					:src="base.imgHost('me-gzh.png')"></image>
			</view>
		</view>
		<!-- 进入后没有手机号的话 绑定 或者 注册 -->
		<view class="modal">
			<u-popup v-model="showRegister" mode="bottom">
				<view>
					<view class="modal-tip">提示</view>
					<view class="modal-content">
						<view>如您已是我方校友，请先绑定账号</view>
						<view @click="goBind" class="modal-bind">
							去绑定
						</view>
						<view>如您还不是我方校友，请先注册</view>
						<view @click="toRegister" class="modal-register">
							去注册
						</view>
					</view>
				</view>

			</u-popup>
		</view>
		<view v-if="showBigCode" class="big">
			<view class="big-wrap">
				<view class="big-close" @click='showBigCode=false'>X</view>
				<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode" :sizeUnit="'rpx'"
					:size="600" :options="{ 
					margin: 10,
					foregroundImageSrc: '/static/index_icon1.png',
				 }"></uqrcode>
			</view>
		</view>
		<tabbar :currentPage="3"></tabbar>
	</view>
</template>

<script>
	import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue'
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default {
		components: {
			tabbar,
			uqrcode
		},
		data() {
			return {
				showRegister: false,
				userAvatar:'',
				type: 'register',
				showGzh: false,
				showCard: false,
				userInfo: {},
				hasMobile: false,
				course_signs: [],
				showBigCode: false,
				myQrcode: 'STBC',
				timer: null
			}
		},
		onShareAppMessage() {
			return {
				title: "苏州科技商学院",
				imageUrl: "/static/share.jpg"
			}
		},
		onShareTimeline() {
			return {
				title: "苏州科技商学院",
				imageUrl: "/static/share.jpg"
			}
		},
		onShow() {
			this.showRegister = false
			this.getUserInfo()
			let that = this
			if (!this.timer) {
				this.timer = setInterval(function() {
					that.getQrCode()
				}, 3 * 60 * 1000)
			}
		},
		onLoad() {

		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		onHide() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			refreshCode() {
				if (!this.hasMobile) {
					this.base.toast("请先绑定或注册")
					this.showRegister = true
					return
				}
				this.showCard = true
			},
			bigCode() {
				this.showCard = false
				this.showBigCode = true
			},
			changeAvatar(){
				uni.navigateTo({
					url:'/packages/avatarUpload/index'
				})
			},
			toUrl(type) {
				if (type === 1 || type === 2 || type === 3) {
					if (!this.hasMobile) {
						this.base.toast("请先绑定或注册")
						this.showRegister = true
						return
					}
				}
				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'
					})
				} else if (type === 4) {
					uni.navigateTo({
						url: '/packages/webview/index?type=4'
					})
				} else if (type === 5) {
					uni.navigateTo({
						url: '/packages/donate/index'
					})
				} else if (type === 6) {
					uni.navigateTo({
						url: '/packages/courseCalendar/index'
					})
				}
			},
			getUserInfo() {
				this.$u.api.user().then(res => {
					console.log("res", res)
					this.$u.vuex('vuex_user', res.user)
					this.userInfo = res.user
					this.course_signs = res.user.course_signs ? res.user.course_signs : []
					this.myQrcode = res.course_signs ? res.course_signs.qrcode : 'STBC'
					this.userAvatar = res.user.headimgurl?res.user.headimgurl:''
					if (this.base.isNull(res.user.mobile)) {
						this.showRegister = true
						this.hasMobile = false
					} else {
						this.showRegister = false
						this.hasMobile = true
					}
				})
			},
			getQrCode() {
				uni.showLoading({
					title: '...'
				})
				this.$u.api.user().then(res => {
					this.myQrcode = res.course_signs ? res.course_signs.qrcode : 'STBC'
					setTimeout(function() {
						uni.hideLoading()
					}, 500)
				})
			},
			// 去绑定登录
			goBind() {
				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;
				}

				&-wrap {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					top: 0rpx;
					left: 0;
					padding: 30rpx;
					width: 100%;
				}

				&-name {
					width: 100%;
					color: #fff;
					font-size: 30rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					&-left {
						width:100%;
						&>image {
							width: 200rpx;
							margin-bottom: 30rpx;
							// height: 110rpx;
							// margin-right: 20rpx;
						}
						.userinfo {
							line-height: 1.5;
							display: flex;
							align-items: center;
							// margin-top: 40rpx;
							image {
								width: 120rpx;
								height: 120rpx;
								margin-right: 30rpx;
								border-radius: 100%;
							}
						}

						.usersigns {
							display: flex;

							&>text:first-child {
								width: 100rpx;
							}

							&>text:last-child {
								width: calc(100% - 100rpx);
							}
						}
					}
					.usercode {
						width: 160rpx;
					}
				}
			}

			.menu {
				position: absolute;
				top: 320rpx;
				width: 100%;
				background-color: #fff;
				// z-index: 999;
				border-radius: 40rpx 40rpx 0 0;
				height: calc(100% - 320rpx);
				padding: 40rpx;
				overflow: scroll;

				&>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: 450rpx;
				padding: 0 30rpx;
				font-size: 32rpx;
				text-align: center;

				&>view {
					margin: 30rpx auto;
				}
			}

			&-bind {
				width: 45%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				border-radius: 30rpx;
				padding: 20rpx;
				background: linear-gradient(to right, #e4cdb4, #c69c6d);
			}

			&-register {
				width: 45%;
				text-align: center;
				margin: 0 auto;
				color: #fff;
				border-radius: 30rpx;
				padding: 20rpx;
				background: linear-gradient(to right, #5e5fbc, #0d0398);
			}
		}

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

			.modal-close {
				width: 80rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				background: #6e6e77;
				border-radius: 80rpx;
				position: absolute;
				top: -90rpx;
				right: 0rpx;
			}

			.modal-image {
				position: absolute;
				top: 48%;
				left: 50%;
				transform: translate(-50%, -50%);
				// height: 60%;
				width: calc(100% - 60rpx);

				&>image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.modal-xyk {
			position: absolute;
			top: 57%;
			left: 50%;
			transform: translate(-50%, -50%);
			// height: 70%;
			color: #fff;
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;

			&>view {
				width: 100%;
				padding: 30rpx;
			}

			&-between {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 20rpx 60rpx;
				padding-left:30rpx;
			}

			&-item {
				&>view {
					text-align: center;
				}

				&-reload {
					display: flex;
					align-items: center;
					// padding: 10rpx 40rpx;
					justify-content: center;
					margin-top: 20rpx;
					font-size: 24rpx;
					image {
						width: 27rpx;
						height: 25rpx;
						margin-right: 10rpx;
					}
				}
			}
			&-code{
				width: 270rpx;
				/* margin-right: 10rpx; */
				border-right: 1rpx solid rgba(255,255,255,0.2);
				padding-right: 30rpx;
			}
			&-name {
				width: calc(100% - 310rpx);
				margin-right: 0;

				&>view {
					text-align: left;
					// margin-bottom: 20rpx;
				}
				&-img{
					image{
						width: 100rpx;
						height: 100rpx;
						margin-left: 30rpx;
						margin-bottom:10rpx;
						border-radius: 100%;
					}
				}
				&-course {
					display: flex;
					margin-bottom:10rpx;
					&>text:first-child {
						width: 100rpx;
					}

					&>text:last-child {
						width: calc(100% - 100rpx);
					}
				}
			}
		}

		.big {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.7);
			overflow: scroll;

			&-wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 500rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}

			&-close {
				width: 80rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				background: #6e6e77;
				border-radius: 80rpx;
				position: absolute;
				top: -80rpx;
				right: 0;
			}
		}
	}
</style>