shanghaiganxiangtuzhuangworkshop_WMS_PDA/pages/watchGoods/goodsdetail/goodsdetail.vue

<template>
	<view class="common-nav-container">
		<!-- 原生搜索框 -->
		<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 >
				<text>库位：</text>
				<text>{{ item.locationCode }}</text>
			</view>
			<view >
				<text>零件号：</text>
				<text>{{ item.partnumber }}</text>
			</view>
			<view >
				<text>数量：</text>
				<text>{{ item.goodsNumAction }}</text>
			</view>
			<view  >
				<text>入库时间：</text>
				<text>{{ item.entryWarehouseTime }}</text>
			</view>
			<view  >
				<text>备注：</text>
				<text>{{ item.remark }}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import * as watchGoodsApi from '@/api/watchGoods/watchGoods.js';
	export default {
		onLoad: function(option) {
			this.shortpatchcode = option.shortpatchcode;
			this.locationCode = option.locationCode;
		},
		data() {
			return {
				formData: {
					query: ''
				},
				shortpatchcode: '',
				locationCode:'',
				dataList: [],
				total: 0
			};
		},
		mounted() {
			this.getList();
		},
		methods: {
		// 处理输入变化
		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">
.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;
}

.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 text {
	font-weight: bold;
	margin-bottom: 6px;
}

.card view {
	color: #333;
}
</style>