feat(home): 实现热门问题展示及刷新功能

pages/home/index/index.vue

@@ -22,7 +22,7 @@
       <view class="qa-section">
         <view class="qa-header">
           <text class="qa-title">大家都在问</text>
-          <view class="more-link" @click="handleRefresh">
+          <view class="more-link" @click="hotQARefresh">
             <image
               class="icon-refresh"
               src="/static/common/images/icon-refresh.png"
@@ -80,27 +80,37 @@
       >
         <!-- 头部卡片 -->
         <!-- 后端让先注释 -->
-        <!-- <view class="chat-card">
-          <view class="chat-card-title">源小新AI校园小助手</view>
+        <view class="chat-card">
+          <view class="chat-card-title-wrapper">
+            <view class="chat-card-title">源小新AI校园小助手</view>
+            <view class="more-link" @click="hotQARefresh">
+              <image
+                class="icon-refresh"
+                src="/static/common/images/icon-refresh.png"
+              ></image>
+              <text class="more-text">换一批</text>
+            </view>
+          </view>
           <view class="chat-card-desc"
             >我是你们的AI校园助手，我可以为您答疑解惑。</view
           >
-          <view class="chat-card-questions">
-            <view class="question-item">学校哪些专业比较好?</view>
-            <view class="question-item">如何报考学校综合素质评价招生?</view>
-            <view class="question-item">学校有那些专业?</view>
-            <view class="question-item"
-              >学校在录取时有没有一些专业会有特殊...</view
+
+          <view class="qa-list">
+            <view
+              class="qa-item"
+              v-for="(item, index) in hotQuestions"
+              :key="index"
             >
-            <view class="question-item">我什么时候能够知道自己是否被录取?</view>
+              <text class="qa-question">{{ item.content }}</text>
+            </view>
           </view>
-        </view> -->
-        <view class="chat-card">
+        </view>
+        <!-- <view class="chat-card">
           <view class="chat-card-title">源小新AI校园小助手</view>
           <view class="chat-card-desc"
             >我是你们的AI校园助手，我可以为你答疑解惑。</view
           >
-        </view>
+        </view> -->
 
         <!-- 对话内容区域 -->
         <view class="chat-content">
@@ -444,7 +454,10 @@ export default {
       deep: true,
     },
   },
-  onLoad() {},
+  onLoad() {
+    this.hotQARefresh(); // 获取热门聊天
+  },
+
   methods: {
     async handleLeftClick() {
       await this.getChatHistoryList();
@@ -660,7 +673,6 @@ export default {
       this.handleGetConversationDetail();
     },
 
-    
     // 公共排序：按时间升序；时间相同，用户消息(interactMode=0)在前
     sortMessages(list = []) {
       return (list || []).sort((a, b) => {
@@ -694,7 +706,6 @@ export default {
         });
     },
 
-
     // 刷新当前页数据；若当前页为空且页码>1，则自动回退上一页
     refreshPageWithFallback() {
       const currentIndex = this.pageQuery.PageIndex || 1;
@@ -837,7 +848,7 @@ export default {
     },
 
     // 点击刷新
-    handleRefresh() {
+    hotQARefresh() {
       console.log("刷新问题");
 
       this.$u.api.GetHotQuestions({}).then((res) => {
@@ -850,14 +861,12 @@ export default {
 
     // 回答反馈：点赞/点踩（统一调用刷新&上一页回退逻辑）
     handleFeedback(message, isHelp) {
-      this.$u.api
-        .ModifyStatus({ id: message.id, isHelp })
-        .then((res) => {
-          if (!res.succeed) return;
-          this.$u.toast("操作成功");
-          // 刷新当前页；若空则自动回退上一页并刷新
-          this.refreshPageWithFallback();
-        });
+      this.$u.api.ModifyStatus({ id: message.id, isHelp }).then((res) => {
+        if (!res.succeed) return;
+        this.$u.toast("操作成功");
+        // 刷新当前页；若空则自动回退上一页并刷新
+        this.refreshPageWithFallback();
+      });
     },
   },
 };
@@ -958,7 +967,7 @@ export default {
 
           .qa-question {
             font-size: 28rpx;
-            color: #333;
+            color: #333333;
             line-height: 1.5;
           }
         }
@@ -1062,21 +1071,44 @@ export default {
     }
 
     .chat-card {
+      background-image: url("@/static/common/images/hot-question-bg2.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: 0 0;
       // background-color: #ffffff;
       // border-radius: 16rpx;
       padding: 32rpx;
-      margin-bottom: 32rpx;
+      margin: 32rpx 0;
 
-      .chat-card-title {
-        font-family: DouyinSans;
-        font-weight: bold;
-        font-size: 36rpx;
-        color: #5255e6;
-        // line-height: 24rpx;
-        background: linear-gradient(-56deg, #4d50dd 0%, #3e6aff 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        margin-bottom: 12rpx;
+      .chat-card-title-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16rpx;
+
+        .chat-card-title {
+          font-family: DouyinSans;
+          font-weight: bold;
+          font-size: 36rpx;
+          color: #5255e6;
+          // line-height: 24rpx;
+          background: linear-gradient(-56deg, #4d50dd 0%, #3e6aff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .more-link {
+          display: flex;
+          align-items: center;
+          .icon-refresh {
+            width: 36rpx;
+            height: 36rpx;
+            margin-right: 8rpx;
+          }
+          .more-text {
+            font-size: 26rpx;
+            color: #333;
+          }
+        }
       }
 
       .chat-card-desc {
@@ -1088,15 +1120,16 @@ export default {
         margin-bottom: 12rpx;
       }
 
-      .chat-card-questions {
-        display: flex;
-        flex-direction: column;
-        gap: 16rpx;
+      .qa-list {
+        margin-top: 32rpx;
+        .qa-item {
+          margin-top: 16rpx;
 
-        .question-item {
-          font-size: 28rpx;
-          color: #333333;
-          line-height: 1.5;
+          .qa-question {
+            font-size: 28rpx;
+            color: #333333;
+            line-height: 1.5;
+          }
         }
       }
     }