135 lines
2.8 KiB
Markdown
135 lines
2.8 KiB
Markdown
# 日历页面游客模式实现
|
||
|
||
**日期**: 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. **保持一致**：与首页的游客模式保持一致的体验
|