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

<template>
	<view class="v-pages">
		<!-- 页面 筛选 -->
		<view class="v-pages-filter">
			<!-- 页面 搜索 -->
			<view class="v-pages-search">
				<uni-search-bar @confirm="search" :focus="true" @cancel="cancel" @clear="clear"></uni-search-bar>
			</view>
		</view>

		<!-- 页面 列表 -->
		<view class="v-pages-list v-container m-t-regular">
			<u-list @scrolltolower="scrolltolower">
				<view class="v-pages-list-item" v-for="item in listData" :key="item.id" @click="getProduct(item.id)">
					<!-- 页面 卡片 -->
					<view class="v-card" :class="Product==item.id?'active':''">
						<image src="../../static/images/icon_select.svg" class="v-card-select"></image>
						<!-- 卡片 内容 -->
						<view class="v-card-content">
							<!-- 卡片 上部 -->
							<view class="v-card-top row">
								<!-- 卡片 信息 -->
								<view class="v-card-info">
									<view class="v-card-title row">
										<text class="name col">{{item.processingName}}</text>
									</view>
									<view class="v-card-state m-t-mini">
										<text class="state secondary" v-if="item.speciesName">{{item.speciesName}}</text>
										<dict-tag class="state primary" type="source_type" :value="item.sourceType" />
									</view>
									<view class="v-card-code"><text
											class="iconfont icon-code m-r-small"></text>{{item.traceabilityCode}}</view>
								</view>
							</view>
							<!-- 卡片 下部 -->
							<view class="v-card-bot">
								<view class="v-page-form small row">
									<view class="v-form-item col-10"><text>收获数量：</text>{{item.inventoryProduction}}公斤
									</view>
									<view class="v-form-item col-2 boder"></view>
									<view class="v-form-item col-10"><text>收获时间：</text>{{getData(item.createTime)}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</u-list>
		</view>

		<view class="v-pages-operation row" :class="Product==-1?'show':'hide'">
			<div class="v-pages-operation-item col-6" @click="GoToPage('delivery')">
				<view class="v-secondary-btn"><text class="iconfont icon-delivery"></text>配送</view>
			</div>
			<div class="v-pages-operation-item col-6" @click="GoToPage('sales')">
				<view class="v-secondary-btn"><text class="iconfont icon-sales"></text>销售</view>
			</div>
			<div class="v-pages-operation-item col-6" @click="GoToPage('loss')">
				<view class="v-secondary-btn"><text class="iconfont icon-bad"></text>报损</view>
			</div>
			<div class="v-pages-operation-item col-6" @click="deleteProduct()">
				<view class="v-secondary-btn"><text class="iconfont icon-delete"></text>删除</view>
			</div>
		</view>
	</view>
</template>

<script>
	import * as ProductApi from "@/api/traceability/product"
	import mix from '@/utils/mix.js'
	import DictTag from "@/components/DictTag/index"
	export default {
		components: {
			DictTag
		},
		data() {
			return {
				value1: 1,
				value2: 1,
				value2: 1,
				options1: [],
				options2: [],
				options3: [],
				listData: [],
				loadMoreStatus: 'loadmore',
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					processingName: null,
					total: null
				},
				Product: -1
			}
		},		
		watch: {
			"queryParams.processingName"(newV, oldV) {
				if (newV == "") {
					this.clear()
				}
			}
		},
		mixins: [mix],
		onLoad: function() {
			this.getListData()
		},
		methods: {
			// 获取产品数据
			GoToPage(value) {
				switch (value) {
					case "delivery":
						wx.navigateTo({
							url: '/pages/traceability-product/delivery/deliveryEdit?id=' + this.Product
						});
						break;
					case "sales":
						console.log(this.Product)
						wx.navigateTo({
							url: '/pages/traceability-product/sales/salesEdit?id=' + this.Product
						});
						break;
					case "loss":
						console.log(this.Product)
						wx.navigateTo({
							url: '/pages/traceability-product/loss/lossEdit?id=' + this.Product
						});
						break;
				}

			},

			// 获取产品数据
			async getListData() {
				this.loadMoreStatus = 'loading';
				try {
					const res = await ProductApi.getProductPage(this.queryParams)
					this.listData = [...this.listData, ...res?.data?.list];
					this.queryParams.total = res?.data?.total;
					if (this.queryParams.pageNo * this.queryParams.pageSize >= this.queryParams.total) {
						this.loadMoreStatus = 'nomore';
					} else {
						this.loadMoreStatus = 'loadmore';
					}
				} finally {}
			},

			// 获取当前产品
			getProduct(value) {
				if (this.Product != value) {
					this.Product = value
				} else {
					this.Product = -1
				}

			},

			// 删除产品
			deleteProduct(value) {
				this.Product = value
			},

			//触底加载
			scrolltolower() {
				if (this.loadMoreStatus == 'loading' || this.loadMoreStatus == 'nomore') {
					return;
				}
				this.queryParams.pageNo++;
				this.getListData()
			},

			//确定搜索
			search(res) {
				this.queryParams.pageNo = 1
				this.queryParams.processingName = res.value
				this.listData = []
				this.getListData()
			},

			//清除搜索
			clear(res) {
				this.queryParams = {
					pageNo: 1,
					pageSize: 10,
					processingName: null,
					total: null
				}
				this.listData = []
				this.getListData()
			},

			//取消搜索
			cancel(res) {
				this.queryParams = {
					pageNo: 1,
					pageSize: 10,
					processingName: null,
					total: null
				}
				this.listData = []
				this.getListData()
			},

		}
	}
</script>


<style lang="scss">
</style>