公告、对话、发现、获取次数的弹窗跳转、点击漂浮文字询问问题

4 months ago · 80e414f7e3
3 changed files with 613 additions and 428 deletions
--- a/src/views/AIchat.vue
+++ b/src/views/AIchat.vue
@ -1,71 +1,93 @@
 <script setup>
-import { ref, onMounted, watch, nextTick } from 'vue'
-import { ElDialog } from 'element-plus'
-import { getReplyStreamAPI } from '../api/AIxiaocaishen'
+import { ref, onMounted, watch, nextTick } from "vue";
+import { ElDialog } from "element-plus";
+import { getReplyStreamAPI } from "../api/AIxiaocaishen";

 // 随机GIF
-const currentGif = ref('')
+const currentGif = ref("");

 // 新闻飘屏数据
-const newsList = ref(Array(10).fill().map((_, i) => ({
+
+const newsList = ref(
+  Array(10)
+    .fill()
+    .map((_, i) => ({
      title: `引导提出问题 ${i + 1}`,
-    content: `新闻 ${i + 1} 的详细内容...`
-})))
+      content: `新闻 ${i + 1} 的详细内容...`,
+    }))
+);

+// 定义自定义事件
+const emit = defineEmits(["updateMessage", "sendMessage"]);

 // 弹窗控制
-const dialogVisible = ref(false)
-const currentNews = ref('')
+
+const dialogVisible = ref(false);
+const currentNews = ref("");
 const showNews = (news) => {
-    currentNews.value = news
-    dialogVisible.value = true
-}
+  currentNews.value = news;
+  dialogVisible.value = true;
+  // 触发自定义事件
+  emit("updateMessage", news.title);
+  emit("sendMessage");
+};

 // 获取消息
 const props = defineProps({
  messages: Array,
-})
+});

-watch(() => props.messages, async (newVal, oldVal) => {
-    console.log('消息列表已更新，最新消息:', newVal[newVal.length - 1])
+watch(
+  () => props.messages,
+  async (newVal, oldVal) => {
+    console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1]);
    // 在此处添加需要执行的逻辑
    const response = await getReplyStreamAPI({
-        "workflow_id": "7480464341100494863",
-        "parameters": {
-            "input": newVal[newVal.length - 1].content
-        }
+      workflow_id: "7480464341100494863",
+      parameters: {
+        input: newVal[newVal.length - 1].content,
+      },
    });
    const reader = response.body.getReader();

-    console.log(response, 'response')
-    console.log(reader, 'reader')
-
-}, { deep: true, immediate: true })
+    console.log(response, "response");
+    console.log(reader, "reader");
+  },
+  { deep: true, immediate: true }
+);

 // 初始化随机GIF
 onMounted(() => {
-    const random = Math.floor(Math.random() * 4) + 1
-    console.log(random, 'random')
-    currentGif.value = `src/assets/img/AIchat/AIgif${random}.gif`
-})
+  const random = Math.floor(Math.random() * 4) + 1;
+  console.log(random, "random");
+  currentGif.value = `src/assets/img/AIchat/AIgif${random}.gif`;
+});
 </script>

 <template>
  <div class="chat-container">
    <!-- GIF区域 -->
    <div class="gif-area">
-            <img :src="currentGif" alt="AI动画">
+      <img :src="currentGif" alt="AI动画" />

      <div class="marquee-container">
        <div class="marquee-row top">
-                    <div v-for="(news, index) in newsList.slice(0, 5)" :key="'top' + index" class="marquee-item"
-                        @click="showNews(news)">
+          <div
+            v-for="(news, index) in newsList.slice(0, 5)"
+            :key="'top' + index"
+            class="marquee-item"
+            @click="showNews(news)"
+          >
            {{ news.title }}
          </div>
        </div>
        <div class="marquee-row bottom">
-                    <div v-for="(news, index) in newsList.slice(5, 10)" :key="'bottom' + index" class="marquee-item"
-                        @click="showNews(news)">
+          <div
+            v-for="(news, index) in newsList.slice(5, 10)"
+            :key="'bottom' + index"
+            class="marquee-item"
+            @click="showNews(news)"
+          >
            {{ news.title }}
          </div>
        </div>
