jp-floorlock-phone/pages/mylock/myLock.vue

<template>
	<view class="jpmain  ">


		<view class="body">


			<view class="page">

				<view class="page-content">
					<view class="item" v-for="(item,i) in applicationList"
					 @click="gotoUrl('pages/mylock/bindLockStatus?id='+item.id)">
						<view class="title">
					
							<view class="name">
								<img class="img" src="@/assets/img/mylock/item1.svg" alt="">
					
								{{item.name}}
					
							</view>
							<view class="value">
								<span v-if="item.parkingName">{{item.parkingName}}</span>
								<span>{{item.typeN}}</span>
								<span class="status">审批中</span>
							</view>
						</view>
						<view class="goto">
					
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
					
						</view>
					</view>
					
					<view class="item" v-for="(item,i) in list"
					 @click="gotoUrl('pages/mylock/infoLock?id='+item.id)">
						<view class="title">

							<view class="name">
								<img class="img" src="@/assets/img/mylock/item1.svg" alt="">

								{{item.name}}

							</view>
							<view class="value">
								<span v-if="item.parkingName">{{item.parkingName}}</span>
								<span>{{item.typeN}}</span>
							
							</view>
						</view>
						<view class="goto">

							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>

						</view>
					</view>
					
					<u-empty text="列表为空" mode="list" margin-top="80" v-if="!applicationList.length&&!list.length">
						
					</u-empty>
					
					

				</view>
			</view>

		</view>
		<view class="floating-button" @click="gotoUrl('pages/mylock/bindLock')">
			<view class="button">
				<img class="img" src="@/assets/img/mylock/item2.svg" alt="">

				绑定新地锁
			</view>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/mylock.js'

	export default {
		data() {
			return {
				applicationList:[],
				list:[],
				listForm:{
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
				}
			}
		},
		onLoad() {
			this.getMyList()
		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getFloorlockList()
			},
			getMyList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			 
				API.application_myList({
					pageSize:999
				}).then((res) => {
					this.applicationList=res.data.data
					this.getFloorlockList()
					uni.hideLoading();
			
				}).catch(error => {
					
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
					this.getFloorlockList()
				})
			},
			getFloorlockList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			 
				API.floorlockList(this.listForm).then((res) => {
					var list=[]
					
					if (this.listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
					this.list = res.data.data
					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style scoped lang="scss">
	/* styles.css */


	.body {
		padding: 32rpx;
	}





	.page {

		.page-content {

			.item {
				padding: 32rpx;
				margin-bottom: 32rpx;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.title {


					.name {
						color: rgba(22, 119, 255, 1);
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 8rpx;

						.img {
							width: 36rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}

					}

					.value {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;

						span {
							margin-right: 8rpx;
						}
					}

				}

				.goto {

					color: rgba(119, 119, 119, 1);

				}

			}
		}


	}

	.floating-button {
		position: fixed;
		bottom: 120rpx;
		width: 100%;
		display: flex;

		justify-content: center;

		.button {
			border-radius: 50px;
			background-color: rgba(49, 51, 52, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			width: 240rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			.img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>