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" 
				:label="item.barCode"
				@click="toBorrow(item.barCode)"
				>
				<!-- :value="item.borrowStatus" :style="{color:`${item.isreturn==='0'?'#439dea':'#000000'}`}"-->
				<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 { 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;
}
.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;
}
</style>