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

<template>
    <view class="container">
        <!-- 自定义导航栏标题 -->
        <view class="custom-nav-bar" :style="{ backgroundColor: scrollTop > 20 ? '#fff' : 'transparent' }">
            <text class="nav-title">任务中心</text>
        </view>
        <!-- 顶部自定义导航栏背景 -->
        <!-- 顶部自定义导航栏背景 -->
        <view class="nav-bg">
            <view class="bg-circle-left"></view>
            <view class="bg-circle-right"></view>
        </view>

        <!-- 头部用户信息与统计 -->
        <view class="header-section">
            <view class="user-info">
                <image class="avatar" :src="profile?.avatarUrl || '/static/touxiang.png'" mode="aspectFill"></image>
                <view class="info-content">
                    <view class="top-row">
                        <text class="name">{{ profile?.name || '未登录' }}</text>
                        <view class="status-pill" :class="{ 'resting': workStatus !== 'busy' }" @click="goToWorkStatus">
                            <view class="status-dot-bg"
                                :class="{ 'busy': workStatus === 'busy', 'disabled': workStatus === 'disabled' }">
                                <text class="check-mark" v-if="workStatus === 'busy'">✔</text>
                                <text class="check-mark" v-else style="font-size: 16rpx; line-height: 20rpx;">✕</text>
                            </view>
                            <text class="status-text">{{ workStatus === 'busy' ? '接单中' : (workStatus === 'resting' ?
                                '正在休息' : '已禁用') }}</text>
                            <text class="arrow-down">▼</text>
                        </view>
                    </view>
                    <view class="bottom-row" @click="handleManualLocation">
                        <text class="city-label">接单城市：{{ profile?.cityName || '暂无' }}</text>
                        <text class="city-arrow">></text>
                    </view>
                </view>
                <!-- 此代码由AI生成 -->
                <!-- <view class="notification-box" @click="navToMessage">
                    <image class="bell-img" src="/static/icons/bell.svg"></image>
                    <view class="badge-count" v-if="unreadCount > 0">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
                </view> -->
            </view>

            <!-- 统计卡片 -->
            <view class="stats-card">
                <view class="stat-item">
                    <text class="num">{{ orderStats.total }}</text>
                    <text class="label">全部订单</text>
                </view>
                <view class="divider"></view>
                <view class="stat-item">
                    <text class="num">{{ orderStats.reject }}</text>
                    <text class="label">拒接订单</text>
                </view>
                <view class="divider"></view>
                <view class="stat-item">
                    <text class="num">{{ orderStats.completed }}</text>
                    <text class="label">完成订单</text>
                </view>
                <view class="divider"></view>
                <view class="stat-item">
                    <text class="num">{{ (orderStats.fulfillmentCommission / 100).toFixed(2) }}</text>
                    <text class="label">服务总得</text>
                </view>
            </view>
        </view>


        <!-- 任务大厅标题栏 (Sticky Container) -->
        <view class="task-header">
            <!-- 标题栏内容 (Inner) -->
            <view class="header-inner"
                :style="{ backgroundColor: (scrollTop > 300 || isFilterShow) ? '#fff' : 'transparent' }">
                <view class="left-title">
                    <view class="orange-bar"></view>
                    <text class="title">任务大厅</text>
                    <text class="count">- ({{ taskList.length }}单)</text>
                </view>
                <view class="filter-options">
                    <view class="dropdown" @click="showFilterDropdown">
                        <text>筛选条件</text>
                        <text class="arrow-down">﹀</text>
                    </view>
                </view>
            </view>

            <!-- 筛选遮罩 (Absolute Child: Starts below header) -->
            <view class="filter-mask" v-if="isFilterShow" @click="closeFilter"></view>

            <!-- 筛选下拉面板 (Absolute Child) -->
            <view class="filter-panel" :class="{ show: isFilterShow }">
                <view class="filter-section">
                    <text class="section-title">服务类型</text>
                    <view class="options-grid">
                        <view class="option-btn" :class="{ active: tempFilter.service === null }"
                            @click="selectService(null)">全部</view>
                        <view class="option-btn" v-for="item in serviceList" :key="item.id"
                            :class="{ active: tempFilter.service === item.id }" @click="selectService(item.id)">{{
                                item.name }}</view>
                    </view>
                </view>


                <view class="filter-section">
                    <text class="section-title">金额</text>
                    <view class="options-grid">
                        <view class="option-btn" :class="{ active: tempFilter.amount === '全部' }"
                            @click="selectAmount('全部')">全部</view>
                        <view class="option-btn" :class="{ active: tempFilter.amount === '100以下' }"
                            @click="selectAmount('100以下')">100以下</view>
                        <view class="option-btn" :class="{ active: tempFilter.amount === '100-200' }"
                            @click="selectAmount('100-200')">100-200</view>
                        <view class="option-btn" :class="{ active: tempFilter.amount === '200-500' }"
                            @click="selectAmount('200-500')">200-500</view>
                        <view class="option-btn" :class="{ active: tempFilter.amount === '500以上' }"
                            @click="selectAmount('500以上')">500以上</view>
                    </view>
                </view>

                <view class="filter-actions">
                    <button class="action-btn reset" @click="resetFilter">重置</button>
                    <button class="action-btn confirm" @click="confirmFilter">确认</button>
                </view>
            </view>
        </view>

        <!-- 列表容器 -->
        <view class="task-list-container">
            <!-- 任务列表 -->
            <view class="task-list">
                <view class="task-card" v-for="item in taskList" :key="item.id" @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>
                        <view class="header-right">
                          <text class="price">¥{{ item.price }}</text>
                          <view class="detail-link">
                            <text>详情</text>
                            <text class="arrow">></text>
                          </view>
                        </view>
                    </view>
                    <view class="card-body">
                        <view class="time-row">
                            <text class="label">{{ item.timeLabel }}：</text>
                            <text class="value">{{ item.time }}</text>
                        </view>
                        <view class="pet-card">
                            <image class="pet-avatar" :src="item.petAvatarUrl || 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>

                        <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>
                                    <image class="nav-arrow" src="/static/icons/nav_arrow.svg"
                                        style="flex-shrink: 0; align-self: center;"></image>
                                </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>
                                    <image class="nav-arrow" src="/static/icons/nav_arrow.svg"
                                        style="flex-shrink: 0; align-self: center;"></image>
                                </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>
                                    <image class="nav-arrow" src="/static/icons/nav_arrow.svg"
                                        style="flex-shrink: 0; align-self: center;"></image>
                                </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">
                            <text>备注：{{ item.remark || '-' }}</text>
                        </view>
                    </view>
                    <!-- action-btns class is in style.css but template used card-footer. style.css: .action-btns, index.vue: .card-footer -->
                    <!-- Wait, style.css has .action-btns { display: flex; ... } and .btn.reject/accept -->
                    <!-- I should use .action-btns instead of .card-footer -->
                    <view class="action-btns">
                        <button class="btn reject" @click.stop="openRejectModal(item)">拒绝</button>
                        <button class="btn accept" @click.stop="openAcceptModal(item)">接单</button>
                    </view>
                </view>
                <!-- Padding for safe area/tabbar -->
                <view style="height: 120rpx;"></view>
            </view>
        </view>
        <!-- 自定义确认弹窗 -->
        <view class="modal-mask" v-if="showConfirmModal">
            <view class="custom-modal">
                <text class="modal-title">提示</text>
                <text class="modal-content">是否确定结束休息，开始接单?</text>
                <view class="modal-btns">
                    <button class="modal-btn cancel" @click="closeConfirmModal">取消</button>
                    <button class="modal-btn confirm" @click="confirmStartWork">确定</button>
                </view>
            </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 class="close-icon-btn" @click="closePetProfile">×</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>
                                <!-- Gender badge -->
                                <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: 40rpx;"></view>
                    <button class="pm-bottom-close" @click="closePetProfile">关闭</button>
                    <view style="height: 20rpx;"></view>
                </scroll-view>
            </view>
        </view>
    </view>

    <!-- 拒绝接单弹窗 -->
    <view class="modal-mask" v-if="showRejectModal">
        <view class="custom-modal">
            <text class="modal-title">拒绝接单</text>
            <view class="textarea-container">
                <textarea class="reject-textarea" v-model="rejectReason" placeholder="请输入拒绝理由（必填）"
                    maxlength="100"></textarea>
                <text class="char-count">{{ rejectReason.length }}/100</text>
            </view>
            <view class="modal-btns mt-30">
                <button class="modal-btn cancel" @click="closeRejectModal">取消</button>
                <button class="modal-btn confirm" :class="{ 'disabled': !rejectReason.trim() }"
                    @click="confirmReject">提交</button>
            </view>
        </view>
    </view>

    <!-- 确认接单弹窗 -->
    <view class="modal-mask" v-if="showAcceptConfirmModal">
        <view class="custom-modal">
            <text class="modal-title">接单确认</text>
            <view class="modal-content-box">
                <text class="modal-content-main">请确认是否接收此订单？</text>
                <text class="modal-content-sub">接单后请尽快通过电话联系用户</text>
            </view>
            <view class="modal-btns mt-30">
                <button class="modal-btn cancel" @click="closeAcceptModal">再想想</button>
                <button class="modal-btn confirm" @click="confirmAccept">确认接单</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>
    <custom-tabbar currentPath="pages/home/index"></custom-tabbar>
