498 lines
14 KiB
Vue
498 lines
14 KiB
Vue
<template>
|
|
<div class="help-center">
|
|
<div class="box-top">
|
|
<div class="title">
|
|
<h4>AI著作权·帮助中心</h4>
|
|
<p>灵活搭建更高效的著作权办理平台</p>
|
|
</div>
|
|
</div>
|
|
<div class="box-bottom">
|
|
<div class="box">
|
|
<div class="boxTitle">
|
|
<h3>帮助中心</h3>
|
|
<span>
|
|
<input type="text" id="txtInput" placeholder="输入问题关键字" v-model="searchQuery">
|
|
<button id="search" @click="search()">搜索</button>
|
|
<!-- <input id="search" name value="搜索" onclick="sendSearchRequest()"> -->
|
|
</span>
|
|
</div>
|
|
<div class="boxContent">
|
|
|
|
<el-container>
|
|
<el-aside width="260px" style="height: 100vh;">
|
|
<el-row class="tac">
|
|
<el-col>
|
|
<!-- <h5 class="mb-2">帮助中心</h5> -->
|
|
<el-menu
|
|
active-text-color="#febe54"
|
|
default-active="item.index"
|
|
class="el-menu-vertical-demo"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
mode="vertical"
|
|
>
|
|
|
|
<!-- 一级标题 -->
|
|
<el-sub-menu v-for="(item, index) in items" :key="index" :menuId="item.id" :hasDetail="item.hasDetail" @click="menuIdContend(item.id,item.hasDetail)" :index="item.index">
|
|
<template #title>
|
|
<el-icon><Expand /></el-icon>
|
|
<span>{{ item.name }}</span>
|
|
<!-- <i v-if="item.subList && item.subList.length > 0" class="el-icon-arrow-down"></i> -->
|
|
</template>
|
|
|
|
|
|
<!-- 二级标题 -->
|
|
<el-sub-menu v-for="(item2, index) in item.subList" :key="index" :menuId="item2.id"
|
|
:hasDetail="item2.hasDetail" @click="menuIdContend(item2.id, item2.hasDetail)" :index="item2.index">
|
|
<template #title>{{ item2.name}}</template>
|
|
|
|
<!-- 三级标题 -->
|
|
<el-menu-item v-for="(item3, index) in item2.subList" :key="index" :menuId="item3.id"
|
|
:hasDetail="item3.hasDetail" @click="menuIdContend(item3.id, item3.hasDetail)" :index="item3.index">
|
|
{{ item3.name }}
|
|
</el-menu-item>
|
|
|
|
</el-sub-menu>
|
|
|
|
</el-sub-menu>
|
|
|
|
</el-menu>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-aside>
|
|
|
|
<el-main>
|
|
<div class="contentBox" id="contentArea" v-show="xs1"></div>
|
|
<div class="searchXS" v-show="xs2">
|
|
<!-- <div class="searchXS" > -->
|
|
<div class="dataList" v-show="result1">
|
|
<ul class="data">
|
|
<li class="list" v-for="(data, index) in pagedData" :key=index>
|
|
<h4 class="dataTitle" :menuId="data.helpTypeId" @click="detailContent(data.helpTypeId)">{{ data.title }}</h4>
|
|
<p class="dataContent">{{ getPlainText(data.richContent) }}</p>
|
|
</li>
|
|
</ul>
|
|
<div class="pagin">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handlePageChange"
|
|
:page-size="pageSize"
|
|
:current-page="currentPage"
|
|
:total="totalData"
|
|
layout="total, prev, pager, next, jumper"
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
<div class="noData" v-show="result0">
|
|
很抱歉，没有找到符合的记录，请更换关键词重新搜索！
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
|
|
</div>
|
|
<!-- <div class="boxFooter"></div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
// import { ref, watch, onMounted } from 'vue'
|
|
// import { useRoute, useRouter } from 'vue-router'
|
|
import axios from 'axios'
|
|
// import { useRoute } from 'vue-router';
|
|
// import jsdom from 'jsdom';
|
|
export default {
|
|
props: {
|
|
searchQuery: String
|
|
},
|
|
|
|
// setup() {
|
|
// const searchQuery = ref('')
|
|
// const result = ref('')
|
|
// const route = useRoute()
|
|
|
|
|
|
// onMounted(() => {
|
|
// if (route.query.q) {
|
|
// searchQuery.value = route.query.q
|
|
|
|
// search()
|
|
// console.log(searchQuery.value);
|
|
// // fetchSearchResults()
|
|
// }
|
|
// })
|
|
|
|
// watch(() => route.query.q, (newQuery) => {
|
|
// if(newQuery) {
|
|
// searchQuery.value = newQuery
|
|
// search()
|
|
// console.log(searchQuery.value);
|
|
// // fetchSearchResults()
|
|
// }
|
|
// })
|
|
|
|
// const search = async () => {
|
|
// try {
|
|
|
|
// const response = await axios.get(`https://www.aimzhu.com/operator/app/help-detail/listpagerelease/10/1?keywords=${searchQuery.value}`)
|
|
// // alert(11)
|
|
// // console.log(response.data);
|
|
|
|
// this.xs1 = false
|
|
// this.xs2 = true
|
|
// this.pagedData = response.data.rows
|
|
// this.totalData = response.data.total
|
|
// if (this.totalData > 0) {
|
|
// this.result0 = false
|
|
// this.result1 = true
|
|
// } else {
|
|
// this.result0 = true
|
|
// this.result1 = false
|
|
// }
|
|
// // console.log(this.searchQuery);
|
|
|
|
// } catch (error) {
|
|
// console.error(error)
|
|
// }
|
|
|
|
// }
|
|
// return {
|
|
// searchQuery,
|
|
// result,
|
|
// // search
|
|
// // onInput
|
|
// };
|
|
// },
|
|
|
|
data() {
|
|
return {
|
|
number: 0,
|
|
items: [],
|
|
content: [],
|
|
// 默认展开的菜单项索引数组
|
|
defaultOpeneds: [],
|
|
// 用于追踪每个子菜单的展开状态
|
|
// openedMenus: [],
|
|
totalData: null,
|
|
pagedData: '',
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
searchQuery: '',
|
|
xs1: true,
|
|
xs2: false,
|
|
res: false,
|
|
res0: false,
|
|
result0: false,
|
|
result1: false
|
|
}
|
|
},
|
|
methods: {
|
|
change: function (index) {
|
|
this.number = index
|
|
},
|
|
menuIdContend (itemId0,itemHasDetail) {
|
|
document.querySelector('#txtInput').value = ''
|
|
this.xs1 = true
|
|
this.xs2 = false
|
|
var contendId = itemId0
|
|
var detail = itemHasDetail
|
|
let contentBox = document.querySelector('.contentBox')
|
|
|
|
if(detail === 1 ) {
|
|
var url = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId
|
|
axios.get(url).then(response => {
|
|
console.log(response.data)
|
|
var content = response.data[0].richContent
|
|
// console.log(content)
|
|
contentBox.innerHTML = content
|
|
|
|
})
|
|
} else {
|
|
// alert(11)
|
|
}
|
|
|
|
},
|
|
|
|
getData () {
|
|
axios.get(`https://www.aimzhu.com/operator/app/help-detail/listpagerelease/${this.pageSize}/${this.currentPage}?keywords=${this.searchQuery}`)
|
|
.then(response => {
|
|
// console.log(response.data);
|
|
this.xs1 = false
|
|
this.xs2 = true
|
|
this.pagedData = response.data.rows
|
|
this.totalData = response.data.total
|
|
if (this.totalData > 0) {
|
|
this.result0 = false
|
|
this.result1 = true
|
|
} else {
|
|
this.result0 = true
|
|
this.result1 = false
|
|
}
|
|
console.log(this.searchQuery);
|
|
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error)
|
|
})
|
|
|
|
},
|
|
search() {
|
|
this.currentPage = 1
|
|
this.getData()
|
|
// axios.get(`https://www.aimzhu.com/operator/app/help-detail/listrelease?keywords=${textInput}`)
|
|
},
|
|
|
|
// pagedData1() {
|
|
// const start = (this.currentPage - 1) * this.pageSize;
|
|
// const end = this.currentPage * this.pageSize;
|
|
// return this.pagedData.slice(start, end);
|
|
// },
|
|
|
|
updatePagination() {
|
|
this.pagedItems = this.pagedData.slice(
|
|
(this.currentPage - 1) * this.pageSize,
|
|
this.currentPage * this.pageSize
|
|
);
|
|
},
|
|
|
|
handlePageChange(page) {
|
|
this.currentPage = page;
|
|
// this.search();
|
|
this.getData()
|
|
// alert(this.currentPage)
|
|
},
|
|
handleSizeChange(newSize) {
|
|
this.pageSize = newSize;
|
|
this.currentPage = 1;
|
|
this.search();
|
|
},
|
|
|
|
getPlainText(richContent) {
|
|
// 使用正则表达式从richContent中提取纯文本内容
|
|
const regex = /<[^>]+>/gi; // 匹配所有richContent标签
|
|
const plainText = richContent.replace(regex, ''); // 替换掉所有richContent标签
|
|
return plainText;
|
|
},
|
|
|
|
handleOpen(key, keyPath) {
|
|
// 只保留当前展开的菜单项索引
|
|
this.defaultOpeneds = [key]
|
|
|
|
// // 只展开当前点击的菜单
|
|
// this.openedMenus = [key]
|
|
},
|
|
handleClose(key, keyPath) {
|
|
// 关闭时清空默认展开的菜单项索引数组
|
|
this.defaultOpeneds = []
|
|
|
|
// const index = this.openedMenus.indexOf(key);
|
|
// if (index !== -1) {
|
|
// // 只收起当前点击的菜单
|
|
// this.openedMenus.splice(index, 1)
|
|
// }
|
|
},
|
|
|
|
detailContent(menId) {
|
|
this.xs1 = true
|
|
this.xs2 = false
|
|
var detailContentId = menId
|
|
let contentBox = document.querySelector('.contentBox')
|
|
var url = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + detailContentId
|
|
axios.get(url).then(response => {
|
|
// console.log(response.data[0].richContent);
|
|
contentBox.innerHTML = response.data[0].richContent
|
|
})
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
document.querySelector('#txtInput').value = ''
|
|
this.xs1 = true
|
|
this.xs2 = false
|
|
axios.get('https://www.aimzhu.com/operator/app/help-type/helpAllListrelease').then(response => {
|
|
// console.log(response.data)
|
|
// this.items = response.data.name
|
|
this.items = response.data
|
|
|
|
// var textInput = document.querySelector('#txtInput').value
|
|
// if(textInput === '') {
|
|
// 默认渲染的数据
|
|
let contendId0 = response.data[0].id
|
|
let url0 = 'https://www.aimzhu.com/operator/app/help-detail/listrelease?helpTypeId=' + contendId0
|
|
axios.get(url0).then(response => {
|
|
// console.log(response.data[0].richContent);
|
|
var content0 = response.data[0].richContent
|
|
let contentBox0 = document.querySelector('.contentBox')
|
|
contentBox0.innerHTML = content0
|
|
})
|
|
// } else {
|
|
|
|
// }
|
|
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error)
|
|
});
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.help-center {
|
|
position: relative;
|
|
}
|
|
|
|
.help-center .box-top {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 605px;
|
|
background: url(/assets/img/helpcenter-bj.png) no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
.help-center .box-top .title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 1000px;
|
|
height: 150px;
|
|
margin: 0 auto;
|
|
/* border: 2px solid red; */
|
|
}
|
|
|
|
.help-center .box-top h4 {
|
|
width: 500px;
|
|
font-size: 30px;
|
|
color: #74491a;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.help-center .box-top p {
|
|
width: 500px;
|
|
font-size: 16px;
|
|
letter-spacing: 5px;
|
|
color: #9a7148;
|
|
}
|
|
|
|
.help-center .box-bottom {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
/* height: 700px; */
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.help-center .box-bottom .box {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
top: -200px;
|
|
bottom: 50px;
|
|
width: 1000px;
|
|
background-color: #FFF;
|
|
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
|
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
|
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
|
}
|
|
|
|
.help-center .box-bottom .box .boxTitle {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
margin: 25px;
|
|
/* border: 1px solid red; */
|
|
}
|
|
|
|
.help-center .box-bottom .box .boxTitle h3 {
|
|
display: flex;
|
|
font-size: 24px;
|
|
color: #333;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.help-center .box-bottom .box .boxTitle span {
|
|
display: flex;
|
|
height: 38px;
|
|
margin: auto 0;
|
|
/* align-content: center; */
|
|
}
|
|
|
|
.help-center .box-bottom .box .boxTitle span #txtInput {
|
|
display: block;
|
|
width: 380px;
|
|
height: 38px;
|
|
margin-top: 0;
|
|
padding-left: 14px;
|
|
font-size: 14px;
|
|
border: 0;
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
|
|
border-radius: 3px 0 0 3px,
|
|
|
|
}
|
|
|
|
.help-center .box-bottom .box .boxTitle span #search {
|
|
display: block;
|
|
width: 85px;
|
|
height: 38px;
|
|
border: none;
|
|
background-color: #febe54;
|
|
font-size: 15px;
|
|
letter-spacing: 2px;
|
|
color: #FFF;
|
|
}
|
|
#contentArea {
|
|
line-height: 2.1;
|
|
}
|
|
.searchXS .dataList {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.searchXS .dataList li {
|
|
margin-bottom: 12px;
|
|
border-bottom: 1px solid #CCC;
|
|
}
|
|
.searchXS .dataList .list h4 {
|
|
/* margin-bottom: 6px; */
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
color: #0095ff;
|
|
}
|
|
.searchXS .dataList .list h4:hover {
|
|
opacity: 0.7;
|
|
}
|
|
.searchXS .dataList .list p {
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* position: relative; */
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
.searchXS .noData {
|
|
width: 100%;
|
|
height: 40px;
|
|
border: 1px solid #CCC;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
color: #474747;
|
|
padding-left: 10px;
|
|
}
|
|
.searchXS .dataList .pagin {
|
|
position: absolute;
|
|
right: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
</style> |