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="user.avatarURL ? user.avatarURL : avatar" shape="circle" width="50px" height="50px"></u--image>
					<text>{{ user.name }}</text>
					<text>{{ user.roleName }}</text>
					<text>{{ `地块数量：${listSize}块` }}</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.landId, item.userId)"></u-button>
					</view>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
import { ref } from "vue"
import { onShow, onLoad, onReady } from "@dcloudio/uni-app"
import store from "@/store"
import plugin from "@/plugins"
import storage from "@/utils/storage"
import avatar from "../../../static/images/mine/userAvatar.png"

const userId = ref(0)
const listSize = ref(0)
const user = ref({
	name: "",
	avatarURL: "",
	roleName: ""
})
const paging = ref(null)
const query = ref({ userId: null, landName: null })

onLoad(params => {
	userId.value = params.id
	query.value.userId = params.id
	user.value.name = params.name
	user.value.avatarURL = params.avatar
	user.value.roleName = params.roleName
})

onShow(() => {
	if (paging.value != null) {
		paging.value.reload()
	}
})

function queryList() {
	if (query.value.landName == null || query.value.landName == "") {
		delete query.value["landName"]
	}
	//获取该用户地块列表
	store
		.dispatch("onGetUserManagerLandList", query.value)
		.then(res => {
			//将请求的结果数组传递给z-paging
			paging.value.complete(res.data)
			if (query.value.landName == null || query.value.landName == "") {
				listSize.value = res.data.length
			}
		})
		.catch(error => {
			paging.value.complete(false)
			plugin.modal.msgError(error)
		})
		.finally(() => {
			plugin.modal.closeLoading()
		})
}
//查找地块
function onSearchValue(keyword) {
	query.value.landName = keyword
	paging.value.reload()
}

//跳转到权限页面
function onClickPermission(param) {
	plugin.tab.navigateTo(`/pages/work/user/device?landId=${param.landID}&userId=${param.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>