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

<template>
    <view class="container">
        <!-- 挂牌看板区域 -->
        <view class="signboard-container">
            <view class="rope"></view>
            <view class="nail"></view>
            <view class="board" :class="{ 'resting': status !== 'busy' }">
                <view class="screw top-left"></view>
                <view class="screw top-right"></view>
                <view class="screw bottom-left"></view>
                <view class="screw bottom-right"></view>
                <view class="board-inner">
                    <text class="status-text">{{ status === 'busy' ? '接单中' : '休息中' }}</text>
                </view>
            </view>
        </view>

        <!-- 状态描述 -->
        <view class="status-desc">
            <text>{{ status === 'busy' ? '当前处于工作接单中，正常接收新订单' : '当前处于休息状态，暂停接收新订单' }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="action-area">
            <button class="action-btn" :class="{ 'stop': status === 'busy', 'start': status !== 'busy' }" @click="toggleStatus">
                {{ status === 'busy' ? '停止接单' : '开始接单' }}
            </button>
            <view class="tips">
                <text v-if="status === 'busy'">当您希望长时间不再接收订单时，请点击上方按钮停止接单，开启后需手动恢复。</text>
                <text v-else>点击上方按钮恢复接单，开始接收新的任务推送。</text>
            </view>
        </view>
    </view>
</template>

<script>
import { updateStatus, getMyProfile } from '@/api/fulfiller/fulfiller'

export default {
    data() {
        return {
            status: 'resting', // resting | busy | disabled
            loading: false
        }
    },
    onShow() {
        // 优先从本地缓存读取，保证视觉即时性
        const savedStatus = uni.getStorageSync('workStatus');
        if (savedStatus) {
            this.status = savedStatus;
        }
        // 同时拉取最新 profile 确保同步
        this.fetchLatestProfile();
    },
    methods: {
        async fetchLatestProfile() {
            try {
                const res = await getMyProfile();
                if (res.data && res.data.status) {
                    this.status = res.data.status;
                    uni.setStorageSync('workStatus', this.status);
                }
            } catch (err) {
                console.error('获取状态失败:', err);
            }
        },
        async toggleStatus() {
            if (this.loading) return;
            
            // 确定目标状态
            const targetStatus = this.status === 'busy' ? 'resting' : 'busy';
            const actionText = targetStatus === 'busy' ? '恢复接单' : '停止接单';
            
            try {
                uni.showLoading({ title: '处理中...', mask: true });
                this.loading = true;
                
                // 向后端发送请求
                await updateStatus(targetStatus);
                
                // 成功后重新获取用户信息以更新本地状态
                await this.fetchLatestProfile();
                
                uni.hideLoading();
                uni.showToast({ title: actionText + '成功', icon: 'success' });
            } catch (err) {
                uni.hideLoading();
                console.error('切换状态失败:', err);
                uni.showToast({ title: err.message || '操作失败', icon: 'none' });
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>

<style>
page {
    background-color: #fff;
}
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100rpx;
}

/* 挂牌动画区域 */
.signboard-container {
    position: relative;
    width: 400rpx;
    height: 300rpx;
    display: flex;
    justify-content: center;
    margin-bottom: 60rpx;
}

.rope {
    position: absolute;
    top: 0;
    width: 200rpx;
    height: 100rpx;
    border-top: 4rpx solid #FFC107; /* Yellow rope */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 1;
}

.nail {
    position: absolute;
    top: -10rpx;
    width: 24rpx;
    height: 24rpx;
    background-color: #FFC107;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
}

.board {
    position: absolute;
    top: 80rpx;
    width: 360rpx;
    height: 200rpx;
    background-color: #FF7043; /* Orange for working */
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10rpx 0 #E64A19;
    transition: all 0.3s;
}

.board.resting {
    background-color: #BDBDBD; /* Gray for resting */
    box-shadow: 0 10rpx 0 #9E9E9E;
}

.board-inner {
    width: 280rpx;
    height: 120rpx;
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-2deg); /* Slightly tilted inner paper */
}

.status-text {
    font-size: 48rpx;
    font-weight: bold;
    color: #FF5722;
}

.board.resting .status-text {
    color: #757575;
}

.screw {
    position: absolute;
    width: 16rpx;
    height: 16rpx;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.8;
}

.top-left { top: 20rpx; left: 20rpx; }
.top-right { top: 20rpx; right: 20rpx; }
.bottom-left { bottom: 20rpx; left: 20rpx; }
.bottom-right { bottom: 20rpx; right: 20rpx; }

/* 文本描述 */
.status-desc {
    margin-bottom: 100rpx;
    color: #333;
    font-size: 30rpx;
    font-weight: 500;
}

/* 按钮区域 */
.action-area {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.action-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    border: none;
}

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

.action-btn.stop {
    background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
    box-shadow: 0 10rpx 20rpx rgba(255, 87, 34, 0.3);
}

.action-btn.start {
    background: linear-gradient(90deg, #4CAF50 0%, #2E7D32 100%);
    box-shadow: 0 10rpx 20rpx rgba(76, 175, 80, 0.3);
}

.tips {
    font-size: 24rpx;
    color: #999;
    text-align: center;
    line-height: 1.5;
}
</style>