205 lines
4.8 KiB
Vue
205 lines
4.8 KiB
Vue
<template>
|
||
<view class="content">
|
||
<u-tabs :list="tabArr" lineColor="#FB8F0C" @click="tabClick"></u-tabs>
|
||
<view class="problem " v-if="list.length > 0">
|
||
<view class="problem_main">
|
||
<view class="li" v-for="(item,index) in list" :key="index" @click="show(index)">
|
||
<view class="left frex-start">
|
||
<view class="zmLable">Q</view>
|
||
<view class="left_2 rightContent">{{item.name}}</view>
|
||
<!-- <view class="left_1" >
|
||
<image v-if="item.is_show==1" class="icon" src="/static/img/up.png" mode=""></image>
|
||
<image v-if="item.is_show==0" class="icon" src="/static/img/down.png" mode=""></image>
|
||
</view> -->
|
||
</view>
|
||
<view class="frex-start">
|
||
<view class="zmLable">A</view>
|
||
<view class="rightContent">
|
||
<lookMore :content="item.content"></lookMore>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="textBox" @click="getH">
|
||
{{item.content}}
|
||
</view> -->
|
||
<!-- <u-read-more>
|
||
<rich-text :nodes="content" :showHeight="30"></rich-text>
|
||
</u-read-more> -->
|
||
<!-- <u-read-more ref="uReadMore">
|
||
<u-parse :content="item.content" @load="load"></u-parse>
|
||
</u-read-more> -->
|
||
<!-- <view class="left " v-if="item.is_show==1">
|
||
<view class="left_3"><text style="white-space: pre-wrap;line-height: 20px;">{{item.content}}</text></view>
|
||
</view> -->
|
||
</view>
|
||
<!-- <uni-load-more :status="loadmore" :content-text="contentText" /> -->
|
||
</view>
|
||
</view>
|
||
<uni-load-more :status="loadmore" :content-text="contentText" />
|
||
<view class="zanwuimg" v-if="list.length == 0">
|
||
<image src="../../static/img/null.png" mode="widthFix"></image>
|
||
<view>暂无相关数据</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return{
|
||
list:[],
|
||
ifBottomRefresh:false,
|
||
loadmore: 'more',
|
||
contentText: {
|
||
contentdown: '查看更多',
|
||
contentrefresh: '加载中',
|
||
contentnomore: ''
|
||
},
|
||
tabArr: [{
|
||
name: '操作规范',
|
||
}, {
|
||
name: '回收问题',
|
||
}, {
|
||
name: '清洗问题'
|
||
}, {
|
||
name: '清运问题'
|
||
}, {
|
||
name: '维修问题'
|
||
}, {
|
||
name: '账户问题'
|
||
}, {
|
||
name: '其他问题'
|
||
}]
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.getdata('操作规范')
|
||
},
|
||
onShow() {
|
||
},
|
||
onReachBottom() {
|
||
this.page += 1
|
||
if (this.loadmore == 'noMore') return
|
||
this.ifBottomRefresh = true
|
||
this.getData()
|
||
},
|
||
methods:{
|
||
tabClick(val){
|
||
this.list = []
|
||
this.getdata(val.name)
|
||
},
|
||
getH(){
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.textBox').boundingClientRect(({ height }) => {
|
||
console.log('square_giant的高度是：' + height + 'px');
|
||
}).exec();
|
||
},
|
||
load() {
|
||
this.$refs.uReadMore.init();
|
||
},
|
||
show(index){
|
||
var list = this.list;
|
||
list.forEach((item,index2) => {
|
||
if(index == index2){
|
||
list[index2].is_show = item.is_show==1 ? 0: 1;
|
||
}
|
||
})
|
||
this.list = list;
|
||
},
|
||
getdata(type){
|
||
let data={page:this.page}
|
||
data.platform = 'app'
|
||
data.question_type = type
|
||
this.$api.question_list(data,res=>{
|
||
if(res.code == '1'){
|
||
this.list= this.list.concat(res.data.list.data)
|
||
this.loadmore = this.list.length < res.data.list.total ? 'more' : 'noMore'
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
// background: #fff;
|
||
background: rgb(245,245,250);
|
||
}
|
||
.content{
|
||
padding: 20rpx 35rpx;
|
||
}
|
||
.problem{
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
padding-top: 15rpx;
|
||
padding-bottom: 17rpx;
|
||
.problem_main{
|
||
width: 92%;
|
||
margin: 0 auto;padding-bottom: 10px;
|
||
|
||
.li{
|
||
padding-top: 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
.left{
|
||
overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
.left_1{
|
||
float: left;
|
||
height: 4vh;
|
||
width: 4vh;
|
||
}
|
||
.left_2{
|
||
font-size: 30rpx;
|
||
float:left;
|
||
width: 90%;
|
||
}
|
||
.left_3{
|
||
font-size: 24rpx;
|
||
float:left;
|
||
width: 92%;color: #676767;padding-left: 12px;
|
||
}
|
||
}
|
||
|
||
}
|
||
.li:last-child{
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
.articleBox{
|
||
padding: 29rpx 24rpx 38rpx 35rpx;
|
||
.articleInfo{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
.articleTitle{
|
||
margin-top: 10rpx;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #282F38;
|
||
width: 350rpx;
|
||
}
|
||
img{
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.articleData{
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 36rpx;
|
||
}
|
||
}
|
||
.zmLable{
|
||
color: #FB8F0C;
|
||
font-weight: 800;
|
||
// margin-right: 15rpx;
|
||
width: 38rpx;
|
||
}
|
||
.frex-start{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.rightContent{
|
||
width: calc(100% - 38rpx)
|
||
}
|
||
</style> |