新增帮助中心
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">
|
||||
<!-- 非手机设备（窄屏）才显示 -->
|
||||
<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();
|
||||
|
||||
Reference in New Issue
Block a user