562 lines
12 KiB
Vue
562 lines
12 KiB
Vue
<template>
|
||
<view class="box flex justify-start align-items flex-column">
|
||
<view class="con-center flex flex-column justify-center align-items">
|
||
<view class="search flex align-items" style="width: 99%;">
|
||
<span class="dashed flex align-items justify-center">
|
||
<image src="../../static/center/search.png" mode=""></image>
|
||
</span>
|
||
<span class="line-search"></span>
|
||
<input type="text" placeholder="查找问题" v-model="keywords" class="input" placeholder-class="plasty" />
|
||
<span class="searchBtn" @click.stop="search()">搜索</span>
|
||
</view>
|
||
</view>
|
||
<view class="centerBox" v-if="!keywordShow">
|
||
<view class="hot" v-if="list.length>0">
|
||
<view class="item--list" v-for="(item, index) in list" :key="index">
|
||
<view class="item--title" hover-class="tree__hover-class"
|
||
@click="handleNodeClick(item);handleOpenClose(item, index)">
|
||
<view :class="['ellipsis-multiline', `level-${item.level}`]">{{ item.name}}</view>
|
||
<view v-if="item.children && item.children.length" class="open__and--close">
|
||
<image v-if="!item.isOpen" src="/static/my/Fold.png" mode=""
|
||
style="width: 24rpx;height: 24rpx;"></image>
|
||
<image v-if="item.isOpen" src="/static/my/Spread.png" mode=""
|
||
style="width: 24rpx;height: 24rpx;"></image>
|
||
</view>
|
||
</view>
|
||
<view v-if="item.isOpen && item.children && item.children.length" class="">
|
||
<xtx-treeNode :list="item.children" :level="item.level + 2"
|
||
@change="selectIndex"></xtx-treeNode>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<xtx-treeNode :list="newList" :level='1' @change="treeChange"></xtx-treeNode>
|
||
</view>
|
||
<view class="centerBox" v-if="keywordShow">
|
||
<div v-for="(item,index) in searchList" :key="index" style="padding: 30rpx 30rpx 0 30rpx;" class="flex flex-column ">
|
||
<span class="text ellipsis-multiline" @click.stop="selectIndex(item)">{{item.title}}</span>
|
||
<span class="line"></span>
|
||
</div>
|
||
</view>
|
||
<view class="service flex justify-center align-items" style="padding-bottom: 0;"
|
||
@click="callPhone(init.mobile)">
|
||
<image src="../../static/my/server.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
|
||
<span class="flex justify-center align-items">联系客服:{{init.mobile}}</span>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- <u-loadmore :status="loadStatus" /> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
page: 1,
|
||
lismit: 99999,
|
||
keywords: '',
|
||
oneList: [],
|
||
twoList: [],
|
||
data_list: [],
|
||
list: [],
|
||
init: {},
|
||
keywordShow: false,
|
||
searchList: []
|
||
};
|
||
},
|
||
watch: {
|
||
keywords(newVal) {
|
||
// 去除前后空格后检查是否为空
|
||
if (newVal.trim() === '') {
|
||
this.keywordShow = false;
|
||
}
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.getInit()
|
||
this.getHotList()
|
||
this.init = uni.getStorageSync('init')
|
||
},
|
||
computed: {
|
||
newTwoList() {
|
||
// 接口数组转树形结构
|
||
return this.twoList.map(item => {
|
||
return {
|
||
...item,
|
||
id: "##" + item.id + "##",
|
||
pid: item.help_cate_ids,
|
||
name: item.title,
|
||
|
||
//children: item.children.length ? this.newTwoList.filter(v => v.pid === item.id) : []
|
||
}
|
||
})
|
||
},
|
||
newList() {
|
||
// 接口数组转树形结构
|
||
// console.log([...this.newTwoList,...this.data_list])
|
||
return this.arrayToTree()([...this.newTwoList, ...this.oneList], {
|
||
id: 'id',
|
||
pid: 'pid',
|
||
children: 'children',
|
||
parent: 0,
|
||
})
|
||
},
|
||
},
|
||
onReachBottom() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
callPhone(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
// 详情
|
||
treeChange(item) {
|
||
const id = item.id.match(/\d+/)[0];
|
||
uni.navigateTo({
|
||
url: `/packageA/my/helpDetail?id=${id}`
|
||
})
|
||
},
|
||
selectIndex(item) {
|
||
uni.navigateTo({
|
||
url: `/packageA/my/helpDetail?id=${item.id}`
|
||
})
|
||
},
|
||
handleOpenClose(item, index) {
|
||
if (!item.hasOwnProperty('isOpen')) {
|
||
item.isOpen = false
|
||
}
|
||
item.isOpen = !item.isOpen
|
||
this.$forceUpdate()
|
||
},
|
||
handleNodeClick(item) {
|
||
if (item.help_cate_ids) {
|
||
this.selectIndex(item)
|
||
}
|
||
},
|
||
arrayToTree() {
|
||
// 接口数组转成与list相同的树形结构，其中children为子级
|
||
return function(list, options = {}) {
|
||
//为每行代码加详细注释
|
||
// map用来存储id为键，整行数据为值的对象
|
||
let {
|
||
id = 'id', pid = 'pid', children = 'children', parent = 0
|
||
} = options
|
||
let result = []
|
||
let map = {}
|
||
// 将数据转成键值对，方便查找
|
||
list.forEach(item => {
|
||
map[item[id]] = item
|
||
})
|
||
// 遍历数据，将数据转成树形结构
|
||
list.forEach(item => {
|
||
// 如果pid为0，则直接添加到result中，否则根据pid找到父级数据
|
||
let parentItem = map[item[pid]]
|
||
// 如果父级数据不存在，则直接添加到result中
|
||
if (parentItem) {
|
||
// 如果父级数据不存在children属性，则创建一个children属性
|
||
if (!parentItem[children]) {
|
||
// 创建children属性
|
||
parentItem[children] = []
|
||
}
|
||
//如果已经push，则不重复push
|
||
if (parentItem[children].findIndex(v => v[id] === item[id]) === -1) {
|
||
parentItem[children].push(item)
|
||
}
|
||
|
||
// 将子级数据添加到父级数据中
|
||
//parentItem[children].push(item)
|
||
} else {
|
||
// 如果父级数据不存在，则直接添加到result中
|
||
result.push(item)
|
||
}
|
||
})
|
||
return result
|
||
}
|
||
},
|
||
// 搜索
|
||
search() {
|
||
uni.$u.http.get('/api/school.help/article_list', {
|
||
params: {
|
||
keywords: this.keywords,
|
||
page: this.page,
|
||
limit: this.limit,
|
||
help_cate_ids: '',
|
||
hot: '',
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.searchList = res.data.list
|
||
this.keywordShow = true
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
uni.showToast({
|
||
title: '请求失败，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
},
|
||
getInit() {
|
||
uni.$u.http.get('/api/school.help/cate_list', {
|
||
params: {
|
||
page: this.page,
|
||
limit: this.limit,
|
||
pid: '',
|
||
}
|
||
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.oneList = res.data.list
|
||
this.getTwoList()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
uni.showToast({
|
||
title: '请求失败，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
},
|
||
getTwoList() {
|
||
uni.$u.http.get('/api/school.help/article_list', {
|
||
params: {
|
||
page: this.page,
|
||
limit: this.limit,
|
||
help_cate_ids: '',
|
||
hot: ''
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.twoList = res.data.list
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
uni.showToast({
|
||
title: '请求失败，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
},
|
||
// 获取热门问题
|
||
getHotList() {
|
||
uni.$u.http.get('/api/school.help/article_list', {
|
||
params: {
|
||
page: this.page,
|
||
limit: this.limit,
|
||
help_cate_ids: '',
|
||
hot: 1
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
if (res.data.list) {
|
||
res.data.list = res.data.list.map((item) => {
|
||
return {
|
||
name: item.title,
|
||
id: item.id,
|
||
help_cate_ids: item.help_cate_ids,
|
||
level: 3
|
||
};
|
||
});
|
||
this.list = [{
|
||
name: '热门问题',
|
||
level: 1,
|
||
children: [...res.data.list]
|
||
}]
|
||
} else {
|
||
this.list = [{
|
||
name: '热门问题',
|
||
level: 1,
|
||
children: []
|
||
}]
|
||
}
|
||
console.log('this.list', this.list)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
uni.showToast({
|
||
title: '请求失败，请稍后再试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
});
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
// background: linear-gradient(to bottom, #F1F2F8 0%, #FFFFFF 5%, #FFFFFF 100%);
|
||
background: #F1F2F8;
|
||
min-height: 100vh;
|
||
|
||
.con-center {
|
||
width: 690rpx;
|
||
// margin-top: 25rpx;
|
||
|
||
.centerBack {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 25rpx;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.header {
|
||
height: 50rpx;
|
||
margin-top: 37rpx;
|
||
|
||
.s-header {
|
||
width: 104rpx;
|
||
height: 50rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9E9E9E;
|
||
line-height: 26rpx;
|
||
}
|
||
|
||
.s-header.selected {
|
||
width: 104rpx;
|
||
height: 50rpx;
|
||
background: #008CFF;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 800;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.w-100 {
|
||
width: 100%;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flex-start {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.justify-center {
|
||
justify-content: center;
|
||
}
|
||
|
||
.align-items {
|
||
align-items: center;
|
||
}
|
||
|
||
.flex-column {
|
||
flex-flow: column;
|
||
}
|
||
|
||
.justify-start {
|
||
justify-content: start;
|
||
}
|
||
|
||
.line {
|
||
margin-top: 12rpx;
|
||
width: 690rpx;
|
||
height: 1rpx;
|
||
background: #008CFF;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
|
||
|
||
|
||
.search {
|
||
margin-top: 24rpx;
|
||
width: 690rpx;
|
||
height: 64rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 2rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #008CFF;
|
||
|
||
.dashed {
|
||
image {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
}
|
||
|
||
.line-search {
|
||
width: 2rpx;
|
||
height: 42rpx;
|
||
background: #008CFF;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.input {
|
||
// border: 4rpx solid #EAEAEA;
|
||
padding-left: 12rpx;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
/deep/ .input-placeholder {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #C0C0C0;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
|
||
}
|
||
|
||
.searchBtn {
|
||
width: 128rpx;
|
||
height: 64rpx;
|
||
background: #008CFF;
|
||
border-radius: 5rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
.hui {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
.white-space {
|
||
overflow: hidden;
|
||
/* 确保超出容器的文本被隐藏 */
|
||
white-space: nowrap;
|
||
/* 确保文本在一行内显示 */
|
||
text-overflow: ellipsis;
|
||
/* 使用省略号表示被截断的文本 */
|
||
}
|
||
|
||
.centerBox {
|
||
height: 70vh;
|
||
width: 690rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 12px 12px 12px 12px;
|
||
margin-top: 24rpx;
|
||
overflow-y: auto;
|
||
/* 添加这一行 */
|
||
}
|
||
.text{
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #008CFF;
|
||
}
|
||
.line{
|
||
width: 602rpx;
|
||
height: 1rpx;
|
||
background: #F1F2F8;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.item--list {
|
||
padding-left: 25rpx;
|
||
}
|
||
|
||
.item--title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
border-bottom: 1rpx solid #f7f7f7;
|
||
padding: 25rpx;
|
||
}
|
||
|
||
.open__and--close {
|
||
margin-left: auto;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.tree__hover-class {
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.ellipsis-multiline.level-1 {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #343434;
|
||
}
|
||
|
||
.ellipsis-multiline.level-2 {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #343434;
|
||
}
|
||
|
||
.ellipsis-multiline.level-3 {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #008CFF;
|
||
}
|
||
|
||
.ellipsis-multiline {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.service {
|
||
margin-top: 24rpx;
|
||
width: 690rpx;
|
||
height: 94rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #008CFF;
|
||
}
|
||
</style> |