peixue-dev/Archive/[一次性]日历页面游客模式实现-2026-02-01.md

日历页面游客模式实现

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

需求

日历页面（服务日历/订单日历）支持游客模式：

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

实现内容

1. 添加登录状态标识

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

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

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

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

<!-- 未登录：显示登录提示 -->
<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. 添加登录跳转方法

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

5. 添加登录提示样式

.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. 保持一致：与首页的游客模式保持一致的体验