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

<template>
	<view>
		<scroll-view 
		style="height: 100vh;padding:20rpx 20rpx;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>
				
					借用时间 borrowDate
					归还时间 actualReturnDate
					设备编号 assetBarCode
					借用状态 isreturn
					借用地点 borrowPlaceName
				
				<view class="borrow">
					<view class="b1">
						<view class="name"><i class="iconfont icon-shebei" style="color: #409EFF"></i>设备：{{item.assetBarCode}}</view>
						<text style="font-size: 28rpx;">借用地点：{{item.borrowPlaceName}}</text>
						<view style="font-size: 28rpx;">{{item.isreturn=="0"?"借用时间："+item.borrowDate:"归还时间："+item.actualReturnDate}}</view>
					</view>
					<view class="b2">
						<view :style="{'color': item.isreturn=='0' ? '#F56C6C' : '#5CB87A'}">{{isReturn(item.isreturn)}}</view>
					</view>
				</view>
			</view> -->
			<u-list @scrolltolower="scrolltolower" height="100%">
				<u-list-item
					v-for="(item, index) in dataList"
					:key="item.id"
				>
					<view class="data-box" @click="toDetail(item.id,item.assetBarCode,item.isreturn)">
						<view style="display: flex;justify-content: space-between;margin-bottom: 30rpx;">
							<view class="data-header">
								<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" 
								:src="require('@/static/images/shebeiname1.png')" 
								mode="aspectFit"></image>
								<text>设备：<text style="letter-spacing: -1rpx;">{{item.assetBarCode}}</text></text>
							</view>
							<text :style="{color:`${item.isreturn==='0'? '#F56C6C' : '#5CB87A'}`}">{{isReturn(item.isreturn)}}</text>
						</view>
						
						<view class="data-content">
							<text>借用地点：{{item.borrowPlaceName}}</text><br/>
							<text>{{item.isreturn=="0"?"借用时间："+item.borrowDate:"归还时间："+item.actualReturnDate}}</text>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</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
					})
				}
			},
			scrolltolower(){
				if(!this.isOver){
					this.init(this.page,false)
				}
			}
		},
		onShow() {
			this.init(1,true)
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f5f6fa;
}
.home{
	padding: 0 24rpx 30rpx;
	// display: flex;
	// flex-direction: column;
	height: 100vh;
	// box-sizing: border-box;
}
.u-slot-value {
	display: flex;
	justify-content: center;
	align-items: center;
	i {
		flex: 1
	}
	text {
		flex: 4
	}
}
/deep/ .u-cell-group__wrapper{
	border-left: 1rpx solid #d6d7d9;
	border-right: 1rpx solid #d6d7d9;
}
.data-box{
	// border: 1px solid black;
	margin: 26rpx 0;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 18rpx;
	color: #252525;
	.data-header{
		display: flex;
		align-items: center;
		font-size: 36rpx;
		letter-spacing: 4rpx;
	}
	.data-content{
		line-height: 200%;
		font-size: 30rpx;
	}
}
// .borrow{
// 	display: flex;
// 	background-color: $uni-bg-color;
// 	margin: 0 0 30rpx 0;
// 	border-radius: 10rpx;
// 	padding: 20rpx;
// 	align-items: center;
// 	.b1 {
// 		flex: 5;
// 		text-align: left;
// 		line-height: 52rpx;
// 		.name {
// 			display: flex;
// 			i {
// 				padding-right: 10rpx;
// 			}
// 		}
// 	}
// 	.b2 {
// 		flex: 1;
// 		font-size: 28rpx;
// 	}
// }
// .list-area{
// 	background-color: $uni-bg-color;
// 	margin: 0 0 20rpx 0;
// 	line-height: 150%;
// 	border-radius: 10rpx;
// 	padding: 10rpx 20rpx;
// 	.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>