</template>

<script>
import { getMyProfile } from '@/api/fulfiller/fulfiller'
import { getPendingOrders, acceptOrder, getOrderCount, rejectOrderApi } from '@/api/order/subOrder'
import { listAllService } from '@/api/service/list'
import { getAreaStationList } from '@/api/system/areaStation'
import { isLoggedIn } from '@/utils/auth'
import { reportGps } from '@/utils/gps'
import { listMyNotice } from '@/api/system/notice'
import customTabbar from '@/components/custom-tabbar/index.vue'

export default {
    components: {
        customTabbar
    },
    data() {
        return {
            taskList: [],
            currentFilter: 'default', // default, distance, time
            filterCondition: '筛选条件',
            sortDistance: 'asc', // asc, desc
            sortTime: 'asc',
            scrollTop: 0, // Track scroll position
            isFilterShow: false,
            tempFilter: {
                service: null,
                distance: '全部',
                amount: '全部'
            },
            activeFilter: {
                service: null,
                distance: '全部',
                amount: '全部'
            },
            workStatus: 'resting', // resting | busy | disabled
            showConfirmModal: false,
            showPetModal: false,
            currentPetInfo: {},
            showRejectModal: false,
            rejectReason: '',
            currentOrder: null,
            showAcceptConfirmModal: false,
            showNavModal: false,
            navTargetItem: null,
            navTargetPointType: '',
            profile: null,
            profileLoading: false,
            serviceList: [],
            orderStats: {
                total: 0,
                reject: 0,
                completed: 0,
                price: 0
            },
            unreadCount: 0,
            noticeTimer: null
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    async onLoad() {
        // Initial load
        this.checkWorkStatus();
        await this.loadServiceList();
        this.loadTaskList();

        // 显式请求一次定位授权
        reportGps(true).catch(e => console.log('Init GPS check skipped', e));
    },
    onShow() {
        uni.hideTabBar()
        this.checkWorkStatus();
        if (isLoggedIn()) {
            // 每次进入页面强制刷新所有展示数据
            this.loadProfile()
            this.loadOrderStats()
            this.loadTaskList()
            this.loadServiceList() // 确保服务配置也是最新的
            // 此代码由AI生成
            // this.fetchUnreadNotice() // 获取未读消息
            // this.startNoticePolling() // 开始轮询
        }
    },
    onHide() {
        // 此代码由AI生成
        // this.stopNoticePolling()
    },
    onUnload() {
        // 此代码由AI生成
        // this.stopNoticePolling()
    },
    async onPullDownRefresh() {
        this.checkWorkStatus();

        try {
            await this.loadServiceList();

            const tasks = [
                this.loadTaskList()
            ];

            if (isLoggedIn()) {
                tasks.push(this.loadProfile());
                tasks.push(this.loadOrderStats());
            }

            await Promise.all(tasks);
        } catch (err) {
            console.error('刷新异常:', err);
        } finally {
            uni.stopPullDownRefresh();
            uni.showToast({ title: '刷新成功', icon: 'success' });
        }
    },
    methods: {
        async loadProfile() {
            if (this.profileLoading) return
            this.profileLoading = true
            try {
                const res = await getMyProfile()
                const data = res.data || null

                if (data) {
                    // 以服务器返回的状态为准进行更新
                    if (data.status) {
                        this.workStatus = data.status;
                        uni.setStorageSync('workStatus', data.status);
                    }

                    // 需求：头部的接单城市使用站点往上找到城市，而非直接显示站点
                    if (data.stationId) {
                        try {
                            const stationRes = await getAreaStationList();
                            const list = stationRes.data || [];
                            const currentStation = list.find(i => i.id === data.stationId);
                            if (currentStation) {
                                // 向上溯源：直到找到 parentId 为 0 的节点（即顶层城市）
                                let node = currentStation;
                                while (node && node.parentId !== 0) {
                                    let parent = list.find(i => i.id === node.parentId);
                                    if (parent) {
                                        node = parent;
                                    } else {
                                        break;
                                    }
                                }
                                // 将溯源到的节点名称作为显示城市
                                data.cityName = node.name;
                            }
                        } catch (e) {
                            console.error('溯源城市失败:', e);
                        }
                    }
                }

                this.profile = data
            } catch (err) {
                console.error('获取个人信息失败:', err)
                uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' })
            } finally {
                this.profileLoading = false
            }
        },
        async loadServiceList() {
            try {
                const res = await listAllService()
                this.serviceList = res.data || []
            } catch (err) {
                console.error('获取服务类型失败:', err)
                uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' })
            }
        },
        async loadOrderStats() {
            try {
                const res = await getOrderCount()
                this.orderStats = res.data || { total: 0, reject: 0, completed: 0, fulfillmentCommission: 0 }
            } catch (err) {
                console.error('获取订单统计失败:', err)
                uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' })
            }
        },
        async fetchUnreadNotice() {
            if (!isLoggedIn()) return;
            try {
                const res = await listMyNotice({
                    pageNum: 1,
                    pageSize: 1,
                    readFlag: false
                });
                this.unreadCount = Number(res.total) || 0;
            } catch (err) {
                console.error('获取未读消息失败:', err);
                uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' });
            }
        },
        startNoticePolling() {
            this.stopNoticePolling();
            // 每5秒轮询一次未读消息
            this.noticeTimer = setInterval(() => {
                this.fetchUnreadNotice();
            }, 5000);
        },
        stopNoticePolling() {
            if (this.noticeTimer) {
                clearInterval(this.noticeTimer);
                this.noticeTimer = null;
            }
        },
        navToMessage() {
            uni.navigateTo({
                url: '/pages/mine/message/index'
            });
        },
        checkWorkStatus() {
            const status = uni.getStorageSync('workStatus');
            if (status) {
                this.workStatus = status;
            } else {
                // 默认状态为休息
                this.workStatus = 'resting';
                uni.setStorageSync('workStatus', 'resting');
            }
        },
        toggleFilter() {
            if (this.workStatus === 'resting') return; // Disable filter when resting? Or keep it? User didn't specify, but usually disabled. Let's keep it enabled for now as they might look at filters before working.
            this.isFilterShow = !this.isFilterShow;
        },
        goToWorkStatus() {
            uni.navigateTo({
                url: '/pages/home/work-status/index'
            });
        },
        async handleManualLocation() {
            try {
                uni.showLoading({ title: '定位获取中...', mask: true });
                await reportGps(true);
                uni.showToast({ title: '位置已更新', icon: 'success' });
            } catch (e) {
                console.error('Manual location failed', e);
            } finally {
                uni.hideLoading();
            }
        },
        startWork() {
            this.showConfirmModal = true;
        },
        confirmStartWork() {
            this.workStatus = 'busy';
            uni.setStorageSync('workStatus', 'busy');
            this.loadTaskList();
            this.showConfirmModal = false;
            uni.showToast({ title: '已开始接单', icon: 'success' });
        },
        closeConfirmModal() {
            this.showConfirmModal = false;
        },
        showPetProfile(item) {
            this.currentPetInfo = item;
            this.showPetModal = true;
        },
        closePetProfile() {
            this.showPetModal = false;
        },
        openRejectModal(item) {
            this.currentOrder = item;
            this.rejectReason = '';
            this.showRejectModal = true;
        },
        closeRejectModal() {
            this.showRejectModal = false;
            this.currentOrder = null;
        },
        async confirmReject() {
            if (!this.rejectReason.trim()) {
                uni.showToast({ title: '请输入拒绝理由', icon: 'none' });
                return;
            }
            if (!this.currentOrder?.id) return
            try {
                uni.showLoading({ title: '提交中...', mask: true });
                await rejectOrderApi({
                    orderId: this.currentOrder.id,
                    rejectReason: this.rejectReason
                });
                uni.showToast({ title: '已拒绝接单', icon: 'success' });
                this.showRejectModal = false;
                this.currentOrder = null;
                this.loadTaskList();
                this.loadOrderStats();
            } catch (err) {
                console.error('拒绝接单失败:', err);
                uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' });
            } finally {
                uni.hideLoading();
            }
        },
        openAcceptModal(item) {
            this.currentOrder = item;
            this.showAcceptConfirmModal = true;
        },
        closeAcceptModal() {
            this.showAcceptConfirmModal = false;
            this.currentOrder = null;
        },
        async confirmAccept() {
            if (!this.currentOrder?.id) return
            try {
                await acceptOrder(this.currentOrder.id)
                uni.showToast({ title: '接单成功', icon: 'success' })
                this.showAcceptConfirmModal = false
                this.currentOrder = null
                this.loadTaskList()
                this.loadProfile()
                this.loadOrderStats()
            } catch (err) {
                console.error('接单失败:', err)
                uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' });
            }
        },
        openNavigation(item, pointType) {
            this.navTargetItem = item;
            this.navTargetPointType = pointType;
            this.showNavModal = true;
        },
        closeNavModal() {
            this.showNavModal = false;
        },
        chooseMap(mapType) {
            let item = this.navTargetItem;
            let pointType = this.navTargetPointType;
            // 起 -> fromAddress ； 终 -> toAddress
            let name = pointType === 'start' ? (item.fromAddress || '起点') : (item.toAddress || '终点');
            let address = pointType === 'start' ? (item.fromAddress || '起点地址') : (item.toAddress || '终点地址');
            let latitude = pointType === 'start' ? Number(item.fromLat) : Number(item.toLat);
            let longitude = pointType === 'start' ? Number(item.fromLng) : Number(item.toLng);

            this.showNavModal = false;

            // 统一定义打开地图的函数
            const navigateTo = (lat, lng, addrName, addrDesc) => {
                uni.openLocation({
                    latitude: lat,
                    longitude: lng,
                    name: addrName,
                    address: addrDesc || '无法获取详细地址',
                    success: function () {
                        console.log('打开导航成功: ' + mapType);
                    },
                    fail: function (err) {
                        console.error('打开导航失败:', err);
                        uni.showToast({ title: '打开地图失败', icon: 'none' });
                    }
                });
            };

            // 如果有目标经纬度，直接打开
            if (latitude && longitude && !isNaN(latitude) && !isNaN(longitude)) {
                navigateTo(latitude, longitude, name, address);
            } else {
                // 如果没有经纬度，按照需求：使用自己当前的经纬度，然后搜索 fromAddress 或者 toAddress
                uni.showLoading({ title: '获取当前位置...', mask: true });
                reportGps(true).then(res => {
                    uni.hideLoading();
                    // 使用用户当前经纬度作为锚点打开地图，展示目标地址信息
                    navigateTo(res.latitude, res.longitude, name, address);
                }).catch(err => {
                    uni.hideLoading();
                    console.error('获取地理位置失败:', err);
                    // 具体的授权引导已在 reportGps 内部处理
                });
            }
        },
        selectService(type) {
            this.tempFilter.service = type;
        },
        selectDistance(type) {
            this.tempFilter.distance = type;
        },
        selectAmount(type) {
            this.tempFilter.amount = type;
        },
        resetFilter() {
            this.tempFilter = {
                service: null,
                distance: '全部',
                amount: '全部'
            };
        },
        confirmFilter() {
            this.activeFilter = { ...this.tempFilter };
            this.isFilterShow = false;
            this.loadTaskList();
        },
        closeFilter() {
            this.isFilterShow = false;
        },
        goToDetail(item) {
            uni.navigateTo({
                url: `/pages/home/orderDetail/index?id=${item.id}`
            });
        },
        async loadTaskList() {
            try {
                const params = {
                    service: this.activeFilter.service,
                    minPrice: this.getMinPrice(),
                    maxPrice: this.getMaxPrice(),
                    pageNum: 1,
                    pageSize: 20
                }
                const res = await getPendingOrders(params)
                this.taskList = (res.rows || []).map(item => this.transformOrder(item))
            } catch (err) {
                console.error('获取订单列表失败:', err)
                uni.showToast({ title: err.message || err.msg || '请求失败', icon: 'none' })
                this.taskList = []
            }
        },
        getMinPrice() {
            const amount = this.activeFilter.amount
            if (amount === '100以下') return 0
            if (amount === '100-200') return 10000
            if (amount === '200-500') return 20000
            if (amount === '500以上') return 50000
            return undefined
        },
        getMaxPrice() {
            const amount = this.activeFilter.amount
            if (amount === '100以下') return 10000
            if (amount === '100-200') return 20000
            if (amount === '200-500') return 50000
            return undefined
        },
        transformOrder(item) {
            const service = this.serviceList.find(s => s.id === item.service)
            const serviceText = service?.name || '未知'
            const serviceIcon = service?.iconUrl || ''
            const mode = service?.mode || 0
            const isRoundTrip = mode === 1
            return {
                id: item.id,
                type: isRoundTrip ? 1 : item.service,
                typeText: serviceText,
                typeIcon: serviceIcon,
                price: (item.fulfillmentCommission / 100).toFixed(2),
                timeLabel: '服务时间',
                time: item.serviceTime,
                petAvatar: item.petAvatar || '/static/dog.png',
                petAvatarUrl: item.petAvatarUrl || '',
                petName: item.petName,
                petBreed: item.breed,
                petGender: 'M',
                petAge: '',
                petWeight: '',
                petPersonality: '',
                petHobby: '',
                petRemark: '',
                petTags: [],
                petLogs: [],
                startLocation: item.fromAddress || '暂无起点',
                startAddress: item.fromAddress || '',
                fromAddress: item.fromAddress || '',
                fromLat: item.fromLat,
                fromLng: item.fromLng,
                startDistance: '0km',
                endLocation: (item.customerName || item.contact || '') + ' ' + (item.customerPhone || ''),
                endAddress: item.toAddress || '',
                toAddress: item.toAddress || '',
                toLat: item.toLat,
                toLng: item.toLng,
                endDistance: '0km',
                serviceContent: '',
                remark: item.remark || ''
            }
        },
        setFilter(type) {
            this.currentFilter = type;
            if (type === 'distance') {
                this.sortDistance = this.sortDistance === 'asc' ? 'desc' : 'asc';
                uni.showToast({ title: `按距离${this.sortDistance === 'asc' ? '升序' : '降序'}`, icon: 'none' });
            } else if (type === 'time') {
                this.sortTime = this.sortTime === 'asc' ? 'desc' : 'asc';
                uni.showToast({ title: `按时间${this.sortTime === 'asc' ? '升序' : '降序'}`, icon: 'none' });
            }
        },
        showFilterDropdown() {
            this.toggleFilter();
        }
    }
}
</script>

<style>
/* Global Box Sizing Fix */
view,
text,
image,
scroll-view,
button {
    box-sizing: border-box;
}

/* 页面背景 */
page {
    background-color: #F8F8F8;
}

.container {
    padding-bottom: 30rpx;
}

/* 顶部背景 */
.nav-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 360rpx;
    /* Reduced by another 20rpx */
    background: linear-gradient(180deg, #FFE0B2 0%, #FFF3E0 100%);
    border-bottom-left-radius: 60rpx;
    border-bottom-right-radius: 60rpx;
    z-index: 1;
    overflow: hidden;
}

/* Custom Navigation Bar */
.custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding-top: var(--status-bar-height);
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
}

/* 头部区域 */
.header-section {
    position: relative;
    z-index: 2;
    padding: 140rpx 30rpx 0;
}

/* 用户信息 */
.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
}

.avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 24rpx;
    border: 4rpx solid #fff;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.info-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.top-row {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
}

.name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-right: 16rpx;
}

/* 状态胶囊 */
.status-pill {
    background-color: #4E4E4E;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    padding: 2rpx 20rpx 2rpx 6rpx;
    /* Increased right/left padding to elongate */
}

.status-dot-bg {
    width: 24rpx;
    /* Smaller icon bg */
    height: 24rpx;
    background-color: #00E676;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6rpx;
}

.check-mark {
    color: #fff;
    font-size: 14rpx;
    /* Smaller check */
    font-weight: bold;
}

.status-text {
    color: #fff;
    font-size: 22rpx;
    /* Smaller font (11pt) */
    margin-right: 6rpx;
    font-weight: normal;
}

.status-pill .arrow-down {
    color: #fff;
    font-size: 10rpx;
    /* Half size */
}

.bottom-row {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #333;
}

.city-label {
    margin-right: 4rpx;
}

.city-arrow {
    font-family: monospace;
}

/* 通知铃铛 */
.notification-box {
    position: relative;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bell-img {
    width: 44rpx;
    height: 44rpx;
}

.badge-count {
    position: absolute;
    top: -4rpx;
    right: -4rpx;
    background-color: #FF5252;
    color: #fff;
    font-size: 20rpx;
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 50%;
    border: 2rpx solid #fff;
}

/* 统计卡片 - 悬浮样式 */
.stats-card {
    background-color: #fff;
    border-radius: 30rpx;
    padding: 30rpx 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
    margin-bottom: 10rpx;
    /* 10rpx spacing to task header */
    margin-top: -10rpx;
    position: relative;
    width: 100%;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.num {
    font-size: 40rpx;
    /* Increased font size */
    font-weight: 800;
    color: #333;
    margin-bottom: 10rpx;
    font-family: Arial, sans-serif;
}

.label {
    font-size: 24rpx;
    color: #888;
}

.divider {
    width: 1px;
    height: 40rpx;
    background-color: #EEEEEE;
}

/* 任务大厅标题栏 - 吸顶容器 */
.task-header {
    position: sticky;
    top: calc(100rpx + var(--status-bar-height));
    z-index: 90;
    margin-top: 0;
    margin-bottom: 10rpx;
    width: 100%;
    /* Flex removed, padding removed, handled by inner */
}

/* 标题栏内部内容 */
.header-inner {
    position: relative;
    z-index: 3;
    /* Layer 3: Topmost */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 94rpx;
    padding: 0 30rpx;
    background-color: transparent;
    transition: background-color 0.2s;
}

.left-title {
    display: flex;
    align-items: center;
}

.orange-bar {
    width: 8rpx;
    height: 32rpx;
    background-color: #FF5722;
    border-radius: 4rpx;
    margin-right: 15rpx;
}

.left-title .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}

.left-title .count {
    font-size: 24rpx;
    color: #999;
    margin-left: 8rpx;
    font-weight: normal;
}

.filter-options {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
}

.filter-item {
    margin-left: 30rpx;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}

.filter-item.active {
    color: #FF5722;
    font-weight: bold;
}

/* Sort Icon Design: Up and Down arrows */
.sort-icon {
    display: flex;
    flex-direction: column;
    margin-left: 6rpx;
    justify-content: center;
    height: 20rpx;
}

.sort-icon .up {
    width: 0;
    height: 0;
    border-left: 6rpx solid transparent;
    border-right: 6rpx solid transparent;
    border-bottom: 6rpx solid #ccc;
    margin-bottom: 2rpx;
}

.sort-icon .down {
    width: 0;
    height: 0;
    border-left: 6rpx solid transparent;
    border-right: 6rpx solid transparent;
    border-top: 6rpx solid #ccc;
}

.filter-item.active .sort-icon .up.active {
    border-bottom-color: #FF5722;
}

.filter-item.active .sort-icon .down.active {
    border-top-color: #FF5722;
}

.dropdown {
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    background-color: transparent;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
    border: none;
    box-shadow: none;
}

.dropdown text {
    margin-left: 0;
    font-size: 24rpx;
    color: #333;
}

.dropdown .arrow-down {
    font-size: 18rpx;
    margin-left: 6rpx;
    color: #999;
}

/* 任务大厅列表 */
.task-list {
    padding: 0 30rpx;
    width: 100%;
}

/* 任务卡片优化 */
.task-card {
    background-color: #fff;
    border-radius: 24rpx;
    padding: 20rpx 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.04);
    width: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
}

