jsy-app/pages/work/user/ground.vue

<template>
	<view class="index-container">
		<z-paging class="paging" ref="paging" use-virtual-list @query="queryList" bg-color="#F6F3F3" :loading-more-enabled="false">
			<template #top>
				<view class="title">
					<u--image style="margin-right: 10px" :src="userInfo.avatarURL ? userInfo.avatarURL : avatar" shape="circle" width="50px" height="50px"></u--image>
					<text>{{ userInfo.name }}</text>
					<text>{{ userInfo.roleName }}</text>
					<text>{{ `地块数量：${landCount}块` }}</text>
				</view>
				<u-gap height="5" bgColor="#F6F3F3"></u-gap>
				<view class="search">
					<u-search placeholder="请输入地块名称" @search="onSearchValue" @custom="onSearchValue" @clear="onSearchValue(null)" shape="square"></u-search>
				</view>
				<u-gap height="5" bgColor="#F6F3F3"></u-gap>
			</template>
			<template #cell="{ item }">
				<view class="item-container">
					<view style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 5px">
						<view class="flex-text">
							<view class="flex-text-one" style="color: black">地块编号：</view>
							<view>{{ item.landNum }}</view>
						</view>
						<view style="margin-right: 10px">
							<u-tag text="启用" type="success" plain v-if="item.status == 0"></u-tag>
							<u-tag text="禁用" type="error" plain v-if="item.status == 1"></u-tag>
						</view>
					</view>
					<u-line color="#D2D2D2"></u-line>
					<view class="data">
						<view class="flex-text global-font-size-1">
							<view class="flex-text-one">地块名称：</view>
							<view>{{ item.landName }}</view>
						</view>
						<view class="flex-text global-font-size-1" style="margin-top: 5px">
							<view class="flex-text-one">地块地址：</view>
							<view>{{ item.landAddress || "-" }}</view>
						</view>
					</view>
					<view class="button" v-hasPermi="['device:control:list']">
						<view style="flex-grow: 1"></view>
						<u-button style="width: 80px; height: 30px; margin-right: 0px" type="success" text="出水口权限" size="mini" @click="onClickPermission(item)"></u-button>
					</view>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script >
import store from "@/store"
import plugin from "@/plugins"
import avatar from "../../../static/images/mine/userAvatar.png"
export default {
		data() {
			return {
				userInfo:{},
				landCount:0,
				paging:null,
				avatar:null,
				query:{
					userId:null,
					landName:null
				}
			}
		},
		created() {
			this.avatar = avatar;
		},
		onLoad(options){
			this.userInfo = JSON.parse(decodeURIComponent(options.userInfo));
			this.queryList();
		},
		onShow() {
			if(this.userInfo){
				this.query.userId = this.userInfo.userId;
			}
		},
		methods: {
			queryList() {
				if(!this.query.userId){
					return;
				}
				//获取该用户地块列表
				console.log(this.query)
				store
					.dispatch("getLandByUserId", this.query)
					.then(res => {
						//将请求的结果数组传递给z-paging
						console.log(res)
						this.$refs.paging.complete(res.data);
						if(res.data){
							this.landCount=res.data.length;
						}
					})
					.catch(error => {
						this.$refs.paging.complete(false)
						plugin.modal.msgError(error)
					})
					.finally(() => {
						plugin.modal.closeLoading()
					})
			},
			onSearchValue(e) {
				this.query.landName = e;
				this.queryList();
			},
			onClickPermission(item) {
				plugin.tab.navigateTo(`/pages/work/user/device?landId=${item.id}&userId=${item.userId}`)
			}
		}
	}
</script>
<style lang="stylus">
.index-container{
		background-color: #F6F3F3;
		height: 100%;
		.paging{
			background-color: #F6F3F3;
			.item{
				margin: 10px 10px;
			}
		}
		.search{
			background-color: white;
			padding: 10px;
		}
		.title{
			height: 50px;
			display: flex;
			padding: 15px 15px;
			background: white;
			align-items: center
			text{
				font-size: 14px
				margin-right: 10px
			}
		}
		.item-container {
			padding: 20px;
			margin-top: 10px;
			background-color: white;
			padding-bottom: 10px;
			border-radius: 10px;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
		}
		.flex-text {
			display: flex;
			align-items: center;
			.flex-text-one {
				color: #939393;
				font-weight: bold;
			}
		}
		.data {
			margin-top: 10px;
			margin-top: 10px;
			margin-left: 5px;
			margin-right: 10px;
		}
	}
</style>