saas_miniprogram/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 style="text-align: center;margin-top: 60rpx;" v-if="!isLogin">
			<view style="color: #007AFF ;font-size: 36rpx;font-weight: bold;">
				您还没有登录哦~
			</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="$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.realname}}</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 url="/pages2/plan/index" class="menu_box">
					<view style="display: flex;align-items: center;">
						<image src="/static/icon/my_icon1.png" class="my_icon"></image>
						<view>学习计划</view>
					</view>
					<view>
						今天有 <text style="color: #007AFF;margin: 0 5rpx;">3</text> 个学习任务
					</view>
				</navigator>
				<view class="menu_box">
					<view style="display: flex;align-items: center;">
						<image src="/static/icon/my_icon2.png" class="my_icon"></image>
						<view>我的学时</view>
					</view>
					<view>
						累计<text style="color: #007AFF;margin: 0 5rpx;">3</text> 学时未通过
					</view>
				</view>
				<view class="two_menu">
					<navigator url="/pages2/wd/class" class="small_menu">
						<image src="/static/icon/my_icon3.png" class="my_icon"></image>
						<view>我的网课</view>
					</navigator>
					<navigator class="small_menu">
						<image src="/static/icon/my_icon4.png" class="my_icon"></image>
						<view>我的题库通</view>
					</navigator>
				</view>
				<view class="two_menu">
					<navigator class="small_menu">
						<image src="/static/icon/my_icon5.png" class="my_icon"></image>
						<view>我的证书</view>
					</navigator>
					<navigator class="small_menu">
						<image src="/static/icon/my_icon6.png" class="my_icon"></image>
						<view>我的发票</view>
					</navigator>
				</view>
				<navigator url="/pages2/order/index"  class="menu_box">
					<view style="display: flex;align-items: center;">
						<image src="/static/icon/my_icon7.png" class="my_icon"></image>
						<view>我的订单</view>
					</view>
					<view>
						<text style="color: #007AFF;margin: 0 5rpx;">3</text>笔待支付
					</view>
				</navigator>
				<navigator url="/pages2/msg/index" class="menu_box">
					<view style="display: flex;align-items: center;">
						<image src="/static/icon/my_icon8.png" class="my_icon"></image>
						<view>我的消息</view>
					</view>
					<view>
						<text style="color: #007AFF;margin: 0 5rpx;">3</text>条未读
					</view>
				</navigator>
				<navigator url="/pages2/wd/info" class="menu_box">
					<view style="display: flex;align-items: center;">
						<image src="/static/icon/my_icon9.png" class="my_icon"></image>
						<view>我的资料</view>
					</view>
					
				</navigator>
				<view style="color: #999999;text-align: center;font-size: 32rpx;margin-top: 50rpx;" @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 {mapGetters} from 'vuex';
	export default {
		components: {
			
		},
		data() {
			return {
				list:[23,24,25,26,27,28,29],
				content:'此功能暂未开放',
				show:false,
				isLogin:false
			}
		},
		onLoad() {

		},
		onShow(){
			this.isLogin = this.$method.isLogin()
			console.log(this.isLogin)
		},
		methods: {
			logout(){
				console.log(343)
				this.$method.isLogout()
				this.isLogin = this.$method.isLogin()
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			jumpLogin(){
				this.$navTo.togo('/pages/login/login');
				
			}
			
		},
		computed: {...mapGetters(['userInfo'])}
	}
</script>
<style>
	::-webkit-scrollbar{
		width: 0;
		height: 0;
		color: transparent;
	}
	page{
		background-color: #F0F1F5;
	}
</style>
<style scoped>
	.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{
		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;
	}
	.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;
	}
	.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;
	}
	
</style>