agricultural-products-traceability-app/pages/block/index.vue

<template>
	<view>
		<view class="m-top-bar">
			<uni-search-bar v-model="queryParams.blockName" bgColor="#EEEEEE" placeholder="请输入地块名称" @confirm="search" @cancel=cacel />
			<uni-section class="m-block-pick" title="地块类型">
				<uni-data-select v-model="queryParams.blockType" :localdata="range" @change="change"></uni-data-select>
			</uni-section>
		</view>
		<z-paging ref="paging" v-model="dataList" :pagingStyle="padingStyle" @query="queryList">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view v-for="(item, index) in dataList" :key="index" class="item" @click="detailBlock(item, index)">
				<view class="m-item-top">
					<view class="item-detail">{{ item.blockName }}</view>
					<view class="m-item-detal-box">
						<view class="item-title">{{ item.blockArea }}亩</view>
						<view class="item-title">{{ item.productName == null || item.productName == undefined ? '-' : item.productName }}</view>
						<dict-tag :type="'land_type'" :value="item.blockType" class="m-dic-tag" />
					</view>
				</view>
				<view class="m-item-bottom">
					<button class="mini-btn" type="primary" size="mini" @click.stop="editBlock(item, index)">编辑地块</button>
					<button class="mini-btn" type="warn" size="mini" @click.stop="deleteBlock(item, index)">删除地块</button>
				</view>
			</view>
		</z-paging>
		<view class="m-add-block" @click.stop="addBlock">
			圈地
			<br />
			+
		</view>
	</view>
</template>

<script>
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import { getBlockPage } from '@/api/system/block/block';
import DictTag from '@/components/DictTag/index.vue';

export default {
	components: {
		DictTag
	},
	data() {
		return {
			range: [],
			dataList: [],
			padingStyle: {
				top: '170rpx'
			},
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				baseId: null,
				blockName: null,
				blockType: null
			}
		};
	},
	onShow() {
		let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE);
		arr.forEach((item) => {
			item.text = item.label;
		});
		this.range = arr;
	},
	methods: {
		search(res) {
			this.queryList();
		},
		cacel(){
			this.queryParams.blockName = null
			this.queryList();
		},
		change(e) {
			this.queryList();
		},
		queryList(pageNo, pageSize) {
			let this_ = this;
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			this_.$nextTick(() => {
				this_.queryParams.pageNo = pageNo
				this_.queryParams.pageSize = pageSize
				const params = this_.queryParams;
				getBlockPage(params)
					.then((res) => {
						//将请求的结果数组传递给z-paging
						this.$nextTick(() => {
							this.$refs.paging.complete(res.data.list);
						});
					})
					.catch((res) => {
						//如果请求失败写this.$refs.paging.complete(false);
						//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
						//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
						this.$refs.paging.complete(false);
					});
			});
		},
		addBlock() {
			uni.navigateTo({
				url: '/sunPages/addBlock/addBlock'
			});
		},
		editBlock() {
			uni.navigateTo({
				url: '/sunPages/editBlock/editBlock'
			});
		},
		detailBlock(item) {
			const obj = JSON.stringify(item)
			uni.navigateTo({
				url: '/sunPages/blockDetail/blockDetail?val='+obj
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .m-block-pick {
	.uni-section {
		display: flex;
		align-items: center;
		background-color: unset;
	}

	.uni-select {
		border: none;
	}
}

.item {
	width: 95%;
	height: fit-content;
	margin: 20rpx auto;
	padding: 20rpx;
	background-color: #e0e0e0;
	border-radius: 10rpx;
	box-shadow: 0 0 5px 0px #737373;
	overflow: hidden;

	.m-item-top {
		border-bottom: solid 1rpx #c1c1c1;
		padding-bottom: 10rpx;

		.item-detail {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
		}

		.m-item-detal-box {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
		}
	}

	.m-item-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 20rpx 0 0;
		float: right;
		width: 55%;
	}
}

/deep/ .m-dic-tag .v-dict-text {
	font-size: 28rpx;
}

.m-add-block {
	position: fixed;
	background-color: aliceblue;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	bottom: 50rpx;
	right: 50rpx;
	box-shadow: 0 0 5px 1px #929292;
	padding-top: 20rpx;
}
</style>