parking_h5/pages/searchparking/searchparking.vue

<template>
	<view>
		<u-navbar title="我的停车" title-color="#fff" :custom-back="customBack" :border-bottom="false"
			back-icon-color="#CCE8FF" :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }">
		</u-navbar>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="parkinglist">
				<view class="parkinglist-item" v-for="(item,index) in parkinglist" :key="item.id"
					@click="navigation(item.latitude, item.longitude)">
					<view class="up u-flex u-row-between">
						<view class="vehicle-no">{{item.vehicleNo}}</view>
						<view class="space-name">{{item.spaceName}}</view>
					</view>
					<view class="down u-flex u-row-left">
						<u-icon name="map-fill" color="#008CFF" size="28"></u-icon>
						<view class="road-name">{{item.roadName}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				parkinglist: [],
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			customBack() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/index/index'
				});
			},
			/**
			 * 导航 
			 * */
			navigation(lat, lon) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 18
				})
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				console.log('upCallback ', page);
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.$u.api.getOrderList({
						orderStatus: 1,
						pageNum: pageNum,
						pageSize: pageSize
					})
					.then(res => {
						// uni.hideLoading();
						// this.$refs.uToast.show({
						// 	title: res.msg,
						// 	type: 'success',
						// });
						//设置列表数据
						let curPageData = res.data.pageInfo.rows;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						let totalPage = res.data.pageInfo.pages;

						if (page.num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
						this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据

						// 请求成功,隐藏加载状态
						//后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);

						if (this.parkinglist.length <= 0) {
							this.listEmpty = true
						};

						console.log('vehicleList', res)
					}).catch(err => {
						// uni.hideLoading();
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error',
						});
						console.log('vehicleList ', err)
					});

			}
		}
	}
</script>

<style lang="scss">
	@import './searchparking.scss'
</style>