school/pages/user/user.vue

<template>
	<view class="center">
		<view class="top">
			<image class="bg" src="../../static/img/userBg.png"></image>
			<view class="title">我的</view>
			<view class="user flex">
				<view class="toux"><image :src="userInfo.avatar" mode=""></image></view>
				<view class="font">
					<view class="name">{{ userInfo.nickname }}</view>
					<view class="banzhuren">顾问：李丹 12012502360</view>
				</view>
			</view>
		</view>
		<view class="navBar flex">
			<view class="left" @click="nav('/pages/course/course')">
				<image src="../../static/img/userLeft.png"></image>
				<view class="centent">
					<view class="title">待上课程</view>
					<view class="text">待完成数</view>
					<view class="number">{{dai}}<text>个</text></view>
				</view>
			</view>
			<view class="right"  @click="nav('/pages/course/courseWan')">
				<image src="../../static/img/userRight.png"></image>
				<view class="centent">
					<view class="title">完成课程</view>
					<view class="text">总完成数</view>
					<view class="number">{{wan}}<text>个</text></view>
				</view>
			</view>
		</view>
		<view class="system">
			<view class="item flex" @click="nav('/pages/user/userInfo')">
				<image class="img" src="../../static/img/aboutMy.png"></image>
				<view class="item-text">我的资料</view>
				<image class="return" src="../../static/img/return.png" ></image>
			</view>
			<view class="item flex">
				<image class="img" src="../../static/img/userAbout.png"></image>
				<view class="item-text">关于我们</view>
				<image class="return" src="../../static/img/return.png" ></image>
			</view>
			<view class="item flex">
				<image class="img" src="../../static/img/aboutSet.png"></image>
				<view class="item-text">设置</view>
				<image class="return" src="../../static/img/return.png" ></image>
			</view>
		</view>
	</view>
</template>

<script>
import { getCourse } from '@/api/course.js'
import { mapState, mapMutations } from 'vuex';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { getUserInfo,} from '@/api/user.js';
export default {
	computed: {
		...mapState(['hasLogin', 'userInfo', 'baseURL', 'urlFile'])
	},
	data() {
		return {
			dai: '0',//待上课程
			wan: '0',//完成课程
		}
	},
	onShow() {
		// 判断是否已经登录
		if (this.hasLogin) {
			console.log(this.userInfo)
			this.loadBaseData();
		}else{
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						console.log(e)
						if (e.confirm) {
							console.log("1111")
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}
	},
	methods: {
		...mapMutations( ['setUserInfo', 'setOrderInfo']),
		loadBaseData() {
			getUserInfo({})
				.then(({ data }) => {
					
					if (data.store_switch == '1') {
						this.showBox = true;
					}
					this.setUserInfo(data);
				})
				.catch(e => {
					console.log(e);
				});
			getCourse({})
				.then(e => {
					this.dai = e.data.count;
				})
				.catch(e => {
					console.log(e);
				});
		},
		navT(){
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						console.log(e)
						if (e.confirm) {
							console.log("1111")
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}else{
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		nav(url){
			if (!this.hasLogin) {
				uni.showModal({
					title: '登录',
					content: '您未登录，是否马上登陆?',
					success: e => {
						if (e.confirm) {
							interceptor();
						}
					},
					fail: e => {
						console.log(e);
					}
				});
				return;
			}else{
				uni.navigateTo({
					url: url
				})
			}
		}
	}
}
</script>

<style lang="scss">
page,
.center {
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
}
.top{
	position: relative;
	width: 100%;
	height: 474rpx;
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.title {
		padding-left: 38rpx;
		padding-top: 20rpx;
		font-size: 48rpx;
		font-weight: 500;
		color: #111111;
	}
	.user {
		justify-content: flex-start;
		margin-top: 35rpx;
		padding-left: 36rpx;
		.toux {
			width: 136rpx;
			height: 136rpx;
			background: #FFFFFF;
			border-radius: 50%;
			image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 50%;
			}
		}
		.font {
			height: 136rpx;
			padding-top: 14rpx;
			padding-left: 30rpx;
			.name {
				font-size: 36rpx;
				font-weight: bold;
				color: #000000;
			}
			.banzhuren {
				margin-top: 14rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #8E8E8E;
			}
		}
	}
}
.navBar{
	margin-top: -100rpx;
	padding: 18rpx;
	width: 100%;
	.left {
		position: relative;
		width: 50%;
		height: 250rpx;
		image {
			
			height: 100%;
			width: 100%;
		}
		
	}
	.right {
		position: relative;
		width: 50%;
		height: 250rpx;
		image {
			height: 100%;
			width: 100%;
		}
	}
}
.centent {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 56rpx;
	padding-top: 52rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	.text {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #8E8E8E;
	}
	.number {
		font-size: 44rpx;
		font-weight: bold;
		color: #1CC7C7;
		text-shadow: 0px 2px 24px rgba(28, 199, 199, 0.4);
		margin-top: 20rpx;
		text {
			font-size: 28rpx;
		}
	}
}
.system {
	width: 90%;
	margin: 0 auto;
	padding-top: 10rpx;
	background: #FFFFFF;
	box-shadow: 0px 2rpx 24rpx 0rpx rgba(0, 0, 0, 0.06);
	border-radius: 20rpx;
	.item {
		height: 112rpx;
		padding: 44rpx 36rpx 36rpx 40rpx;
		.img {
			height: 36rpx;
			width: 36rpx;
			
		}
		.item-text {
			width: 85%;
			text-align: left;
			font-size: 32rpx;
			font-weight: 500;
			color: #555555;
			line-height: 36rpx;
		}
		.return {
			width: 14rpx;
			height: 26rpx;
		}
	}
}
</style>