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