school/pages/problem/problem.vue

<template>
	<view class="center">
		<view class="bg">
			<view class="back" @click="back">
				<image src="../../static/img/return.png" ></image>
			</view>
			<view class="title">问题反馈</view>
		</view>
		<scroll-view scroll-y="true" class="list">
			<view v-for="(item,index) in problemList" :key="index">
				<view class="problem">
					<view class="top flex">
						<image :src="userInfo.avatar"></image>
						<view class="font">
							<view class="title">{{ userInfo.nickname}}</view>
							<view class="time">2020-10-23 16:00</view>
						</view>
					</view>
					<view class="centent">
						{{ item.content }}
					</view>
					<view class="huif" v-if="item.reply != null">
						<text>老师回复：</text>{{ item.reply }}
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
		<view class="buttom" @click="nav('/pages/problem/problemAdd')">
			新增问题
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { getProblem } from '@/api/problem.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
export default {
	computed: {
		...mapState(['hasLogin', 'userInfo', 'baseURL', 'urlFile'])
	},
	data(){
		return{
			page: 1,
			limit: 10,
			loadingType: 'more',
			problemList:[]
		}
	},
	onLoad() {
		if (this.hasLogin) {
			console.log(this.userInfo)
			this.loadData();
		}else{
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					console.log(e)
					if (e.confirm) {
						console.log("1111")
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
			return;
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//监听页面是否滚动到底部加载更多
	onReachBottom() {
		this.loadData();
	},
	methods: {
		async loadData(type = 'add', loading){
			let obj = this;
			if (type === 'add') {
				if (obj.loadingType === 'nomore') {
					return;
				}
				obj.loadingType = 'loading';
			} else {
				obj.loadingType = 'more';
			}
			if (type === 'refresh') {
				// 清空数组
				obj.courseList = [];
				obj.page = 1
			}
			//获取反馈列表
			getProblem({
				page: obj.page,
				limit: obj.limit
			}).then(e => {
				obj.problemList = obj.problemList.concat(e.data.data);
				console.log(obj.problemList);
				//判断是否还有下一页，有是more  没有是nomore
				if (obj.limit==e.data.data.length) {
					obj.page++
					obj.loadingType='more'
				} else{
					obj.loadingType='nomore'
				}
				if (type === 'refresh') {
					if (loading == 1) {
						uni.hideLoading();
					} else {
						uni.stopPullDownRefresh();
					}
				}
			})
		},
		nav(url) {
			uni.navigateTo({
				url: url
			})
		},
		back(){
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss">
.center {
	background: #F6F6F6;
}
.bg {
	height: 426rpx;
	background: #1CC7C7;
	position: relative;
	.title {
		position: absolute;
		top: 204rpx;
		left: 48rpx;
		font-size: 71rpx;
		font-family: 59--Regular;
		font-weight: 400;
		color: #FFFFFF;
	}
	.back{
		position: absolute;
		top: 54rpx;
		left: 24rpx;
		width: 46rpx;
		height: 46rpx;
		background: #F5F4FA;
		opacity: 0.23;
		border-radius: 50%;
		text-align: center;
		image {
			width: 18rpx;
			height: 24rpx;
			border-radius: 50%;
		}
	}
}
.problem {
	margin: 20rpx;
	background: #FFFFFF;
	padding: 28rpx 44rpx 32rpx 30rpx;
	.top {
		justify-content: start;
		margin-bottom: 34rpx;
		image {
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
		}
		.font {
			margin-left: 18rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #3D4458;
			}
			.time {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}
	.centent {
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
	}
	.huif {
		margin-top: 38rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		text{
			color: #1CC7C7;
		}
	}
}
.buttom {
	width: 674rpx;
	height: 88rpx;
	margin: 20rpx auto;
	background: #1CC7C7;
	border-radius: 44rpx;
	text-align: center;
	font-size: 36rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 88rpx;
}
.list{
	height: 780rpx;
}

</style>