.type-badge {
    display: flex;
    align-items: center;
}

.type-icon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 15rpx;
    background-color: #FFF3E0;
    border-radius: 50%;
    padding: 6rpx;
    box-sizing: border-box;
}

.type-text {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
}

.price {
    font-size: 28rpx;
    font-weight: bold;
    color: #FF5252;
}

.time-row {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.time-row .value {
    color: #333;
    margin-left: 10rpx;
}

/* 宠物卡片 */
.pet-card {
    background-color: #FFF8F0;
    border-radius: 16rpx;
    padding: 15rpx 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
}

.pet-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.pet-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pet-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 5rpx;
}

.pet-breed {
    font-size: 24rpx;
    color: #999;
}

.pet-profile-btn {
    font-size: 24rpx;
    color: #FF9800;
    border: 1px solid #FF9800;
    padding: 6rpx 20rpx;
    border-radius: 50rpx;
    background-color: #fff;
}

/* 路线信息 */
.route-info {
    margin-bottom: 20rpx;
}

.route-item {
    display: flex;
    align-items: flex-start;
    padding-bottom: 20rpx;
    position: relative;
    width: 100%;
}

/* 路线项底部的间隔 */
.route-item:not(:last-child) {
    margin-bottom: 16rpx;
}

.route-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.route-line-vertical {
    position: absolute;
    left: 19rpx;
    top: 46rpx;
    bottom: -15rpx;
    /* Adjusted to connect the now-closer nodes */
    border-left: 2rpx dashed #E0E0E0;
    width: 0;
    z-index: 0;
}

