bonus-material-app/src/pages/picking/outbound/details.vue

<template>
    <!-- 领料出库详情 -->
    <view class="page-container">
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="18">
                <view>
                    <uni-easyinput placeholder="请输入内容" />
                </view>
            </uni-col>
            <uni-col :span="6">
                <view class="search">查询</view>
            </uni-col>
        </uni-row>

        <scroll-view scroll-y class="scroll-container">
            <view
                v-for="(item, index) in detailsList"
                :key="index"
                class="table-list-item"
            >
                <uni-swipe-action class="swipe-action">
                    <uni-swipe-action-item 
                        :right-options="item.status == 2 ? options2 : options" 
                        @click="onClick($event, item)"
                    >
                        <div class="title">
                            <span class="main-title">领料出库</span>
                            <div class="status-tag">
                                <uni-tag 
                                    :text="item.status == 2 ? '已完成' : '未完成'" 
                                    :type="item.status == 2 ? 'success' : 'warning'"
                                    :custom-style="item.status == 2 ? successStyle : warningStyle"
                                />
                            </div>
                        </div>
                        <view class="line"></view>
                        <uni-row :gutter="24">
                            <uni-col :span="6">物资名称：</uni-col>
                            <uni-col :span="16">
                                <view class="cont">{{ item.maTypeName }}</view>
                            </uni-col>
                        </uni-row>
                        <uni-row :gutter="24">
                            <uni-col :span="6">规格型号：</uni-col>
                            <uni-col :span="16">
                                <view class="cont">{{ item.typeName }}</view>
                            </uni-col>
                        </uni-row>
                        <uni-row :gutter="24">
                            <uni-col :span="6">预领数量：</uni-col>
                            <uni-col :span="16">
                                <view class="cont">{{ item.preNum }}</view>
                            </uni-col>
                        </uni-row>
                        <uni-row :gutter="24">
                            <uni-col :span="6">已领数量：</uni-col>
                            <uni-col :span="16">
                                <view class="cont">{{ item.alNum }}</view>
                            </uni-col>
                        </uni-row>
                        <uni-row :gutter="24">
                            <uni-col :span="6">待领数量：</uni-col>
                            <uni-col :span="16">
                                <view class="cont">{{ item.preNum - item.alNum }}</view>
                            </uni-col>
                        </uni-row>
                        <uni-row :gutter="24">
                            <uni-col :span="6">单位：</uni-col>
                            <uni-col :span="16">
                                <view class="cont">{{ item.unitName }}</view>
                            </uni-col>
                        </uni-row>
                        <uni-row :gutter="24">
                            <uni-col :span="6">管理模式：</uni-col>
                            <uni-col :span="16">
                                <view class="cont">
                                    <uni-tag
                                        text="编码"
                                        type="warning"
                                        v-if="item.manageType === 0"
                                        :custom-style="codeStyle"
                                    />
                                    <uni-tag
                                        text="数量"
                                        type="success"
                                        v-if="item.manageType === 1"
                                        :custom-style="numStyle"
                                    />
                                </view>
                            </uni-col>
                        </uni-row>
                    </uni-swipe-action-item>
                </uni-swipe-action>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { getOutboundDetailsAPI } from '@/services/picking/outbound.js'
import { onLoad, onShow } from '@dcloudio/uni-app'

const detailsList = ref([])
// const query = defineProps() // 获取上级页面传递的路由参数

// 领料单位，参数等信息
const leaseApplyInfo = ref({
    leaseUnitId: '', //       领料单位
    leaseUnit: '', //       领料单位
    leaseProjectId: '', //    领料工程
    leaseProject: '', //    领料工程
    maTypeName: '', //      物资类型
    typeName: '', //        规格型号
    unitName: '', //        单位
    storageNum: '', //      库存数量
    preNum: '', //          预领数量
    parentId: '', //  出库时所需参数 取列表 id
    id: '', //              出库时所需参数 取详情接口 id
    typeId: '', //          出库时所需参数 取详情接口 typeId
    manageType: '', //      出库时所需参数 取详情接口 manageType
})

