<!-- pages/goods/list.vue -->
<template>
<view class="goods-list-container">
<!-- 顶部标题栏 -->
<view class="header">
<uni-icons type="back" size="24" color="#fff" class="back-icon" @click="goBack" />
<view class="title-container">
<text class="title">货物信息列表</text>
</view>
</view>
<!-- 货物列表 -->
<scroll-view
scroll-y
class="goods-list"
:refresher-enabled="false"
@scrolltolower="onReachBottom"
>
<!-- 上拉刷新提示 -->
<view class="pull-up-hint" v-if="isLoading">
<uni-icons type="spinner-cycle" size="24" color="#5e8fff" class="loading-icon" />
<text>加载中...</text>
</view>
<!-- 货物卡片 -->
<view
v-for="(item, index) in goodsList"
:key="item.id"
class="goods-card"
@click="getOrderInfo(item.name)"
>
<view class="card-header">
<text class="goods-name">{{ item.name }}</text>
<text class="goods-code">#{{ item.code }}</text>
</view>
<view class="card-content">
<view class="info-row">
<text class="info-label">分类：</text>
<text class="info-value">{{ item.category }} / {{ item.subCategory }}</text>
</view>
<view class="info-row">
<text class="info-label">库存：</text>
<view class="stock-info">
<text class="info-value">{{ item.quantity }} {{ item.unit }}</text>
<text class="safety-stock">安全库存: {{ item.safetyStock }}{{ item.unit }}</text>
</view>
</view>
<view class="info-row">
<text class="info-label">状态：</text>
<text :class="[
'status-tag',
item.status === 'normal' ? 'status-normal' :
item.status === 'warning' ? 'status-warning' : 'status-danger'
]">
{{
item.status === 'normal' ? '库存正常' :
item.status === 'warning' ? '库存预警' : '库存不足'
}}
</text>
</view>
<view class="info-row">
<text class="info-label">位置：</text>
<text class="info-value">{{ item.warehouse }} - {{ item.storageLocation }}</text>
</view>
</view>
<view class="card-footer">
<text class="in-date">入库时间：{{ item.inDate }}</text>
</view>
</view>
<!-- 空状态提示 -->
<view v-if="goodsList.length === 0" class="empty-state">
<uni-icons type="box" size="50" color="#ccc"></uni-icons>
<text class="empty-text">暂无货物信息</text>
</view>
<!-- 加载完成提示（不显示空白） -->
<view v-if="loadComplete" class="no-more-hint">
<text>没有更多货物信息了</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
isLoading: false, // 加载状态
loadComplete: false, // 加载完成标志
pageSize: 5, // 每页加载数量
currentPage: 1, // 当前页码
totalPages: 3, // 总页数
goodsList: [], // 货物列表数据
baseData: [ // 基础货物数据
{
id: '1',
code: 'G2023001',
name: '金属螺丝',
category: '原材料',
subCategory: '金属件',
unit: '件',
quantity: 1200,
safetyStock: 500,
status: 'normal',
warehouse: '主仓库A区',
storageLocation: 'A区-3排-2层',
inDate: '2023-05-10'
},
{
id: '2',
code: 'G2023002',
name: '电路板',
category: '电子产品',
subCategory: '电子元件',
unit: '块',
quantity: 85,
safetyStock: 100,
status: 'warning',
warehouse: '主仓库B区',
storageLocation: 'B区-1排-5层',
inDate: '2023-06-15'
},
{
id: '3',
code: 'G2023003',
name: '打印纸',
category: '办公用品',
subCategory: '纸张',
unit: '包',
quantity: 20,
safetyStock: 30,
status: 'warning',
warehouse: '备用仓库',
storageLocation: 'C区-2排-1层',
inDate: '2023-07-20'
},
{
id: '4',
code: 'G2023004',
name: '塑料外壳',
category: '原材料',
subCategory: '塑料件',
unit: '个',
quantity: 850,
safetyStock: 400,
status: 'normal',
warehouse: '主仓库A区',
storageLocation: 'A区-4排-3层',
inDate: '2023-04-05'
},
{
id: '5',
code: 'G2023005',
name: 'LED显示屏',
category: '电子产品',
subCategory: '显示设备',
unit: '台',
quantity: 12,
safetyStock: 15,
status: 'warning',
warehouse: '备用仓库',
storageLocation: 'C区-3排-2层',
inDate: '2023-08-12'
}
]
}
},
onLoad() {
// 初始化加载数据
this.loadGoodsData();
},
methods: {
//获取货物信息并跳转到货物信息详细页面
getOrderInfo(item){
console.log(item)
uni.navigateTo({
url: '/pages/tabbar/storageManagement/OrderInfo'
})
},
// 加载货物数据
loadGoodsData() {
this.isLoading = true;
// 模拟API请求延迟
setTimeout(() => {
// 生成模拟数据
const mockData = this.generateMockData();
// 如果是第一页，直接赋值
if (this.currentPage === 1) {
this.goodsList = mockData;
} else {
// 后续页面追加数据
this.goodsList = [...this.goodsList, ...mockData];
}
// 检查是否加载完成
if (this.currentPage >= this.totalPages) {
this.loadComplete = true;
}
this.isLoading = false;
}, 800);
},
// 生成模拟数据
generateMockData() {
const newData = [];
const baseCount = this.baseData.length;
for (let i = 0; i < this.pageSize; i++) {
const baseIndex = (i + (this.currentPage - 1) * this.pageSize) % baseCount;
const baseItem = this.baseData[baseIndex];
const newItem = {
...baseItem,
id: `${baseItem.id}-${this.currentPage}-${i}`,
code: `G${2023 + this.currentPage}${100 + i}`,
quantity: Math.max(0, baseItem.quantity - (this.currentPage - 1) * 50),
inDate: this.generateRandomDate()
};
// 根据库存数量设置状态
if (newItem.quantity > newItem.safetyStock * 1.2) {
newItem.status = 'normal';
} else if (newItem.quantity > newItem.safetyStock * 0.5) {
newItem.status = 'warning';
} else {
newItem.status = 'danger';
}
newData.push(newItem);
}
return newData;
},
// 生成随机日期
generateRandomDate() {
const start = new Date(2023, 0, 1);
const end = new Date();
const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
return `${randomDate.getFullYear()}-${(randomDate.getMonth() + 1).toString().padStart(2, '0')}-${randomDate.getDate().toString().padStart(2, '0')}`;
},
// 上拉触底事件
onReachBottom() {
if (this.isLoading || this.loadComplete) return;
this.currentPage++;
this.loadGoodsData();
},
// 返回
goBack() {
uni.navigateTo({
url: '/pages/tabbar/storageManagement/selectOrder'
});
}
}
}
</script>
<style scoped>
/* 确保所有元素使用border-box模型 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.goods-list-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f5f7fa;
}
/* 顶部标题栏 */
.header {
background: linear-gradient(135deg, #5e8fff, #6b7de9);
padding: 15px 20px;
display: flex;
align-items: center;
color: #fff;
box-shadow: 0 2px 10px rgba(94, 143, 255, 0.3);
position: relative;
z-index: 10;
}
.back-icon {
padding: 5px;
z-index: 1;
}
.title-container {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
.title {
font-size: 18px;
font-weight: bold;
}
/* 货物列表 */
.goods-list {
flex: 1;
padding: 15px;
height: 100%;
background-color: #f5f7fa;
}
/* 上拉刷新提示 */
.pull-up-hint {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: #5e8fff;
font-size: 14px;
background-color: #f5f7fa;
}
.loading-icon {
animation: spin 1s linear infinite;
margin-right: 8px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 货物卡片 */
.goods-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
margin-bottom: 15px;
padding: 20px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.goods-card:active {
background-color: #f8f9ff;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.goods-name {
font-size: 17px;
font-weight: bold;
color: #333;
}
.goods-code {
font-size: 13px;
color: #999;
background: #f0f2f5;
padding: 3px 8px;
border-radius: 4px;
}
.card-content {
margin-bottom: 15px;
}
.info-row {
display: flex;
margin-bottom: 12px;
font-size: 14px;
align-items: flex-start;
}
.info-label {
width: 70px;
color: #666;
flex-shrink: 0;
}
.info-value {
flex: 1;
color: #333;
line-height: 1.5;
}
.stock-info {
display: flex;
flex-direction: column;
}
.safety-stock {
margin-top: 5px;
color: #888;
font-size: 13px;
}
.status-tag {
padding: 4px 12px;
border-radius: 15px;
font-size: 13px;
font-weight: 500;
display: inline-block;
}
.status-normal {
background: #e8f5e9;
color: #4caf50;
}
.status-warning {
background: #fff8e1;
color: #ff9800;
}
.status-danger {
background: #ffebee;
color: #f44336;
}
.card-footer {
padding-top: 12px;
border-top: 1px solid #f5f5f5;
color: #888;
font-size: 13px;
display: flex;
justify-content: flex-start;
}
/* 加载完成提示（不占用多余空间） */
.no-more-hint {
text-align: center;
padding: 12px 0;
color: #aaa;
font-size: 13px;
background-color: #f5f7fa;
}
/* 空状态提示 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70vh;
color: #999;
text-align: center;
}
.empty-text {
margin: 15px 0;
font-size: 15px;
}
</style>
按照这个样式和布局，用uniapp生用户管理导航栏以及用户列表数据，并且每条用户数据可以进行修改以及删除，新增用户按钮位于下方，搜索框位于导航栏下面，可以由下往上滑动加载数据
最新发布
博客给出了一段代码，使用uni.setNavigationBarTitle方法设置导航栏标题，将标题内容设为this.data。此代码与uni-app开发相关，属于移动开发领域。
扫一扫
1215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