@ -74,7 +96,11 @@ onMounted(() => {

    <!-- 消息区域 -->
    <div class="message-area">
-            <div v-for="(msg, index) in messages" :key="index" :class="['message-bubble', msg.sender]">
+      <div
+        v-for="(msg, index) in messages"
+        :key="index"
+        :class="['message-bubble', msg.sender]"
+      >
        {{ msg.content }}
      </div>
    </div>
@ -112,7 +138,6 @@ onMounted(() => {
  left: 50%;
  transition: all 0.3s;
  /* 添加过渡效果 */
-
 }

 .marquee-container {
--- a/src/views/Announcement.vue
+++ b/src/views/Announcement.vue
@ -0,0 +1,40 @@
+<script setup></script>
+<template>
+  <el-main class="homepage-body">
+    <div class="main-wrapper">
+      <img
+        src="src\assets\img\AIchat\AIgif1.gif"
+        alt="图片加载失败"
+        class="logo1"
+      />
+      <!-- 一段文字，水平居中，宽度为500px -->
+
+      <div style="width: 500px; margin: 0 auto; text-align: center">
+        <p>
+          欢迎使用AI智能问答系统，本系统基于OpenAI的GPT-3.5模型，为您提供智能问答服务。
+        </p>
+        <p>这个是公告部分</p>
+      </div>
+    </div>
+  </el-main>
+</template>
+<style scoped>
+.homepage-body {
+  padding: 0px;
+  height: calc(100% - 70px);
+  /* 根据底部高度调整 */
+}
+.main-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.logo1 {
+  /* 居中显示 30%大小 不要拉伸*/
+  display: block;
+  width: 30%;
+  height: auto;
+  /* 水平居中 */
+  margin: 0 auto;
+}
+</style>
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@ -1,96 +1,147 @@
 <script setup>
 // 导入
-import { ref, computed, onMounted, watch, nextTick } from 'vue'
-import { setHeight } from '../utils/setHeight'
-import { getReplyAPI } from '../api/AIxiaocaishen'
-import AIchat from '../views/AIchat.vue'
-import AIfind from '../views/AIfind.vue'
+import { ref, computed, onMounted, watch, nextTick } from "vue";
+import { setHeight } from "../utils/setHeight";
+import { getReplyAPI } from "../api/AIxiaocaishen";
+import AIchat from "../views/AIchat.vue";
+import AIfind from "../views/AIfind.vue";
 // 变量
 // 将默认值改为从 sessionStorage 中获取，如果没有则使用默认值 'aifindCow'为第一个默认tab
-const activeTab = ref(sessionStorage.getItem('activeTabAI') || 'AIchat')
-const activeIndex = ref(parseInt(sessionStorage.getItem('activeIndexAI') || '0'))
+const activeTab = ref(sessionStorage.getItem("activeTabAI") || "AIchat");
+const activeIndex = ref(
+  parseInt(sessionStorage.getItem("activeIndexAI") || "0")
+);

 const tabs = computed(() => [
  {
-        name: 'AIchat',
-        label: 'AI对话'
+    name: "AIchat",
+    label: "AI对话",
  },
  {
-        name: 'AIfind',
-        label: '发现'
-    }
-])
-const setActiveTab = (tab, index) => {
-    activeTab.value = tab
-    activeIndex.value = index // 给索引值
-    // 存储当前选中的 tab 和 index 到 sessionStorage
-    sessionStorage.setItem('activeTabAI', tab)
-    sessionStorage.setItem('activeIndexAI', index.toString())
-    setHeight(document.getElementById('testId')) // 给父组件发送窗口高度
-}
-// 跳转
+    name: "AIfind",
+    label: "发现",
+  },
+]);
+
+// 修改 setActiveTab 方法，添加一个可选参数 forceAIchat
+const setActiveTab = (tab, index, forceAIchat = false) => {
+  isAnnouncementVisible.value = false;
+  if (forceAIchat && activeTab.value !== "AIchat") {
+    activeTab.value = "AIchat";
+    activeIndex.value = 0;
+    sessionStorage.setItem("activeTabAI", "AIchat");
+    sessionStorage.setItem("activeIndexAI", "0");
+  } else {
+    activeTab.value = tab;
+    activeIndex.value = index;
+    sessionStorage.setItem("activeTabAI", tab);
+    sessionStorage.setItem("activeIndexAI", index.toString());
+  }
+  setHeight(document.getElementById("testId")); // 给父组件发送窗口高度
+};
+
+// 修改 activeComponent 的计算逻辑
 const activeComponent = computed(() => {
-    return activeTab.value === 'AIchat' ? AIchat : AIfind
-})
+  if (isAnnouncementVisible.value) {
+    return Announcement;
+  }
+  return activeTab.value === "AIchat" ? AIchat : AIfind;
+});
+
+// 新增一个方法，调用时先判断是否处于 AIchat，若不在则跳转到 AIchat
+const ensureAIchat = () => {
+  setActiveTab("AIchat", 0, true);
+};

 // 获取次数
 const getCount = () => {
-    console.log('获取次数')
-}
+  console.log("获取次数");
+};

 // 深度思考
