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> -->
		<u-navbar :is-back="false" title="我的" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
			<view class="slot-wrap">
				<image src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
			</view>
		</u-navbar>
		<view v-if="isLogin" class="imgs_bg">
			<view class="infos">
				<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: 32rpx;">{{ userInfo.nickname }}</view>
				<view style="color: #ffffff;font-size: 20rpx;margin-top: 17rpx">{{ userInfo.telphone }}</view>
				<!-- </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">
			<!-- <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>
					<view @click="goBank()" class="small_menu">
						<image src="/static/icon/my_icon4.png" class="my_icon"></image>
						<view>我的题库通</view>
					</view>
				</view> -->
				<!-- <navigator  hover-class="none" url="/pages5/liveDetail/list" class="menu_box" >
					<view class="box_left">
						<image src="/static/icon/my_icon12.png" class="my_icon"></image>
						<view>我的直播课</view>
					</view>
					<view class="box_right">
						
						<text>{{ total2 }}</text>
						个课程直播中
					</view>
				</navigator> -->
				<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>
				</view>
				<view class="logout" @click="logout">退出</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> -->

		<!-- <tab-bar v-model="current" :list="tabbarlist" :mid-button="true" :mid-button-size="50" class="tab_items"></tab-bar> -->
	</view>
</template>

<script>
// import { websocket } from '@/common/socket.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			list: [23, 24, 25, 26, 27, 28, 29],
			content: '此功能暂未开放',
			show: false,
			isLogin: false,
			userNums: {},
			total1:0,
			total2:0,
			current: 4,
		};
	},
	onLoad(option) {
		// console.log(option,987)
	},
	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.$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.$api.lockLockStatus({
			  action:'bank'
			}).then(res => {
			  if(res.data.code == 200) { //有其他端在操作，不能学习
				  uni.showToast({
					  icon:'none',
					  title:res.data.msg,
					  duration:3000,
				  })
			  } else if(res.data.code == 500) { //可以学习
				  
				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']) }
};
</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: 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;
	.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: 110rpx 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 180rpx 30rpx;
    top: 430rpx;
	width: 100%;
	height: 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>