新增帮助中心
This commit is contained in:
15
src/api/system/index.js
Normal file
15
src/api/system/index.js
Normal 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
215
src/layout/components/NavBar/components/HellpCenter.vue
Normal 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>
|
||||||
@@ -2,6 +2,8 @@
|
|||||||
<div class="navbar__right">
|
<div class="navbar__right">
|
||||||
<!-- 非手机设备（窄屏）才显示 -->
|
<!-- 非手机设备（窄屏）才显示 -->
|
||||||
<template v-if="!isMobile">
|
<template v-if="!isMobile">
|
||||||
|
<!-- 帮助中心 -->
|
||||||
|
<HellpCenter />
|
||||||
<!-- 搜索 -->
|
<!-- 搜索 -->
|
||||||
<MenuSearch />
|
<MenuSearch />
|
||||||
|
|
||||||
@@ -35,6 +37,7 @@ import { useAppStore, useSettingsStore } from "@/store";
|
|||||||
|
|
||||||
import UserProfile from "./UserProfile.vue";
|
import UserProfile from "./UserProfile.vue";
|
||||||
import Notification from "./Notification.vue";
|
import Notification from "./Notification.vue";
|
||||||
|
import HellpCenter from "./HellpCenter.vue";
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const settingStore = useSettingsStore();
|
const settingStore = useSettingsStore();
|
||||||
@@ -48,7 +51,7 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
& > * {
|
&>* {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
height: $navbar-height;
|
height: $navbar-height;
|
||||||
@@ -67,12 +70,12 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
|
|||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .navbar__right > *:hover {
|
.dark .navbar__right>*:hover {
|
||||||
background: rgb(255 255 255 / 20%);
|
background: rgb(255 255 255 / 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-top .navbar__right > *,
|
.layout-top .navbar__right>*,
|
||||||
.layout-mix .navbar__right > * {
|
.layout-mix .navbar__right>* {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user