zc_saas_h5/pages/wd/index.vue

<template>
	<view style="height: 100%">
		<nav-logo title="我的"></nav-logo>
		<view v-if="isLogin" class="imgs_bg">
			<view class="infos" v-if="userInfo">
				<image :src="$method.splitImgHost(userInfo.avatar, true)" class="avatar"></image>
				<view style="color: #ffffff; font-size: 32rpx">{{
          userInfo.nickname
        }}</view>
				<view style="color: #ffffff; font-size: 20rpx; margin-top: 17rpx">{{
          userInfo.telphone
        }}</view>
			</view>
			<!-- <image src="/static/me/me_bgpic.jpg" class="bg_pic"></image> -->
		</view>
		<view class="login_wrap" v-if="!isLogin"> 
			<view class="login_text">您还没有登录哦~</view>
			<view class="loginBtn" @click="jumpLogin">立即登录/注册</view>
		</view>
		<view v-if="isLogin" class="loginBox">
			<view class="contents">
				<navigator hover-class="none" url="/pages2/learn/my_learn" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon2.png" class="my_icon"></image>
						<view>我的学时</view>
					</view>
					<view class="box_right">
						累计
						<text>{{ userNums.periodSum }}</text>
						学时未通过
					</view>
				</navigator>
				<navigator hover-class="none" url="/pages5/exam/index" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon11.png" class="my_icon"></image>
						<view>我的模考</view>
					</view>
					<view class="box_right">
						<text>{{ total1 }}</text>
						个模考预约
					</view>
				</navigator>
				<!--    /pages2/exam/index-->
				<navigator hover-class="none" url="/pages2/exam/exam_appointment" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon10.png" class="my_icon"></image>
						<view>我的考试</view>
					</view>
					<view class="box_right">
						<text>{{ userNums.subscribeSum }}</text>
						考试预约
					</view>
				</navigator>
				<navigator hover-class="none" v-if="!hideBuyState" url="/pages2/order/index" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon7.png" class="my_icon"></image>
						<view>我的订单</view>
					</view>
					<view class="box_right">
						<text>{{ userNums.orderSum }}</text>
						笔待支付
					</view>
				</navigator>
				<navigator hover-class="none" url="/pages2/msg/index" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon8.png" class="my_icon"></image>
						<view>我的消息</view>
					</view>
					<view class="box_right">
						<text>{{ userNums.informSum }}</text>
						条未读
					</view>
				</navigator>
				<navigator hover-class="none" url="/pages2/wd/info" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon9.png" class="my_icon"></image>
						<view>我的资料</view>
					</view>
					<view class="box_right">
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</navigator>
				<navigator hover-class="none" url="/pages2/wd/pwd" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon9.png" class="my_icon"></image>
						<view>修改密码</view>
					</view>
					<view class="box_right">
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</navigator>
				<navigator hover-class="none" url="/pages2/wd/stuff" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon14.png" class="my_icon"></image>
						<view>讲义资料</view>
					</view>
					<view class="box_right">
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</navigator>
			</view>
			<view class="logout" @click="logout">退出</view>
		</view>
		<!-- tabbar -->
		<myTabbar :backTopBtn="backTopBtn"></myTabbar>
	</view>
</template>

