128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<u-navbar title="帮助中心" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
|
|
title-size='36' height='36' id="navbar">
|
||
|
|
</u-navbar>
|
||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/u4Sa5nNBvGs3zIwS5k9S" class="bj" mode=""></image>
|
||
|
|
<view class="box">
|
||
|
|
<u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
|
||
|
|
<u-collapse v-for="(item,index) in contlist" :key="index">
|
||
|
|
<u-collapse-item :title="item.title">
|
||
|
|
{{item.content}}
|
||
|
|
</u-collapse-item>
|
||
|
|
</u-collapse>
|
||
|
|
<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
|
||
|
|
当前没有更多帮助信息咯...
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
bgc: {
|
||
|
|
backgroundColor: "",
|
||
|
|
},
|
||
|
|
list:[{
|
||
|
|
name: '',
|
||
|
|
value:''
|
||
|
|
}],
|
||
|
|
current: 0,
|
||
|
|
id:'',
|
||
|
|
contlist:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.getfenlei()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 请求帮助分类
|
||
|
|
getfenlei(){
|
||
|
|
this.$u.get(`/app/articleCategory/list`).then(res =>{
|
||
|
|
if(res.code == 200){
|
||
|
|
this.id = res.rows[0].id
|
||
|
|
this.getcont()
|
||
|
|
this.list = res.rows.map(item => ({
|
||
|
|
name: item.categoryName,
|
||
|
|
id:item.id
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 根据分类id请求内容
|
||
|
|
getcont(){
|
||
|
|
this.$u.get(`/app/articleCategory/article?id=${this.id}&pageNum=1&pageSize=999`).then(res =>{
|
||
|
|
if(res.code == 200){
|
||
|
|
this.contlist = res.rows
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
change(index) {
|
||
|
|
this.current = index
|
||
|
|
this.id = this.list[index].id
|
||
|
|
console.log('当前选中ID:', this.id)
|
||
|
|
this.getcont()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
/deep/ .u-scroll-view{
|
||
|
|
padding: 0 30rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
page {
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.box{
|
||
|
|
width: 750rpx;
|
||
|
|
height: 1209rpx;
|
||
|
|
overflow: scroll;
|
||
|
|
background: #FFFFFF;
|
||
|
|
position: fixed;
|
||
|
|
padding-bottom: 50rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
border-radius: 30rpx 30rpx 0 0;
|
||
|
|
/deep/ .u-collapse-content{
|
||
|
|
width: 684rpx;
|
||
|
|
max-height: 5110rpx;
|
||
|
|
background: #F3F3F3;
|
||
|
|
margin: auto;
|
||
|
|
padding: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
|
|
}
|
||
|
|
/deep/ .u-collapse-title{
|
||
|
|
padding-left: 20rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
/deep/ .u-collapse-head{
|
||
|
|
width: 684rpx;
|
||
|
|
height: 94rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.1);
|
||
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 18rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bj{
|
||
|
|
width: 750rpx;
|
||
|
|
height: 588rpx;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
</style>
|