From 10bc8314d74c573a45572f6af89578de8c2eb5bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Tue, 21 Oct 2025 15:19:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E5=92=8C=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E7=9A=84UI=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除uView组件依赖，使用原生uni-app组件重构搜索框和列表展示
优化搜索框交互，添加清空按钮和防抖处理
统一列表项的样式和布局，提升用户体验
---
 pages/blank/blankOutbound/blankOutbound.vue   |   2 +-
 .../blankWarehousing/blankWarehousing.vue     |   2 +-
 pages/watchGoods/goodsdetail/goodsdetail.vue  | 252 ++++++++++++++----
 pages/watchGoods/watchGoods.vue               | 211 ++++++++++++---
 4 files changed, 376 insertions(+), 91 deletions(-)

diff --git a/pages/blank/blankOutbound/blankOutbound.vue b/pages/blank/blankOutbound/blankOutbound.vue
index ddf764f..13cf92f 100644
--- a/pages/blank/blankOutbound/blankOutbound.vue
+++ b/pages/blank/blankOutbound/blankOutbound.vue
@@ -45,7 +45,7 @@
 						<view class="package-card-body">
 							<view class="package-card-describe">
 								<view>批次号：{{ item.patchCode }}</view>
-								<view>总成号：{{ item.partNumner }}</view>
+								<!-- <view>总成号：{{ item.partNumner }}</view> -->
 								<view>描述：{{ item.productionDescribe }}</view>
 							</view>
 							<view class="package-card-time">
diff --git a/pages/blank/blankWarehousing/blankWarehousing.vue b/pages/blank/blankWarehousing/blankWarehousing.vue
index 7d6b57a..f4ebe40 100644
--- a/pages/blank/blankWarehousing/blankWarehousing.vue
+++ b/pages/blank/blankWarehousing/blankWarehousing.vue
@@ -45,7 +45,7 @@
 						<view class="package-card-body">
 							<view class="package-card-describe">
 								<view>批次号：{{ item.patchCode }}</view>
-								<view>总成号：{{ item.partNumner }}</view>
+								<!-- <view>总成号：{{ item.partNumner }}</view> -->
 								<view>描述：{{ item.productionDescribe }}</view>
 							</view>
 							<view class="package-card-time">
diff --git a/pages/watchGoods/goodsdetail/goodsdetail.vue b/pages/watchGoods/goodsdetail/goodsdetail.vue
index 4430632..351bebe 100644
--- a/pages/watchGoods/goodsdetail/goodsdetail.vue
+++ b/pages/watchGoods/goodsdetail/goodsdetail.vue
@@ -1,15 +1,55 @@
 <template>
 	<view class="common-nav-container">
-		<u-search placeholder="请填写流水号如401" borderColor="#c8c9cc" v-model.trim="formData.query" bgColor="#f4f4f5"
-			shape="square" searchIconSize="48" @search="getList()" @custom="getList()"></u-search>
-		<u-list height="640px">
-			<u-list-item v-for="(item, index) in dataList" :key="index">
-				<u-cell :title="'批次号:'+item.packageCodeClient"
-					:label="'零件号:'+item.partnumber + '\n描述:'+item.description + '\n库位:'+item.locationCode + '\n入库时间:'+item.entryWarehouseTime + '\n备注:'+item.remark"
-					:value="'零件数:'+item.goodsNumAction">
-				</u-cell>
-			</u-list-item>
-		</u-list>
+		<!-- 原生搜索框 -->
+		<view class="search-container">
+			<view class="search-input-wrapper">
+				<uni-icons type="search" size="24" color="#999"></uni-icons>
+				<input 
+					type="text" 
+					placeholder="请填写流水号如401" 
+					class="search-input" 
+					:value="formData.query"
+					@input="handleInput"
+					@confirm="getList()" 
+				>
+				<uni-icons v-if="formData.query" type="clear" size="24" color="#999" @click="clearInput" class="clear-icon"></uni-icons>
+			</view>
+			<button class="search-button" @click="getList()">搜索</button>
+		</view>
+
+		<!-- 原生列表 -->
+		<scroll-view class="list-container" scroll-y height="640px">
+			<view v-for="(item, index) in dataList" :key="index" class="list-item">
+				<view class="cell">
+					<view class="cell-title">批次号:{{ item.packageCodeClient }}</view>
+					<view class="cell-info">
+						<view class="info-item">
+							<text class="label">零件号:</text>
+							<text class="value">{{ item.partnumber }}</text>
+						</view>
+						<view class="info-item">
+							<text class="label">描述:</text>
+							<text class="value">{{ item.description }}</text>
+						</view>
+						<view class="info-item">
+							<text class="label">库位:</text>
+							<text class="value">{{ item.locationCode }}</text>
+						</view>
+						<view class="info-item">
+							<text class="label">入库时间:</text>
+							<text class="value">{{ item.entryWarehouseTime }}</text>
+						</view>
+						<view class="info-item">
+							<text class="label">备注:</text>
+							<text class="value">{{ item.remark }}</text>
+						</view>
+					</view>
+					<view class="cell-value">
+						<text>零件数:{{ item.goodsNumAction }}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
 		<!-- <view class="body card"  v-for="(item, index) in dataList" :key="index">
 			<view class="title">{{ item.packageCodeClient }}</view>
 			<view >