onLoad((options) => {
    leaseApplyInfo.value.parentId = options.id
    getOutboundDetailsData()
})

// 获取列表详情
const getOutboundDetailsData = async () => {
    const { data: res } = await getOutboundDetailsAPI(leaseApplyInfo.value.parentId)
    detailsList.value = res.leaseApplyDetailsList
    console.log(res.leaseApplyInfo)
    leaseApplyInfo.value.leaseUnitId = res.leaseApplyInfo.leaseUnitId
    leaseApplyInfo.value.leaseUnit = res.leaseApplyInfo.leaseUnit
    leaseApplyInfo.value.leaseProjectId = res.leaseApplyInfo.leaseProjectId
    leaseApplyInfo.value.leaseProject = res.leaseApplyInfo.leaseProject
    // console.log('详情数据', res)
}

// 点击跳转出库页面
const onCodingItem = (item) => {
    console.log(item)
    // 解构所需要的数据
    const {
        status,
        manageType,
        maTypeName,
        typeName,
        storageNum,
        preNum,
        alNum,
        unitName,
        id,
        typeId,
        unitValue,
    } = item
    leaseApplyInfo.value.maTypeName = maTypeName
    leaseApplyInfo.value.typeName = typeName
    leaseApplyInfo.value.unitName = unitName
    leaseApplyInfo.value.storageNum = storageNum
    leaseApplyInfo.value.preNum = preNum
    leaseApplyInfo.value.alNum = alNum
    leaseApplyInfo.value.id = id
    leaseApplyInfo.value.typeId = typeId
    leaseApplyInfo.value.manageType = manageType
    leaseApplyInfo.value.unitValue = unitValue

    if (status == 2) {
        uni.showToast({ title: '该物资已完成出库！', icon: 'none' })
        return
    }
    let codingUrl = ''
    if (manageType === 0) {
        codingUrl = '/pages/picking/outbound/code-outbound' // 编码出库
    }
    if (manageType == 1) {
        codingUrl = '/pages/picking/outbound/num-outbound' // 数量出库
    }

    // 把 leaseApplyInfo 领料信息转成 json 传递到下个页面
    uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(leaseApplyInfo.value)}` })
}
onShow(() => {
    getOutboundDetailsData()
})

// 状态标签样式
const successStyle = {
    color: '#52c41a',
    backgroundColor: 'rgba(82, 196, 26, 0.1)',
    border: '2rpx solid rgba(82, 196, 26, 0.2)',
    fontWeight: '600'
}

const warningStyle = {
    color: '#fa8c16',
    backgroundColor: 'rgba(250, 140, 22, 0.1)',
    border: '2rpx solid rgba(250, 140, 22, 0.2)',
    fontWeight: '600'
}

// 管理方式标签样式
const codeStyle = {
    color: '#ff9800',
    backgroundColor: 'rgba(255, 152, 0, 0.1)',
    border: '2rpx solid rgba(255, 152, 0, 0.2)',
    padding: '4rpx 16rpx',
    fontSize: '26rpx',
    fontWeight: '600'
}

const numStyle = {
    color: '#13c2c2',
    backgroundColor: 'rgba(19, 194, 194, 0.1)',
    border: '2rpx solid rgba(19, 194, 194, 0.2)',
    padding: '4rpx 16rpx',
    fontSize: '26rpx',
    fontWeight: '600'
}

// 右滑按钮组
const options = ref([
    {
        text: '出库',
        style: {
            backgroundColor: '#3784fb',
            // color: '#fff',
            fontSize: '28rpx',
        },
    },
])

const options2 = ref([
    {
        text: '查看',
        style: {
            backgroundColor: '#3784fb',
            // color: '#fff',
            fontSize: '28rpx',
        },
    },
])

// 点击滑动按钮
const onClick = (e, item) => {
    if (e.index === 0) {
        onCodingItem(item)
    }
}
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: #f7f8fa;
    padding: 24rpx;

    // 搜索表单
    .search-form {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 24rpx;
        border-radius: 20rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

        :deep(.uni-easyinput__content) {
            background-color: #f7f8fa;
            border: 2rpx solid #e8e8e8;
            border-radius: 12rpx;
            height: 88rpx;
            padding: 0 24rpx;
            transition: all 0.3s ease;

            &:focus-within {
                border-color: #3784fb;
                box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
            }

            .uni-easyinput__content-input {
                font-size: 28rpx;
                color: #262626;
                height: 88rpx;
                line-height: 88rpx;
            }
        }

        // 搜索按钮
        .search {
            height: 88rpx;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            text-align: center;
            line-height: 88rpx;
            color: #fff;
            border-radius: 12rpx;
            font-size: 28rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
                box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
            }
        }
    }

    // 列表项样式
    .table-list-item {
        margin: 24rpx 0;
        padding: 0;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;

        // 滑动操作区域样式
        .swipe-action {
            :deep(.uni-swipe) {
                width: 100% !important;
                background-color: #fff;
            }

            :deep(.uni-swipe_content) {
                background: #fff;
                border-radius: 20rpx;
                padding: 32rpx;
                overflow: hidden;
            }

            :deep(.uni-swipe_right) {
                height: 100%;
                display: flex;
                align-items: center;
            }
        }

        // 滑动按钮样式
        :deep(.uni-swipe_button-group) {
            height: 100%;
            display: flex;
            align-items: stretch;

            .uni-swipe_button {
                padding: 0 50rpx;
                font-size: 28rpx;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                height: auto;
                margin: 0;
                min-width: 120rpx;
                opacity: 0;
                transition: opacity 0.3s;

                &:nth-child(1) {
                    background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
                    box-shadow: 0 4rpx 16rpx rgba(55, 132, 251, 0.2);
                    border-radius: 0;
                }

                &:nth-child(2) {
                    background: linear-gradient(135deg, #ff4d4f 0%, #ed6042 100%);
                    box-shadow: 0 4rpx 16rpx rgba(237, 96, 66, 0.2);
                    border-radius: 0;
                }

                &:active {
                    opacity: 0.9;
                    transform: scale(0.98);
                }
            }
        }

        &:active {
            transform: scale(0.985);
            background-color: #fafbfc;
        }

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24rpx;

            span {
                font-size: 32rpx;
                font-weight: 600;
                color: #3784fb;
                background: linear-gradient(90deg, #3784fb, #4b8eff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .line {
            margin: 24rpx 0;
            height: 2rpx;
            background: linear-gradient(90deg, 
                rgba(232, 232, 232, 0) 0%,
                rgba(232, 232, 232, 1) 50%,
                rgba(232, 232, 232, 0) 100%
            );
        }

        :deep(.uni-row) {
            margin-bottom: 20rpx;
            
            &:last-child {
                margin-bottom: 0;
            }

            .uni-col-8 {
                color: #8c8c8c;
                font-size: 28rpx;
                font-weight: 500;
            }

            .cont {
                color: #262626;
                font-size: 28rpx;
                font-weight: 500;
                line-height: 1.8;
                text-align: right;
            }
        }

        // 标签样式
        :deep(.uni-tag) {
            padding: 6rpx 20rpx;
            border-radius: 8rpx;
            font-size: 26rpx;
            font-weight: 600;
            margin: 0;

            &[type="warning"] {
                color: #fa8c16;
                background-color: rgba(250, 140, 22, 0.1);
                border: 2rpx solid rgba(250, 140, 22, 0.2);
            }

            &[type="success"] {
                color: #52c41a;
                background-color: rgba(82, 196, 26, 0.1);
                border: 2rpx solid rgba(82, 196, 26, 0.2);
            }
        }
    }
}

// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 26rpx;
    color: #8c8c8c;
    padding: 32rpx 0;
    letter-spacing: 1rpx;
}
</style>