update router
qianlishi
3 years ago
parent
daf84449eb
commit
7e424ec2e8
@ -1,59 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<el-button type="primary" size="mini" plain @click="goBack">返回</el-button>
|
|
||||||
<h2 class="helpTitle">{{helpTitle}}</h2>
|
|
||||||
<div class="answer" v-html="helpContent"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { queryById } from '@/api/helpCenter/helpCenter'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
id: '',
|
|
||||||
helpContent: '',
|
|
||||||
helpTitle: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.id = this.$route.query.id
|
|
||||||
this.queryById()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
queryById() {
|
|
||||||
queryById({helpId: this.id}).then(res => {
|
|
||||||
if(res.repCode === '0000') {
|
|
||||||
let helpContent = res.repData.helpContent
|
|
||||||
let helpContentVideo = helpContent.replace(/<oembed url/ig,"<video controls='controls' src").replace(/oembed>/ig, "video>")
|
|
||||||
this.helpContent = helpContentVideo;
|
|
||||||
this.helpTitle = res.repData.helpTitle
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scope>
|
|
||||||
.container .helpTitle{
|
|
||||||
font-size: 16px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 20px 0 5px;
|
|
||||||
}
|
|
||||||
.container .answer{
|
|
||||||
margin: 20px 0 0 0;
|
|
||||||
}
|
|
||||||
.answer .table table{
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
border: 1px double #b3b3b3;
|
|
||||||
}
|
|
||||||
.answer .table table td, .answer .table table th{
|
|
||||||
min-width: 2em;
|
|
||||||
padding: .4em;
|
|
||||||
border: 1px solid #bfbfbf;
|
|
||||||
}
|
|
||||||
video{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<div class="searchNum">搜索"<font style="color:#C03">{{searchInput}}</font>",共找到<b>{{totalCount}}</b>个相关的问题。</div>
|
|
||||||
<div class="infoBox" v-for="(item, index) in list" :key="index">
|
|
||||||
<div class="infoItem">
|
|
||||||
<div class="infoTitle" @click="goDetail(item)">{{item.helpTitle}}</div>
|
|
||||||
<div class="infoCon" v-html="item.helpContent"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { searchKeyWord } from '@/api/helpCenter/helpCenter'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
searchInput: '', // 搜索内容
|
|
||||||
totalCount: 0,
|
|
||||||
list: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
handler(obj) {
|
|
||||||
let val = obj.query.searchInput
|
|
||||||
this.searchInput = val
|
|
||||||
this.searchKeyWord(val)
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.searchInput = this.$route.query.searchInput
|
|
||||||
this.searchKeyWord(this.searchInput)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
searchKeyWord(val) {
|
|
||||||
searchKeyWord({keyWord: val}).then(res => {
|
|
||||||
if(res.repCode === '0000') {
|
|
||||||
this.list = res.repData.list
|
|
||||||
this.totalCount = res.repData.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
goDetail(item) {
|
|
||||||
this.$router.push({
|
|
||||||
path: `/helpCenList/detail`,
|
|
||||||
query: {
|
|
||||||
id: item.helpId,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.container .searchNum {
|
|
||||||
line-height: 32px;
|
|
||||||
padding: 0 15px;
|
|
||||||
color: #000;
|
|
||||||
font-size: 14px;
|
|
||||||
background: #FDFFC6;
|
|
||||||
margin: 0 0 6px 0;
|
|
||||||
}
|
|
||||||
.container .infoBox{
|
|
||||||
margin: 0 0 0 15px;
|
|
||||||
}
|
|
||||||
.container .infoItem{
|
|
||||||
margin: 25px 0;
|
|
||||||
}
|
|
||||||
.container .infoItem .infoTitle{
|
|
||||||
font-size: 16px;
|
|
||||||
color: #1E5494;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0 0 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.container .infoItem .infoTitle:hover{
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.container .infoItem .infoCon{
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<h2>{{title}}</h2>
|
|
||||||
<div class="title">
|
|
||||||
<div v-for="(item, index) in list" :key="index" class="item">• <span @click="itemClick(item)">{{item.helpTitle}}</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { querytitleByCategory } from '@/api/helpCenter/helpCenter'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: '',
|
|
||||||
list: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
handler(obj) {
|
|
||||||
this.title = obj.query.title
|
|
||||||
this.querytitleByCategory(obj.query.val)
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.title = this.$route.query.title
|
|
||||||
this.querytitleByCategory(this.$route.query.val)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
querytitleByCategory(value) {
|
|
||||||
this.title = this.title ? this.title : this.$store.state.help.title
|
|
||||||
let val = value ? value : this.$store.state.help.val
|
|
||||||
querytitleByCategory({helpCategory: val}).then(res => {
|
|
||||||
if(res.repCode === '0000') {
|
|
||||||
this.list = res.repData
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 详情
|
|
||||||
itemClick(item){
|
|
||||||
this.$router.push({
|
|
||||||
path: `/helpCenList/detail`,
|
|
||||||
query: {
|
|
||||||
id: item.helpId,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.container h2{
|
|
||||||
font-size: 16px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0 0 5px;
|
|
||||||
}
|
|
||||||
.container .title{
|
|
||||||
margin: 0 0 0 5px;
|
|
||||||
}
|
|
||||||
.container .title .item{
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 20px 0 0;
|
|
||||||
}
|
|
||||||
.container .title .item span{
|
|
||||||
color: #1E5494;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.container .title .item span:hover{
|
|
||||||
text-decoration:underline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<div class="header">
|
|
||||||
<el-row class="top">
|
|
||||||
<el-col :span="12" class="right">
|
|
||||||
<span @click="goHome">首页</span>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
<div class="search">
|
|
||||||
<el-input placeholder="请输入问题" v-model="searchInput" class="searchInput">
|
|
||||||
<el-button slot="append" @click="searchBtn">搜索</el-button>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
|
||||||
<div class="slider-left">
|
|
||||||
<div class="item"
|
|
||||||
:class="index==active?'active':''"
|
|
||||||
v-for="(item, index) in sliderList" :key="index"
|
|
||||||
@click="changeSelect(index, item)"
|
|
||||||
>
|
|
||||||
{{item.label}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="slider-right">
|
|
||||||
<router-view></router-view>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { queryForCodeSelect } from '@/api/helpCenter/helpCenter'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
searchInput: '',
|
|
||||||
sliderList: [],
|
|
||||||
active: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.queryForCodeSelect()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取所属分类
|
|
||||||
queryForCodeSelect() {
|
|
||||||
queryForCodeSelect().then(res => {
|
|
||||||
if(res.repCode === '0000') {
|
|
||||||
this.sliderList = res.repData.HELP_CATEGORY
|
|
||||||
this.$store.commit('setCategory', res.repData.HELP_CATEGORY[0])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
changeSelect(index,item) {
|
|
||||||
this.active = index
|
|
||||||
this.$router.push({
|
|
||||||
path: `/helpCenList/list`,
|
|
||||||
query: {id: index, val:item.value, title: item.label}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 搜索
|
|
||||||
searchBtn() {
|
|
||||||
// console.log(this.searchInput)
|
|
||||||
// this.$root.$emit('vehFlag', this.searchInput);
|
|
||||||
this.$router.push({
|
|
||||||
path: `/helpCenList/search`,
|
|
||||||
query: {
|
|
||||||
searchInput: this.searchInput
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 返回首页
|
|
||||||
goHome() {
|
|
||||||
this.$router.push({
|
|
||||||
path: '/index'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.container .header{
|
|
||||||
width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.container .header .top {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.container .header .top .left{
|
|
||||||
font-size: 18px;
|
|
||||||
color: #646464;
|
|
||||||
}
|
|
||||||
.container .header .top .left span:last-child{
|
|
||||||
margin-left: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #646464;
|
|
||||||
line-height: 25px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.container .header .top .left span:last-child:before{
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
width: 1px;
|
|
||||||
height: 18px;
|
|
||||||
background: #BBB;
|
|
||||||
margin-left: -15px;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
.container .header .top .left span img{
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.container .header .right{
|
|
||||||
text-align: right;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #646464;
|
|
||||||
}
|
|
||||||
.container .header .right span{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.search {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
background: #EFF5FB;
|
|
||||||
padding: 20px 0 24px 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.searchInput {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
width: 1200px;
|
|
||||||
margin: 20px auto 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.main .slider-left {
|
|
||||||
width: 200px;
|
|
||||||
float: left;
|
|
||||||
border: 1px solid #AAC1DE;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 12px 10px;
|
|
||||||
}
|
|
||||||
.main .slider-left .item{
|
|
||||||
list-style: none;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 10px;
|
|
||||||
color: #1E5494;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.active{
|
|
||||||
background: #1E5494;
|
|
||||||
color: #FFF!important;
|
|
||||||
margin: 2px 0;
|
|
||||||
}
|
|
||||||
.main .slider-right{
|
|
||||||
margin-left: 220px;
|
|
||||||
margin-right: 10px;
|
|
||||||
padding: 10px 0 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue