slambb_tplat/pages/personal-page/list/list.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack()" :title="title" color="#000000" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>

		</uni-nav-bar>
		<view class="card-view game-item" v-for="(item,index) in list" :key="index">
			<!-- <view class="only-arrow"> -->
			<view class="content" @tap="onNavTo(item)">
				<image :src="item.gameIcon" class="png"  ></image>
				<text class="text-black text-bold ">{{item.gameName}}</text>
				<view class="only-arrow"></view>
			</view>
			<!-- </view> -->

		</view>
		<view v-if="bDontUpdate" class="text-16px text-gray text-center margin">- 没有更多数据 -</view>
	</view>
</template>

<script>
	import reqUtil from "@/util/util-js/requstUtil.js"
	import config from "@/common/config.js"

	export default {
		data() {
			return {
				list: [],
				title: "最近在玩",
				type:'',
				page:1,
				size:10,
				bDontUpdate:false,
			}
		},
		onLoad(option) {

			let that = this;

			if (option&&option.type) {
				that.type = option.type;
				that.onGetData();
			}

		},
		methods: {
			onNavTo(item) {
				let temItem = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: "../../game-page/game-detail/game-detail?item=" + temItem
				})
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onReachBottom(){
				if(this.bDontUpdate) return;
				this.page++;
				this.onGetData();
			},
			onGetData(){
				let that = this;
				uni.showToast({
					title:'',
					icon:'loading',
					mask:true,
					duration:10000
				})
				if (that.type == 'recently') {
					that.title = "最近在玩";
					reqUtil.requestData(config.URL.RECENTLYPLAYINGGET,{
						page:that.page,
						size:that.size
					}).then(res => {
							console.log('RECENTLYPLAYINGGET =====', res);
							if (res.code == 0) {
								if(res.data.gameList.length < that.size){
									that.bDontUpdate = true;
								}
								that.list = that.list.concat(res.data.gameList);
							}
							uni.hideToast();
				
						},
						e => {
							uni.hideToast();
							console.log(e)
						});
				} else if (that.type == 'watchGame') {
					that.title = "关注的游戏";
					reqUtil.requestData(config.URL.FAVORITESGET,{
						page:that.page,
						size:that.size
					}).then(res => {
							console.log('FAVORITESADD =====', res);
							if (res.code == 0) {
								if(res.data.gameList.length < that.size){
									that.bDontUpdate = true;
								}
								that.list = that.list.concat(res.data.gameList);
							}
							uni.hideToast();
						},
						e => {
							uni.hideToast();
							console.log(e)
						});
				}
			}
		}
	}
</script>

<style>
	.content {

		display: flex;
		flex-direction: row;
		align-items: center;
		height: 98px;
	}

	.content image {
		width: 71px;
		height: 71px;
		margin-left: 40rpx;
		margin-right: 40rpx;
		border-radius: 12px;
	}

	.game-item {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 10px;
	}
</style>