zc_saas_h5/pages/wd/index.vue

<template>
	<view>
		<image mode="widthFix" :src="isLogin ? '/static/wd_bg_login.jpg' : '/static/wd_bg.jpg'" :class="isLogin ? 'login_full_img' : 'full_img'"></image>

		<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 style="width: 100%;height: 40px;background-color: #F0F1F5;position: fixed;top: 150px;z-index: 100;"></view>
			<view style="display: flex;height: 160rpx;align-items: center; position: fixed;z-index: 999;top: 110px;" v-if="isLogin">
				<image :src="userInfo ? $method.splitImgHost(userInfo.avatar, true) : ''" class="avatar"></image>
				<view style="margin-left: 20rpx;z-index: 999;">
					<view style="color: #FFFFFF;font-size: 36rpx;padding: 10rpx;">{{ userInfo.nickname }}</view>
					<view style="color: #333333;font-size: 36rpx;padding: 10rpx;">{{ userInfo.telphone }}</view>
				</view>
				<view style="background-color: #F0F1F5;height:80rpx;"></view>
			</view>
			<view style="top: 195px;position: relative;padding-bottom: 30rpx;">
				<navigator  hover-class="none" url="/pages2/plan/index" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon1.png" class="my_icon"></image>
						<view>学习计划</view>
					</view>
					<view class="box_right">
						今天有
						<text>{{ userNums.planSum }}</text>
						个学习任务
					</view>
				</navigator>
				<view class="two_menu">
					<navigator  hover-class="none" url="/pages2/wd/class" class="small_menu">
						<image src="/static/icon/my_icon3.png" class="my_icon"></image>
						<view>我的网课</view>
					</navigator>
					<navigator  hover-class="none" url="/pages2/wd/question_bank" class="small_menu">
						<image src="/static/icon/my_icon4.png" class="my_icon"></image>
						<view>我的题库通</view>
					</navigator>
				</view>
				<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="/pages2/exam/index" 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>
				</navigator>
				<view class="logout" @click="logout">退出</view>
			</view>
		</view>

		<u-navbar :is-back="false" title="我的" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
			<view class="slot-wrap"><image src="/static/logo.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image></view>
		</u-navbar>
	</view>
</template>

<script>
import { websocket } from '@/common/socket.js';
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			list: [23, 24, 25, 26, 27, 28, 29],
			content: '此功能暂未开放',
			show: false,
			isLogin: false,
			userNums: {}
		};
	},
	onLoad(option) {
		console.log(option,987)
	},
	onShow() {
		this.isLogin = this.$method.isLogin();
		if(this.isLogin){
		this.$store.state.allowLoading = false;
		this.getNums();
		this.$store.state.allowLoading = true;
		}
		// this.$store.dispatch('changeTabsNum')
	},
	methods: {
		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('/pages/login/login');
		}
	},
	computed: { ...mapGetters(['userInfo','hideBuyState']) }
};
</script>
<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
page {
	background-color: #f0f1f5;
}
</style>
<style scoped lang="scss">
.login_wrap {
	text-align: center;
	margin-top: 60rpx;
	
	.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;
	}
}
.avatar {
	height: 70rpx;
	width: 70rpx;
	border-radius: 50%;
}
.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: 104rpx;
	background: #ffffff;
	border-radius: 24rpx;
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	justify-content: space-between;
	color: #666666;
	font-size: 32rpx;
	
	.box_left {
		display: flex;
		align-items: center;
	}
	
	.box_right {
		font-size: 32rpx;
		
		text {
			color: #007AFF;
			margin: 0 5rpx;
		}
	}
}
.loginBox {
	position: relative;

	padding: 0 30rpx;
}
.avatar {
	width: 80px;
	height: 80px;
}
.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>