首页卡片开发

pages/msglog/msglog.vue

@@ -21,8 +21,8 @@
                         <component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
                         <!-- #endif -->
                         <!-- #ifdef MP-WEIXIN -->
-                        <ReadComponent v-show="currentIndex === 0" :ref="(el) => handelComponentsRef(el, index)" />
-                        <UnreadComponent v-show="currentIndex === 1" :ref="(el) => handelComponentsRef(el, index)" />
+                        <ReadComponent v-show="state.current === 0" :ref="(el) => handelComponentsRef(el, index)" />
+                        <UnreadComponent v-show="state.current === 1" :ref="(el) => handelComponentsRef(el, index)" />
                         <!-- #endif -->
                     </swiper-item>
                 </swiper>
@@ -30,6 +30,9 @@
 
             <!-- 自定义tabbar -->
             <CustomTabBar :currentPage="3" />
+            
+            <!-- 微信授权登录弹窗 -->
+            <WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess"></WxAuthLogin>
 
             <!-- 统一使用系统tabBar -->
         </view>
@@ -37,18 +40,20 @@
 </template>
 
 <script setup>
-import { reactive, inject, watch, ref, onMounted } from 'vue';
+import { reactive, inject, watch, ref, onMounted, onUnmounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import Tabbar from '@/components/tabbar/midell-box.vue';
 import ReadComponent from './read.vue';
 import UnreadComponent from './unread.vue';
 import { tabbarManager } from '@/utils/tabbarManager';
+import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
 const loadedMap = reactive([false, false]);
 const swiperRefs = [ref(null), ref(null)];
 const components = [ReadComponent, UnreadComponent];
 import { storeToRefs } from 'pinia';
 import { useReadMsg } from '@/stores/useReadMsg';
 const { unreadCount } = storeToRefs(useReadMsg());
+const wxAuthLoginRef = ref(null);
 
 onShow(() => {
     // 获取消息列表
@@ -63,8 +68,23 @@ const state = reactive({
 
 onMounted(() => {
     handleTabChange(state.current);
+    
+    // 监听退出登录事件，显示微信登录弹窗
+    uni.$on('showLoginModal', () => {
+        wxAuthLoginRef.value?.open();
+    });
 });
 
+onUnmounted(() => {
+    uni.$off('showLoginModal');
+});
+
+// 登录成功回调
+const handleLoginSuccess = () => {
+    console.log('登录成功');
+    // 可以在这里添加登录成功后的处理逻辑
+};
+
 const handelComponentsRef = (el, index) => {
     if (el) {
         swiperRefs[index].value = el;

pages/msglog/read.vue

@@ -1,6 +1,7 @@
 <template>
     <scroll-view scroll-y class="main-scroll">
         <view class="scrollmain">
+            <!-- 消息列表 -->
             <view
                 class="list-card press-button"
                 v-for="(item, index) in msgList"
@@ -35,6 +36,13 @@
                     <view class="info-text line_2">{{ item.subTitle || '消息' }}</view>
                 </view>
             </view>
+            
+            <!-- 暂无消息提示 -->
+            <view class="empty-state" v-if="msgList.length === 0">
+                <image class="empty-icon" src="/static/icon/empty.png" mode="aspectFit"></image>
+                <text class="empty-text">暂无消息</text>
+                <text class="empty-desc">您还没有收到任何消息</text>
+            </view>
         </view>
     </scroll-view>
 </template>
@@ -146,4 +154,26 @@ defineExpose({ loadData });
             font-size: 28rpx;
             color: #6C7282;
             margin-top: 4rpx;
+
+// 空状态样式
+.empty-state
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 120rpx 40rpx;
+    .empty-icon
+        width: 200rpx;
+        height: 200rpx;
+        margin-bottom: 40rpx;
+        opacity: 0.6;
+    .empty-text
+        font-size: 32rpx;
+        color: #999999;
+        font-weight: 500;
+        margin-bottom: 16rpx;
+    .empty-desc
+        font-size: 28rpx;
+        color: #CCCCCC;
+        font-weight: 400;
 </style>

pages/msglog/unread.vue

@@ -1,6 +1,7 @@
 <template>
     <scroll-view scroll-y class="main-scroll">
         <view class="scrollmain">
+            <!-- 未读消息列表 -->
             <view
                 class="list-card press-button"
                 v-for="(item, index) in unreadMsgList"
@@ -33,6 +34,13 @@
                     <view class="info-text line_2">{{ item.subTitle || '消息' }}</view>
                 </view>
             </view>
+            
+            <!-- 暂无未读消息提示 -->
+            <view class="empty-state" v-if="unreadMsgList.length === 0">
+                <image class="empty-icon" src="/static/icon/empty.png" mode="aspectFit"></image>
+                <text class="empty-text">暂无未读消息</text>
+                <text class="empty-desc">您没有未读的消息</text>
+            </view>
         </view>
     </scroll-view>
 </template>
@@ -132,4 +140,26 @@ defineExpose({ loadData });
             font-size: 28rpx;
             color: #6C7282;
             margin-top: 4rpx;
+
+// 空状态样式
+.empty-state
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 120rpx 40rpx;
+    .empty-icon
+        width: 200rpx;
+        height: 200rpx;
+        margin-bottom: 40rpx;
+        opacity: 0.6;
+    .empty-text
+        font-size: 32rpx;
+        color: #999999;
+        font-weight: 500;
+        margin-bottom: 16rpx;
+    .empty-desc
+        font-size: 28rpx;
+        color: #CCCCCC;
+        font-weight: 400;
 </style>