rescue-driver/pages/my/refuel.vue

<template>
	<view class="content">
		<view class="head-top">
			<view class="" @click="banckf()">
				<uni-icons type="left" size="22"></uni-icons>
			</view>
			<view class="">加油记录</view>
			<view class=""></view>
			
		</view>
		<view class="mubu">
			<view class="jsy" v-if="listArr.length == 0">
					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>
			<!-- <view class="" @click="dianyidain()">测试方法</view> -->
			<view class="bao-box" v-for="(item,index) in listArr" :key="index">
				
					<view class="you">
						<view class="box-top">
							<text class="numone">一共加油{{item.refuelNum || ''}}升</text>
							<text class="numthree">{{item.recordTime|| '0'}}</text>
						</view>
						<view class="numtwo">消费{{item.refuelMoney || '0'}}元</view>
					</view>
			</view>
		</view>
		<view class="box-pupop" @click="gonews">
			<view class="">
				<uni-icons type="plusempty" color="#ffffff" size="26"></uni-icons>
				<view class="">新增</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
import request from '../../utils/request';


export default{
	
	data(){
		return{
			msg:'2',
			value2:1,
			pageNum: 1,//第几页
			pageSize: 10,//一页多少张
			totalPages: 0,//总数
			listArr:[]
		}
		},
		onShow() {
			this.driverRescuePage()
		},
		onReachBottom() {
					if (this.pageNum >= this.totalPages) {
						uni.showToast({
							title: '没有下一页数据',
							icon: 'none'
						})
		
					} else {
						this.pageNum++
						this.driverRescuePage()
					}
				},
		
		methods:{
				
			driverRescuePage(){
				let data = {
					driverId : uni.getStorageSync('driverInfo'),
					pageSize:this.pageSize,
					pageNum:this.pageNum
				}
				request({
					url: '/app/driver/listRefuelRecord',
					method: 'get',
					params:data
				}).then((res)=>{
					if(res.code == 200){
						if (this.pageNum != 1) {
							this.listArr = this.listArr.concat(res.rows)
						}else{
							this.listArr = res.rows
							}
					
						let total =  res.total
						this.totalPages = Math.ceil(total / this.pageSize);
					}
				})
			},
			banckf(){
				uni.navigateBack()
			},
			gonews(){
				uni.navigateTo({
					url:'/pages/my/newrefuel'
				})
			}
		}
}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding-top: 40px;
	}
	.head-top{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 10px;
	}
	.mubu{
		width: 100%;
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 10px;
	}
	.jsy{
		width: 90%;
		margin: 40px auto;
	}
	.bao-box{
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	.icon-lv{
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #CBF0D0;
		box-sizing: border-box;
		padding: 10px;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.hongdi{
		position: absolute;
		right: 2px;
		top: 2px;
		width: 6px;
		height: 6px;
		background: #FF3829;
		border-radius: 50%;
	}
	.ddx{
		display: flex;
		align-items: center;
	}
	.you{
		width: 100%;
	}
	.box-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.numone{
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
	}
	.numtwo{
		font-size: 16px;
		color: #666666;
		margin-top: 10px;
		 white-space: nowrap;
		      overflow: hidden;
		      text-overflow: ellipsis;

	}
	.numthree{
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}
	.box-pupop{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: fixed;
		bottom: 45px;
		right: 15px;
		background-color: #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 14px;
	}
</style>