@@ -41,6 +81,7 @@
 	export default {
 		onLoad: function(option) {
 			this.shortpatchcode = option.shortpatchcode;
+			this.locationCode = option.locationCode;
 		},
 		data() {
 			return {
@@ -48,6 +89,7 @@
 					query: ''
 				},
 				shortpatchcode: '',
+				locationCode:'',
 				dataList: [],
 				total: 0
 			};
@@ -56,56 +98,164 @@
 			this.getList();
 		},
 		methods: {
-			getList() {
-				const query = {
-					packageCodeClient: this.shortpatchcode + '_' + this.formData.query
-				};
-				watchGoodsApi.GetGoodsNowProduction_detail(query).then((res) => {
-					if (res.code == 200) {
-						this.dataList = res.data.list;
-						this.total = res.data.total;
-					}
-				});
-			}
+		// 处理输入变化
+		handleInput(event) {
+			this.formData.query = event.target.value;
+		},
+		// 清空输入框
+		clearInput() {
+			this.formData.query = '';
+		},
+		// 获取列表
+		getList() {
+			const query = {
+				packageCodeClient: this.shortpatchcode + '_' + this.formData.query,
+				locationCode:this.locationCode
+			};
+			watchGoodsApi.GetGoodsNowProduction_detail(query).then((res) => {
+				if (res.code == 200) {
+					this.dataList = res.data.list;
+					this.total = res.data.total;
+				}
+			});
 		}
+	}
 	};
 </script>
 
 <style scoped lang="scss">
