230 lines
6.0 KiB
Vue
230 lines
6.0 KiB
Vue
<template>
|
|
<view class="li-history-page">
|
|
<!-- 自定义导航栏 -->
|
|
<wd-navbar :bordered="false"
|
|
custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
|
|
safeAreaInsetTop fixed placeholder>
|
|
<template #left>
|
|
<view class="li-ml-15 li-mt-10 li-flex li-items-center">
|
|
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
|
|
@click="toPages({type:'nav'})"></text>
|
|
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
|
|
@click="toPages({type:'home'})"></text>
|
|
<text class="li-text-42">入库历史</text>
|
|
</view>
|
|
</template>
|
|
</wd-navbar>
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="li-w-90% li-mx-auto li-mt-30">
|
|
<wd-search placeholderStyle="color:#d9d9d9" v-model="searchKeyword" hide-cancel placeholder-left
|
|
placeholder="关键字搜索"></wd-search>
|
|
</view>
|
|
|
|
<!-- 历史记录列表 -->
|
|
<view class="li-w-92% li-mx-auto li-mt-30">
|
|
<view v-if="filteredRecords.length > 0" class="records-list">
|
|
<view v-for="(record, index) in filteredRecords" :key="index" @click="btnDetail"
|
|
class="record-item li-flex li-items-center li-justify-between li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
|
|
<view class="li-flex li-flex-col">
|
|
<view class="li-flex li-items-center">
|
|
<text class="ri-file-list-3-line li-mr-10 li-text-#009aff"></text>
|
|
<text class="li-text-30">{{record.orderNumber}}</text>
|
|
</view>
|
|
<view class="li-flex li-items-center li-mt-8">
|
|
<text class="li-text-24 li-text-#999">商品名称: {{ record.productName }}</text>
|
|
</view>
|
|
<text class="li-text-24 li-text-#999 li-mt-8">{{record.time}}</text>
|
|
<view class="li-flex li-items-center li-mt-8">
|
|
<text class="li-text-24 li-text-#999">操作人: {{ record.operator }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="status-badge" :class="[record.status === 'success' ? 'status-success' :
|
|
record.status === 'fail' ? 'status-fail' : 'status-pending']">
|
|
{{record.status === 'success' ? '入库成功' :
|
|
record.status === 'fail' ? '入库失败' : '处理中'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态提示 -->
|
|
<view v-else class="empty-state li-w-92% li-mx-auto li-mt-60 li-flex li-flex-col li-items-center">
|
|
<text class="ri-inbox-line li-text-100 li-text-#ddd"></text>
|
|
<view class="li-text-30 li-text-#999 li-mt-20">暂无入库记录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { useNavigation } from '@/hooks/useNavigation'
|
|
// 使用导航 composable
|
|
const {
|
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
|
checkRouteStack // 检查当前路由栈状态的方法
|
|
} = useNavigation()
|
|
|
|
// 搜索关键词
|
|
const searchKeyword = ref('')
|
|
|
|
// 历史记录数据
|
|
const records = ref([
|
|
{
|
|
orderNumber: 'JD202503050001',
|
|
time: '2025-03-05 21:58:34',
|
|
status: 'success',
|
|
productName: '示例商品1', // 新增字段
|
|
operator: '张三' // 新增字段
|
|
},
|
|
{
|
|
orderNumber: 'JD202503050002',
|
|
time: '2025-03-05 22:10:12',
|
|
status: 'pending',
|
|
productName: '示例商品2', // 新增字段
|
|
operator: '李四' // 新增字段
|
|
},
|
|
{
|
|
orderNumber: 'JD202503050003',
|
|
time: '2025-03-05 22:15:45',
|
|
status: 'fail',
|
|
productName: '示例商品3', // 新增字段
|
|
operator: '王五' // 新增字段
|
|
},
|
|
{
|
|
orderNumber: 'JD202503050003',
|
|
time: '2025-03-05 22:15:45',
|
|
status: 'fail',
|
|
productName: '示例商品3', // 新增字段
|
|
operator: '王五' // 新增字段
|
|
},
|
|
{
|
|
orderNumber: 'JD202503050003',
|
|
time: '2025-03-05 22:15:45',
|
|
status: 'fail',
|
|
productName: '示例商品3', // 新增字段
|
|
operator: '王五' // 新增字段
|
|
},
|
|
{
|
|
orderNumber: 'JD202503050003',
|
|
time: '2025-03-05 22:15:45',
|
|
status: 'fail',
|
|
productName: '示例商品3', // 新增字段
|
|
operator: '王五' // 新增字段
|
|
},
|
|
{
|
|
orderNumber: 'JD202503050003',
|
|
time: '2025-03-05 22:15:45',
|
|
status: 'fail',
|
|
productName: '示例商品3', // 新增字段
|
|
operator: '王五' // 新增字段
|
|
},
|
|
{
|
|
orderNumber: 'JD202503050003',
|
|
time: '2025-03-05 22:15:45',
|
|
status: 'fail',
|
|
productName: '示例商品3', // 新增字段
|
|
operator: '王五' // 新增字段
|
|
},
|
|
])
|
|
|
|
const btnDetail = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pagesA/verification/historyDetail'
|
|
})
|
|
}
|
|
|
|
// 过滤后的历史记录
|
|
const filteredRecords = computed(() => {
|
|
if (!searchKeyword.value) return records.value
|
|
return records.value.filter(record =>
|
|
record.orderNumber.includes(searchKeyword.value)
|
|
)
|
|
})
|
|
|
|
onLoad(() => {
|
|
checkRouteStack()
|
|
})
|
|
|
|
const toPages = (item : any) => {
|
|
console.log(item);
|
|
switch (item.type) {
|
|
case 'nav':
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
break;
|
|
case 'home':
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f7f8fc;
|
|
}
|
|
|
|
.li-history-page {
|
|
padding-bottom: 40rpx;
|
|
|
|
.records-list {
|
|
.record-item {
|
|
&:not(:last-child) {
|
|
margin-bottom: 30rpx; // 调整间距
|
|
}
|
|
}
|
|
}
|
|
|
|
// 状态标签
|
|
.status-badge {
|
|
padding: 4rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 24rpx;
|
|
|
|
&.status-success {
|
|
color: #07c160;
|
|
background-color: rgba(7, 193, 96, 0.1);
|
|
}
|
|
|
|
&.status-fail {
|
|
color: #fa5151;
|
|
background-color: rgba(250, 81, 81, 0.1);
|
|
}
|
|
|
|
&.status-pending {
|
|
color: #f0ad4e;
|
|
background-color: rgba(240, 173, 78, 0.1);
|
|
}
|
|
}
|
|
|
|
// 空状态
|
|
.empty-state {
|
|
padding-top: 100rpx;
|
|
}
|
|
}
|
|
|
|
|
|
::v-deep .wd-search {
|
|
background-color: #F6F7FB !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
::v-deep .wd-search__block {
|
|
background-color: #FFFFFF !important;
|
|
width: 480rpx !important;
|
|
padding: 4rpx !important;
|
|
}
|
|
|
|
::v-deep .uni-input-placeholder,
|
|
.uni-input-input {
|
|
width: auto !important;
|
|
}
|
|
</style> |