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

<template>
    <view class="container">
        <!-- 挂牌看板区域 -->
        <view class="signboard-container">
            <view class="rope"></view>
            <view class="nail"></view>
            <view class="board" :class="{ 'resting': status === 'resting' }">
                <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 === 'working' ? '接单中' : '休息中' }}</text>
                </view>
            </view>
        </view>

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

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

<script>
export default {
    data() {
        return {
            status: 'working' // working | resting
        }
    },
    onShow() {
        // 从本地存储获取状态
        const savedStatus = uni.getStorageSync('workStatus');
        if (savedStatus) {
            this.status = savedStatus;
        }
    },
    methods: {
        toggleStatus() {
            if (this.status === 'working') {
                // 切换到休息
                this.status = 'resting';
                uni.setStorageSync('workStatus', 'resting');
                // 图3显示依然有按钮只是置灰，或者变为"已停止接单"
            } else {
                // 切换回接单
                this.status = 'working';
                uni.setStorageSync('workStatus', 'working');
            }
        }
    }
}
</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.stopped {
    background-color: #E0E0E0;
    color: #999;
    box-shadow: none;
}

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