453 lines
13 KiB
Vue
453 lines
13 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">{{historyType=='1'?'入库详情':'核销详情'}}</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">{{historyType=='1'?'入库成功':'核销成功'}}</text>
|
|
</view>
|
|
<text
|
|
class="status-time">{{codeInfo?.status == 2? codeInfo?.create_time: codeInfo?.distribute_time}}</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">{{codeInfo.order_no}}</text>
|
|
</view>
|
|
<view class="li-flex li-justify-between li-text-30 li-text-#666 li-mb-10">
|
|
<text>操作人员：{{userInfo.realname}}</text>
|
|
<text v-if="codeInfo.status == 9">负责仓库：{{codeInfo.distribute_name}}</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 li-flex li-justify-between li-items-center">
|
|
<view class="li-flex li-items-center">
|
|
<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>
|
|
<text class="li-text-28 li-text-#666">共{{codeInfo?.product?.length}}件商品</text>
|
|
</view>
|
|
|
|
<view class="product-list">
|
|
<view v-for="(product, index) in codeInfo.product" :key="product.id"
|
|
class="product-card li-flex li-mb-30"
|
|
:class="{'li-pb-30 li-border-b': index !== codeInfo?.product?.length - 1}">
|
|
<image :src="product.picture" 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">{{product.product_name}}</view>
|
|
<!-- <view class="product-code li-text-26 li-text-#999 li-mb-10">商品编码：{{product.code}}</view> -->
|
|
<view class="li-flex li-items-center li-justify-between">
|
|
<text class="li-text-28 li-text-#666">规格：{{product.spec_name || '默认'}}</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">{{product.num}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="product-price li-flex li-items-center li-justify-between li-mt-10">
|
|
<text class="li-text-28 li-text-#666">单价：</text>
|
|
<text class="li-text-32 li-text-#ff6b35">¥{{product.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="product-summary li-mt-20 li-pt-20 li-top-border">
|
|
<view class="summary-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">{{getTotalQuantity()}}件</text>
|
|
</view>
|
|
<view class="summary-item li-flex li-justify-between">
|
|
<text class="li-text-28 li-text-#666">合计金额</text>
|
|
<text class="li-text-32 li-text-#ff6b35">¥{{getTotalAmount()}}</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">{{codeInfo.order_no}}</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">{{codeInfo?.type==1?'普通订单':(codeInfo?.type==2?'秒杀订单':'拼团订单')}}</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>
|
|
<zero-loading type="wobble" v-if="loading"></zero-loading>
|
|
<wd-toast />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { scanCodeGet } from '@/api/ticket'
|
|
import { useNavigation } from '@/hooks/useNavigation'
|
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
|
const Toast = useToast()
|
|
|
|
// 使用导航 composable
|
|
const {
|
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
|
checkRouteStack // 检查当前路由栈状态的方法
|
|
} = useNavigation()
|
|
|
|
const loading = ref<boolean>(false)
|
|
const order_no = ref<string>('')
|
|
const historyType = ref<string>('1')
|
|
const codeInfo = ref({})
|
|
const userInfo = ref(uni.getStorageSync('userInfo'))
|
|
|
|
|
|
// 商品列表数据
|
|
const productList = ref([
|
|
{
|
|
id: 1,
|
|
name: '示例商品名称1',
|
|
code: 'SP202505126',
|
|
spec: '默认',
|
|
quantity: 2,
|
|
price: '299.00',
|
|
image: '../../static/swiper/1.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '示例商品名称2',
|
|
code: 'SP202505127',
|
|
spec: '大号',
|
|
quantity: 1,
|
|
price: '399.00',
|
|
image: '../../static/swiper/1.png'
|
|
}
|
|
])
|
|
|
|
// 计算商品总数
|
|
const getTotalQuantity = () => {
|
|
return codeInfo?.value?.product?.reduce((total, product) => total + product.num, 0)
|
|
}
|
|
|
|
// 计算合计金额
|
|
const getTotalAmount = () => {
|
|
const total = codeInfo?.value?.product?.reduce((sum, product) => {
|
|
return sum + (Number(product.price) * product.num)
|
|
}, 0)
|
|
return total?.toFixed(2)
|
|
}
|
|
|
|
// 打印详情
|
|
const printDetail = () => {
|
|
Toast.info('打印功能开发中')
|
|
}
|
|
|
|
// 分享详情
|
|
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;
|
|
}
|
|
}
|
|
|
|
const getScanCodeGet = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await scanCodeGet({ code: order_no.value })
|
|
if (res.code == 200) {
|
|
codeInfo.value = res.data
|
|
} else {
|
|
Toast.error(res.msg)
|
|
}
|
|
} catch (error) {
|
|
Toast.error(error?.msg)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onLoad((options) => {
|
|
order_no.value = options.order_no
|
|
historyType.value = options.type
|
|
checkRouteStack()
|
|
getScanCodeGet()
|
|
})
|
|
</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-section {
|
|
.product-list {
|
|
max-height: 800rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.product-card {
|
|
position: relative;
|
|
|
|
&.li-border-b {
|
|
border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.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-name {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-summary {
|
|
border-top-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
}
|
|
|
|
.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> |