From 13890e3f8d1f802069083827f00cea11eac7e755 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Fri, 13 Mar 2026 16:30:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B8=AE=E5=8A=A9=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/index.js                       |  15 ++
 .../NavBar/components/HellpCenter.vue         | 215 ++++++++++++++++++
 .../NavBar/components/NavbarRight.vue         |  11 +-
 3 files changed, 237 insertions(+), 4 deletions(-)
 create mode 100644 src/api/system/index.js
 create mode 100644 src/layout/components/NavBar/components/HellpCenter.vue

diff --git a/src/api/system/index.js b/src/api/system/index.js
new file mode 100644
index 0000000..df908e8
--- /dev/null
+++ b/src/api/system/index.js
@@ -0,0 +1,15 @@
+import request from "@/utils/request";
+import {
+  Account_BaseUrl,
+  Product_BaseUrl,
+  Market_BaseUrl,
+  System_BaseUrl
+} from "@/api/config";
+
+// 帮助中心 
+export function getHelp() {
+  return request({
+    url: `${System_BaseUrl + "/user/getHelp"}`,
+    method: 'get'
+  });
+}
\ No newline at end of file
diff --git a/src/layout/components/NavBar/components/HellpCenter.vue b/src/layout/components/NavBar/components/HellpCenter.vue
new file mode 100644
index 0000000..e1cd34e
--- /dev/null
+++ b/src/layout/components/NavBar/components/HellpCenter.vue
@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <el-text size="large" style="margin: 0 14px;" @click="visible = true">帮助中心</el-text>
+    <el-dialog title="帮助中心" width="1000px" v-model="visible" append-to-body>
+      <div class="help_container">
+        <div class="header">关注官方公众号，查看详细教程视频，快速掌握使用方法</div>
+        <div class="wrap">
+          <div class="item">
+            <div class="title">联系方式</div>
+            <div class="row">
+              <div class="left">
+                <div class="icon">
+                  <el-icon color="#fff">
+                    <PhoneFilled />
+                  </el-icon>
+                </div>
+                <el-text>客服电话</el-text>
+              </div>
+              <div class="right hover" @click="copyHandle(helpInfo.service_phone)">
+                <el-text type="primary">{{ helpInfo.service_phone }}</el-text>
+                <el-icon color="#666">
+                  <CopyDocument />
+                </el-icon>
+              </div>
+            </div>
+            <div class="row">
+              <div class="left">
+                <div class="icon">
+                  <el-icon color="#fff">
+                    <UserFilled />
+                  </el-icon>
+                </div>
+                <el-text>QQ告前咨询</el-text>
+              </div>
+              <div class="right hover" @click="copyHandle(helpInfo.qq_consult)">
+                <el-text type="primary">{{ helpInfo.qq_consult }}</el-text>
+                <el-icon color="#666">
+                  <CopyDocument />
+                </el-icon>
+              </div>
+            </div>
+            <div class="row" style="margin-top: 4px;">
+              <div class="left">
+                <div class="icon" style="background-color: #fff;">
+                </div>
+                <el-text>QQ投诉通道</el-text>
+              </div>
+              <div class="right hover" @click="copyHandle(helpInfo.qq_complaint)">
+                <el-text type="primary">{{ helpInfo.qq_complaint }}</el-text>
+                <el-icon color="#666">
+                  <CopyDocument />
+                </el-icon>
+              </div>
+            </div>
+            <div class="row">
+              <div class="left">
+                <div class="icon">
+                  <el-icon color="#fff">
+                    <Check />
+                  </el-icon>
+                </div>
+                <el-text>上班时间</el-text>
+              </div>
+              <div class="right">
+                <el-text type="primary">{{ helpInfo.work_time }}</el-text>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">官方公众号</div>
+            <div class="intro">
+              <el-text type="info">关注后即可查看所有操作教程视频</el-text>
+            </div>
+            <div class="ewm_wrap">
+              <el-image :src="helpInfo.help_ac_qrcode" style="width: 145px;height:145px;"></el-image>
+              <el-text type="danger">关注后即可查看所有操作教程视频</el-text>
+              <el-text type="info">微信扫描识别二维码关注，获取更多服务</el-text>
+            </div>
+            <div class="step_wrap" v-if="helpInfo.official_account">
+              <div class="row" v-for="(item, index) in helpInfo.official_account.split(';')" :key="index">
+                <div class="left">
+                  <div class="icon">
+                    <span class="t">{{ index + 1 }}</span>
+                  </div>
+                  <el-text>{{ item }}</el-text>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import useClipboard from "vue-clipboard3";
+import { getHelp } from '@/api/system'
+const { toClipboard } = useClipboard();
+
+const visible = ref(false);
+
+// 复制
+async function copyHandle(text) {
+  try {
+    await toClipboard(text);
+    ElNotification({
+      title: "成功",
+      message: `复制成功`,
+      type: "success",
+    });
+    console.log("Copied to clipboard");
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+// 获取帮助中心信息
+const helpInfo = ref({});
+async function getHelpAjax() {
+  try {
+    const res = await getHelp();
+    helpInfo.value = res;
+
+    console.log('Help Info:', helpInfo.value);
+
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+onMounted(() => {
+  getHelpAjax()
+}); 
+</script>
+
+<style lang="scss" scoped>
+.header {
+  font-size: 16px;
+  color: #333;
+}
+
+.wrap {
+  display: flex;
+  margin-top: 37px;
+  padding: 0 28px;
+
+  .item {
+    flex: 1;
+
+    &:first-child {
+      border-right: 2px solid #EDEDED;
+      padding-right: 38px;
+    }
+
+    &:last-child {
+      padding-left: 38px;
+    }
+
+    .title {
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 16px;
+
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .icon {
+          width: 22px;
+          height: 22px;
+          border-radius: 50%;
+          background-color: var(--el-color-primary);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+
+          .t {
+            font-size: 12px;
+            color: #fff;
+          }
+        }
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        &.hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .ewm_wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 16px;
+      gap: 16px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/components/NavBar/components/NavbarRight.vue b/src/layout/components/NavBar/components/NavbarRight.vue
index dbe906b..7cb5b49 100644
--- a/src/layout/components/NavBar/components/NavbarRight.vue
+++ b/src/layout/components/NavBar/components/NavbarRight.vue
@@ -2,6 +2,8 @@
   <div class="navbar__right">
     <!-- 非手机设备（窄屏）才显示 -->
     <template v-if="!isMobile">
+      <!-- 帮助中心 -->
+      <HellpCenter />
       <!-- 搜索 -->
       <MenuSearch />
 
@@ -35,6 +37,7 @@ import { useAppStore, useSettingsStore } from "@/store";
 
 import UserProfile from "./UserProfile.vue";
 import Notification from "./Notification.vue";
+import HellpCenter from "./HellpCenter.vue";
 
 const appStore = useAppStore();
 const settingStore = useSettingsStore();
@@ -48,7 +51,7 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
   align-items: center;
   justify-content: center;
 
-  & > * {
+  &>* {
     display: inline-block;
     min-width: 40px;
     height: $navbar-height;
@@ -67,12 +70,12 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
   margin: 10px 0;
 }
 
-.dark .navbar__right > *:hover {
+.dark .navbar__right>*:hover {
   background: rgb(255 255 255 / 20%);
 }
 
-.layout-top .navbar__right > *,
-.layout-mix .navbar__right > * {
+.layout-top .navbar__right>*,
+.layout-mix .navbar__right>* {
   color: #333;
 }
 </style>