.icon-circle {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    color: #fff;
    font-size: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    flex-shrink: 0;
    font-weight: bold;
    margin-top: 6rpx;
    position: relative;
    z-index: 1;
    /* Above line */
}

.icon-circle.start {
    background-color: #FFB74D;
}

.icon-circle.end {
    background-color: #81C784;
}

.icon-circle.service {
    background-color: #81C784;
}

.address-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 20rpx;
    width: 0;
}

.addr-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.addr-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 6rpx;
    flex: 1;
}

.phone-call-btn {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E8F5E9;
    border-radius: 50%;
    margin-left: 10rpx;
    transition: transform 0.1s;
}

.phone-call-btn:active {
    transform: scale(0.9);
    background-color: #C8E6C9;
}

.phone-icon-item {
    width: 28rpx;
    height: 28rpx;
}

.addr-desc {
    font-size: 24rpx;
    color: #999;
    line-height: normal;
}

.distance-tag {
    display: flex;
    align-items: center;
    background-color: #FFF3E0;
    padding: 6rpx 6rpx 6rpx 12rpx;
    border-radius: 30rpx;
    flex-shrink: 0;
}

.distance-tag text {
    font-size: 24rpx;
    color: #FF5722;
    margin-right: 5rpx;
    font-weight: normal;
}

