refactor(components): 重构商品列表和详情页的UI组件
移除uView组件依赖，使用原生uni-app组件重构搜索框和列表展示 优化搜索框交互，添加清空按钮和防抖处理 统一列表项的样式和布局，提升用户体验
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user