-const isThinking = ref(false)
+const isThinking = ref(false);
 const toggleThink = () => {
-    isThinking.value = !isThinking.value
-}
+  isThinking.value = !isThinking.value;
+};

 // 发送消息
-const message = ref('');
+const message = ref("");
 // 传输对象
-const messages = ref([])
+const messages = ref([]);
 // 信息加载状态
-const isLoading = ref(false)
+const isLoading = ref(false);
 // 在 sendMessage 方法中添加触发逻辑
-const triggerFetch = ref(false)
+const triggerFetch = ref(false);

+// 添加用户消息
+const updateMessage = (title) => {
+  message.value = title;
+  console.log("updateMessage 的值:", title);
+};
 const sendMessage = async () => {
-    if (!message.value) return
-    if (isLoading.value) return
+  // 调用 ensureAIchat 确保跳转到 AIchat 页面
+  ensureAIchat();

-    // 添加用户消息
+  if (!message.value) return;
+  if (isLoading.value) return;
+
+  const sendMessage = () => {
+    // 处理发送消息的逻辑
+
+    console.log("sendMessage 的值:", message.value);
+    messages.value.push({ content: message.value, sender: "user" });
+  };
  messages.value.push({
-        sender: 'user',
+    sender: "user",
    content: message.value,
-        timestamp: new Date().toISOString()
-    })
+
+    timestamp: new Date().toISOString(),
+  });

  // 重置消息输入框
-    message.value = ''

-}
+  message.value = "";
+};

 // 公告
+// 引入公告组件
+import Announcement from "./Announcement.vue";
+
+// 新增一个变量来控制是否显示公告页面
+const isAnnouncementVisible = ref(false);
+
 const showAnnouncement = () => {
-    console.log('打开公告')
-}
+  console.log("打开公告");
+  isAnnouncementVisible.value = true; // 显示公告页面
+};
+
+// 点击剩余次数会弹出的弹窗
+// 新增一个 ref 来控制弹窗的显示与隐藏
+const dialogVisible = ref(false);
 // 获取次数
 const showCount = () => {
-    console.log('显示剩余次数')
-}
+  console.log("显示剩余次数");
+  // 显示弹窗
+  dialogVisible.value = true;
+  console.log("dialogVisible 的值:", dialogVisible.value); // 添加日志确认
+};

 // 保证发送消息时，滚动屏在底部
-const tabContent = ref(null)
-watch(messages, async () => {
-    await nextTick()
+const tabContent = ref(null);
+watch(
+  messages,
+  async () => {
+    await nextTick();
    if (tabContent.value) {
-        tabContent.value.scrollTop = tabContent.value.scrollHeight
+      tabContent.value.scrollTop = tabContent.value.scrollHeight;
    }
-}, { deep: true, immediate: true })
+  },
+  { deep: true, immediate: true }
+);

 onMounted(() => {
-    setHeight(document.getElementById('testId')) // 给父组件发送窗口高度
-})
-
+  setHeight(document.getElementById("testId")); // 给父组件发送窗口高度
+});
 </script>

 <template>
