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" v-if="tabCurrentItem.value === 'park'">{{item.parkingName}}</view>
						<view class="road-name" v-else>{{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',
						});
						console.log('vehicleList ', err)
					});
			},
			/**
			 * 获取停车场我的停车
			 */
			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>