GCLS_Page_Mobile/pages/tabbar/person/index.vue

<template>
	<view class="percon-area">
		<navbar />
		<view style="height:92rpx;"></view>
		<view class="content-area">
			<view class="head-card">
				<view class="head-box">
					<image :src="user_head_img"></image>
				</view>
				<text class="user-text">{{user_name}}</text>
				<button class="quit-btn" @click="signOut">退出登录</button>
			</view>
			<view class="book-card">
				<uni-grid :column="3" :showBorder="false" :square="false">
					<uni-grid-item v-for="(item, index) in pageList" :key="index">
						<view class="book-box" @click="linkBook(item.book_id)">
							<image :src="item.book_picture_url"></image>
						</view>
						<text class="text" @click="linkBook(item.book_id)">{{item.book_name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view style="height:120rpx;"></view>
	</view>
</template>

<script>
	import {
		GetMyBookList_JoinCourse_Student,
	} from '@/api/exercise.js';
	import {
		GetMyUserInfo,
	} from '@/api/user.js';

	export default {
		data() {
			return {
				user_head_img: '', // 用户头像
				default_head_img: '../../../static/head.png', // 默认头像
				user_name: '用户名',
				pageList: [],
			}
		},
		onLoad() {
			this.getMyUserInfo();
			this.loadMoreData();
		},
		methods: {
			getMyUserInfo() {
				GetMyUserInfo().then((res) => {
					if (res.status) {
						this.user_name = res.real_name;
						this.user_head_img = res.image_url ? res.image_url : this.default_head_img;
					}
				});
			},
			//加载数据
			loadMoreData() {
				GetMyBookList_JoinCourse_Student().then((res) => {
					if (res.status) {
						this.pageList = res.book_list;
					}
				})
			},
			//退出
			signOut() {
				this.$store.dispatch('user/signOut');
				window.location.href = '/';
			},
			linkBook(book_id) {
				let baseUrl = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
				let url = baseUrl + '/GCLS-Book/#/courseview?showCourse=true&invok_module=GCLS-LC&bookId=' + book_id +
					"&enterPage=mobilePerson";
				//window.open(url, 'target');
				window.location.href = url;
			},
		}
	}
</script>

<style lang="scss">
	/*竖屏样式*/
	.percon-area {
		.head-card {
			margin: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 17px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			row-gap: 32rpx;
			font-weight: 500;
			font-size: 13pt;

			@media (orientation: landscape) {
				row-gap: 18rpx;
				justify-content: start;
				height: 260px;
				min-width: 120px;
			}

			.head-box {
				width: 160rpx;
				height: 160rpx;
				background-color: #d9d9d9;
				margin: 0 auto;
				border-radius: 80rpx;

				@media (orientation: landscape) {
					width: 100rpx;
					height: 100rpx;
				}

				uni-image {
					width: 100%;
					height: 100%;
					border-radius: 80rpx;
				}
			}

			.quit-btn {
				font-size: 16px;
				border: 1px solid #ed5c5c;
				color: #ed5c5c;
				background-color: #fff;
				padding: 0 40rpx;

				@media (orientation: landscape) {
					padding: 0 20rpx;
				}
			}
		}

		.book-card {
			margin: 16rpx;
			background-color: #fff;
			padding: 16px 22px;
			height: auto;
			margin-bottom: 120px;
			border-radius: 16rpx;

			@media (orientation: landscape) {
				margin-bottom: 20px;
			}

			.book-box {
				width: 85%;

				@media (orientation: landscape) {
					width: 65%;
				}

				aspect-ratio: 3 / 4;
				background-color: #d9d9d9;

				uni-image {
					width: 100%;
					height: 100%;
				}
			}

			.book-box::before {
				display: inline-block;
				padding-bottom: 120%;
				content: '';
			}

			.text {
				margin: 16rpx 0 32rpx 0;
				width: 85%;
				font-size: 13pt;
			}

			/deep/ .uni-grid-item {
				width: 33% !important;

				.uni-grid-item__box {
					align-items: center;
				}
			}
		}
	}

	/* 横屏样式 */
	@media (orientation: landscape) {
		/deep/ .content-area {
			display: flex;
			flex-direction: row;
		}
	}
</style>