@ -100,33 +151,55 @@ onMounted(() => {
      <el-header class="homepage-head">
        <!-- logo -->
        <div class="homepage-logo">
-                    <img src="src\assets\img\homePage\logo.png" alt="图片加载失败" class="logo1">
-                    <img src="src\assets\img\homePage\madeInHL.png" alt="图片加载失败" class="logo2">
+          <img
+            src="src\assets\img\homePage\logo.png"
+            alt="图片加载失败"
+            class="logo1"
+          />
+          <img
+            src="src\assets\img\homePage\madeInHL.png"
+            alt="图片加载失败"
+            class="logo2"
+          />
        </div>

        <div class="homepage-right-group">
          <div class="count-badge" @click="showCount">
-                        <img src="src\assets\img\homePage\get-count-all.png" class="action-btn">
+            <img
+              src="src\assets\img\homePage\get-count-all.png"
+              class="action-btn"
+            />
            <div class="count-number">1000次</div>
          </div>
-                    <img src="src\assets\img\homePage\announcement.png" class="announcement-btn action-btn"
-                        @click="showAnnouncement">
+          <img
+            src="src\assets\img\homePage\announcement.png"
+            class="announcement-btn action-btn"
+            @click="showAnnouncement"
+          />
        </div>
-
      </el-header>
      <!-- 主体部分：小人  问题轮询图  对话内容 -->
      <el-main class="homepage-body">
        <div class="main-wrapper">
          <section class="tab-section">
            <div class="tab-container">
-                            <div v-for="(tab, index) in tabs" :key="tab.name" @click="setActiveTab(tab.name, index)"
-                                :class="['tab-item', { active: activeIndex === index }]">
+              <div
+                v-for="(tab, index) in tabs"
+                :key="tab.name"
+                @click="setActiveTab(tab.name, index)"
+                :class="['tab-item', { active: activeIndex === index }]"
+              >
                <span>{{ tab.label }}</span>
              </div>
            </div>
          </section>
          <div class="tab-content" ref="tabContent">
-                        <component :is="activeComponent" :messages="messages" />
+            <component
+              :is="activeComponent"
+              :messages="messages"
+              @updateMessage="updateMessage"
+              @sendMessage="sendMessage"
+            />
          </div>
        </div>
      </el-main>
@ -135,26 +208,77 @@ onMounted(() => {
        <!-- 第一行按钮 -->
        <div class="footer-first-line">
          <div class="left-group">
-                        <img v-if="isThinking" src="src\assets\img\homePage\tail\think-active.png" @click="toggleThink"
-                            class="action-btn">
-                        <img v-else src="src\assets\img\homePage\tail\think-no-active.png" @click="toggleThink"
-                            class="action-btn">
-                        <img src="src\assets\img\homePage\tail\language.png" @click="changeLanguage" class="action-btn">
-                        <img src="src\assets\img\homePage\tail\voice.png" @click="toggleVoice" class="action-btn">
+            <img
+              v-if="isThinking"
+              src="src\assets\img\homePage\tail\think-active.png"
+              @click="toggleThink"
+              class="action-btn"
+            />
+            <img
+              v-else
+              src="src\assets\img\homePage\tail\think-no-active.png"
+              @click="toggleThink"
+              class="action-btn"
+            />
+            <img
+              src="src\assets\img\homePage\tail\language.png"
+              @click="changeLanguage"
+              class="action-btn"
+            />
+            <img
+              src="src\assets\img\homePage\tail\voice.png"
+              @click="toggleVoice"
+              class="action-btn"
+            />
          </div>
-                    <img src="src\assets\img\homePage\tail\send.png" @click="sendMessage" class="action-btn send-btn">
+          <img
+            src="src\assets\img\homePage\tail\send.png"
+            @click="sendMessage"
+            class="action-btn send-btn"
+          />
        </div>

        <!-- 第二行输入框 -->
        <div class="footer-second-line">
-                    <img src="src\assets\img\homePage\tail\msg.png" class="msg-icon">
-                    <el-input type="textarea" v-model="message" :autosize="{ minRows: 1, maxRows: 4 }"
-                        placeholder="给AI小财神发消息..." class="msg-input"
-                        @keydown.enter.exact.prevent="isLoading ? null : sendMessage()" resize="none">
+          <img src="src\assets\img\homePage\tail\msg.png" class="msg-icon" />
+          <el-input
+            type="textarea"
+            v-model="message"
+            :autosize="{ minRows: 1, maxRows: 4 }"
+            placeholder="给AI小财神发消息..."
+            class="msg-input"
+            @keydown.enter.exact.prevent="isLoading ? null : sendMessage()"
+            resize="none"
+          >
          </el-input>
        </div>
      </el-footer>
    </el-container>
+    <!-- 弹窗 -->
+    <!-- 新增弹窗组件 -->
+    <el-dialog v-model="dialogVisible" width="500">
+      <!-- 自定义标题插槽，实现居中显示 -->
+      <template #header>
+        <div style="text-align: center">
+          <span>活动规则</span>
+        </div>
+      </template>
+      <!-- 中间内容部分 -->
+      <p>
+        活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则
+      </p>
+      <template #footer>
+        <!-- 添加一个div来包裹按钮，并设置样式使其居中 -->
+        <div style="text-align: center">
+          <el-button
+            style="background-color: orange; color: white; border: none"
+            @click="dialogVisible = false"
+          >
+            去充值
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
  </div>
 </template>

@ -226,7 +350,6 @@ onMounted(() => {
  overflow: hidden;
 }

-
 .el-container .el-header {
  height: 10%;
  /* 设置头部高度 */
@ -356,7 +479,6 @@ onMounted(() => {
  height: auto;
 }

-
 /* 尾部 */
 .homepage-footer {
  display: flex;
@ -429,7 +551,6 @@ onMounted(() => {
    box-shadow: 0 4px 12px rgba(89, 24, 241, 0.3) !important;
 } */

-
 .msg-input {
  min-height: 34px;
  max-height: 120px;
@ -445,7 +566,6 @@ onMounted(() => {
  /* 隐藏垂直滚动条 */
  box-shadow: 0 4px 12px rgba(89, 24, 241, 0.3);
  background: #fff;
-
 }

 .msg-input:focus {