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"
			@custom="search"></u-search>
		</view>
		<u-empty
			:show="emptyShow"
			mode="search"
			icon="http://cdn.uviewui.com/uview/empty/search.png"
		>
		</u-empty>
		<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.id" 
			:title="item.name" 
			:value="item.status | statusFilter"
			:label="item.number"
			:title-style="{'color': '#000'}"
			:value-style="{'color': '#5c5b5b'}"
			@click="toBorrow(item.number)"
			></u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:"",
				checked:false,
				emptyShow:false,
				dataList:[
					{
						id:3,
						name:'xxxx3',
						number:'dssd3',
						status:3
					},
					{
						id:1,
						name:'xxxx1',
						status:1,
						number:'25262'
					},
					{
						id:2,
						name:'xxxx2',
						number:'dssd',
						status:2
					},
					{
						id:4,
						name:'xxxx3',
						number:'dssd3',
						status:3
					},
					{
						id:5,
						name:'xxxx3',
						number:'dssd3',
						status:3
					},
					{
						id:6,
						name:'xxxx3',
						number:'dssd3',
						status:3
					},
					{
						id:7,
						name:'xxxx3',
						number:'dssd3',
						status:3
					},
					{
						id:8,
						name:'xxxx3',
						number:'dssd3',
						status:3
					},
					{
						id:9,
						name:'xxxx3',
						number:'dssd3',
						status:3
					},
					{
						id:10,
						name:'xxxx3',
						number:'dssd3',
						status:3
					}
				]
			};
		},
		onLoad:function(option){
			console.log(option.keyword)
			this.keyword = option.keyword
		},
		methods:{
			search(){
				uni.navigateTo({
					url:'/pages/search/search?keyword='+this.keyword,
				})
			},
			toBorrow(val){
				uni.navigateTo({
					url:'/pages/borrow/borrow?number='+val,
				})
			}
		},
		filters:{
			statusFilter(val){
				let status;
				switch(val){
					case 0: 
						status = "故障"
						break;
					case 1:
						status = "正常"
						break;
					case 2:
						status = "报废"
						break;
					case 3:
						status = "已借出"
						break;
					default:
						status = "请联系管理员"
						break;
				}
				return status;
			}
		}
	}
</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>