feat: 添加最新预约加载骨架屏状态
This commit is contained in:
@@ -6,7 +6,8 @@ Page({
|
|||||||
data: {
|
data: {
|
||||||
isLoggedIn: false,
|
isLoggedIn: false,
|
||||||
loginFailed: false,
|
loginFailed: false,
|
||||||
latestRecord: null
|
latestRecord: null,
|
||||||
|
recordLoading: false
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@@ -53,6 +54,7 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
async loadLatestRecord() {
|
async loadLatestRecord() {
|
||||||
|
this.setData({ recordLoading: true })
|
||||||
try {
|
try {
|
||||||
const openid = app.globalData.userInfo.openid
|
const openid = app.globalData.userInfo.openid
|
||||||
const record = await appointmentDB.getLatest(openid)
|
const record = await appointmentDB.getLatest(openid)
|
||||||
@@ -64,6 +66,8 @@ Page({
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('加载最新预约失败', err)
|
console.error('加载最新预约失败', err)
|
||||||
this.setData({ latestRecord: null })
|
this.setData({ latestRecord: null })
|
||||||
|
} finally {
|
||||||
|
this.setData({ recordLoading: false })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
+13
-1
@@ -43,7 +43,19 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 最新预约摘要 -->
|
<!-- 最新预约摘要 -->
|
||||||
<view class="latest-card" wx:if="{{latestRecord}}">
|
<view class="latest-card" wx:if="{{recordLoading}}">
|
||||||
|
<view class="latest-header">
|
||||||
|
<text class="latest-title">最新预约</text>
|
||||||
|
</view>
|
||||||
|
<view class="latest-body">
|
||||||
|
<view class="skeleton-row"><view class="skeleton-bar" style="width:60%"></view></view>
|
||||||
|
<view class="skeleton-row"><view class="skeleton-bar" style="width:80%"></view></view>
|
||||||
|
<view class="skeleton-row"><view class="skeleton-bar" style="width:50%"></view></view>
|
||||||
|
<view class="skeleton-row"><view class="skeleton-bar" style="width:40%"></view></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="latest-card" wx:elif="{{latestRecord}}">
|
||||||
<view class="latest-header">
|
<view class="latest-header">
|
||||||
<view class="latest-header-left">
|
<view class="latest-header-left">
|
||||||
<text class="latest-title">最新预约</text>
|
<text class="latest-title">最新预约</text>
|
||||||
|
|||||||
@@ -285,3 +285,24 @@ page {
|
|||||||
color: #b8c9db;
|
color: #b8c9db;
|
||||||
letter-spacing: 4rpx;
|
letter-spacing: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 骨架屏 */
|
||||||
|
.skeleton-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-bar {
|
||||||
|
height: 24rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: linear-gradient(90deg, #e8eef5 25%, #dbeafe 50%, #e8eef5 75%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes skeleton-pulse {
|
||||||
|
0% { background-position: 200% 0; }
|
||||||
|
100% { background-position: -200% 0; }
|
||||||
|
}
|
||||||
|
|||||||
+1
-1
@@ -6,7 +6,7 @@ const ENV_CONFIG = {
|
|||||||
// release: 'https://xcx.yun.588580.xyz',
|
// release: 'https://xcx.yun.588580.xyz',
|
||||||
trial: 'https://qywx.yun.588580.xyz',
|
trial: 'https://qywx.yun.588580.xyz',
|
||||||
// 开发版 & 体验版
|
// 开发版 & 体验版
|
||||||
develop: 'http://172.16.60.235:8080'
|
develop: 'https://qywx.yun.588580.xyz'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 自动判断当前运行环境
|
// 自动判断当前运行环境
|
||||||
|
|||||||
Reference in New Issue
Block a user