首页卡片开发

pages/chat/chat.vue

@@ -2,6 +2,9 @@
     <view class="container">
         <!-- 自定义tabbar -->
         <CustomTabBar :currentPage="2" />
+        
+        <!-- 微信授权登录弹窗 -->
+        <WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess"></WxAuthLogin>
         <!-- 抽屉遮罩层 -->
         <view v-if="isDrawerOpen" class="overlay" @click="toggleDrawer"></view>
 
@@ -73,7 +76,7 @@
 </template>
 
 <script setup>
-import { ref, inject, nextTick, computed } from 'vue';
+import { ref, inject, nextTick, computed, onMounted, onUnmounted } from 'vue';
 const { $api, navTo, insertSortData, config } = inject('globalFunction');
 import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
 import useChatGroupDBStore from '@/stores/userChatGroupStore';
@@ -81,6 +84,7 @@ import useUserStore from '@/stores/useUserStore';
 import { tabbarManager } from '@/utils/tabbarManager';
 import aiPaging from './components/ai-paging.vue';
 import { storeToRefs } from 'pinia';
+import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
 const { isTyping, tabeList, chatSessionID } = storeToRefs(useChatGroupDBStore());
 const { userInfo } = storeToRefs(useUserStore());
 const isDrawerOpen = ref(false);
@@ -88,6 +92,7 @@ const scrollIntoView = ref(false);
 
 const searchText = ref('');
 const paging = ref(null);
+const wxAuthLoginRef = ref(null);
 
 // 实时过滤
 const filteredList = computed(() => {
@@ -110,6 +115,23 @@ onShow(() => {
     tabbarManager.updateSelected(2);
 });
 
+onMounted(() => {
+    // 监听退出登录事件，显示微信登录弹窗
+    uni.$on('showLoginModal', () => {
+        wxAuthLoginRef.value?.open();
+    });
+});
+
+onUnmounted(() => {
+    uni.$off('showLoginModal');
+});
+
+// 登录成功回调
+const handleLoginSuccess = () => {
+    console.log('登录成功');
+    // 可以在这里添加登录成功后的处理逻辑
+};
+
 onHide(() => {
     paging.value?.handleTouchCancel();
     if (isDrawerOpen.value) {

pages/chat/components/ai-paging.vue

@@ -1,11 +1,7 @@
 <template>
     <view class="chat-container">
         <!-- #ifdef MP-WEIXIN -->
-         <view class="chat-background">
-        <!-- #endif -->
-        <!-- #ifndef MP-WEIXIN -->
-        <view class="chat-background" v-fade:600="!messages.length">
-        <!-- #endif -->
+         <view class="chat-background" v-if="!messages.length">
             <image class="backlogo" src="/static/icon/backAI.png"></image>
             <view class="back-rowTitle">嗨！欢迎使用{{ config.appInfo.areaName }}AI智能求职</view>
             <view class="back-rowText">
@@ -24,6 +20,28 @@
                 <view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
             </view>
         </view>
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN -->
+        <view class="chat-background" v-if="!messages.length">
+            <image class="backlogo" src="/static/icon/backAI.png"></image>
+            <view class="back-rowTitle">嗨！欢迎使用{{ config.appInfo.areaName }}AI智能求职</view>
+            <view class="back-rowText">
+                我可以根据您的简历和求职需求，帮你精准匹配{{ config.appInfo.areaName }}互联网招聘信息，对比招聘信息的优缺点，提供面试指导等，请把你的任务交给我吧~
+            </view>
+            <view class="back-rowh3">猜你所想</view>
+            <view
+                class="back-rowmsg button-click"
+                v-for="(item, index) in queries"
+                :key="index"
+                @click="sendMessageGuess(item)"
+            >
+                {{ item }}
+            </view>
+            <view class="chat-item self" v-if="isRecording">
+                <view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
+            </view>
+        </view>
+        <!-- #endif -->
         <scroll-view class="chat-list scrollView" :scroll-top="scrollTop" :scroll-y="true" scroll-with-animation>
             <!-- #ifdef MP-WEIXIN -->
             <view class="chat-list list-content">
@@ -946,19 +964,19 @@ image-margin-top = 40rpx
     white-space: pre-wrap;
 }
 .list-content {
-    padding: 0 44rpx 44rpx 44rpx;
+    padding: 0 44rpx 10rpx 44rpx;
 }
 .chat-item {
     display: flex;
     align-items: flex-start;
-    margin-bottom: 20rpx;
+    margin-bottom: 10rpx;
     width: 100%;
 }
 .chat-item.self {
     justify-content: flex-end;
 }
 .message
-    margin-top: 40rpx
+    margin-top: 0rpx
     // max-width: 80%;
     width: 100%;
     word-break: break-word;
@@ -1003,10 +1021,12 @@ image-margin-top = 40rpx
 }
 .input-area {
     padding: 32rpx 28rpx 24rpx 28rpx;
+    padding-bottom: calc(24rpx + env(safe-area-inset-bottom) + 40rpx - 40rpx);
     position: relative;
     background: #FFFFFF;
     box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(11,44,112,0.06);
     transition: height 2s ease-in-out;
+    z-index: 1001;
 }
 .input-area::after
     position: absolute