equipment-rental-mini/pages/search/search.vue

<template>
	<view class="home">
		<view class="search-area" style="padding:20rpx 0;background-color: #f5f6fa;">
			<u-search 
			placeholder="搜索设备" 
			v-model="keyword" 
			shape="square" 
			:clearabled="true"
			:show-action="true" 
			action-text="搜索" 
			:animation="true"
			search-icon-color="#000"
			color="#000"
			bgColor="#fff"
			height="40"
			placeholder-color="#5c5b5b"
			@search="search(1,keyword)"
			@custom="search(1,keyword)"></u-search>
		</view>
		<u-empty
			:show="emptyShow"
			mode="search"
			:icon="require('@/static/images/search.png')"
		>
		</u-empty>
		<view v-show="!emptyShow" style="height: 100%;">
			<u-list @scrolltolower="scrolltolower" height="100%">
				<u-list-item
					v-for="(item, index) in dataList"
					:key="index"
				>
					<view class="data-box" @click="toBorrow(item.barCode)">
						<view style="display: flex;justify-content: space-between;margin-bottom: 10rpx;">
							<view class="data-header">
								<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" 
								:src="require('@/static/images/shebeiname1.png')" 
								mode="aspectFit"></image>
								<text>{{item.name}}</text>
							</view>
							<text :style="{color:`${item.borrowStatus==='可借出'?'#19be6b':item.borrowStatus==='已借出'?'#fa3534':'#ff9900'}`}">{{item.borrowStatus}}</text>
						</view>
						
						<view class="data-content">
							<text>设备编码：{{item.number}}</text><br/>
							<text>设备条形码：{{item.barCode}}</text>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- <view v-show="!emptyShow">
			<u-cell-group :border="true">
				<u-cell  
				title="设备" 
				value="状态"
				:title-style="{'color': '#000'}"
				:value-style="{'color': '#5c5b5b'}"
				></u-cell>
				<u-cell 
				v-for="item in dataList" 
				:key="item.barCode" 
				:title="item.name" 
				:label="item.barCode"
				@click="toBorrow(item.barCode)"
				>
				<view slot="value" class="u-slot-value">
					<i class="iconfont icon-yuandian" :style="{color:`${item.borrowStatus==='可借出'?'#19be6b':item.borrowStatus==='已借出'?'#fa3534':'#ff9900'}`}"></i>
					<text class="list-name" :style="{color:`${item.borrowStatus==='可借出'?'#19be6b':item.borrowStatus==='已借出'?'#fa3534':'#ff9900'}`}">{{item.borrowStatus}}</text>
				</view>
				</u-cell>
			</u-cell-group>
		</view> -->
	</view>
</template>

<script>
	import { keywordSearch } from "@/api/asset.js"
	// searchAsset,
	export default {
		data() {
			return {
				keyword:"",
				checked:false,
				emptyShow:false,
				dataList:[],
				pageNum:1,
				pageSize:5,
				total:0
			};
		},
		onLoad:function(option){
			this.keyword = option.keyword
		},
		onShow(){
			this.pageNum = 1
			this.search(this.pageNum,this.keyword)
		},
		methods:{
			scrolltolower(){
				console.log(222222333)
				if(Math.ceil(this.total/this.pageSize)<this.pageNum){
					return;
				}else if(Math.ceil(this.total/this.pageSize)>=this.pageNum){
					this.search(this.pageNum,this.keyword)
				}
			},
			search(page,val){
				uni.showLoading({
					title: "正在加载中",
					mask: true
				})
				try{
					if(page===1){
						this.dataList=[]
					}
					keywordSearch(page,this.pageSize,{numberOrName: val}).then(res=>{
						uni.hideLoading()
						console.log(res.records,111)
						if(res.records){
							if(res.records.length===0&&page==1){
								this.emptyShow = true
							}else{
								this.emptyShow = false
								this.dataList = [...this.dataList,...res.records]
								this.pageNum = page + 1
								this.total = res.total
							}
						}
					})
					// searchAsset({numberOrName: val}).then(res=>{
					// 	if(res.length===0){
					// 		this.emptyShow = true
					// 	}else{
					// 		this.emptyShow = false
					// 		this.dataList = res
					// 	}
					// 	uni.hideLoading()
					// })
				}catch(err){
					uni.hideLoading()
				}
				
			},
			toBorrow(val){
				uni.navigateTo({
					url:'/pages/borrow/borrow?number='+val,
				})
			}
		}
	}
</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: 14rpx 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: 160%;
		font-size: 30rpx;
	}
}
</style>