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 || '/static/error/missing-face.png'" mode=""></image></view>
				<view class="font">
					<view class="name">{{ userInfo.real_name || '游客' }}</view>
					<view class="banzhuren">顾问：{{ guwen || 'null' }}</view>
				</view>
			</view>
		</view>
		<view class="navBar ">
			<image class="navBg" src="../../static/img/user.png"></image>
			<view class="navBox flex">
				<view class="main">
					<view class="font">已上课时</view>
					<view class="num">{{ achieve || 0 }}</view>
				</view>
				<view class="xian"></view>
				<view class="main">
					<view class="font">总课时</view>
					<view class="num">{{ all || 0 }}</view>
				</view>
				<view class="xian"></view>
				<view class="main">
					<view class="font">赠送课时</view>
					<view class="num">{{ gift || 0 }}</view>
				</view>
				<view class="xian"></view>
				<view class="main">
					<view class="font">请假课时</view>
					<view class="num">{{ leave || 0 }}</view>
				</view>
			</view>

			<!-- <view class="left" @click="nav('/pages/leave/leaveClass')">
				<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" @click="nav('/pages/user/about')">
				<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" @click="nav('/pages/public/set')">
				<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, my } from '@/api/user.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'baseURL', 'urlFile'])
	},
	data() {
		return {
			all: '', //总课时
			achieve: '', //完成课时
			leave: '', //请假课时
			gift: '', //赠送课时
			guwen: ''
		};
	},
	onShow() {
		console.log(this.hasLogin);
		// 判断是否已经登录
		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']),
		loadBaseData() {
			getUserInfo({})
				.then(({ data }) => {
					this.setUserInfo(data);
				})
				.catch(e => {
					console.log(e);
				});
			my({}).then(({ data }) => {
				console.log(data,"123456");
				this.guwen = data.adviser_name;
				this.all = data.sum_class;
				this.leave = data.leave;
				this.gift = data.give_class;
				this.achieve = data.in_class;
			});
			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%;
	height: 250rpx;
	position: relative;
	.navBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.navBox {
		position: relative;
		z-index: 3;
		width: 100%;
		justify-content: flex-start;
		.main {
			flex: 1;
			padding: 50rpx 30rpx;
			display: flex;
			flex-direction: column;
			.font {
				margin: 0 auto;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
			.num {
				margin: 0 auto;
				margin-top: 24rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				text-shadow: 0px 2rpx 24rpx rgba(28, 199, 199, 0.4);
			}
		}
		.xian {
			width: 2rpx;
			height: 80rpx;
			background: #ffffff;
			// opacity: 0.12;
		}
	}
	// .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>