repairForMiniProgram/miniRepairPro/pages/feedback/feedback.vue

<template>
	<view>
		<!-- 头部 -->
		<view class="head">
			<view class="location">
				评价信箱<image class="loc" src="../../static/信封.svg" mode=""></image>
			</view>
		</view>
		
		<!-- 订单 -->
		<view class="main">
			<view class="content-list" v-for="(item,index) in feedbackList" :key="index">
				<text class="num">订单号：{{item.orderId}}</text>
				<view class="list">
					<view class="">
						故障类型：{{item.repairsFault.faultName}}
					</view>
					<view class="p">
						来自 *********  的评价:
					</view>
					<view class="text">
						{{item.orderAdvice}}
					</view>
				</view>
			</view>
		</view>
		<view class="isOver" v-if="flag" >
			----我是有底线的----
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feedbackList:[],
				pageNum:1,
				flag:false
			}
		},
		onLoad() {
			this.getfeedback()
		},
		methods: {
			onReachBottom(){
				console.log(this.feedbackList.length)
				console.log(this.pageNum*5)
			    if(this.feedbackList.length<this.pageNum*5) 
				return this.flag = true
				this.pageNum++
				this.getfeedback()
			},
			async getfeedback(){
				this.$http.post('/api/order/queryAllOrderByUserAdvice?pageNum='+this.pageNum).then(result=>{
				this.feedbackList =[...this.feedbackList,...result.data.list]
				console.log(result.data.list)
				},err=>{})
			}
		}
	}
</script>

<style>
	template{
		position: relative;
	}
	.main{
		position: relative;
		top: -96px;
	}
    .head{
		height: 149px;
		border-radius: 0px 0px 10px 10px;
		background-color: rgba(42, 130, 228, 1);
	}
    .head .location{
		padding-top: 18px;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		color:rgba(255, 255, 255, 1) ;
	}
    .loc{
	    width: 20px;
		height: 20px;
		font-size: 12px;
		vertical-align:middle;
	}
	.num{
		float: left;
		margin-left: 10px;
		margin-top: 9px;
		font-size: 11px;
		font-weight: 700;
		color: rgba(42, 130, 228, 1);
	}
	.got{
		float: right;
		margin-top: 9px;
		margin-right: 9px;
		color: rgba(212, 48, 48, 1);
	}
    .list{
		float: left;
		margin-left: 21px;
		margin-top: 9px;
		font-size: 11px;
		color: rgba(80, 80, 80, 1);
	}
    .p{
	    margin-top: 8px;
    }	
	.list .text{
		width: 242px;
		height: 54px;
		margin-top: 15px;
		margin-left: 25px;
		text-align:center;
		line-height: 54px;
		background-color: rgba(255, 255, 255, 1);
	}
	.content-list{
		width: 359px;
		height: 173px;
		float: left;
		margin-left: 8px;
		margin-top:11px;
		border-radius: 14px 14px 0px 0px;
		background-color:  rgba(229, 229, 229, 1);
	}
	.isOver{
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 12px;
		color: rgba(80, 80, 80, 0.27);
	}
</style>