<!-- 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生成货物的详细信息页面，并将所有信息以点号来间隔组成一串字符串，并将这字符串转换成条形码，将条形码放置所有信息的前面
最新发布
这是一个简单的C++程序，用于从标准输入读取一个字符并将其转换为整型后输出到标准输出。程序的核心在于使用cin进行输入和cout进行输出。
扫一扫
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
