pet-system-fulfiller-app/pages/orders/detail.vue

<template>
    <view class="detail-container">
        <!-- 加载动画 -->
        <view class="loading-container" v-if="pageLoading">
            <!-- 顶部骨架 -->
            <view class="skeleton-header">
                <view class="skeleton-line skeleton-ani" style="width: 30%; height: 36rpx;"></view>
                <view class="skeleton-line skeleton-ani" style="width: 20%; height: 36rpx;"></view>
            </view>
            <view class="skeleton-progress">
                <view class="skeleton-circle skeleton-ani" v-for="i in 4" :key="i"></view>
            </view>
            <!-- 卡片骨架 -->
            <view class="skeleton-card" v-for="j in 3" :key="'c'+j">
                <view class="skeleton-line skeleton-ani" style="width: 60%; height: 28rpx; margin-bottom: 20rpx;"></view>
                <view class="skeleton-line skeleton-ani" style="width: 90%; height: 24rpx; margin-bottom: 14rpx;"></view>
                <view class="skeleton-line skeleton-ani" style="width: 75%; height: 24rpx;"></view>
            </view>
        </view>

        <template v-else>
        <!-- 顶部动态状态区 -->
        <view class="detail-header">
            <view class="status-row">
                <text class="status-title">{{ displayStatusText }}</text>
                <text class="status-price">¥{{ orderDetail.price }}</text>
            </view>
            <!-- 进度条区域 -->
            <view class="progress-bar">
                <view class="step-item" v-for="(step, index) in progressSteps" :key="index"
                    :class="{ 'active': index === progressIndex, 'done': index < progressIndex }">
                    <view class="step-circle-wrapper">
                        <!-- Connecting Line before circle, except first item -->
                        <view class="step-line" v-if="index !== 0" :class="{ 'active-line': index <= progressIndex }">
                        </view>
                        <view class="step-circle">{{ index + 1 }}</view>
                    </view>
                    <text class="step-text">{{ step }}</text>
                </view>
            </view>
        </view>

        <!-- 内容区域 -->
        <scroll-view scroll-y class="detail-content">
            <!-- 宠物信息 -->
            <view class="white-card pet-bar">
                <image class="pb-avatar" :src="orderDetail.petAvatar" mode="aspectFill"></image>
                <view class="pb-info">
                    <view class="pb-name-row">
                        <text class="pb-name">{{ orderDetail.petName }}</text>
                        <text class="pb-breed">品种: {{ orderDetail.petBreed }}</text>
                    </view>
                    <view class="pb-tags">
                        <text class="pb-tag">{{ orderDetail.serviceTag }}</text>
                    </view>
                </view>
                <view class="pb-actions">
                    <view class="pb-btn profile-btn" @click="showPetProfile">宠物档案</view>
                    <view class="pb-btn phone-btn" @click="callPhone">
                        <image class="phone-icon" src="/static/icons/phone_orange.svg"></image>
                    </view>
                </view>
            </view>

            <!-- 路线及服务信息 -->
            <view class="white-card service-info-card">
                <view class="si-row time-row">
                    <image class="si-icon outline" src="/static/icons/clock.svg"></image>
                    <view class="si-content">
                        <text class="si-label">服务时间</text>
                        <text class="si-val">{{ orderDetail.time }}</text>
                    </view>
                    <view class="si-action record-btn" @tap.stop="openAnomalyModal">
                        <text>异常记录</text>
                        <image class="record-arrow" src="/static/icons/right_arrow_orange.svg"></image>
                    </view>
                </view>

                <!-- 接送类型的地址展现 -->
                <template v-if="orderDetail.type === 1">
                    <view class="si-row addr-row start-addr">
                        <view class="icon-circle start">起</view>
                        <view class="route-line-vertical"></view>
                        <view class="si-content">
                            <text class="si-addr-title">{{ orderDetail.startLocation }}</text>
                            <text class="si-addr-desc">{{ orderDetail.startAddress }}</text>
                        </view>
                        <view class="nav-btn-circle" @click="openNavigation('start')">
                            <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                        </view>
                    </view>

                    <view class="si-row addr-row end-addr">
                        <view class="icon-circle end">终</view>
                        <view class="si-content">
                            <text class="si-addr-title">{{ orderDetail.endLocation }}</text>
                            <text class="si-addr-desc">{{ orderDetail.endAddress }}</text>
                        </view>
                        <view class="nav-btn-circle" @click="openNavigation('end')">
                            <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                        </view>
                    </view>
                </template>
                <!-- 喂遛/洗护类型的地址展现 -->
                <template v-else>
                    <view class="si-row addr-row end-addr">
                        <view class="icon-circle service">服</view>
                        <view class="si-content">
                            <text class="si-addr-title">{{ orderDetail.endLocation }}</text>
                            <text class="si-addr-desc">{{ orderDetail.endAddress }}</text>
                        </view>
                        <view class="nav-btn-circle" @click="openNavigation('end')">
                            <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                        </view>
                    </view>

                    <view class="si-row">
                        <image class="si-icon outline" src="/static/icons/heart.svg"></image>
                        <view class="si-content">
                            <text class="si-label">服务内容</text>
                            <text class="si-val">{{ orderDetail.serviceContent }}</text>
                        </view>
                    </view>
                </template>

                <view class="si-row">
                    <image class="si-icon outline custom-icon-file" src="/static/icons/file.svg"></image>
                    <view class="si-content">
                        <text class="si-label">备注</text>
                        <text class="si-val">{{ orderDetail.remark || '无' }}</text>
                    </view>
                </view>
                <!-- <view class="si-row record-history-row" @tap.stop="openAnomalyModal">
                    <view class="si-content">
                        <text class="si-label">异常记录</text>
                        <text class="si-val">查看历史异常记录</text>
                    </view>
                    <image class="record-arrow" src="/static/icons/right_arrow_orange.svg"></image>
                </view> -->
            </view>

            <!-- 打卡任务 -->
            <view class="white-card task-card" v-if="currentStep < steps.length">
                <text class="tc-title">当前任务：{{ currentTaskTitle }}</text>
                <text class="tc-desc">{{ currentTaskDesc }}</text>

                <!-- 单个巨大点击区触发弹窗 -->
                <view class="full-media-add" @click="openUploadModal">
                    <image class="upload-icon-large" src="/static/icons/camera_grey.svg"></image>
                    <text class="upload-text-large">上传图或视频</text>
                </view>
            </view>

            <!-- 订单属性 -->
            <view class="white-card base-info-card">
                <view class="bi-row">
                    <image class="si-icon outline" src="/static/icons/order_no.svg"></image>
                    <view class="bi-content">
                        <text class="bi-label">订单编号</text>
                        <view class="bi-val-row">
                            <text class="bi-val">{{ orderDetail.orderNo }}</text>
                            <text class="bi-copy" @click="copyOrderNo">复制</text>
                        </view>
                    </view>
                </view>
                <view class="bi-row">
                    <image class="si-icon outline" src="/static/icons/clock.svg"></image>
                    <view class="bi-content">
                        <text class="bi-label">下单时间</text>
                        <text class="bi-val">{{ orderDetail.createTime }}</text>
                    </view>
                </view>
            </view>

            <!-- 订单进度 -->
            <view class="white-card timeline-card">
                <view class="tl-title-row">
                    <view class="orange-bar"></view>
                    <text class="tl-title">订单进度</text>
                </view>
                <view class="tl-list">
                    <view class="tl-item" v-for="(log, idx) in orderDetail.progressLogs" :key="idx">
                        <view class="tl-marker active">
                            <view class="tl-dot-inner"></view>
                        </view>
                        <view class="tl-content-row">
                            <view class="tl-header">
                                <text class="tl-status">{{ log.status }}</text>
                                <text class="tl-time">{{ log.time }}</text>
                            </view>
                            <!-- 媒体（图片/视频）展示 -->
                            <view class="tl-medias" v-if="log.medias && log.medias.length > 0">
                                <view class="tl-media-item" v-for="(media, midx) in log.medias" :key="midx"
                                    @click="previewMedia(log.medias, midx)">
                                    <image v-if="!isVideo(media)" class="tl-img" :src="media" mode="aspectFill"></image>
                                    <view v-else class="tl-video-placeholder">
                                        <view class="tl-play-icon">
                                        </view>
                                        <text class="tl-video-label">视频</text>
                                    </view>
                                </view>
                            </view>
                            <!-- 备注展示 -->
                            <view class="tl-remark" v-if="log.remark">
                                <text>{{ log.remark }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view style="height: 140rpx;"></view>
        </scroll-view>

        <!-- 底部操作栏 -->
        <view class="bottom-action-bar">
            <view class="action-left">
                <button class="action-btn outline grey-outline" @click="goToAnomaly">异常上报</button>
                <button class="action-btn outline orange-outline" @click="openSumModal" v-if="serviceMode === 0">宠护小结</button>
            </view>
            <view class="action-right">
                <button class="action-btn primary" @click="openUploadModal" v-if="currentStep < steps.length">{{
                    currentTaskTitle }}</button>
                <button class="action-btn primary grey-bg" v-else>已完成</button>
            </view>
        </view>


        <!-- 宠物档案弹窗 -->
        <view class="pet-modal-mask" v-if="showPetModal" @click="closePetProfile">
            <view class="pet-modal-content" @click.stop>
                <!-- 头部 -->
                <view class="pet-modal-header">
                    <text class="pet-modal-title">宠物档案</text>
                    <view style="flex:1"></view>
                    <view class="pm-remark-btn" @click="openPetRemarkInput">备注</view>
                    <view class="close-icon-btn" @click="closePetProfile">×</view>
                </view>
                <scroll-view scroll-y class="pet-modal-scroll">
                    <!-- 宠物基础信息 -->
                    <view class="pet-base-info">
                        <image class="pm-avatar" :src="currentPetInfo.petAvatar" mode="aspectFill"></image>
                        <view class="pm-info-text">
                            <view class="pm-name-row">
                                <text class="pm-name">{{ currentPetInfo.petName }}</text>
                                <view class="pm-gender" v-if="currentPetInfo.petGender === 'M'">
                                    <text class="gender-icon">♂</text>
                                    <text>公</text>
                                </view>
                                <view class="pm-gender female" v-else-if="currentPetInfo.petGender === 'F'">
                                    <text class="gender-icon">♀</text>
                                    <text>母</text>
                                </view>
                            </view>
                            <text class="pm-breed">品种：{{ currentPetInfo.petBreed }}</text>
                        </view>
                    </view>
                    <!-- 属性网格 -->
                    <view class="pm-detail-grid">
                        <view class="pm-grid-item half">
                            <text class="pm-label">年龄</text>
                            <text class="pm-val">{{ currentPetInfo.petAge || '未知' }}</text>
                        </view>
                        <view class="pm-grid-item half">
                            <text class="pm-label">体重</text>
                            <text class="pm-val">{{ currentPetInfo.petWeight || '未知' }}</text>
                        </view>
                        <view class="pm-grid-item full">
                            <text class="pm-label">性格</text>
                            <text class="pm-val">{{ currentPetInfo.petPersonality || '无' }}</text>
                        </view>
                        <view class="pm-grid-item full">
                            <text class="pm-label">爱好</text>
                            <text class="pm-val">{{ currentPetInfo.petHobby || '无' }}</text>
                        </view>
                        <view class="pm-grid-item full">
                            <text class="pm-label">备注</text>
                            <text class="pm-val">{{ currentPetInfo.petRemark || '无特殊过敏史' }}</text>
                        </view>
                    </view>
                    <!-- 标签 -->
                    <view class="pm-tags-row" v-if="currentPetInfo.petTags && currentPetInfo.petTags.length > 0">
                        <view class="pm-tag-chip" v-for="(tag, ti) in currentPetInfo.petTags" :key="ti">
                            <text class="pm-tag-chip-text">{{ tag }}</text>
                        </view>
                    </view>
                    <!-- 备注日志 -->
                    <view class="pm-log-section">
                        <view class="pm-log-header">
                            <view
                                style="width:6rpx; height:28rpx; background:#FF9800; border-radius:3rpx; margin-right:12rpx;">
                            </view>
                            <text class="pm-log-section-title">备注日志</text>
                        </view>
                        <view class="pm-log-item" v-for="(log, lIndex) in currentPetInfo.petLogs" :key="lIndex">
                            <text class="pm-log-date">{{ log.date }}</text>
                            <text class="pm-log-text">{{ log.content }}</text>
                            <text class="pm-log-recorder" v-if="log.recorder !== '系统记录'">记录人：{{ log.recorder }}</text>
                            <text class="pm-log-recorder system" v-else>系统记录</text>
                        </view>
                    </view>
                    <view style="height: 30rpx;"></view>
                </scroll-view>
            </view>
        </view>
        <!-- 宠物备注输入弹窗 -->
        <view class="upload-modal-mask" v-if="showPetRemarkInput" @click="closePetRemarkInput">
            <view class="upload-modal-content" @click.stop>
                <view class="um-header">
                    <text class="um-title">添加备注</text>
                </view>
                <view class="um-body">
                    <textarea class="um-textarea" v-model="petRemarkText" auto-height placeholder="请输入宠物备注内容..."
                        placeholder-style="color:#ccc; font-size:26rpx;"></textarea>
                </view>
                <view class="um-footer">
                    <button class="um-submit-btn active" @click="submitPetRemark">确认提交</button>
                </view>
            </view>
        </view>

        <!-- 选择地图导航弹窗 (复用) -->
        <view class="nav-modal-mask" v-if="showNavModal" @click="closeNavModal">
            <view class="nav-action-sheet" @click.stop>
                <view class="nav-sheet-title">选择地图进行导航</view>
                <view class="nav-sheet-item" @click="chooseMap('高德')">高德地图</view>
                <view class="nav-sheet-item" @click="chooseMap('腾讯')">腾讯地图</view>
                <view class="nav-sheet-item" @click="chooseMap('百度')">百度地图</view>
                <view class="nav-sheet-gap"></view>
                <view class="nav-sheet-item cancel" @click="closeNavModal">取消</view>
            </view>
        </view>

        <!-- 上传图视频弹窗 (新增) -->
        <view class="upload-modal-mask" v-if="showUploadModal" @click="closeUploadModal">
            <view class="upload-modal-content" @click.stop>
                <view class="um-header">
                    <text class="um-title">上传图或视频 ({{ modalMediaList.length }}/5)</text>
                    <text class="um-remark-hint">{{ currentTaskDesc }}</text>
                </view>
                <view class="um-body">
                    <view class="um-grid">
                        <view class="um-item" v-for="(img, idx) in modalMediaList" :key="idx">
                            <image class="um-preview" :src="img.thumb || img.url || img.localPath || img" mode="aspectFill"></image>
                            <view class="um-video-badge" v-if="img.mediaType === 'video'">
                                <image class="play-icon-small" src="/static/icons/play_circle.svg"></image>
                            </view>
                            <view class="um-del" @click="removeModalMedia(idx)">×</view>
                        </view>
                        <view class="um-add" @click="chooseModalMedia" v-if="modalMediaList.length < 5">
                            <image class="um-add-icon" src="/static/icons/camera_grey.svg"></image>
                            <text class="um-add-text">拍摄/上传</text>
                        </view>
                    </view>
                    <textarea class="um-textarea" v-model="modalRemark" placeholder="在此输入备注信息..."
                        placeholder-style="color:#ccc; font-size:26rpx;"></textarea>
                </view>
                <view class="um-footer">
                    <view class="um-submit-btn" :class="{ 'active': modalMediaList.length > 0 }"
                        @click="handleConfirmUpload">
                        确认提交</view>
                </view>
            </view>
        </view>
        <!-- 宠护小结弹窗 -->
        <view class="sum-modal-mask" v-if="showSumModal" @click="closeSumModal">
            <view class="sum-modal-card" @click.stop>
                <scroll-view scroll-y class="sum-modal-scroll">
                    <view class="sum-modal-inner">
                        <text class="sum-modal-title">宠物护理工作小结</text>
                        <view class="sum-meta-row">
                            <text class="sum-meta-label">日期：</text>
                            <text class="sum-meta-val">{{ sumDate }}</text>
                        </view>
                        <view class="sum-meta-row">
                            <text class="sum-meta-label">客户住址：</text>
                            <text class="sum-meta-val">{{ orderDetail.endAddress }}</text>
                        </view>
                        <view class="sum-meta-row">
                            <text class="sum-meta-label">宠主姓名：</text>
                            <text class="sum-meta-val">{{ orderDetail.ownerName || '未知' }}</text>
                        </view>
                        <view class="sum-section-title">宠物信息</view>
                        <view class="sum-pet-card">
                            <image class="sum-pet-avatar" :src="orderDetail.petAvatar" mode="aspectFill"></image>
                            <view class="sum-pet-info">
                                <view class="sum-pet-name-row">
                                    <text class="sum-pet-name">{{ orderDetail.petName || '未知' }}</text>
                                    <text class="sum-pet-breed">品种: {{ orderDetail.petBreed || '未知' }}</text>
                                </view>
                                <text class="sum-pet-remark">{{ orderDetail.petNotes || '暂无备注' }}</text>
                            </view>
                        </view>
                        <view class="sum-section-title">服务内容记录</view>
                        <textarea class="sum-textarea" v-model="sumContent" auto-height placeholder="请填写服务内容..."
                            placeholder-style="color:#ccc"></textarea>
                        <view class="sum-sign-row">
                            <text class="sum-sign-label">护宠师签名：</text>
                            <text class="sum-sign-val">{{ sumSigner }}</text>
                        </view>
                        <view style="height: 20rpx;"></view>
                    </view>
                </scroll-view>
                <view class="sum-footer">
                    <button class="sum-submit-btn" @click="submitSumModal">提交小结</button>
                </view>
            </view>
        </view>

        <!-- 异常记录弹窗 -->
        <view class="modal-mask" v-if="showAnomalyModal" @click="closeAnomalyModal">
            <view class="anomaly-modal-content" @click.stop>
                <view class="am-header">
                    <text class="am-title">历史异常记录</text>
                    <view class="close-icon-btn" @click="closeAnomalyModal">×</view>
                </view>
                <scroll-view scroll-y class="am-scroll-list">
                    <view class="empty-list" v-if="anomalyList.length === 0">
                        <image class="empty-icon" src="/static/empty-rest.png" mode="aspectFit"></image>
                        <text class="empty-text">暂无异常记录</text>
                    </view>
                    <view class="am-item" v-for="(item, index) in anomalyList" :key="index">
                        <view class="am-item-header">
                            <text class="am-item-type">{{ item.typeLabel }}</text>
                            <text class="am-item-status" :class="'status-' + item.status">{{ getAnomalyStatusLabel(item.status) }}</text>
                        </view>
                        <text class="am-item-content">{{ item.content }}</text>
                        <view class="am-item-photos" v-if="item.photos && item.photos.length > 0">
                            <view class="am-photo-item" v-for="(photoUrl, pIdx) in item.photoUrls" :key="pIdx" @click="previewMedia(item.photoUrls, pIdx)">
                                <image v-if="!isVideo(photoUrl)" class="am-photo" :src="photoUrl" mode="aspectFill"></image>
                                <view v-else class="tl-video-placeholder miniaturized">
                                    <view class="tl-play-icon small">
                                    </view>
                                    <text class="tl-video-label small">视频</text>
                                </view>
                            </view>
                        </view>
                        <view class="am-audit-box" v-if="item.status !== 0">
                            <view class="am-audit-header">
                                <text class="am-audit-label">{{ item.status === 1 ? '审核通过' : '驳回理由' }}</text>
                                <text class="am-audit-time">{{ item.auditTime }}</text>
                            </view>
                            <text class="am-audit-remark">{{ item.auditRemark || '无' }}</text>
                        </view>
                    </view>
        </scroll-view>
        </view>
        </view>

        <!-- 视频播放弹窗 -->
        <view class="video-player-mask" v-if="videoPlayerShow" @click="closeVideoPlayer">
            <view class="video-player-content" @click.stop>
                <video class="v-player" :src="videoPlayerUrl" autoplay controls></video>
                <view class="v-close" @click="closeVideoPlayer">×</view>
            </view>
        </view>
        </template>
    </view>
</template>

<script>
import logic from './detail-logic.js';
export default {
    ...logic
}
</script>

<style>
@import './detail-style.css';
</style>