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

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" title="用户地块">
	</custom-nav-bar>
	
	<view class="index-container">
		<z-paging class="paging" ref="paging" use-virtual-list @query="queryList" bg-color="#F6F3F3"
			:loading-more-enabled="false">
			<template #top>
				<custom-nav-bar :left="true" title="用户地块">
				</custom-nav-bar>
				<view class="text-intel">
					<u--image style="margin-right: 10px" :src="userInfo.avatarURL ? userInfo.avatarURL : avatar"
						shape="circle" width="20px" height="20px"></u--image>
					<text>{{ userInfo.name }}</text>
					<text>{{ userInfo.roleName }}</text>
					<text>{{ `地块数量：${landCount}块` }}</text>
				</view>
				<view class="search">
					<u-search placeholder="请输入地块名称" @search="onSearchValue" @custom="onSearchValue"
						@clear="onSearchValue(null)" shape="square"></u-search>
				</view>
			</template>
			<template #cell="{ item }">
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">地块编号：{{ item.landNum }}</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-green" :circle="true" text="启用" v-if="item.status == 0" />
										<uni-tag class="bg-green" :circle="true" text="禁用" v-if="item.status == 1" />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list">
										<view class="left">
											<view><text>地块名称：</text>{{ item.landName }}</view>
											<view><text>地块地址：</text>{{ item.landAddress || "-" }}</view>
										</view>
									</view>
									<view class="card-font">
										<u-button type="success" size="mini" text="其它设备权限"
											v-hasPermi="['system:permission:list']"
											@click="onClickOtherPermission(item)" />
										<u-button type="success" size="mini" text="出水口权限"
											v-hasPermi="['system:wateroutletpermission:add']"
											@click="onClickPermission(item)" />
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</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}`)
			},
			onClickOtherPermission(item) {
				plugin.tab.navigateTo(`/pages/work/user/otherDevice?landId=${item.id}&userId=${item.userId}`)
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 表单
	.u-search {
		padding: 0 10px 10px;
	}
</style>