-	.body {
-		background-color: white;
-		margin-top: 10px;
+.common-nav-container {
+	padding: 16rpx;
+	background-color: #f4f4f5;
+}
 
-		.title {
-			color: #2979ff;
+/* 搜索框样式 */
+.search-container {
+	display: flex;
+	align-items: center;
+	margin-bottom: 16rpx;
+	background-color: #fff;
+	padding: 12rpx;
+	border-radius: 8rpx;
+}
 
-			font-size: 50rpx;
-			font-weight: 50;
-		}
+.search-input-wrapper {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	background-color: #f4f4f5;
+	border-radius: 8rpx;
+	padding: 0 20rpx;
+	margin-right: 16rpx;
+	position: relative;
+}
+
+.search-input {
+	flex: 1;
+	font-size: 28rpx;
+	color: #333;
+	height: 80rpx;
+	padding-left: 12rpx;
+	padding-right: 30rpx;
+}
+
+.search-button {
+	height: 80rpx;
+	font-size: 28rpx;
+	line-height: 80rpx;
+	background-color: #2979ff;
+	color: #fff;
+	border-radius: 8rpx;
+	padding: 0 32rpx;
+}
+
+.clear-icon {
+	position: absolute;
+	right: 20rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	cursor: pointer;
+}
+
+/* 列表样式 */
+.list-container {
+	background-color: #fff;
+	border-radius: 8rpx;
+	overflow: hidden;
+}
+
+.list-item {
+	border-bottom: 1rpx solid #f0f0f0;
+}
+
+.cell {
+	padding: 24rpx;
+}
+
+.cell-title {
+	font-size: 32rpx;
+	color: #333;
+	font-weight: 500;
+	margin-bottom: 16rpx;
+}
+
+.cell-info {
+	margin-bottom: 16rpx;
+}
+
+.info-item {
+	display: flex;
+	margin-bottom: 12rpx;
+	align-items: flex-start;
+}
+
+.info-item .label {
+	font-size: 28rpx;
+	color: #666;
+	width: 120rpx;
+	display: inline-block;
+}
+
+.info-item .value {
+	font-size: 28rpx;
+	color: #333;
+	flex: 1;
+	word-break: break-all;
+}
+
+.cell-value {
+	text-align: right;
+	font-size: 28rpx;
+	color: #2979ff;
+	font-weight: 500;
+}
+
+/* 原有样式保留 */
+.body {
+	background-color: white;
+	margin-top: 10px;
+
+	.title {
+		color: #2979ff;
+		font-size: 50rpx;
+		font-weight: 50;
 	}
+}
 
-	.card {
-		background-color: #fff;
-		/* 白色背景 */
-		border-radius: 8px;
-		/* 圆角边框 */
-		padding: 12px;
-		/* 内边距 */
-		margin-bottom: 16px;
-		/* 底部间距 */
-		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-		/* 阴影效果 */
-	}
+.card {
+	background-color: #fff;
+	border-radius: 8px;
+	padding: 12px;
+	margin-bottom: 16px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
 
-	.card text {
-		font-weight: bold;
-		/* 文本加粗 */
-		margin-bottom: 6px;
-		/* 底部间距 */
-	}
+.card text {
+	font-weight: bold;
+	margin-bottom: 6px;
+}
 
-	.card view {
-		color: #333;
-		/* 文本颜色 */
-	}
+.card view {
+	color: #333;
+}
 </style>
\ No newline at end of file
diff --git a/pages/watchGoods/watchGoods.vue b/pages/watchGoods/watchGoods.vue
index 7bf19a0..0c4a883 100644
--- a/pages/watchGoods/watchGoods.vue
+++ b/pages/watchGoods/watchGoods.vue
@@ -1,31 +1,40 @@
 <template>
 	<view class="common-nav-container">
-		<u-search
-			placeholder="请填写零件号或批次号"
-			borderColor="#c8c9cc"
-			v-model.trim="formData.query"
-			bgColor="#f4f4f5"
-			shape="square"
-			searchIconSize="48"
-			@search="getList()"
-			@custom="getList()"
-			@change="queryChange"
-		></u-search>
-		<u-list @scrolltolower="scrolltolower" height="580px" :pagingEnabled="true">
-			<u-list-item v-for="(item, index) in dataList" :key="index">
-				<u-cell
-					:title="'批次号:' + item.shortPackageCode"
-					:label="'零件号:' + item.partnumber"
-					:value="'箱数:' + item.packageNumber + '\n零件数:' + item.partnumberNumber"
-					isLink
-					@click="handlercClickItem"
-					:name="item.shortPackageCode"
-					:rightIconStyle="{ fontSize: '24px' }"
-				></u-cell>
-			</u-list-item>
-		</u-list>
-		<!-- <view @click="getList(true)"></view> -->
-		<u-loadmore @loadmore="getList(true)" fontSize="36" iconSize="36" :status="loadingStatus" />
+		<!-- 原生搜索框 -->
+		<view class="search-container">
+			<view class="search-input-wrapper">
+					<uni-icons type="search" size="24" color="#999"></uni-icons>
+					<input type="text" placeholder="标签/零件号/批次号/库位号" class="search-input" :value="formData.query" @input="queryChange" @confirm="getList()" />
+					<uni-icons v-if="formData.query" type="clear" size="24" color="#999" @click="clearInput" class="clear-icon"></uni-icons>
+				</view>
+			<button class="search-button" :disabled="loading" @click="getList()">搜索</button>
+		</view>
+
+		<!-- 原生列表 -->
+		<scroll-view class="list-container" scroll-y height="580px" @scrolltolower="scrolltolower">
+			<view v-for="(item, index) in dataList" :key="index" class="list-item">
+				<view class="cell" @click="handlercClickItem(item)">
+					<view class="cell-content">
+						<view class="cell-title">批次号:{{ item.shortPackageCode }}</view>
+						<view class="cell-label">零件号:{{ item.partnumber }}</view>
+					</view>
+					<view class="cell-value">
+						<text>箱数:{{ item.packageNumber }}</text>
+						<text class="value-line">零件数:{{ item.partnumberNumber }}</text>
+						<uni-icons type="arrow-right" size="24" color="#999"></uni-icons>
+					</view>
+				</view>
+			</view>
+
+			<!-- 原生加载更多 -->
+			<view class="load-more" v-if="loadingStatus !== 'nomore'" @click="getList(true)">
+				<text v-if="loadingStatus === 'loading'" class="loading-text">加载中...</text>
+				<text v-else class="loadmore-text">点击加载更多</text>
+			</view>
+			<view class="load-more" v-else>
+				<text class="nomore-text">没有更多数据了</text>
+			</view>
+		</scroll-view>
 		<!-- <view v-for="(item, index) in dataList" :key="index">
 			<view class="card" @click="searchItem(item.packageCodeClient_son)">
 				<u-row>
@@ -71,14 +80,13 @@ export default {
 	data() {
 		return {
 			loading: false,
+			throttleTimer: null,
 			formData: {
 				pageNum: 1,
 				pageSize: 20,
 				query: ''
 			},
 			PackageCodeClient: '',
-			type: 'text',
-			border: true,
 			dataList: [],
 			total: 0
 		};
@@ -106,6 +114,10 @@ export default {
 	// 	console.log('可用高度', uni.getWindowInfo().windowHeight)
 	// },
 	methods: {
+		//  清空输入框
+		clearInput() {
+			this.formData.query = '';
+		},
 		//  搜索
 		getList(isMore = false) {
 			this.loading = true;
@@ -118,10 +130,11 @@ export default {
 				this.formData.pageNum = 1;
 			}
 			const query = this.formData;
-			uni.$u.throttle(() => {
+			// 替换uni.$u.throttle为简单的防抖
+			clearTimeout(this.throttleTimer);
+			this.throttleTimer = setTimeout(() => {
 				watchGoodsApi.GetGoodsNowProduction_List(query).then((res) => {
 					if (res.code === 200) {
-						console.log(res.data.total, this.formData.pageNum, this.formData.pageSize);
 						if (isMore) {
 							this.dataList.push(...res.data.list);
 						} else {
@@ -142,19 +155,23 @@ export default {
 			}
 		},
 		handlercClickItem(item) {
+			let _url = '/pages/watchGoods/goodsdetail/goodsdetail';
+			_url += `?shortpatchcode=${item.shortPackageCode}&locationCode=${item.locationCode}`
 			uni.navigateTo({
-				url: '/pages/watchGoods/goodsdetail/goodsdetail?shortpatchcode=' + item.name
+				url: _url
 			});
 		},
 		// 扫标签码时，自动进行翻译
-		async queryChange(value) {
-			if (value === null || value === '') {
+		async queryChange(event) {
+			const _value =  event.target.value;
+			if (_value === null || _value === '') {
 				return;
 			}
-			if (value.length < 40) {
+			if (_value.length < 40) {
+				this.formData.query = _value;
 				return;
 			}
-			let package_code = value;
+			let package_code = _value;
 			let resolutionData = {
 				code: package_code
 			};
@@ -178,6 +195,127 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.common-nav-container {
+	padding: 16rpx;
+	background-color: #f4f4f5;
+}
+
+/* 搜索框样式 */
+.search-container {
+	display: flex;
+	align-items: center;
+	margin-bottom: 16rpx;
+	background-color: #fff;
+	padding: 12rpx;
+	border-radius: 8rpx;
+}
+
+.search-input-wrapper {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	background-color: #f4f4f5;
+	border-radius: 8rpx;
+	padding: 0 20rpx;
+	margin-right: 16rpx;
+	position: relative;
+}
+
+.search-input {
+	flex: 1;
+	font-size: 28rpx;
+	color: #333;
+	height: 80rpx;
+	padding-left: 12rpx;
+	padding-right: 30rpx;
+}
+
+.clear-icon {
+	position: absolute;
+	right: 20rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	cursor: pointer;
+}
+
+.search-button {
+	height: 80rpx;
+	font-size: 28rpx;
+	line-height: 80rpx;
+	background-color: #2979ff;
+	color: #fff;
+	border-radius: 8rpx;
+	padding: 0 32rpx;
+}
+
+/* 列表样式 */
+.list-container {
+	background-color: #fff;
+	border-radius: 8rpx;
+	overflow: hidden;
+}
+
+.list-item {
+	border-bottom: 1rpx solid #f0f0f0;
+}
+
+.cell {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 24rpx;
+}
+
+.cell-content {
+	flex: 1;
+}
+
+.cell-title {
+	font-size: 32rpx;
+	color: #333;
+	font-weight: 500;
+	margin-bottom: 8rpx;
+}
+
+.cell-label {
+	font-size: 28rpx;
+	color: #666;
+}
+
+.cell-value {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	margin-left: 20rpx;
+}
+
+.cell-value text {
+	font-size: 28rpx;
+	color: #999;
+	margin-bottom: 4rpx;
+}
+
+.value-line {
+	display: block;
+}
+
+/* 加载更多样式 */
+.load-more {
+	text-align: center;
+	padding: 32rpx;
+	color: #999;
+	font-size: 28rpx;
+}
+
+.loading-text {
+	color: #2979ff;
+}
+
+.nomore-text {
+	color: #ccc;
+}
+
+/* 以下是原有样式，暂时保留 */
 .card {
 	background-color: white;
 	width: 100%;
@@ -186,9 +324,7 @@ export default {
 	.container {
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;
-		/* 将容器分成三列，每列宽度相等 */
 		grid-gap: 10px;
-		/* 设置列之间的间距 */
 	}
 
 	.column {
@@ -208,7 +344,6 @@ export default {
 
 .bigtitle {
 	color: #2979ff;
-
 	font-size: 50rpx;
 	font-weight: 50;
 }