.nav-arrow {
    width: 32rpx;
    height: 32rpx;
}

.service-content {
    margin-top: -10rpx;
    /* Shifted up using negative margin for max compactness */
    font-size: 24rpx;
    /* 12pt */
    color: #666;
    padding-left: 60rpx;
}

.content-label {
    color: #999;
    margin-right: 10rpx;
}

/* 备注 */
.remark-box {
    background-color: #F8F8F8;
    padding: 15rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 20rpx;
}

/* 按钮组 */
.action-btns {
    display: flex;
    justify-content: space-between;
}

.btn {
    height: 64rpx;
    /* Increased height */
    line-height: 64rpx;
    border-radius: 32rpx;
    /* Matches height/2 */
    font-size: 28rpx;
    /* Slightly larger */
    font-weight: normal;
    width: 48%;
}

.btn::after {
    border: none;
}

.btn.reject {
    background-color: #F5F5F5;
    color: #999;
    box-shadow: none;
}

.btn.accept {
    background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
    color: #fff;
    box-shadow: 0 5rpx 15rpx rgba(255, 87, 34, 0.3);
}

.bg-circle-right {
    position: absolute;
    top: -20rpx;
    right: -20rpx;
    width: 185rpx;
    /* +20rpx */
    height: 185rpx;
    /* +20rpx */
    border-radius: 50%;
    background-color: rgba(255, 218, 185, 0.8);
    /* 80% opacity */
}

