yicangzongtai_app_240321/pages/user/faq.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="topsearch u-p30s u-flex-center-sb" :style="{top:tabTop+'px'}">
			<view class="u-flex1 u-flex-center leftbox">
				<text class="iconfont u-font30 u-666 u-ml30">&#xe650;</text>
				<input class="u-font22 u-CCC u-ml20 u-flex1" style="color: #333;" type="text" value="" @confirm="submit" @input="valSearch" placeholder="请输入搜索关键字" />
			</view>
			<text class="u-font28 u-1A1A1A u-ml30" @click="searchBtn" >搜索</text>
		</view>
		<view class="topsbox">
			<view class="u-flex-column-start "  v-for="(item,index) in balance" :key="item.id" @click="listText(item.id)">
				<view class="uptop u-border-one-one u-flex-center-sb ">
					<view class="u-text1">
						{{item.title}}
					</view>
					<text class="iconfont u-font28 u-333 icons" :class="item.show?'turn':''">&#xe6c7;</text>
				</view>
				<view class="u-font26 u-999 u-mt10" v-if="item.show">{{item.content}}</view>
			</view>
		</view>
		
		<nodata v-if="noData" :config="{top:20,content:'暂无数据~'}"></nodata>
		<loadMore v-if="balance.length>0" :status="status" ></loadMore>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '常见问题',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
					statusBarFontColor: '#1A1A1A',
					
				},
				balance:[],
				parmas:{
					page:1,
					limit:20,
					title:''
				},
				noData:false,
				tabTop:0,
				status:'more',//more|loading|noMore
				
			}
		},
		onReachBottom(e) {
			this.status='loading'
			this.parmas.page++
			this.accountInfo()
			
		},
		onPullDownRefresh() {
		    this.rest()
			this.accountInfo()
		    
		},
		onLoad(){
			this.accountInfo()
			this.tabTop=app.globalData.barHeight+44;
		},
		methods:{
			submit(e){
				if(e){
					this.rest()
					this.parmas.title=e.detail.value
					this.accountInfo()
				}
			},
			// 点击搜索
			searchBtn(){
				this.rest()
				this.accountInfo()
			},
			//监听input值
			valSearch(e){
				if(e){
					this.parmas.title =e.detail.value
				}
			},
			accountInfo(){
				this.$http.get('/sys/faq/pages',this.parmas)
					.then(res => {
						
						if(res&&res.code==200){
							uni.stopPullDownRefresh()
							if(res.page.list.length >0){
								res.page.list.forEach(keys=>{
									keys.show = false
								})
							}
							this.balance = this.balance.concat(res.page.list)
							if(this.balance.length==0){
								this.noData=true
							}else{
								this.noData=false
							}
							
							
							
							if(res.page.totalPage <= res.page.currPage){
								this.status='noMore'
							}else{
								this.status='more'
							}
						}else{
							uni.stopPullDownRefresh()
						}
					})
			},
			listText(id){
				this.balance.forEach(key=>{
					if(key.id == id){
						key.show =!key.show
					}
				})
			},
			rest(){
				this.parmas.page=1
				this.balance=[]
			},
		}
		}
</script>

<style>
	.topsearch{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 2;
		box-sizing: border-box;
		background-color: #fff;
	}
	.topsbox{
		padding: 80rpx 30rpx 0;
	}
	.leftbox{
		height: 60rpx;
		line-height: 60rpx;
		background-color: #E6E6E6;
		border-radius: 30rpx;
	}
	.u-p30s{
		padding: 10rpx 30rpx;
	}
	.uptop{
		padding:30rpx 0 ;
		width: 100%;
		position: relative;
	}
	.turn{
		transform:rotate(90deg);
		
	}
</style>