jp-floorlock-phone/pages/mylock/selectParking.vue

<template>
	<view>
		<view class="top">
			<view class="search">
				<view class="searchBox">
					<u-search shape="square" placeholder="搜索停车场" v-model="testName" :show-action="false" :animation="true"></u-search>
					<u-button type="primary" size="mini" @click="testBtn">搜素</u-button>
				</view>
			</view>
		</view>
		<view class="body2">
			<view class="item"
			v-for="(item,i) in list" :key="i"   @click="returnName(item.name,item.id)" >
				
				<view class="v1" v-html="item.html"></view>
				
			</view>
			
			<view class="item" @click="returnName(queryName,'')" v-if="queryName!=''&&testName==queryName&&(list.length==0)">
				<view class="v1">未查询到“<span class="qName">{{queryName}}</span>”相关结果</view>
				<view class="v2">点击创建“<span class="qName">{{queryName}}</span>”停车场</view>
			</view>
		</view>
		
		<u-divider  color="#B6BDC3"  :isnone="list.length==0" >已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesMylock.js'
	
	export default {
		data() {
			return {
				list: [],
				testName:"",
				queryName:"",
			};
		},
		onLoad() {
			this.getList()
		},
		methods:{
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
			
				API.findParking({
					name:this.testName
				}).then((res) => {
					this.queryName=this.testName
					var list=res.data.parkingInfoList
					if(list==null){
						list=[]
					}
					this.list =list
					
					if(this.testName){
						for (var i = 0; i < this.list.length; i++) {
							var item=this.list[i]
							var targetChar=this.testName
							item.html=item.name.replace(new RegExp(`(${targetChar})`, 'g'), '<span style="color:#FF5100 ">$1</span>');
							console.log(item.html)
						}
					}
					
					uni.hideLoading();
			
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			returnName(item,id){
				const eventChannel = this.getOpenerEventChannel();
				
				eventChannel.emit('acceptDataFromOpenerPage', { data: item,dataid: id})
				uni.navigateBack()
			},
			testBtn(){
				
				this.list=[]
				//this.listForm.pageIndex=1
				this.getList()
			},
			getInfo(){
				
			}
			
		}
	}
</script>
<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style lang="scss" scoped>
::v-deep .u-content{
		width: 380% !important;
	}
	.search {
	
		padding: 16rpx 32rpx;
		background: #fff;
	
		.searchBox {
			display: flex;
			align-items: center;
			background: #F2F2F2;
			padding: 1px 16rpx;
			border-radius: 8px;
			    justify-content: space-between;
		}
	}
	.body2{
		.item:not(:last-child) {
		  border-bottom:1px solid rgba(232,232,232,1);
		}
		.item{
			   padding: 24rpx 32rpx;
				background: #fff;
				
				.qName{
					color:#FF5100 
				}
				.v1{
					color: rgba(16,16,16,1);
					font-size: 32rpx;
				}
				.v2{
					color: rgba(119,119,119,1);
					font-size: 24rpx;
				}
			
		}
	}
</style>