/* 筛选面板 (Absolute Child) */
.filter-panel {
    position: absolute;
    /* Relative to .task-header */
    top: 94rpx;
    /* Start right below header */
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 2;
    /* Layer 2: Below inner(3), Above mask(1) */
    padding: 30rpx 30rpx 40rpx;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    transform: translateY(-20rpx);
    /* Slightly tucked start */
    opacity: 0;
    transition: all 0.25s ease-out;
    visibility: hidden;
}

.filter-panel.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* 筛选遮罩 (Absolute Child) */
.filter-mask {
    position: absolute;
    top: 94rpx;
    /* Start below header */
    left: 0;
    right: 0;
    height: 100vh;
    /* Cover visible area below */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    /* Layer 1: Lowest in header */
}

.filter-section {
    margin-bottom: 40rpx;
}

.section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
}

.options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.option-btn {
    width: calc(33.33% - 14rpx);
    /* 3 cols with gap */
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    border-radius: 32rpx;
    font-size: 26rpx;
    color: #666;
    background-color: #fff;
    border: 2rpx solid #E0E0E0;
    margin-bottom: 10rpx;
}

.option-btn.active {
    color: #FF5722;
    background-color: #FFF3E0;
    border-color: #FF5722;
    font-weight: bold;
}

.filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
}

.action-btn {
    width: 48%;
    height: 64rpx;
    /* Match .btn */
    line-height: 64rpx;
    border-radius: 32rpx;
    /* Match .btn */
    font-size: 28rpx;
    /* Match .btn */
    font-weight: normal;
    /* Match .btn */
}

.action-btn::after {
    border: none;
}

.action-btn.reset {
    background-color: #F5F5F5;
    color: #999;
    /* Match light gray */
}

.action-btn.confirm {
    background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
    color: #fff;
    box-shadow: 0 5rpx 15rpx rgba(255, 87, 34, 0.3);
}

/* 状态胶囊 */
.status-pill {
    display: flex;
    align-items: center;
    background-color: #333333;
    /* Dark background */
    border-radius: 20rpx;
    padding: 4rpx 16rpx 4rpx 8rpx;
    margin-left: 16rpx;
    transition: background-color 0.3s;
}

.status-pill.resting {
    background-color: #424242;
    /* Slightly lighter dark */
}

.status-dot-bg {
    width: 24rpx;
    height: 24rpx;
    background-color: #4CAF50;
    border-radius: 50%;
    margin-right: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.check-mark {
    color: #fff;
    font-size: 14rpx;
    font-weight: bold;
}

.status-pill.resting .status-dot-bg {
    background-color: #FF5722;
    /* Warning color for resting */
}

.status-icon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 6rpx;
}

.status-text {
    font-size: 22rpx;
    color: #fff;
    margin-right: 6rpx;
}

.status-pill .arrow-down {
    color: #fff;
    font-size: 10rpx;
    /* Reduced size */
    margin-left: 4rpx;
    /* Adjust spacing */
}

/* 空状态 - 休息中 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 150rpx;
}

.empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
    opacity: 0.5;
}

.empty-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 60rpx;
}

.start-work-btn {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
    border-radius: 40rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
    box-shadow: 0 5rpx 15rpx rgba(255, 87, 34, 0.3);
}


/* 自定义确认弹窗 */
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-modal {
    width: 600rpx;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 40rpx 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
}

.modal-content {
    font-size: 30rpx;
    color: #666;
    margin-bottom: 50rpx;
    text-align: center;
}

