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.id)">
							<image :src="item.picture_url"></image>
						</view>
						<text class="text" @click="linkBook(item.id)">{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="pageList.length > 0" />
		</view>
		<view style="height:120rpx;"></view>
	</view>
</template>

<script>
	import {
		PageQueryBookList,
	} 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: '用户名',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '加载完毕'
				},
				pageQueryData: {
					page_capacity: 20, // 每页容量，最大不能超过 50
					cur_page: 1, // 当前查询第几页，页码序号从 1 开始
					publish_status: 1,
					sys_version_type: -1,
					is_control_publish_scope: "true",
					is_enable_book_org_free_license_query: "true",
					order_column_list: ["name"]
				},
				total: 0, //数据总条数
				pageList: [],
			}
		},
		onLoad() {
			this.getMyUserInfo();
			this.loadMoreData();
		},
		// 监听触底
		onReachBottom() {
			let that = this;
			if (that.total <= that.pageList.length) {
				uni.showToast({
					title: '已加载全部数据',
					icon: "none"
				});
				that.status = 'noMore';
			} else {
				that.status = 'loading';
				that.pageQueryData.cur_page++;
				that.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() {
				PageQueryBookList(this.pageQueryData).then((res) => {
					if (res.status) {
						this.total = res.total_count;
						if (res.total_count > 0) {
							const dataMap = res.book_list;
							this.pageList = this.reload ? dataMap : this.pageList.concat(dataMap);
							this.reload = false;
						}
						if (this.total === this.pageList.length) {
							this.reload = false;
							this.status = 'noMore'
						}
					}
				})
			},
			//退出
			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>