gxt_app/pages/workbench/detail/index.uvue

<template>
    <view class="detail-page">
        <scroll-view class="detail-content" :scroll-y="true">
            <!-- 基础信息 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">基础信息</text>
                </view>
                <view class="info-card">
                    <view class="info-item">
                        <text class="info-label">承包商名称</text>
                        <text class="info-value">{{ detailData.contractorName }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">统一社会信用代码</text>
                        <text class="info-value">{{ detailData.creditCode }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">法定代表人</text>
                        <text class="info-value">{{ detailData.legalRepresentative }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">联系电话</text>
                        <text class="info-value">{{ detailData.contactPhone }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">公司地址</text>
                        <text class="info-value">{{ detailData.companyAddress }}</text>
                    </view>
                </view>
            </view>

            <!-- 资质信息 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">资质信息</text>
                </view>
                <view class="info-card">
                    <view class="info-item">
                        <text class="info-label">资质等级</text>
                        <text class="info-value highlight">{{ detailData.qualificationLevel }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">资质证书号</text>
                        <text class="info-value">{{ detailData.qualificationCertNo }}</text>
                    </view>
                    <view class="info-item full-width">
                        <text class="info-label">经营范围</text>
                        <text class="info-value">{{ detailData.businessScope }}</text>
                    </view>
                </view>
            </view>

            <!-- 银行信息 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">银行信息</text>
                </view>
                <view class="info-card">
                    <view class="info-item">
                        <text class="info-label">开户银行</text>
                        <text class="info-value">{{ detailData.bankName }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">银行账号</text>
                        <text class="info-value">{{ detailData.bankAccount }}</text>
                    </view>
                </view>
            </view>

            <!-- 其他信息 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">其他信息</text>
                </view>
                <view class="info-card">
                    <view class="info-item">
                        <text class="info-label">创建时间</text>
                        <text class="info-value">{{ detailData.createTime }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">创建人</text>
                        <text class="info-value">{{ detailData.createBy }}</text>
                    </view>
                    <view class="info-item full-width">
                        <text class="info-label">备注</text>
                        <text class="info-value">{{ detailData.remark }}</text>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 加载中状态 -->
        <view v-if="loading" class="loading-mask">
            <text class="loading-text">加载中...</text>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'
    import type { ContractorInfo } from '../../../types/workbench'
    import { getContractorById } from '../../../api/workbench/detail'

    // 详情数据
    const detailData = ref<ContractorInfo>({
        id: '',
        createBy: '',
        createTime: '',
        updateBy: null,
        updateTime: null,
        isDeleted: 0,
        remark: '',
        creditCode: '',
        contractorName: '',
        companyAddress: '',
        legalRepresentative: '',
        contactPhone: '',
        qualificationLevel: '',
        qualificationCertNo: '',
        businessScope: '',
        bankName: '',
        bankAccount: ''
    })

    const loading = ref<boolean>(false)

    // 加载详情数据
    const loadDetail = async (id: string): Promise<void> => {
        try {
            loading.value = true

            const result = await getContractorById(id)

            // 提取响应数据
            const resultObj = result as UTSJSONObject
            const success = resultObj['success'] as boolean
            const data = resultObj['data'] as UTSJSONObject | null

            if (success && data != null) {
                // 转换数据
                const contractorInfo: ContractorInfo = {
                    id: data['id'] as string,
                    createBy: data['createBy'] as string,
                    createTime: data['createTime'] as string,
                    updateBy: data['updateBy'] as string | null,
                    updateTime: data['updateTime'] as string | null,
                    isDeleted: data['isDeleted'] as number,
                    remark: data['remark'] as string,
                    creditCode: data['creditCode'] as string,
                    contractorName: data['contractorName'] as string,
                    companyAddress: data['companyAddress'] as string,
                    legalRepresentative: data['legalRepresentative'] as string,
                    contactPhone: data['contactPhone'] as string,
                    qualificationLevel: data['qualificationLevel'] as string,
                    qualificationCertNo: data['qualificationCertNo'] as string,
                    businessScope: data['businessScope'] as string,
                    bankName: data['bankName'] as string,
                    bankAccount: data['bankAccount'] as string
                }
                detailData.value = contractorInfo
            } else {
                const msg = resultObj['msg'] as string | null
                uni.showToast({
                    title: msg ?? '加载失败',
                    icon: 'none'
                })
            }

        } catch (e: any) {
            uni.showToast({
                title: e.message ?? '加载失败',
                icon: 'none'
            })
        } finally {
            loading.value = false
        }
    }

    // 页面加载
    onLoad((options: any) => {
        const params = options as UTSJSONObject
        const id = params['id'] as string | null
        if (id != null) {
            loadDetail(id)
        }
    })
</script>

<style lang="scss">
    .detail-page {
        flex: 1;
        background-color: #e8f0f9;
    }

    .detail-content {
        flex: 1;
        padding: 20rpx 0;
    }

    .info-section {
        margin: 0 30rpx 24rpx;

        .section-title {
            position: relative;
            padding-left: 20rpx;
            margin-bottom: 20rpx;

            &::before {
                // content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8rpx;
                height: 32rpx;
                background-color: #007aff;
                border-radius: 4rpx;
            }

            &-text {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
            }
        }

        .info-card {
            background-color: #ffffff;
            border-radius: 16rpx;
            padding: 30rpx;

            .info-item {
                flex-direction: row;
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f0f0f0;

                &:last-child {
                    border-bottom: none;
                }

                &.full-width {
                    flex-direction: column;

                    .info-label {
                        margin-bottom: 12rpx;
                    }

                    .info-value {
                        line-height: 44rpx;
                    }
                }

                .info-label {
                    width: 240rpx;
                    font-size: 28rpx;
                    color: #666666;
                    white-space: nowrap;
                }

                .info-value {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333333;
                    text-align: right;

                    &.highlight {
                        color: #007aff;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    .loading-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);

        .loading-text {
            padding: 30rpx 60rpx;
            background-color: rgba(0, 0, 0, 0.7);
            color: #ffffff;
            font-size: 28rpx;
            border-radius: 12rpx;
        }
    }
</style>