365 lines
10 KiB
Vue
365 lines
10 KiB
Vue
<template>
|
||
<view class="detail-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="nav-bg-layer"></view>
|
||
|
||
<!-- 状态卡片 -->
|
||
<view class="status-card li-w-92% li-mx-auto li-mt-20 li-rd-20 li-py-30">
|
||
<view class="status-header li-flex li-items-center li-justify-between li-px-30">
|
||
<view class="li-flex li-items-center">
|
||
<text class="status-icon ri-checkbox-circle-fill"></text>
|
||
<text class="status-text">入库成功</text>
|
||
</view>
|
||
<text class="status-time">2025-03-05 12:34:56</text>
|
||
</view>
|
||
<view class="li-divider li-my-20"></view>
|
||
<view class="order-info li-px-30">
|
||
<view class="order-id li-flex li-items-center li-mb-15">
|
||
<text class="ri-barcode-line li-text-36 li-text-#666 li-mr-10"></text>
|
||
<text class="li-text-32 li-text-#333">JD202503050001</text>
|
||
</view>
|
||
<view class="li-flex li-justify-between li-text-30 li-text-#666 li-mb-10">
|
||
<text>操作人员：张三</text>
|
||
<text>负责仓库：北京仓</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品信息 -->
|
||
<view class="product-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
|
||
<view class="section-title li-mb-20">
|
||
<text class="ri-shopping-bag-line li-text-38 li-text-#0070F0 li-mr-10"></text>
|
||
<text class="li-text-36 li-text-#333">商品信息</text>
|
||
</view>
|
||
|
||
<view class="product-card li-flex li-mb-30">
|
||
<image src="../../static/swiper/1.png" mode="aspectFill" class="product-image"></image>
|
||
<view class="product-info li-ml-20">
|
||
<view class="product-name li-text-32 li-text-#333 li-mb-10">示例商品名称</view>
|
||
<view class="product-code li-text-26 li-text-#999 li-mb-10">商品编码：SP202505126</view>
|
||
<view class="li-flex li-items-center li-justify-between">
|
||
<text class="li-text-28 li-text-#666">规格：默认</text>
|
||
<view class="product-quantity li-flex li-items-center">
|
||
<text class="li-text-28 li-text-#666 li-mr-10">数量：</text>
|
||
<text class="li-text-32 li-text-#0070F0">1</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="product-attrs">
|
||
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">商品分类</text>
|
||
<text class="li-text-28 li-text-#333">电子产品</text>
|
||
</view>
|
||
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">供应商</text>
|
||
<text class="li-text-28 li-text-#333">京东自营</text>
|
||
</view>
|
||
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">单价</text>
|
||
<text class="li-text-28 li-text-#333">¥299.00</text>
|
||
</view>
|
||
<view class="attr-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">库存状态</text>
|
||
<text class="li-text-28 li-text-#07c160">正常</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 入库详情 -->
|
||
<view class="detail-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
|
||
<view class="section-title li-mb-20">
|
||
<text class="ri-information-line li-text-38 li-text-#0070F0 li-mr-10"></text>
|
||
<text class="li-text-36 li-text-#333">入库详情</text>
|
||
</view>
|
||
|
||
<view class="detail-list">
|
||
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">入库单号</text>
|
||
<text class="li-text-28 li-text-#333">RK202503050001</text>
|
||
</view>
|
||
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">入库方式</text>
|
||
<text class="li-text-28 li-text-#333">扫码入库</text>
|
||
</view>
|
||
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">入库类型</text>
|
||
<text class="li-text-28 li-text-#333">普通入库</text>
|
||
</view>
|
||
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">所属库位</text>
|
||
<text class="li-text-28 li-text-#333">A-12-03</text>
|
||
</view>
|
||
<view class="detail-item li-flex li-justify-between li-mb-15">
|
||
<text class="li-text-28 li-text-#666">入库备注</text>
|
||
<text class="li-text-28 li-text-#333">正常入库</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作时间轴 -->
|
||
<view class="timeline-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white li-mb-40">
|
||
<view class="section-title li-mb-20">
|
||
<text class="ri-time-line li-text-38 li-text-#0070F0 li-mr-10"></text>
|
||
<text class="li-text-36 li-text-#333">操作记录</text>
|
||
</view>
|
||
|
||
<view class="timeline">
|
||
<view class="timeline-item">
|
||
<view class="timeline-dot active"></view>
|
||
<view class="timeline-content li-ml-20">
|
||
<view class="timeline-title li-text-30 li-text-#333">入库完成</view>
|
||
<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:34:56</view>
|
||
<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
|
||
</view>
|
||
</view>
|
||
<view class="timeline-line"></view>
|
||
|
||
<view class="timeline-item">
|
||
<view class="timeline-dot active"></view>
|
||
<view class="timeline-content li-ml-20">
|
||
<view class="timeline-title li-text-30 li-text-#333">商品确认</view>
|
||
<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:33:42</view>
|
||
<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
|
||
</view>
|
||
</view>
|
||
<view class="timeline-line"></view>
|
||
|
||
<view class="timeline-item">
|
||
<view class="timeline-dot active"></view>
|
||
<view class="timeline-content li-ml-20">
|
||
<view class="timeline-title li-text-30 li-text-#333">扫码录入</view>
|
||
<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:32:18</view>
|
||
<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮区域 -->
|
||
<view class="footer-actions li-w-92% li-mx-auto li-flex li-justify-between li-mb-30">
|
||
<wd-button custom-class="action-btn secondary" @click="printDetail">打印详情</wd-button>
|
||
<wd-button custom-class="action-btn primary" @click="shareDetail">分享详情</wd-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onLoad } from '@dcloudio/uni-app'
|
||
import { useNavigation } from '@/hooks/useNavigation'
|
||
// 使用导航 composable
|
||
const {
|
||
hasMultiplePages, // 是否有多个页面在路由栈中
|
||
isTabBarPage, // 当前页面是否为 tabBar 页面
|
||
checkRouteStack // 检查当前路由栈状态的方法
|
||
} = useNavigation()
|
||
|
||
|
||
// 打印详情
|
||
const printDetail = () => {
|
||
uni.showToast({
|
||
title: '打印功能开发中',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
// 分享详情
|
||
const shareDetail = () => {
|
||
uni.showToast({
|
||
title: '分享功能开发中',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
onLoad((options) => {
|
||
checkRouteStack()
|
||
console.log('入库详情页参数:', options)
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f7f8fc;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.detail-page {
|
||
padding-bottom: 30rpx;
|
||
|
||
// 导航栏背景
|
||
.nav-bg-layer {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: calc(var(--status-bar-height) + 88rpx);
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
||
z-index: -1;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
|
||
// 状态卡片
|
||
.status-card {
|
||
background: linear-gradient(135deg, #f6fafe 0%, #edf6ff 100%);
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.status-header {
|
||
.status-icon {
|
||
color: #07c160;
|
||
font-size: 44rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.status-text {
|
||
color: #07c160;
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-time {
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.li-divider {
|
||
height: 2rpx;
|
||
background-color: rgba(0, 0, 0, 0.05);
|
||
}
|
||
}
|
||
|
||
// 商品卡片
|
||
.product-section,
|
||
.detail-section,
|
||
.timeline-section {
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
|
||
.product-card {
|
||
.product-image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #f5f5f5;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.product-attrs,
|
||
.detail-list {
|
||
background-color: #f9f9f9;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
// 时间轴
|
||
.timeline {
|
||
position: relative;
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeline-dot {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background-color: #ddd;
|
||
margin-top: 14rpx;
|
||
|
||
&.active {
|
||
background-color: #0070F0;
|
||
box-shadow: 0 0 0 6rpx rgba(0, 112, 240, 0.2);
|
||
}
|
||
}
|
||
|
||
.timeline-line {
|
||
position: relative;
|
||
width: 2rpx;
|
||
height: 60rpx;
|
||
background-color: #ddd;
|
||
margin-left: 9rpx;
|
||
z-index: 0;
|
||
}
|
||
|
||
.timeline-content {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
// 底部按钮
|
||
.footer-actions {
|
||
margin-top: 40rpx;
|
||
|
||
.action-btn {
|
||
width: 46%;
|
||
height: 85rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
|
||
&.primary {
|
||
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
&.secondary {
|
||
background: #ffffff !important;
|
||
color: #0070F0 !important;
|
||
border: 2rpx solid #0070F0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |