点击卡片查看详细数据以及搜索功能的实现

<template>
	<view class="box">
		<view class="status_bar" :style="{ height: iStatusBarHeight + 'px'}">
			<u-navbar title="领用资产" :bgColor="bgColor" :autoBack="true" height="50px">
			</u-navbar>
			<view class="search-box">
				<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入领用信息" clearButton="auto"
					bgColor="#F8F8F8" cancelButton="none" @input="input" />
					<view class="no-assets" v-if="filteredList.length === 0 && kw !== ''">暂无领用信息</view>
			</view>
		</view>
		<!-- 渲染数据 -->
		<view class="u-demo-block__content wrap" v-for="item in filteredList" :key="item.id">
			<u-row class="contentbox">
				<u-col span="12" class="action-item">
					<view><text class="info">ccc:</text>{{item.outbound.udeptName}}</view>
					<view><text class="info">ccc:</text>{{item.outbound.requestUser}}</view>
					<view><text class="info">ccc:</text>{{item.outbound.requestNick}}</view>
					<view class="button">
						<button class="button-item" @click="handleItemClick(item)" type="primary"
							plain="true">查看详情</button>
						<button class="button-item" type="primary" @click="click(item)">二维码领用</button>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 二维码 -->
		<view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<uqrcode ref="uQRCode" :mode="mode" :value="text" :size="size" :margin="margin" canvasId="item.id"
						background-color="backgroundColor" :foreground-color="foregroundColor" :typeNumber="typeNumber"
						:fileType="fileType" />
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import {
       receive
	} from '@/api/Blurb/index'
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
	export default {
		data() {
			return {
				iStatusBarHeight: 0,
				timer: null,
				bgColor: '#f1f1f1',
				receiveList: [], // 原始数据列表
				kw: '', // 搜索关键字

				mode: 'canvas',
				text: 'test',
				size: 140,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				// errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				typeNumber: -1,
				fileType: 'png',
				defaultErrorCorrectLevel: uQRCode.errorCorrectLevel,
				type: 'center', //弹框
			}
		},
		created() {
			this.getReceive()
		},
		onLoad() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {
			click(item) {
				// console.log(item);
				this.text = item.outbound.id;
				// console.log(this.text);
				this.$refs.popup.open("center")
			},
			// 请求数据
			getReceive() {
				receive().then(res => {
					this.receiveList = res.rows;
				}).catch((error) => {})
			},
			// 点击卡片查看详细数据
			handleItemClick(item) {
				// 在这里处理点击事件，例如跳转到详情页面
				// console.log(item);
				uni.navigateTo({
					// url有长度限制，太长的字符串会传递失败，使用encodeURIComponent
					url: '/pages/Blurb/fixedAssets/receive/detail?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			// 搜索
			input(e) {
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器，并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
					this.kw = e; // 获取输入的搜索关键字
				}, 500)
			},
		},
		computed: {
			filteredList() {
				return this.receiveList.filter((item) => {
					// 根据多种类型来搜索
					return item.outbound.requestNick.includes(this.kw)  || item.outbound.requestUser.includes(this.kw)  || item.outbound.udeptName.includes(this.kw)
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	page {
		// background-color: #ccc;
	}

	// 顶部
	.box {
		padding-top: 100px;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		// height: 200px;
		background-color: #fff;
		z-index: 99;
	}

	.nav .top {
		display: flex;
		padding-top: 30px;
	}

	.nav .top .title {
		font-size: 16px;
		margin-left: 30%;
		line-height: 30px;
	}

	.uni-mt-10 {
		width: 100%;
		// margin-left: 20px;
		padding: 8px 10px 5px 10px;
	}
	.search-box {
		position: fixed;
		top: calc(var(--status-bar-height) + 50px);
		left: 0;
		width: 100%;
		z-index: 99;
	}
	.no-assets {
	  text-align: center;
	  font-size: 16px;
	  color: #999999;
	  margin-top: 20px;
	}

	.action-item view {
		display: flex;
		justify-content: space-between;
		padding: 5px 5px;
	}

	.wrap {
		// margin-top: 60px;
		padding: 5px 10px;

		.contentbox {
			width: 100%;
			border-radius: 3%;
			border: 1px solid #f3f3f3;
			padding: 8px 15px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			background-color: #fff;
		}
	}

	.button {
		display: flex;
		margin: 0 5px;
		justify-content: space-between;
	}

	.button-item {
		width: 30%;
		font-size: 12px;
	}

	// 弹框
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	// .button {
	// 	@include flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	flex: 1;
	// 	height: 35px;
	// 	margin: 0 5px;
	// 	border-radius: 5px;
	// }

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 30px;
		height: 180px;
		width: 180px;
		background-color: #fff;
	}
</style>

接口
export function receive() {
	return request({
		url: `xxxx/xxx/xxx`,
		method: 'get'
	})
}

一级卡片信息

模糊搜索

二级卡片信息，和上面用着一样的接口

<template>
	<view class="detail-page">
		<view class=" wrap" v-for="item in dataDetail.annexList" :key="item.id">
				<u-row class="contentbox">
					<u-col span="12" class="action-item">
						<view><text class="info">xxx:</text>{{item.name}}</view>
						<view><text class="info">xxx:</text>{{item.category}}</view>
						<view><text class="info">xxx:</text>{{item.brand}}</view>
						<view><text class="info">xxx:</text>{{item.categoryDescription}}</view>
						<view><text class="info">xxx:</text>{{item.specifications}}</view>
						<view><text class="info">xxx:</text>{{item.quantityAudit}}</view>
						<view><text class="info">xxx:</text>{{item.mdeptId}}</view>
						<view><text class="info">xxx:</text>{{item.mdepart}}</view>
					</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {receive} from '@/api/xxxx/index'
	export default {
		data() {
			return {
				dataDetail: {}
			}
		},
		// onLoad(options) {
		// 	 const item = JSON.parse(options.item);
		// 	 this.dataDetail =item.annexList
		// 	 console.log(this.dataDetail);
		// },
		// onLoad: function (option) {
		// 	const item = JSON.parse(decodeURIComponent(option.item));
		// 	 this.dataDetail =item.annexList
		// },
		// 取传递过来的数据
	       onLoad: function(option) {
			// console.log(option.item);
			// console.log(JSON.parse(option.item),'e')
			// this.id = option.id
			// this.dataDetail = JSON.parse(option.item)
			//如果没有拿到传递过来的数据就跳转到receive这个页面
			if(!option.item) {
				uni.navigateTo({
					url: '/pages/Blurb/fixedAssets/receive/receive'
				});
			}else {
				this.dataDetail = JSON.parse(option.item)
			}
		},
	};
</script>
<style>
	.detail-page {
		padding: 20rpx;
	}

	.wrap {
		padding: 5px 5px;
		.contentbox {
			width: 100%;
			border-radius: 3%;
			border: 1px solid #f3f3f3;
			padding: 8px 15px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			background-color: #fff;
		}
	}
	.action-item view {
		display: flex;
		justify-content: space-between;
		padding: 5px 5px;
	}


</style>

效果图