gxt_app/pages/order/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.workOrderProjectNo ?? '' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">工单类型</text>
                        <text class="info-value">{{ detailData.orderType == 1 ? '维修工单' : '维保工单' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">风机编号</text>
                        <text class="info-value">{{ detailData.pcsDeviceName ?? '' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">场站</text>
                        <text class="info-value">{{ detailData.pcsStationName ?? '' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">机型</text>
                        <text class="info-value">{{ detailData.brand ?? '' }} {{ detailData.model ?? '' }}</text>
                    </view>
					<view class="info-item" v-if="returnType">
					    <text class="info-label">结单退回原因</text>
					    <text class="info-value">{{ getReturnTypeName(returnType)}}</text>
					</view>
					<view class="info-item" v-if="returnReason">
					    <text class="info-label">结单退回说明</text>
					    <text class="info-value">{{ returnReason}}</text>
					</view>
					
					<view class="info-item" v-if="acceptReturnType">
					    <text class="info-label">接单退回原因</text>
					    <text class="info-value">{{ getAcceptReturnTypeName(acceptReturnType)}}</text>
					</view>
					<view class="info-item" v-if="acceptReturnReason">
					    <text class="info-label">接单退回说明</text>
					    <text class="info-value">{{ acceptReturnReason}}</text>
					</view>
					<view class="info-item" v-if="detailData.pauseTime != null && detailData.orderType == 1">
					    <text class="info-label">发生时间</text>
					    <text class="info-value">{{ detailData.pauseTime ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.pauseTime != null && detailData.orderType == 2">
					    <text class="info-label">停机时间</text>
					    <text class="info-value">{{ detailData.pauseTime ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.restartTime != null">
					    <text class="info-label">恢复运行时间</text>
					    <text class="info-value">{{ detailData.restartTime ?? '' }}</text>
					</view>
					<view class="info-item">
					    <text class="info-label">{{getLabel(detailData)}}</text>
					    <text class="info-value">{{ getDisplayTime(detailData) }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 2">
					    <text class="info-label">维保内容</text>
					    <text class="info-value">{{ detailData.content ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 1">
					    <text class="info-label">故障代码</text>
					    <text class="info-value">{{ detailData.faultCode ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 1">
					    <text class="info-label">故障条文</text>
					    <text class="info-value">{{ detailData.faultBarcode ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 1">
					    <text class="info-label">故障描述</text>
					    <text class="info-value">{{ detailData.faultDesc ?? '' }}</text>
					</view>
                </view>
            </view>

            <!-- 附件信息 -->
            <view class="info-section" v-if="attachmentList.length > 0">
                <view class="section-title">
                    <text class="section-title-text">附件</text>
                </view>
                <view class="info-card">
                    <view class="image-container">
                        <image 
                            v-for="(attachment, index) in attachmentList" 
                            :key="index"
                            :src="attachment" 
                            :alt="'附件图片' + (index + 1)"
                            class="attachment-image"
                            @click="previewImage(attachment)"
                        />
                    </view>
                </view>
            </view>

            <!-- 工单流转 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">工单流转</text>
                    <text @click="toggleFlowList" v-if="detailData.workOrderFlowList != null && detailData.workOrderFlowList.length > 1" class="toggle-btn">{{ isFlowListExpanded ? '收起' : '展开' }}</text>
                </view>
                <view class="info-card" v-if="detailData.workOrderFlowList != null && detailData.workOrderFlowList.length > 0">
                    <view class="flow-item" v-for="(flow, index) in displayedFlowList" :key="index">
                        <view class="flow-header">
                            <text class="flow-operator">{{ flow.operatorName ?? '未知操作人' }}</text>
                            <text class="flow-time">{{ flow.actionTime ?? '' }}</text>
                        </view>
                        <view class="flow-content">
                            <text class="flow-action">{{ getActionTypeName(flow.actionType) }}</text>
                            <!-- <text class="flow-remark" v-if="flow.actionRemark">{{ flow.actionRemark }}</text> -->
                        </view>
                    </view>
                </view>
                <view class="info-card" v-else>
                    <view class="no-data">暂无流转记录</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, computed } from 'vue'
    //import type { acceptOrderInfo } from '../../../types/order'
    import type { WorkOrderFlow,WorkOrderFlowList } from '../../../types/flow'
    import { getOrderInfoById, getRepairOrderInfoById } from '../../../api/order/detail'
	import type { SysDictData } from '../../../types/dict'
	import { getDictDataByType } from '../../../api/dict/index'
	import { getBaseUrl } from '../../../utils/request'
	
	type OrderInfoForDetail = {
		orderType: Number
	    id: Number
		teamLeaderId: Number | 0
	    teamLeaderName: string | null
		acceptUserId: Number | 0
	    acceptUserName: string | null
	    acceptTime: string | null
	    assignTime: string | null
	    assignUserName: string | null
	    status: Number
	    workOrderProjectNo: string | null
	    workOrderStatus: string | null
	    gxtCenterId: Number | 0
	    gxtCenter: string | null
	    pcsStationId: Number | 0
	    pcsStationName: string | null
	    pcsDeviceId: Number | 0
	    pcsDeviceName: string | null
	    brand: string | null
	    model: string | null
	    createTime: string | null
	    workOrderFlowList?: WorkOrderFlowList | null
		suspendReason: string | null
		rejectionReason: string | null
		updateTime: string | null  // 新增字段
		workEndTime: string | null  // 新增字段
		faultCode: string | null
		faultBarcode: string | null
		faultDesc: string | null
		pauseTime: string | null,
		restartTime: string | null,
		attachmentUrls: string | null, // 附件URLs（逗号分隔的字符串格式）
		content: string | null,
		inspectionType: string | null
	}
	
    // 详情数据
    const detailData = ref<OrderInfoForDetail>({
		orderType: 0,
		id: 0,
		teamLeaderId: 0,
		acceptUserId: 0,
		teamLeaderName: null,
		acceptUserName: null,
		acceptTime: null,
		assignTime:  null,
		assignUserName: null,
		status: 0,
		workOrderProjectNo: null,
		workOrderStatus: null,
		gxtCenterId: 0,
		gxtCenter: null,
		pcsStationId:  0,
		pcsStationName: null,
		pcsDeviceId: 0,
		pcsDeviceName: null,
		brand: null,
		model: null,
		createTime: null,
		workOrderFlowList: null,
		suspendReason: null,
		rejectionReason: null,
        updateTime: null,  // 新增字段
        workEndTime: null,  // 新增字段
		faultCode: null,
		faultBarcode: null,
		faultDesc: null,
		pauseTime: null,
		restartTime: null,
		attachmentUrls: null,
		content: null,
		inspectionType: null
    })

	const statusDictList = ref<SysDictData[]>([]) // 工单状态字典列表
	// 添加字典加载状态
	const dictLoaded = ref<boolean>(false)
	const returnType = ref<string>("")
	const returnReason = ref<string>("")
	const acceptReturnType = ref<string>("")
	const acceptReturnReason = ref<string>("")
	const returnTypeDictList = ref<SysDictData[]>([]) // 退回原因字典列表
	const acceptReturnTypeDictList = ref<SysDictData[]>([]) // 退回原因字典列表
	

	const formatDate = (dateString: string): string => {
	  if (dateString == '' || dateString == null) return ''
	  const date = new Date(dateString)
	  const year = date.getFullYear()
	  const month = (date.getMonth() + 1).toString().padStart(2, '0')
	  const day = date.getDate().toString().padStart(2, '0')
	  const hours = date.getHours().toString().padStart(2, '0')
	  const minutes = date.getMinutes().toString().padStart(2, '0')
	  return `${year}-${month}-${day} ${hours}:${minutes}`
	}

	// 根据状态显示不同的时间label
	const getLabel = (item : OrderInfoForDetail | null): string|null => {
		if (item == null) return null
		// 如果是"待接单"状态，显示派单时间
		if (item.workOrderStatus == 'assigned') {
			return '下发时间'
		} else if(item.workOrderStatus == 'to_finish') {
			if(item.workEndTime != null) {
				return '结束时间'
			}
			return '接单时间'
		} else if(item.workOrderStatus == 'to_approve') {
			return '申请挂起时间'
		} else if(item.workOrderStatus == 'suspended') {
			return '审批通过时间'
		} else if(item.workOrderStatus == 'return' || item.workOrderStatus == 'accept_return') {
			return '退回时间'
		} else if(item.workOrderStatus == 'completed') {
			return '结单时间'
		} else if(item.workOrderStatus == "archived") {
			return '归档时间'
		}

		// 默认显示创建时间
		return '创建时间'
	}

	// 根据状态显示不同的时间
	const getDisplayTime = (item : OrderInfoForDetail | null): string|null => {
		if (item == null) return null
		let showTime = ref<string|null>('')

		// 如果是"待接单"状态，显示派单时间
		if (item.workOrderStatus == 'assigned') {
			showTime.value = item.assignTime
		} else if(item.workOrderStatus == 'to_finish') {
			showTime.value = item.acceptTime
		} else if(item.workOrderStatus == 'to_approve') {
			showTime.value = item.updateTime
		} else if(item.workOrderStatus == 'suspended') {
			showTime.value = item.updateTime
		} else if(item.workOrderStatus == 'return' || item.workOrderStatus == 'accept_return') {
			showTime.value = item.updateTime
		} else if(item.workOrderStatus == 'completed') {
			showTime.value = item.updateTime
		} else if(item.workOrderStatus == "archived") {
			showTime.value = item.updateTime
		} else {
			if (item.createTime != null && item.createTime.length >= 3) {
			  showTime.value = item.createTime.slice(0, -3);
			} else {
			  showTime.value = item.createTime != null ? item.createTime : '';
			}
		}
		return showTime.value
    // return formatDate(showTime.value ?? '')
	}

	// 获取工单状态字典列表
	const loadStatusDictList = async (): Promise<void> => {
	    try {
	        const result = await getDictDataByType('gxt_repair_order_flow_action_type')
	        const resultObj = result as UTSJSONObject

	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const dictData: SysDictData[] = []

	            if (data.length > 0) {
	                for (let i = 0; i < data.length; i++) {
	                    const item = data[i] as UTSJSONObject
	                    // 只提取需要的字段
	                    const dictItem: SysDictData = {
							dictValue: item['dictValue'] as string | null,
							dictLabel: item['dictLabel'] as string | null,
							dictCode: null,
							dictSort: null,
							dictType: null,
							cssClass: null,
							listClass: null,
							isDefault: null,
							status: null,
							default: null,
							createTime: null,
							remark: null
						}
	                    dictData.push(dictItem)
	                }
	            }

	            statusDictList.value = dictData
	            dictLoaded.value = true
	        }
	    } catch (e: any) {
	        console.error('获取工单状态字典失败:', e.message)
	        dictLoaded.value = true
	    }
	}
	
    const loading = ref<boolean>(false)

    // 控制工单流转列表是否展开
    const isFlowListExpanded = ref<boolean>(false)

    // 计算显示的工单流转列表
    const displayedFlowList = computed(() => {
        if (detailData.value.workOrderFlowList == null) return []

        // 如果已经展开，则显示全部
        if (isFlowListExpanded.value) {
            return detailData.value.workOrderFlowList
        }

        // 默认只显示最后一条
        const length = detailData.value.workOrderFlowList.length
        return length > 0 ? [detailData.value.workOrderFlowList[length - 1]] : []
    })

    // 切换工单流转列表的展开/收起状态
    const toggleFlowList = () => {
        isFlowListExpanded.value = !isFlowListExpanded.value
    }

    // 计算附件列表
    const attachmentList = computed<string[]>(() => {
        if (detailData.value.attachmentUrls != null && detailData.value.attachmentUrls != '') {
            // 按逗号分割附件URL字符串，并加上基础URL
            const arr = detailData.value.attachmentUrls.split(',')
                .map((url: string) => {
                    const trimmedUrl = url.trim();
                    // 如果是相对路径，加上基础URL
                    if (trimmedUrl.startsWith('/')) {
                        return getBaseUrl() + trimmedUrl;
                    }
                    return trimmedUrl;
                })
                .filter((url: string) => url.length > 0);
            return arr;
        }
        return []
    })

    // 预览图片
    const previewImage = (url: string) => {
        if (url == '') return
        
        // 检查是否为图片文件
        const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
        const isImage = imageExtensions.some(ext => url.toLowerCase().endsWith(ext))
        
        if (isImage) {
            // 如果是图片，使用uni.previewImage预览
            uni.previewImage({
                urls: [url],
                current: 0
            })
        } else {
            // 对于非图片文件，显示提示
            uni.showToast({
                title: '不支持预览此文件类型',
                icon: 'none',
                duration: 2000
            })
        }
    }

	// 获取操作类型名称
	const getActionTypeName = (item: string | null): string | null => {
	    if (item == null) return ''
	    // const orderInfoItem = item as orderInfo
	    const rawStatus = item
		// 如果字典尚未加载，返回原始值
		if (dictLoaded.value == false) {
			return rawStatus
		}

	    // 查找字典中对应的标签
	    const dictItem = statusDictList.value.find(dict => dict.dictValue == rawStatus)
	    return dictItem!=null ? dictItem.dictLabel : rawStatus
	}
	
	const getReturnTypeName = (item: string | null): string | null => {
	    if (item == null) return ''
	    // const orderInfoItem = item as orderInfo
	    const rawStatus = item
	
		// 如果字典尚未加载，返回原始值
		if (dictLoaded.value == false) {
			return rawStatus
		}
	
	    // 查找字典中对应的标签
	    const dictItem = returnTypeDictList.value.find(dict => dict.dictValue == rawStatus)
	    return dictItem!=null ? dictItem.dictLabel : rawStatus
	}
	const getAcceptReturnTypeName = (item: string | null): string | null => {
	    if (item == null) return ''
	    // const orderInfoItem = item as orderInfo
	    const rawStatus = item
	
		// 如果字典尚未加载，返回原始值
		if (dictLoaded.value == false) {
			return rawStatus
		}
	
	    // 查找字典中对应的标签
	    const dictItem = acceptReturnTypeDictList.value.find(dict => dict.dictValue == rawStatus)
	    return dictItem!=null ? dictItem.dictLabel : rawStatus
	}
	
	const loadReturnDictList = async (returnTypeDict: string): Promise<void> => {
	    try {
			const result = await getDictDataByType(returnTypeDict)
	        const resultObj = result as UTSJSONObject
	
	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const dictData: SysDictData[] = []
	
	            if (data.length > 0) {
	                for (let i = 0; i < data.length; i++) {
	                    const item = data[i] as UTSJSONObject
	                    // 只提取需要的字段
	                    const dictItem: SysDictData = {
							dictValue: item['dictValue'] as string | null,
							dictLabel: item['dictLabel'] as string | null,
							dictCode: null,
							dictSort: null,
							dictType: null,
							cssClass: null,
							listClass: null,
							isDefault: null,
							status: null,
							default: null,
							createTime: null,
							remark: null
						}
	                    dictData.push(dictItem)
	                }
	            }
				if(returnTypeDict == 'gxt_return_type') {
					returnTypeDictList.value = dictData
				} else {
					acceptReturnTypeDictList.value = dictData
				}
	            
	        }
	    } catch (e: any) {
	        console.error('获取工单状态字典失败:', e.message)
	    }
	}

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

            let result: any;

            // 根据orderType决定调用哪个API
            if (orderType == 1) {
                // 维修工单
                result = await getRepairOrderInfoById(id)
            } else {
                // 维保工单
                result = await getOrderInfoById(id)
            }

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

            if (code == 200 && data != null) {
                // 处理工单流转列表
                let workOrderFlowList: WorkOrderFlow[] | null = null
				let flowList: UTSJSONObject[] = []
				if (orderType == 1) {
				    // 维修工单
				    flowList = data['repairOrderFlowList'] as UTSJSONObject[]
				} else {
				    // 维保工单
				    flowList = data['workOrderFlowList'] as UTSJSONObject[]
				}
                if (flowList.length > 0) {
                    workOrderFlowList = []
                    for (let i = 0; i < flowList.length; i++) {
                        const flowItem = flowList[i]
                        const flow: WorkOrderFlow = {
                            id: flowItem['id'] as Number,
                            orderId: flowItem['orderId'] as Number,
                            orderCode: flowItem['orderCode'] as string,
                            actionType: flowItem['actionType'] as string,
                            fromStatus: flowItem['fromStatus'] as string | null,
                            toStatus: flowItem['toStatus'] as string,
                            operatorId: flowItem['operatorId'] as Number | null,
                            operatorName: flowItem['operatorName'] as string | null,
                            actionTime: flowItem['actionTime'] as string,
                            actionRemark: flowItem['actionRemark'] as string | null,
                            createBy: flowItem['createBy'] as string | null,
                            createTime: flowItem['createTime'] as string | null
                        }
                        workOrderFlowList.push(flow)
                    }
                }

                // 转换数据
                const orderDtail: OrderInfoForDetail = {
                    orderType: data['orderType'] as Number,
                    id: data['id'] as Number,
					teamLeaderId: data['teamLeaderId'] != null ? (data['teamLeaderId'] as Number) : 0,
					acceptUserId: data['acceptUserId'] != null ? (data['acceptUserId'] as Number) : 0,
                    teamLeaderName: data['teamLeaderName'] as string | null,
                    acceptUserName: data['acceptUserName'] as string | null,
                    acceptTime: data['acceptTime'] as string | null,
                    assignTime: data['assignTime'] as string | null,
                    assignUserName: data['assignUserName'] as string | null,
                    status: (data['status']==null)?0:data['status'] as Number,
                    workOrderProjectNo: data['workOrderProjectNo'] as string | null,
                    workOrderStatus: data['workOrderStatus'] as string | null,
                    gxtCenterId: data['gxtCenterId'] as Number | 0,
                    gxtCenter: data['gxtCenter'] as string | null,
                    pcsStationId: data['pcsStationId'] as Number | 0,
                    pcsStationName: data['pcsStationName'] as string | null,
                    pcsDeviceId: data['pcsDeviceId'] as Number | 0,
                    pcsDeviceName: data['pcsDeviceName'] as string | null,
                    brand: data['brand'] as string | null,
                    model: data['model'] as string | null,
                    createTime: data['createTime'] as string | null,
                    workOrderFlowList: workOrderFlowList,
					suspendReason: data['suspendReason'] as string | null,
					rejectionReason: data['rejectionReason'] as string | null,
                    updateTime: data['updateTime'] as string | null,  // 新增字段
                    workEndTime: data['workEndTime'] as string | null,  // 新增字段
					faultCode: data['faultCode'] as string | null,
					faultBarcode: data['faultBarcode'] as string | null,
					faultDesc: data['faultDesc'] as string | null,
					pauseTime: data['pauseTime'] as string | null,
					restartTime: data['restartTime'] as string | null,
					attachmentUrls: data['attachmentUrls'] as string | null,
					content: data['content'] as string | null,
					inspectionType: data['inspectionType'] as string | null
                }
                detailData.value = orderDtail
				await loadReturnDictList('gxt_return_type')
				await loadReturnDictList('gxt_accept_return_type')
				returnType.value = (data['returnType'] as string | null) ?? ''
				returnReason.value = (data['returnReason'] as string | null) ?? ''
				acceptReturnType.value = (data['acceptReturnType'] as string | null) ?? ''
				acceptReturnReason.value = (data['acceptReturnReason'] as string | null) ?? ''
            } 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
		const orderTypeParam = params['orderType'] as string | null
        if (id != null && orderTypeParam != null) {
            // 先尝试从参数中获取orderType
            const orderTypeNumber = parseInt(orderTypeParam)
            loadDetail(id, orderTypeNumber)
        }
    })
	// 初始化
	onMounted(() => {
	    loadStatusDictList()
	})
</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;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            &::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;
            }

            .toggle-btn {
				padding-right: 20rpx;
                font-size: 28rpx;
                color: #165dff;
            }
        }

        .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;
                    }
                }
            }

            .flow-item {
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f0f0f0;

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

                .flow-header {
                    flex-direction: row;
                    justify-content: space-between;
                    margin-bottom: 10rpx;

                    .flow-operator {
                        font-size: 28rpx;
                        color: #333333;
                        font-weight: bold;
                    }

                    .flow-time {
                        font-size: 24rpx;
                        color: #999999;
                    }
                }

                .flow-content {
                    flex-direction: column;

                    .flow-action {
                        font-size: 26rpx;
                        color: #666666;
                        margin-bottom: 8rpx;
                    }

                    .flow-remark {
                        font-size: 24rpx;
                        color: #999999;
                        background-color: #f5f5f5;
                        padding: 10rpx;
                        border-radius: 8rpx;
                    }
                }
            }

            .no-data {
                text-align: center;
                padding: 40rpx 0;
                font-size: 28rpx;
                color: #999999;
            }
        }
    }

    .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;
        }
    }
    
    .image-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start; // 或 space-around
		// justify-content: space-around; /* 自动分配间距，避免挤压 */
		align-items: center;
		padding: 0 10rpx;
    }
    
    .attachment-image {
        width: 300rpx; /* 一行显示两个图片，减去间距的一半 */
        height: 300rpx;
		padding: 10rpx
    }
</style>