agricultural-products-traceability-app/sunPages/commonSearch/proSearch.vue

<template>
	<view class="v-page">
		<view class="m-top-bar">
			<uni-search-bar cancelButton="always" v-model="queryParams.productName" bgColor="#EEEEEE" placeholder="请输入作物名称" @confirm="search" @cancel="cacel" />
		</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="detailIt(item, index)">
				<view class="m-item-top">
          <view class="m-variety-img">
            <image style="width: 100%; height: 100%; background-color: #d4d4d4" mode="aspectFit" :src="item.productPic" @error="imageError"></image>
          </view>
					<view class="m-item-detal-box">
            <view class="item-detail">{{ item.productName||'-' }}</view>
						<dict-tag :type="'authentication_type'" :value="item.authenticationType" class="m-dic-tag" />
            <view class="item-batch">批次:{{item.currentBatch}}</view>
            <view class="item-verity">{{item.speciesName}}</view>
					</view>
				</view>
        <view class="m-item-bottom">
          <view class="item-bn">种植地块:{{item.blockName}}</view>
          <view class="item-bn">种植时间:{{parseTime(item.plantingTime, '{y}-{m}-{d}')}}</view>
        </view>
			</view>

		</z-paging>
	</view>
</template>

<script>
import mix from '@/utils/mix.js';
import { parseTime } from '@/utils/ruoyi';
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import { getCropperPage } from '@/api/system/addNoteJob/addNoteJob';
import DictTag from '@/components/DictTag/index.vue';

export default {
	components: {
		DictTag
	},
  mixins: [mix],
  data() {
		return {
			dataList: [],
			padingStyle: {
				top: '100rpx',
        backgroundColor: '#FFFFFF',
			},
      reviceData:null,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				baseId: this.$store.state.user.baseId,
        productName: null,
			}
		};
	},
  onLoad(options) {
    if(options.params){
      this.reviceData = JSON.parse(decodeURIComponent(options.params))
    }

    this.dataList = []
    // setTimeout(()=>{
    //   this.$refs.paging.reload()
    // },1000)
  },
	onShow() {
	},
	methods: {
    parseTime(time, pattern) {
      return parseTime(time, pattern);
    },
		search(res) {
      this.$refs.paging.reload()
		},
		cacel() {
			this.queryParams.productName = null;
      this.$refs.paging.reload()
    },
		queryList(pageNo, pageSize) {
			let this_ = this;
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			this_.$nextTick(() => {
        const params = {
          pageNo: pageNo,
          pageSize: pageSize,
          baseId: this.$store.state.user.baseId,
          productName:this_.queryParams.productName,
        }
        getCropperPage(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);
					});
			});
		},
    detailIt(val, index){
      this.reviceData.cropperId = val.id;
      this.reviceData.productName = val.productName;
      this.reviceData.batch = val.currentBatch;
      this.reviceData.authenticationType = val.authenticationType;
      console.log(this.reviceData);
      this.$store.commit('updateFormData', this.reviceData);
      uni.navigateBack({
        delta: 1
      })
      // const data = encodeURIComponent(JSON.stringify(this.reviceData));
      // uni.redirectTo({
      //   url: '/sunPages/addNoteJobForm/addNoteJobForm?params=' + data
      // });
    }
	}
};
</script>

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

	.uni-select {
		border: none;
	}
}
.v-page{
  background-color: #fff;
}
.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;
    display: flex;

    .m-variety-img{
      margin-right: 20rpx;
      width: 200rpx;
      height: 200rpx;
      overflow: hidden;
      border-radius: 10rpx;
    }
		.item-detail {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
		}

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

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

/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>