# 日历页面游客模式实现

**日期**: 2026-02-01  
**修改文件**: `peidu/uniapp/pages/order/calendar.vue`

## 需求

日历页面（服务日历/订单日历）支持游客模式：
- 游客可以看到日历界面（月份、日期、图例）
- 不显示具体的订单/服务数据
- 显示"需要登录"提示，引导用户登录
- 不弹出"登录已过期"弹窗

## 实现内容

### 1. 添加登录状态标识

```javascript
data() {
  return {
    // ... 其他数据
    isLoggedIn: false // 是否已登录
  }
}
```

### 2. 页面加载时检查登录状态

```javascript
onLoad() {
  // 检查是否登录
  const token = uni.getStorageSync('token')
  this.isLoggedIn = !!(token && token !== '')
  
  // ... 其他初始化代码
  
  // 只有登录用户才加载数据
  if (this.isLoggedIn) {
    this.loadEvents()
  }
  
  this.generateCalendar()
}
```

### 3. 模板中根据登录状态显示不同内容

```vue
<!-- 未登录：显示登录提示 -->
<view class="login-prompt" v-if="!isLoggedIn">
  <text class="prompt-icon">🔒</text>
  <text class="prompt-title">需要登录</text>
  <text class="prompt-desc">登录后即可使用快速预约功能</text>
  <view class="login-btn" @click="goLogin">立即登录</view>
</view>

<!-- 已登录：显示服务列表 -->
<scroll-view v-else-if="dayEvents.length > 0">
  <!-- 服务列表 -->
</scroll-view>

<!-- 已登录但无数据 -->
<view class="empty-events" v-else>
  <!-- 空状态 -->
</view>
```

### 4. 添加登录跳转方法

```javascript
goLogin() {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
```

### 5. 添加登录提示样式

```scss
.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 0;
  
  .prompt-icon {
    font-size: 80rpx;
    margin-bottom: 24rpx;
  }
  
  .prompt-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 12rpx;
  }
  
  .prompt-desc {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .login-btn {
    background: #2d9687;
    color: #fff;
    font-size: 28rpx;
    padding: 20rpx 80rpx;
    border-radius: 40rpx;
  }
}
```

## 效果

### 游客访问
- ✅ 可以看到日历界面（月份切换、日期网格、图例）
- ✅ 不显示具体的订单数据
- ✅ 显示"需要登录"提示
- ✅ 点击"立即登录"跳转到登录页
- ✅ 不会弹出"登录已过期"弹窗

### 已登录用户
- ✅ 正常显示日历和订单数据
- ✅ 可以查看每日的服务安排
- ✅ 可以点击订单查看详情

## 注意事项

1. **不影响现有功能**：已登录用户的体验完全不变
2. **优雅降级**：游客可以看到界面，但需要登录才能使用完整功能
3. **引导登录**：通过友好的提示引导用户登录，而不是强制跳转
4. **保持一致**：与首页的游客模式保持一致的体验