Teams/shanghaiganxiangtuzhuangworkshop_WMS_PDA
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 重构商品列表和详情页的UI组件

Browse Source 
移除uView组件依赖，使用原生uni-app组件重构搜索框和列表展示
优化搜索框交互，添加清空按钮和防抖处理
统一列表项的样式和布局，提升用户体验
This commit is contained in:
赵正易
2025-10-21 15:19:13 +08:00
parent 8103890993
commit 10bc8314d7
4 changed files with 376 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
pages/watchGoods/goodsdetail/goodsdetail.vue
View File

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

211
pages/watchGoods/watchGoods.vue
View File

@@ -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;
}