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

<template>
    <view class="detail-container">
        <!-- 顶部动态状态区 -->
        <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 steps" :key="index"
                    :class="{ 'active': index === currentStep }">
                    <view class="step-circle-wrapper">
                        <!-- Connecting Line before circle, except first item -->
                        <view class="step-line" v-if="index !== 0" :class="{ 'active-line': index <= currentStep }">
                        </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">
                        <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>

            <!-- 打卡任务 -->
            <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">
                                <image class="tl-img" v-for="(img, midx) in log.medias" :key="midx" :src="img"
                                    mode="aspectFill">
                                </image>
                            </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">宠护小结</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>
                </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.url || img.localPath || img" mode="aspectFill"></image>
                            <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>
</template>

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

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