jp-education-student/pages/parents/mine/optionsList.vue

<template>
	<view>
		<u-navbar title="意见反馈">
		
		</u-navbar>
		<view class="main">
			<view class="item" v-for="(item, index) in optionsList" :key="index">
				<view class="item-content">
					{{item.content}}
				</view>
				<view class="item-picture" v-if="item.imageList != 0">
					<view class="picture-box" v-for="(a, i) in item.imageList" :key="i">
						<img :src="a.image" alt="">
					</view>
				</view>
				<view class="item-time">
					{{item.createTime}}
				</view>
			</view>
		</view>
		
		<u-divider v-if="optionsList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px">
			没有更多了</u-divider>
		
		<!-- 按钮 -->
		<button class="btn" @click="toOption">意见反馈</button>
	</view>
</template>

<script>
	import * as mineApi from '@/apis/parents/mine.js'
	
	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 5,
				recordsTotal: 0,
				optionsList: []
			}
		},
		onShow() {
			this.getOptionsList(true);
		},
		onReachBottom() {
			if (this.optionsList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			toOption() {
				uni.navigateTo({
					url: '/pages/parents/mine/opinion'
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getOptionsList()
			},
			getOptionsList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.optionsList = [];
					this.pageIndex = 1;
				}
				mineApi.feedbackPageList({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}).then((res) => {
					uni.hideLoading();
					this.optionsList = [
						...this.optionsList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: #fff;
		.item{
			margin: 0 32rpx;
			padding: 24rpx 0;
			border-bottom: 1px solid #e8e8e8;
			.item-content{
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
			}
			.item-picture{
				margin-top: 24rpx;
				display: flex;
				.picture-box{
					width: 160rpx;
					height: 160rpx;
					border-radius: 2px;
					margin-right: 16rpx;
					img{
						width: 100%;
					}
				}
			}
			.item-time{
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
				margin-top:24rpx;
			}
		}
	}
	.btn{
		width: 686rpx;
		position: fixed;
		bottom:24rpx;
		left: 0;
		right: 0;
		border-radius: 50px;
		background-color: rgba(13, 186, 199, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
	}

</style>