czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增帮助中心

Browse Source
This commit is contained in:
gyq
2026-03-13 16:30:56 +08:00
parent d30407b26f
commit 13890e3f8d
3 changed files with 237 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/system/index.js Normal file
View File

@@ -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'
});
}

215
src/layout/components/NavBar/components/HellpCenter.vue Normal file
View File

@@ -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>

11
src/layout/components/NavBar/components/NavbarRight.vue
View File

@@ -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>