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="/static/touxiang.png" mode="aspectFill"></image>
				<view class="info-content">
					<view class="top-row">
						<text class="name">李海</text>
						<view class="status-pill" :class="{ 'resting': workStatus === 'resting' }" @click="goToWorkStatus">
                            <view class="status-dot-bg">
                                <text class="check-mark" v-if="workStatus === 'working'">✔</text>
                                <text class="check-mark" v-else style="font-size: 16rpx; line-height: 20rpx;">✕</text>
                            </view>
                            <text class="status-text">{{ workStatus === 'working' ? '接单中' : '正在休息' }}</text>
							<text class="arrow-down">▼</text>
						</view>
					</view>
					<view class="bottom-row">
						<text class="city-label">接单城市：武汉市</text>
						<text class="city-arrow">></text>
					</view>
				</view>
				<view class="notification-box">
					<image class="bell-img" src="/static/icons/bell.svg"></image>
					<view class="badge-count">2</view>
				</view>
			</view>
			
			<!-- 统计卡片 -->
			<view class="stats-card">
				<view class="stat-item">
					<text class="num">2546</text>
					<text class="label">累计接单</text>
				</view>
				<view class="divider"></view>
				<view class="stat-item">
					<text class="num">10</text>
					<text class="label">拒接订单</text></view>
				<view class="divider"></view>
				<view class="stat-item">
					<text class="num">10</text>
					<text class="label">奖励订单</text>
				</view>
				<view class="divider"></view>
				<view class="stat-item">
					<text class="num">10</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="filter-item" :class="{ active: currentFilter === 'distance' }" @click="setFilter('distance')">
                        距离
                        <view class="sort-icon">
                            <view class="up" :class="{ active: currentFilter === 'distance' && sortDistance === 'asc' }"></view>
                            <view class="down" :class="{ active: currentFilter === 'distance' && sortDistance === 'desc' }"></view>
                        </view>
                    </view>
                    <view class="filter-item" :class="{ active: currentFilter === 'time' }" @click="setFilter('time')">
                        时间
                        <view class="sort-icon">
                            <view class="up" :class="{ active: currentFilter === 'time' && sortTime === 'asc' }"></view>
                            <view class="down" :class="{ active: currentFilter === 'time' && sortTime === 'desc' }"></view>
                        </view>
                    </view>
                    <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 === '全部' }" @click="selectService('全部')">全部</view>
                        <view class="option-btn" :class="{ active: tempFilter.service === '接送' }" @click="selectService('接送')">接送</view>
                        <view class="option-btn" :class="{ active: tempFilter.service === '喂遛' }" @click="selectService('喂遛')">喂遛</view>
                        <view class="option-btn" :class="{ active: tempFilter.service === '洗护' }" @click="selectService('洗护')">洗护</view>
                    </view>
                </view>

                <view class="filter-section">
                    <text class="section-title">距离</text>
                    <view class="options-grid">
                        <view class="option-btn" :class="{ active: tempFilter.distance === '全部' }" @click="selectDistance('全部')">全部</view>
                        <view class="option-btn" :class="{ active: tempFilter.distance === '2公里内' }" @click="selectDistance('2公里内')">2公里内</view>
                        <view class="option-btn" :class="{ active: tempFilter.distance === '5公里内' }" @click="selectDistance('5公里内')">5公里内</view>
                        <view class="option-btn" :class="{ active: tempFilter.distance === '10公里内' }" @click="selectDistance('10公里内')">10公里内</view>
                        <view class="option-btn" :class="{ active: tempFilter.distance === '20公里内' }" @click="selectDistance('20公里内')">20公里内</view>
                        <view class="option-btn" :class="{ active: tempFilter.distance === '50公里内' }" @click="selectDistance('50公里内')">50公里内</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>

        <!-- 列表容器 -->
        <block v-if="workStatus === 'working'">
            <!-- 任务列表 -->
            <scroll-view scroll-y class="task-list">
                <view class="task-card" v-for="(item, index) in taskList" :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="price">¥{{ item.price }}</text>
                    </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.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>
                        
                        <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>{{ item.startDistance }}</text>
                                        <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                                    </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>{{ item.endDistance }}</text>
                                        <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                                    </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>{{ item.endDistance }}</text>
                                        <image class="nav-arrow" src="/static/icons/nav_arrow.svg"></image>
                                    </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>
                    <!-- 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>
            </scroll-view>
        </block>

        <!-- 休息中空状态 -->
        <view class="empty-state" v-else>
            <image class="empty-icon" src="/static/empty-rest.png" mode="aspectFit"></image>
            <text class="empty-text">当前处于休息中，暂时无法接单</text>
            <button class="start-work-btn" @click="startWork">开工接单</button>
        </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>
                <textarea class="reject-textarea" v-model="rejectReason" placeholder="请输入拒绝理由（必填）" maxlength="100"></textarea>
                <view class="modal-btns mt-30">
                    <button class="modal-btn cancel" @click="closeRejectModal">取消</button>
                    <button class="modal-btn confirm" @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>
</template>

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

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