TrackOffical/pages/AO/mapList.vue

<template>
	<view class="container" :style="{ height: windowHeight + 'px' }">
		<uni-section v-if="mapList.length > 0" title="地图列表" type="line">
			<uni-list>
				<uni-list-item v-for="item in mapList" :key="item.id" showArrow :title="item.name" :rightText="'活跃人数 ' + item.usernum" :clickable="true"
					@click="handleItemClick(item.id)" />
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		DefaultRequest,
		IdRequest
	} from "@/grpc/base_pb.js"

	export default {
		components: {},
		data() {
			return {
				interval_loadData: null,
				windowHeight: 0,
				mapList: [],
			}
		},
		computed: {
			...mapState([
				'username', // 映射 this.username 为 store.state.username
			]),
			...mapGetters([
				'metadata'
			]),
		},
		mounted() {
			// this.$global.getWindowInfo()
			// this.windowHeight = this.$global.windowHeight
			// uni.$on('windowResize', this.layoutInit)
		},
		onLoad() {
		},
		onShow() {
			console.log('[onShow]')
			
			this.$global.getWindowInfo()
			this.windowHeight = this.$global.windowHeight
			uni.$on('windowResize', this.layoutInit)
			
			this.loadData()
		},
		onHide() {
			console.log('[onHide]')
			clearInterval(this.interval_loadData)
			uni.$off('windowResize', this.layoutInit)
		},
		beforeDestroy() {
			console.log("[beforeDestroy]")
			clearInterval(this.interval_loadData)
			uni.$off('windowResize', this.layoutInit)
		},
		methods: {
			layoutInit() {
				console.log('[layoutInit]')
				this.windowHeight = this.$global.windowHeight
			},
			async loadData() {
				this.mapList = await this.getToMapList()
				
				if (this.interval_loadData != null) {
					clearInterval(this.interval_loadData)
				}
				
				let that = this
				this.interval_loadData = setInterval(async function() {
					that.mapList = await that.getToMapList()
				}, 3000);
			},
			async getToMapList() {
				try {
					return new Promise((resolve, reject) => {
						// 创建请求参数并赋值
						var request = new DefaultRequest()
						// 调用客户端相应的grpc方法，发送grpc请求，并接受后台发送回来的返回值
						this.$client.toMapList(request, this.metadata, (err,
							response) => {
							if (err) {
								console.warn(`[toMapList] err: code = ${err.code}` +
									`, message = "${err.message}"`)
								reject(err)
							} else {
								let res = response.toObject()
								// console.log('[toMapList]', res)
								resolve(res.listList)
							}
						})
					});
				} catch (e) {
					console.log('[getToMapList] err', e)
					reject(e)
				}
			},
			// handleShopChange(mapId) {
			// 	console.log("mapId:" + mapId)
			// 	this.getControlInfoList(mapId)
			// 	this.getShopMap(mapId)
			// },
			handleItemClick(mapId) {
				console.log("mapId:" + mapId)
				uni.navigateTo({
					// url: '/pages/checkPoint/checkPointDetail',
					url: './mapShow?mapId=' + mapId
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		// height: 100vh;
		// height: 100%;
		// overflow: hidden;
	}

	.padding {
		padding: 0 20rpx;
	}
</style>