school/pages/problem/problem.vue

<template>
	<view class="center">
		<view class="bg">
			<image src="../../static/img/problemBg.png" mode=""></image>
			<view class="back" @click="back">
				<image src="../../static/img/fanhui.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.real_name}}</view>
							<view class="time">{{ item.add_time }}</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(({data}) => {
				for(let i = 0;i<data.count;i++){
					console.log(data.data[i])
					data.data[i].add_time = obj.timestampToTime(data.data[i].add_time);
				}
				obj.problemList = obj.problemList.concat(data.data);
				console.log(obj.problemList);
				//判断是否还有下一页，有是more  没有是nomore
				if (obj.limit==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();
		},
		timestampToTime(timestamp) {
		        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		        var Y = date.getFullYear() + '/';
		        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '/';
		        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
		        var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
		        var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
		        var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
		        return Y+M+D+h+m+s;
		}
	}
}
</script>

<style lang="scss">
.center {
	background: #F6F6F6;
}
.bg {
	height: 426rpx;
	position: relative;
	image {
		width: 100%;
		height: 100%;
	}
	.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: rgba(245,244,250,0.23);
		// opacity: ;
		border-radius: 50%;
		text-align: center;
		display: flex;
		align-items: center;
		image {
			position: relative;
			margin: 0 auto;
			line-height: 46rpx;
			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 {
				margin-top: 18rpx;
				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>