shuju_ui/test/home/pages/recordthree/problem.vue

<template>
	<view class="index">
		<view class="indextop">
			<view class="sous_sear">
				<view class="sous_box" >
					<image :src="searimg" class="sous_img"></image>
					<input  placeholder="请输入常见问题" v-model="formData.noticeTitle" class="sous_input"/>
				</view>
				<view class="sous_btn" @click="getSearFn">搜索</view>
			</view>
			<p style="height: 28upx; background-color: #f2f2f2;"></p>
		</view>
		
		<!-- 通知公告 -->
		<view class="probox">
			<scroll-view scroll-y class="scroll-view " upper-threshold="40" lower-threshold="40" @scrolltolower="bot_btn" >
				<view class="prolist" v-for="(ite,idx) in list" :key='idx' @click="goDetail(ite)">
					<view class="protit">{{ite.noticeTitle}}</view>
					<image :src="rimg" class="prorimg"></image>
				</view>
				<div class="shax" v-if="list.length>0">
					{{wtdt}}
				</div>
				<div class="zanwu " v-else><span>暂无数据</span></div>	
			</scroll-view>
		</view>
		
	</view>
</template>

<script>

	import encoding from '@/js_sdk/encoding.js'
	// import dataTimePicke from '@/_components/picker/dataTimePicke.vue'
	export default {
		data() {
			return {
				searimg:require("@/static/image/search.png"),
				closeimg:require("@/static/image/del.png"),
				searchflag:false,
				rimg:require('@/static/image/icon_mine_listenter.png'),
				//列表数据
				list: [],
				roles:false,
				show: false,
				formData: { //上拉刷新
					pageNum: 1,
					pageSize: 20,
					noticeTitle:''
				},
				keyword: '',
				haveMore: true,
				wtdt: '上拉加载更多',
				telephone:'',
				importflag:false
			};
		},
		onShow() {
			let type = uni.getStorageSync('token')
			if (!type) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}else{
				let roles=uni.getStorageSync('roles')||false
				this.roles=roles
			}
			this.importflag=false;
		},
		onLoad(option) {
			
			// 水印
			this.telephone = uni.getStorageSync('phone')||''
			// 水印
			this.formData.pageNum = 1;
			this.list = []
			 // 修改 获取列表的
			this.lists(this.formData)
		},
		methods: {
			getSearFn(){
				this.list = [];
				this.formData.pageNum = 1;
				this.formData.pageSize=20;
				this.lists(this.formData)
			},
			goDetail(e) {
				uni.navigateTo({
					url: '/home/pages/recordthree/prodetail?&id=' + e.id
				})
			},
			lists(formData) {
				var params={}
				this.$http.get("boman-system/notice/list", formData).then(res => {
					//停止下拉加载
					uni.hideNavigationBarLoading()
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						if (res.rows.length < formData.pageSize) {
							this.haveMore = false
							this.wtdt='到底了~';
						} else {
							var num=parseInt(res.rows.length)+parseInt(formData.pageSize)*parseInt(formData.pageNum-1)
							if(num<res.total){
								this.haveMore = true
								this.wtdt='上拉加载更多'
							}else{
								this.haveMore = false
								this.wtdt='到底了~';
							}	
						}
						if(formData.pageNum==1){
							this.list = res.rows
						}else{
							this.list = this.list.concat(res.rows) 
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
				
				
					}
				})
			},
			//刷新
			bot_btn() {
				if (this.haveMore) {
					this.formData.pageNum++
					this.lists(this.formData)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index{display: flex;flex-direction: column;height: 100vh;overflow: hidden;
		.indextop{flex: 0 0 auto;}
	}
	.probox{background: #FFFFFF;width: 100%;box-sizing: border-box;flex: 1;box-sizing: border-box;overflow: hidden;
		.prolist{padding: 20rpx 0rpx;border-bottom: 2rpx solid #e6e2e2;display: flex;align-items: center;width: 100%;
			.protit{font-size: 28rpx;color:#343434;flex: 1;}
			.prorimg{width:16rpx;height: 24rpx;flex: 0 0 auto;margin-left: 20rpx;}
		
		}
	}
	.scroll-view {
		height: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		// max-height: calc(100vh - 401upx);
	}
	.shax {
		// height: 83upx;
		font-size: 25upx;
		color: #666;
		text-align: center;
		padding: 20rpx 0;
	}
	//暂无数据
	.zanwu {
		text-align: center;
		padding-top: 20upx;
		span {
			font-size: 24upx;
		}
	}
	.sous_sear{
		padding: 24rpx 34rpx;background: #FFFFFF;display: flex;
		.sous_box{height:88rpx;background: #F2F2F2;border-radius: 6rpx;display: flex;align-items: center;padding: 0 34rpx;box-sizing: border-box;flex: 1;
			.sous_img{width: 32rpx;height: 34rpx;margin-right: 18rpx;flex: 0 0 auto;}
			.sous_input{font-size: 30rpx;color: #333333;flex: 1;}
		}
		.sous_btn{
			flex: 0 0 auto;
			width: 118rpx;
			height: 88rpx;
			background: #009FE8;
			border-radius: 7rpx;
			margin-left: 30rpx;font-size: 32rpx;color: #FFFFFF;line-height: 88rpx;text-align: center;
		}
	}	
</style>