.modal-btns {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.modal-btn {
    width: 45%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: bold;
    margin: 0;
}

.modal-btn::after {
    border: none;
}

.modal-btn.cancel {
    background-color: #F5F5F5;
    color: #999;
}

.modal-btn.confirm {
    background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
    color: #fff;
    box-shadow: 0 5rpx 15rpx rgba(255, 87, 34, 0.3);
}

/* 宠物档案弹窗 */
.pet-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-modal-content {
    width: 680rpx;
    height: 85vh;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pet-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #F0F0F0;
}

.pet-modal-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
}

.pet-modal-scroll {
    flex: 1;
    height: 0;
    padding: 30rpx;
    box-sizing: border-box;
}

.pet-base-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
}

.pm-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 30rpx;
    border: 2rpx solid #f5f5f5;
}

.pm-info-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pm-name-row {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
}

.pm-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-right: 20rpx;
}

.pm-gender {
    display: flex;
    align-items: center;
    background-color: #E3F2FD;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
}

.pm-gender text {
    font-size: 22rpx;
    color: #1E88E5;
}

.pm-gender .gender-icon {
    font-weight: bold;
    margin-right: 4rpx;
}

.pm-gender.female {
    background-color: #FCE4EC;
}

.pm-gender.female text {
    color: #D81B60;
}

.pm-breed {
    font-size: 26rpx;
    color: #999;
}

.pm-detail-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pm-grid-item {
    background-color: #F8F8F8;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
}

.pm-grid-item.half {
    width: 48%;
    box-sizing: border-box;
}

.pm-grid-item.full {
    width: 100%;
    box-sizing: border-box;
}

.pm-label {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 10rpx;
}

.pm-val {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.pm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-bottom: 40rpx;
}

.pm-tag {
    background-color: #FFF8EB;
    border: 2rpx solid #FFCC80;
    color: #FF9800;
    font-size: 22rpx;
    padding: 8rpx 24rpx;
    border-radius: 30rpx;
}

.pm-section-title {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding-top: 30rpx;
    border-top: 2rpx dashed #F0F0F0;
}

.pm-section-title .orange-bar {
    width: 8rpx;
    height: 32rpx;
    background-color: #FF9800;
    margin-right: 16rpx;
    border-radius: 4rpx;
}

.pm-section-title text {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
}

.pm-log-list {
    display: flex;
    flex-direction: column;
}

.pm-log-item {
    display: flex;
    flex-direction: column;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #F0F0F0;
}

.pm-log-item:last-child {
    border-bottom: none;
}

.pm-log-date {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 16rpx;
}

.pm-log-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20rpx;
}

.pm-log-recorder {
    font-size: 24rpx;
    color: #FF9800;
    align-self: flex-end;
}

/* 拒绝接单弹窗输入区域 */
.textarea-container {
    padding: 0 4rpx;
    width: 100%;
    position: relative;
    margin-bottom: 20rpx;
}

.reject-textarea {
    width: 100%;
    height: 240rpx;
    background-color: #F9F9F9;
    border: 1rpx solid #E0E0E0;
    border-radius: 16rpx;
    padding: 24rpx;
    padding-bottom: 60rpx;
    font-size: 28rpx;
    line-height: 1.6;
    box-sizing: border-box;
    transition: all 0.3s;
}

.reject-textarea:focus {
    border-color: #FF9800;
    background-color: #fff;
}

.char-count {
    position: absolute;
    right: 44rpx;
    bottom: 24rpx;
    font-size: 22rpx;
    color: #999;
}

.modal-btn.confirm.disabled {
    background: #FFD180;
    box-shadow: none;
    opacity: 0.8;
}

.mt-30 {
    margin-top: 30rpx;
}

/* 宠物档案底部关闭按钮 */
.pm-bottom-close {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #F5F5F5;
    color: #666;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: bold;
    margin: 0;
}

.pm-bottom-close::after {
    border: none;
}

/* 宠物档案原生关闭图标 */
.close-icon-btn {
    font-size: 48rpx;
    color: #999;
    line-height: 1;
    padding: 0 10rpx;
}

/* 确认接单弹窗内容 */
.modal-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
}

.modal-content-main {
    font-size: 30rpx;
    color: #333;
    margin-bottom: 16rpx;
}

.modal-content-sub {
    font-size: 24rpx;
    color: #999;
}

/* 地图导航 Action Sheet */
.nav-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.nav-action-sheet {
    background-color: #fff;
    width: 100%;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    overflow: hidden;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-sheet-title {
    text-align: center;
    padding: 30rpx 0;
    font-size: 13px;
    color: #999;
    border-bottom: 1rpx solid #efefef;
}

.nav-sheet-item {
    text-align: center;
    padding: 30rpx 0;
    font-size: 13px;
    color: #333;
    background-color: #fff;
    border-bottom: 1rpx solid #efefef;
}

.nav-sheet-item.cancel {
    border-bottom: none;
    color: #666;
}

.nav-sheet-gap {
    height: 16rpx;
    background-color: #F8F8F8;
}

/* 详情跳转指引样式 @Author: Antigravity */
.task-card:active {
    opacity: 0.8;
    transform: scale(0.99);
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.detail-link {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #FF9800;
    margin-top: 6rpx;
    opacity: 0.9;
}

.detail-link .arrow {
    margin-left: 4rpx;
    font-size: 20rpx;
    font-weight: bold;
}
</style>