hazardousWaste_app/pages/warehousing/uniqueCode/myUniqueCode/detail.vue

<!-- 唯一码详情 -->
<template>
    <!-- 自定义导航栏 -->
    <navigation :title="title" :back-url="backUrl">
        <template #right>
            <view class="right-btn flex align-center justify-center ">
                <uv-image @click="toEdit" src="../../../../static/edit.png" class="ml-24" width="20px" height="20px"
                    style="margin-top:10rpx" />
            </view>
        </template>
    </Navigation>
    <uv-skeletons :loading="loading" :skeleton="skeleton">
        <view class=" content">
            <!-- 唯一码展示 -->
            <uni-list>
                <uni-list-item v-for="item in uniqueCodeList" :key="item.id" clickable class="material-card">
                    <template v-slot:body>
                        <p style="display: flex; flex-direction: column; width: 100%;">
                            <!-- 编码、状态行 -->
                            <view class="flex-center">
                                <p class="title">编号：{{ item.code }}</p>
                                <p class="status">{{ getStatusName(item.status) }}</p>
                            </view>
                            <!-- 内容行 -->
                            <view class="text">
                                <p>RFID：
                                    <span v-if="item.rfidCode">{{ item.remark }}</span>
                                    <span v-else style="color: #999;">未绑定RFID</span>
                                </p>
                                <p>生成时间：
                                    <span>{{ item?.createTime }}</span>
                                </p>
                                <!-- 备注行-->
                                <view class="flex-center qrCode">
                                    <p>备注：
                                        <span v-if="item.remark">{{ item.remark }}</span>
                                        <span v-else style="color: #999;">未填写</span>
                                    </p>
                                    <view @click="toViewQrCode">
                                        <uv-image src="../../../../static/qrcode.png" width="40rpx" height="40rpx"
                                            style="margin-top:10rpx" />
                                    </view>
                                </view>
                            </view>
                        </p>
                    </template>
                </uni-list-item>
            </uni-list>
            <!-- 物料列表 -只读 -->
            <view>
                <material-list ref="materialRef" :formData="materialList" isEdit="2" />
            </view>

            <!-- 底部按钮 -->
            <view class="bottom">
                <uv-button type="primary" text="唯一码打印"></uv-button>
                <uv-button type="success" text="溯源" @click="toTraceability"></uv-button>
            </view>
        </view>
    </uv-skeletons>
    <uv-modal ref="modalRef" :title="none" class="qrCodeModal" width="480rpx" :showConfirmButton="false">
        <qr-code-modal :detail="materialList" />
    </uv-modal>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { detailUniqueCode } from '@/api/uniqueCode'
import { getStatusName, getDetail } from '../until';
import QrCodeModal from './QrCodeModal.vue';
import MaterialList from '../../../components/MaterialList.vue'
import Navigation from '../../../components/Navigation.vue'
const backUrl = ref('')
const title = ref('')
const modalRef = ref()
// 路径参数
const pathParams = ref('')
// 物料列表数组
const materialList = ref({
    material: {},
    remark: ''
})
// 唯一码数组
const uniqueCodeList = ref([])
// 详情数据
const detail = ref([])
// 骨架屏开关
const loading = ref(true)
// 骨架屏样式
const skeleton = [{
    type: 'line',
    num: 3,
    gap: '20rpx',
    style: ['width: 200rpx;marginBottom: 50rpx;marginTop:50rpx;padding:24rpx', 'height: 100rpx;', 'width: 500rpx;'],
}]
const toViewQrCode = () => {
    modalRef.value.open()

}
// 详情：唯一码
const getDetailInfo = () => {
    detailUniqueCode({ id: pathParams.value.id }).then((res) => {
        if (res.code == 200) {
            // ! 写成数组原因 为了适应可多个物料生成唯一码
            // 将物料写入信息以及物料详细信息解构出来、以及qrCode、唯一码对应的物料code、qrCodeMark仅用于二维码页面的备注展示
            materialList.value.material = [{
                ...res.data.material,
                ...getDetail(res.data.material.wornMaterial),
                qrCode: res.data.qrCode,
                code: res.data.code, //唯一码code
                uniqueCodeMaterialId: res.data.material.id, //唯一码物料id
                uniqueCodeRemark: res.data.remark,  //唯一码备注
            }]
            //  唯一码备注
            materialList.value.remark = res.data.remark
            uniqueCodeList.value = [res.data]

            console.log('详情数据：唯一码materialList', materialList);
            // 更新缓存物料值
            uni.setStorageSync('app_material', materialList.value.material);

        } else {
            materialList.value = []
            uniqueCodeList.value = []
            uni.showToast({ title: '暂无数据', icon: 'none' })
        }
        loading.value = false
    })
}

// 溯源
const toTraceability = () => {
}

// 修改：唯一码的物料信息 - 携带title和唯一码id
const toEdit = () => {
    uni.navigateTo({
        url: `/pages/warehousing/uniqueCode/issueUniqueCode/index?title=${pathParams.value.code}&id=${pathParams.value.id}`,
    });

}
// 接收id 且修改标题
onLoad((options) => {
    if (!options.id) {
        loading.value = false
        uni.showToast({ title: '参数错误,无唯一码ID', icon: 'none' })
        return
    }

    pathParams.value = options
    getDetailInfo()
})

onShow(() => {
    if (pathParams.value.code || pathParams.value.title) {
        backUrl.value = '/pages/warehousing/uniqueCode/myUniqueCode/index'
        title.value = pathParams.value.title || pathParams.value.code
    } else {
        backUrl.value = '/pages/warehousing/index'
        title.value = '唯一码发放'
    }
})

</script>
<style scoped lang="scss">
// 底部按钮
.bottom {
    position: fixed;
    bottom: 0;
    height: 60rpx;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .uv-button-wrapper {
        width: 50%;
        border-radius: 0;
    }
}

::v-deep.qrCodeModal {
    .uv-modal__content {
        display: block !important;
        padding: 24rpx;

    }
}
</style>