yicangzongtai_app_240321/pages/research/community/commonproblem.vue

<template>
	<view class="commonproblem">
		<navbar ref="navbar" :config="config" backColor="#fff"></navbar>
		<view v-if="problemList.length>=0">
		<view class="item" v-for="(item,index) in problemList">
			<view class="top">
				<view class="left">
				</view>
				<view class="right" >
						{{item.title}}
				</view>
			</view>
			<view class="content">
					{{item.content}}
			</view>
		</view>
			<loadMore v-if="problemList.length>0" :status="status"></loadMore>
		</view>
	
		 <nodata v-else :config="{ top: 15, content: '暂无数据~' }"></nodata>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '常见问题',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#3775F6"],
					statusBarFontColor: '#1A1A1A',
				},
				params:{
					page:1,
					limit:10,
				},
				problemList:[],
				status:'more',
				noData:false
				
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.page= 1,
			this.problemList = []
			this.getMsg()
		},
		//上拉加载
		onReachBottom(e){
			this.status='loading'
			this.params.page++
			this.getMsg()
		},
		onLoad() {
			this.getMsg()
		},
		methods:{
			getMsg(){
				this.$http.get("/sys/faq/pages",this.params).then(res=>{
					if(res&&res.code==200){
						uni.stopPullDownRefresh()
						// this.problemList = res.page.list
						this.problemList = this.problemList.concat(res.page.list)
						if(res.page.totalPage<=res.page.currPage){
							this.status = 'noMore'
						}else{
							this.status = "more"
						}
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.bottom{
		padding: 28rpx 40rpx 28rpx 40rpx;
		.top{
			display: flex;
			align-items: center;
			.left{
				
				width: 8rpx;
				height: 8rpx;
				background-color: #050505;
				border-radius: 50%;
			}
			
			.right{
				flex: 1;
				margin-left: 14rpx;
				font-size: 28rpx;
				font-weight: Regular;
				line-height: 40rpx;
				color: #050505;
			}
		}
		.content{
			margin-left: 14rpx;
			font-size: 22rpx;
			font-weight: Regular;
			color: #8C888C;
			line-height: 40rpx;
		}

	}
	.item{
		padding: 28rpx 40rpx 28rpx 40rpx;
		.top{
			display: flex;
			align-items: center;
		}
		.content{
			width: 100%;
			margin-left: 14rpx;
			font-size: 22rpx;
			font-weight: Regular;
			color: #8C888C;
			line-height: 40rpx;
			word-break: break-all;
			white-space: pre-wrap;
		}
		.left{
			width: 8rpx;
			height: 8rpx;
			background-color: #050505;
			border-radius: 50%;
		}
		.right{
			flex: 1;
			margin-left: 14rpx;
			font-size: 28rpx;
			font-weight: Regular;
			line-height: 40rpx;
			color: #050505;
		}
	}
</style>