equipment-rental-mini/pages/menus/borrow-record/borrow-record.vue

<template>
	<view>
		<scroll-view 
		style="height: 100vh;padding:20rpx 30rpx;box-sizing: border-box;" 
		scroll-y="true"  
		@scrolltolower="scroll">
			<view class="list-area" v-for="item in dataList" :key="item.id" @click="toDetail(item.id,item.assetBarCode,item.isreturn)">
				<u-cell :isLink="true">
					<view slot="title" class="u-slot-title">
						<i class="iconfont icon-shijian"></i>
						<text>{{item.isreturn=="0"?"借用时间："+item.borrowDate:"归还时间："+item.actualReturnDate}}</text>
					</view>
					<view slot="label" class="u-slot-label" :style="{color:`${item.isreturn==='0'?'#439dea':'#000000'}`}">
						<text class="list-name">设备：{{item.assetBarCode}}</text>
						<text class="list-status">{{isReturn(item.isreturn)}}</text>
					</view>
				</u-cell>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getBorrowList } from '@/api/asset.js'
	export default {
		data() {
			return {
				dataList:[],
				isOver:false,
				page:1,
			};
		},
		methods:{
			scroll(){
				if(this.isOver){
					return;
				}
				this.init(this.page,false)
			},
			init(page,init){
				if(init){
					this.dataList=[]
				}
				getBorrowList({
					pageNum: page,
					pageSize:10
				}).then(res=>{
					res.data.rows.forEach(item=>{
						this.dataList.push(item)
					})
					let num = Math.ceil(res.data.total/10)
					console.log(num)
					if(page == num){
						this.isOver = true
					}else{
						this.isOver = false
						this.page++
					}
				})
			},
			isReturn(val){
				if(val=="0"){
					return "未归还"
				}else if(val=="1"){
					return "已归还"
				}
			},
			toDetail(id,bar,isreturn){
				// 0 未还 1 已还
				if(isreturn=="0"){
					uni.navigateTo({
						url:'/pages/borrow/borrow?number='+bar,
					})
				}else{
					uni.navigateTo({
						url:'/pages/return/return?id='+id
					})
				}
			}
		},
		onShow() {
			this.init(1,true)
		}
	}
</script>

<style lang="scss">
page{
	background-color: #eae9e9;
}
.home{
	width: 100%;
	height: 100%;
	padding:20rpx 30rpx;
	background-color: #eae9e9;
	box-sizing: border-box;
	.ul-area{
		padding: 20rpx 30rpx 0;
		box-sizing: border-box;
	}
}
.list-area{
	background-color: $uni-bg-color;
	margin: 0 0 20rpx 0;
	line-height: 150%;
	.u-slot-title{
		display: flex;
		align-items: center;
		.iconfont{
			margin-right: 20rpx;
			font-size: 38rpx;
			font-weight: bold;
		}
	}
	.u-slot-label{
		position: relative;
		.list-status{
			position: absolute;
			right: 140rpx;
		}
	}
}

</style>