<script>
	// import { websocket } from '@/common/socket.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				backTopBtn:false,
				list: [23, 24, 25, 26, 27, 28, 29],
				content: "此功能暂未开放",
				show: false,
				isLogin: false,
				userNums: {},
				total1: 0,
				total2: 0,
				current: 4,
			};
		},
		onLoad(option) {
			uni.hideTabBar();
			// console.log(option,987)
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.backTopBtn = true
			} else {
				this.backTopBtn = false
			}
		},
		onShow() {
			this.isLogin = this.$method.isLogin();
			if (this.isLogin) {
				this.$store.state.allowLoading = false;
				this.getNums();
				this.getCount();
				this.goodsLivingSectionList();
				this.$store.state.allowLoading = true;
				!this.userInfo && this.$api.refreshUserInfo();
			}
			// this.$store.dispatch('changeTabsNum')
		},
		methods: {
			getCount() {
				this.$api
					.mockSubscribeListSubscribe({
						mockStatus: 0,
						pageNum: 1,
						pageSize: 1,
					})
					.then((res) => {
						this.total1 = res.data.total;
					});
			},
			goodsLivingSectionList() {
				this.$api.goodsLivingSectionList().then((res) => {
					this.total2 = res.data.data.length;
				});
			},
			goBank() {
				this.$method.checkLock("bank").then((res) => {
					uni.navigateTo({
						url: "/pages2/wd/question_bank",
					});
				});
			},
			getNums() {
				this.$api.getinfoAttached().then((res) => {
					if (res.data.code === 200) {
						this.userNums = res.data.data;
						const nums =
							res.data.data.informSum +
							res.data.data.orderSum +
							res.data.data.periodSum +
							res.data.data.planSum +
							res.data.data.subscribeSum;
						this.$store.commit("tabNum", nums);
					}
				});
			},
			logout() {
				// websocket.stop()
				this.$method.exit();
				this.isLogin = this.$method.isLogin();
			},
			jumpLogin() {
				this.$navTo.togo("/pages4/login/login");
			},
		},
		computed: {
			...mapGetters(["userInfo", "hideBuyState", "config"])
		},
	};
</script>
<style>
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	page {
		height: 100%;
		background-color: #f0f1f5;
	}
</style>
<style scoped lang="scss">
	.login_wrap {
		text-align: center;
		margin-top: 100rpx;

		.login_text {
			color: #007aff;
			font-size: 36rpx;
			font-weight: bold;
		}

		.loginBtn {
			width: 526rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #015eea, #00c0fa);
			box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
			border-radius: 40rpx;
			color: #ffffff;
			line-height: 80rpx;
			margin: 0 auto;
			margin-top: 50rpx;
		}
	}

	.imgs_bg {
		width: 100%;
		height: 429rpx;
		position: fixed;
		z-index: 999;
		background: linear-gradient(180deg, rgba(0, 122, 255, 1) 0%, #f0f1f5 100%);

		.infos {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.bg_pic {
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
		}
	}

	.avatar {
		height: 160rpx;
		width: 160rpx;
		border-radius: 50%;
		margin: 60rpx 0rpx 37rpx 0rpx;
	}

	.small_menu {
		width: 45%;
		height: 104rpx;
		background: #ffffff;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin-top: 30rpx;
	}

	.two_menu {
		font-size: 32rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
	}

	.my_icon {
		width: 56rpx;
		height: 56rpx;
		margin-right: 20rpx;
	}

	.menu_box {
		height: 130rpx;
		background: #ffffff;
		// border-radius: 24rpx;
		// margin-top: 30rpx;
		display: flex;
		align-items: center;
		// padding: 0 20rpx;
		justify-content: space-between;
		color: #666666;
		font-size: 30rpx;
		font-weight: 500;
		border-bottom: 1rpx solid #eeeeee;

		.box_left {
			display: flex;
			align-items: center;
		}

		.box_right {
			font-size: 32rpx;

			text {
				color: #007aff;
				margin: 0 5rpx;
			}
		}
	}

	.loginBox {
		position: relative;
		padding: 0 30rpx 200rpx 30rpx;
		top: 430rpx;
		width: 100%;
		margin-top: 30rpx;

		.contents {
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
			background-color: #ffffff;
			padding: 0rpx 30rpx 0rpx 20rpx;
		}
	}

	.login_full_img {
		display: block;
		width: 100%;
		height: 150px !important;
		z-index: 300;
		top: 0;
		position: fixed;
	}

	.full_img {
		display: block;
		width: 100%;
		z-index: -999;
		top: 0;
	}

	.logout {
		color: #999999;
		text-align: center;
		font-size: 32rpx;
		margin-top: 50rpx;
	}
</style>