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

<template>
	<view class="home">
		<view class="search-area" style="margin-bottom: 20rpx;">
			<u-search 
			placeholder="搜索设备" 
			v-model="keyword" 
			shape="square" 
			:clearabled="true"
			:show-action="true" 
			action-text="搜索" 
			:animation="true"
			search-icon-color="#000"
			color="#000"
			placeholder-color="#5c5b5b"
			@search="search(keyword)"
			@custom="search(keyword)"></u-search>
		</view>
		<u-empty
			:show="emptyShow"
			mode="search"
			:icon="require('@/static/images/search.png')"
		>
		</u-empty>
		<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" 
				:value="item.borrowStatus"
				:label="item.barCode"
				@click="toBorrow(item.barCode)"
				></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import { searchAsset } from "@/api/asset.js"
	export default {
		data() {
			return {
				keyword:"",
				checked:false,
				emptyShow:false,
				dataList:[]
			};
		},
		onLoad:function(option){
			this.keyword = option.keyword
		},
		onShow(){
			this.search(this.keyword)
		},
		methods:{
			search(val){
				uni.showLoading({
					title: "正在加载中",
					mask: true
				})
				try{
					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" scoped> 
.home{
	padding: 20rpx 20rpx 30rpx;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
/deep/ .u-cell-group__wrapper{
	border-left: 1rpx solid #d6d7d9;
	border-right: 1rpx solid #d6d7d9;
}
</style>