feat(plan.vue): 添加加载状态处理以改善用户体验

在页面加载时显示加载动画，防止数据未准备好时显示空白内容。同时调整底部栏的显示逻辑，仅在加载完成且符合条件时显示

subPages/home/plan.vue

@@ -1,8 +1,13 @@
 <template>
   <view class="plan-container">
     
+    <!-- 加载动画 -->
+    <view class="loading-container" v-if="loading">
+      <uv-loading-icon text="加载中..." size="28"></uv-loading-icon>
+    </view>
+    
     <!-- 主体内容 -->
-    <view class="main-content">
+    <view class="main-content" v-if="!loading">
       
       <!-- 内容卡片 -->
       <view class="content-card">
@@ -15,7 +20,7 @@
     </view>
     
     <!-- 底部固定报名栏 -->
-    <view class="bottom-bar" v-if="type === 1 || type === '1'">
+    <view class="bottom-bar" v-if="!loading && (type === 1 || type === '1')">
       <uv-button 
         type="primary" 
         text="报名" 
@@ -41,6 +46,7 @@
 export default {
   data() {
     return {
+      loading: true, // 初始加载状态
       richTextContent: '',
       // richTextContent: `
       //   <div style="padding: 0;">
@@ -78,6 +84,7 @@ export default {
   },
  
   async onShow() {
+    this.loading = true;
     try{
       const askRes = await this.$api.home.getLinkDetails({
         id: this.id
@@ -88,6 +95,8 @@ export default {
       }
     } catch (error) {
       console.error('获取链接详情失败:', error)
+    } finally {
+      this.loading = false;
     }
   },
 
@@ -106,6 +115,13 @@ export default {
   flex-direction: column;
 }
 
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
 .main-content {
   flex: 1;
   padding: 40rpx 32rpx 120rpx;