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

<template>
    <view class="container">
        <!-- 吸顶固定层：状态tab + 搜索 + 筛选 -->
        <view class="sticky-header">
            <!-- 顶部 Tab (待接送/服务中...) -->
            <view class="status-tabs">
                <view class="tab-item" v-for="(tab, index) in tabs" :key="index"
                    :class="{ active: currentTab === index }" @click="currentTab = index">
                    <text>{{ tab }}</text>
                    <view class="indicator" v-if="currentTab === index"></view>
                </view>
            </view>

            <!-- 搜索栏 -->
            <view class="search-bar">
                <view class="search-input-box">
                    <input class="search-input" placeholder="搜索地址/电话/姓名" placeholder-class="ph-style" />
                </view>
            </view>

            <!-- 筛选栏 (支持自定义下拉) -->
            <view class="filter-wrapper">
                <view class="filter-bar">
                    <!-- 订单类型下拉视图 -->
                    <view class="filter-item" :class="{ 'active': activeDropdown === 1 }" @click="toggleDropdown(1)">
                        <text :class="{ 'active-text': activeDropdown === 1 || currentTypeFilterIdx > 0 }">
                            {{ currentTypeFilterIdx > 0 ? typeFilterOptions[currentTypeFilterIdx] : '全部类型' }}
                        </text>
                        <view class="triangle" :class="activeDropdown === 1 ? 'up' : 'down'"></view>
                    </view>

                    <!-- 服务时间下拉视图 -->
                    <view class="filter-item" :class="{ 'active': activeDropdown === 2 }" @click="toggleDropdown(2)">
                        <text :class="{ 'active-text': activeDropdown === 2 || hasTimeFilter }">服务时间</text>
                        <view class="triangle" :class="activeDropdown === 2 ? 'up' : 'down'"></view>
                    </view>
                </view>

                <!-- 下拉内容面板与遮罩 -->
                <view class="dropdown-mask" v-if="activeDropdown !== 0" @click="closeDropdown"></view>
                <view class="dropdown-panel" v-if="activeDropdown === 1">
                    <view class="type-option" v-for="(item, index) in typeFilterOptions" :key="index"
                        :class="{ 'selected': currentTypeFilterIdx === index }" @click="selectType(index)">
                        <text>{{ item }}</text>
                    </view>
                </view>
                <view class="dropdown-panel calendar-panel" v-if="activeDropdown === 2">
                    <view class="custom-calendar-container">
                        <!-- 头部 -->
                        <view class="cal-header">
                            <text class="cal-nav-btn" @click="prevMonth">‹</text>
                            <text class="cal-title">{{ currentMonth }}</text>
                            <text class="cal-nav-btn" @click="nextMonth">›</text>
                        </view>
                        <!-- 星期条 -->
                        <view class="cal-weekdays">
                            <text v-for="(wk, idx) in weekDays" :key="idx" class="wk-item">{{ wk }}</text>
                        </view>
                        <!-- 日期网格 -->
                        <view class="cal-body">
                            <!-- Feb 2026 starts on Sunday (index 0), so no empty padding needed for first row -->
                            <view v-for="(day, idx) in calendarDays" :key="idx" class="cal-day-box"
                                :class="getDateClass(day)" @click="selectDateItem(day)">
                                <view class="cal-day-text">{{ day }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="calendar-actions">
                        <button class="cal-btn reset" @click="resetTimeFilter">重置</button>
                        <button class="cal-btn confirm" @click="confirmTimeFilter">确定</button>
                    </view>
                </view>
            </view><!-- end filter-wrapper -->
        </view><!-- end sticky-header -->

        <!-- 订单列表 -->
        <scroll-view scroll-y class="order-list">
            <view class="order-card" v-for="(item, index) in orderList" :key="index" @click="goToDetail(item)">
                <view class="card-header">
                    <view class="type-badge">
                        <image class="type-icon" :src="item.typeIcon"></image>
                        <text class="type-text">{{ item.typeText }}</text>
                    </view>
                    <text class="status-badge" :class="getStatusClass(item)">{{ getDisplayStatus(item) }}</text>
                </view>

                <view class="card-body">
                    <view class="time-row">
                        <view class="time-col">
                            <text class="label">{{ item.timeLabel }}：</text>
                            <text class="value">{{ item.time }}</text>
                        </view>
                        <text class="price">¥{{ item.price }}</text>
                    </view>

                    <!-- 宠物信息 -->
                    <view class="pet-card">
                        <image class="pet-avatar" :src="item.petAvatar" mode="aspectFill"></image>
                        <view class="pet-info">
                            <text class="pet-name">{{ item.petName }}</text>
                            <text class="pet-breed">品种: {{ item.petBreed }}</text>
                        </view>
                        <view class="pet-profile-btn" @click.stop="showPetProfile(item)">宠物档案</view>
                    </view>

                    <!-- 路线信息 (完全复用 Home 样式) -->
                    <view class="route-info">
                        <template v-if="item.type === 1">
                            <view class="route-item" @click.stop="openNavigation(item, 'start')">
                                <view class="icon-circle start">起</view>
                                <view class="route-line-vertical"></view>
                                <view class="address-box">
                                    <text class="addr-title">{{ item.startLocation }}</text>
                                    <text class="addr-desc">{{ item.startAddress }}</text>
                                </view>
                                <view class="distance-tag">
                                    <text class="distance-text">{{ item.startDistance }}</text>
                                    <view class="nav-icon-circle">
                                        <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                                    </view>
                                </view>
                            </view>

                            <view class="route-item" @click.stop="openNavigation(item, 'end')">
                                <view class="icon-circle end">终</view>
                                <view class="address-box">
                                    <text class="addr-title">{{ item.endLocation }}</text>
                                    <text class="addr-desc">{{ item.endAddress }}</text>
                                </view>
                                <view class="distance-tag">
                                    <text class="distance-text">{{ item.endDistance }}</text>
                                    <view class="nav-icon-circle">
                                        <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <template v-else>
                            <view class="route-item" @click.stop="openNavigation(item, 'end')">
                                <view class="icon-circle service">服</view>
                                <view class="address-box">
                                    <text class="addr-title">{{ item.endLocation }}</text>
                                    <text class="addr-desc">{{ item.endAddress }}</text>
                                </view>
                                <view class="distance-tag">
                                    <text class="distance-text">{{ item.endDistance }}</text>
                                    <view class="nav-icon-circle">
                                        <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                                    </view>
                                </view>
                            </view>
                            <view class="service-content" v-if="item.serviceContent">
                                <text class="content-label">服务内容:</text>
                                <text>{{ item.serviceContent }}</text>
                            </view>
                        </template>
                    </view>

                    <!-- 备注 -->
                    <view class="remark-box" v-if="item.remark">
                        <text>备注：{{ item.remark }}</text>
                    </view>
                </view><!-- End of card-body -->

                <!-- 按钮组 -->
                <view class="action-btns" v-if="['接单', '到达', '出发', '开始', '送达', '结束'].includes(item.statusText)">
                    <view class="action-left">
                        <button class="btn normal" @click.stop="toggleCallMenu(item)">一键拨号</button>
                        <view class="call-popover" v-if="activeCallItem === item" @click.stop>
                            <view class="call-pop-item" @click="doCall('merchant')">联系商家</view>
                            <view class="call-pop-item" @click="doCall('customer')">联系客户</view>
                        </view>
                    </view>
                    <view class="action-right">
                        <button class="btn normal" @click.stop="reportAbnormal(item)">异常上报</button>
                        <button class="btn primary" @click.stop="mainAction(item)">{{ getMainActionText(item)
                            }}</button>
                    </view>
                </view>
            </view>
            <!-- 已加载完提示文字 -->
            <view class="loading-text">已加载完</view>
            <view style="height: 160rpx;"></view>
        </scroll-view>
        <view class="call-mask" v-if="activeCallItem" @click="closeCallMenu"></view>
    </view>

    <!-- 宠物档案弹窗 (复用Home) -->
    <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 class="pm-header-actions">
                    <view class="pm-remark-btn" @click="openRemarkInput">备注</view>
                    <view class="close-icon-btn" @click="closePetProfile">×</view>
                </view>
            </view>
            <scroll-view scroll-y class="pet-modal-scroll">
                <!-- Basic Info -->
                <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>
                <!-- Details Grid -->
                <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>
                <!-- Tags -->
                <view class="pm-tags" v-if="currentPetInfo.petTags && currentPetInfo.petTags.length > 0">
                    <view class="pm-tag" v-for="(tag, index) in currentPetInfo.petTags" :key="index">{{ tag }}</view>
                </view>
                <!-- Log Section -->
                <view class="pm-section-title">
                    <view class="orange-bar"></view>
                    <text>备注日志</text>
                </view>
                <view class="pm-log-list">
                    <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">{{ log.recorder === '系统记录' ? '' : '记录人: ' }}{{ log.recorder
                            }}</text>
                    </view>
                </view>
                <view style="height: 30rpx;"></view>
            </scroll-view>
        </view>
    </view>

    <!-- 备注输入弹窗 -->
    <view class="remark-mask" v-if="showRemarkInput" @click="closeRemarkInput">
        <view class="remark-sheet" @click.stop>
            <view class="remark-sheet-header">
                <text class="remark-sheet-title">添加备注</text>
                <view class="close-icon-btn" @click="closeRemarkInput">×</view>
            </view>
            <textarea class="remark-textarea" v-model="remarkText" placeholder="请输入备注内容..." maxlength="500"
                auto-height />
            <view class="remark-submit-btn" @click="submitRemark">提交备注</view>
        </view>
    </view>

    <!-- 选择地图导航弹窗 (复用Home) -->
    <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>

</template>

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

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