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>
		<view class="tab-fixed">
			<u-tabs-swiper activeColor="#008CFF" ref="tabs" :list="tabList" :current="tabCurrent" @change="tabChange"
				:is-scroll="false" swiperWidth="100%"></u-tabs-swiper>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			height="calc(100vh - 84px)" top="50rpx">
			<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: [],
				tabCurrent: 0,
				tabCurrentItem: {},
				tabList: [
					{
						name: '路段',
						value: 'road'
					},
					{
						name: '停车场',
						value: 'park'
					}
				]
			}
		},
		onLoad() {
			this.tabCurrentItem = this.tabList[this.tabCurrent]
		},
		onShow() {
			
		},
		methods: {
			customBack() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/index/index'
				});
			},
			tabChange(cur) {
				this.tabCurrent = cur
				this.tabCurrentItem = this.tabList[cur]
				this.mescroll.resetUpScroll();
			},
			/**
			 * 导航 
			 * */
			navigation(lat, lon) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 18
				})
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				if (this.tabCurrentItem.value === 'park') {
					this.getParkingLotParkingList(page)
				} else {
					this.getRoadParkingList(page)
				}
			},
			/**
			 * 获取路段我的停车
			 */
			getRoadParkingList({ num, size }) {
				this.$u.api.getOrderList({
					orderStatus: 1,
					pageNum: num,
					pageSize: size
				})
				.then(res => {
					//设置列表数据
					let curPageData = res.data.pageInfo.rows;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					let totalPage = res.data.pageInfo.pages;
				
					if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
					this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
				
					// 请求成功,隐藏加载状态
					//后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);
				
					if (this.parkinglist.length <= 0) {
						this.listEmpty = true
					};
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			},
			/**
			 * 获取停车场我的停车
			 */
			getParkingLotParkingList({ num, size }) {
				this.$u.api.getRoomParkingApi({
					orderStatus: 1,
					pageNum:  num,
					pageSize: size
				})
				.then(res => {
					//设置列表数据
					let curPageData = res.data.pageInfo.rows;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					let totalPage = res.data.pageInfo.pages;
				
					if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
					this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);
				
					if (this.parkinglist.length <= 0) {
						this.listEmpty = true
					};
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				});
			}
		}
	}
</script>

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