jobslink-user-clent/pages/seach/placeSearch.vue

<template>
	<view>
		<view class="searchPage">
			<view class="headSearch">
				<view class="search-view">
					<view class="search-item">
						<image src="../../static/img/search.svg" style="width: 32rpx;height: 32rpx;" mode=""></image>
						<input type="text" confirm-type="搜索" v-model="inputValue" @confirm="search" placeholder="搜索工作的地点" />
					</view>
					<view class="close" @click="closeBack">
						取消
					</view>
				</view>
			</view>
			<scroll-view scroll-y class="scroll-view">
				<view>
					<ul class="search-result">
						<li v-for="(item,index) in searchResultList" :key="item.id" @click="handleSelect(item)">
							<div class="title">
								<rich-text :nodes="item.title"></rich-text>
							</div>
							<div class="address">{{item.address}}</div>
						</li>
					</ul>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import {
		getcoder,
		querySearch
	} from "@/api/map.js";
	export default {
		components: {

		},
		data() {
			return {
				searchResultList: [],
				inputValue: '',
				// key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI'
				key: 'MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5'
			};
		},
		onLoad: function(option) {
			// this.keywords = option.keywords?option.keywords:''
		},
		onShow: function() {
		},
		methods: {
			search: function() {
				if (this.inputValue) {
					this.querySearch(this.inputValue)
				} else {
					return
				}
			},
			//关键词输入提示
			querySearch: function(queryString) {
				querySearch(queryString, encodeURI(this.key)).then(res => {
					if (res.data.status === 0) {
						this.searchResultList = res.data.data;
						if (this.searchResultList.length) {
							this.searchResultList.forEach((item, index) => {
								item.title = this.getInf(item.title, this.inputValue);
							});
						}
					}
				});
			},
			// 8-2、选择地址
			handleSelect: function(item) {
				uni.navigateTo({
					url: '../mapSeach/mapSeach?item=' + encodeURIComponent(JSON.stringify(item.location))
				});
				this.inputValue = '';
				this.searchResultList = [];
			},
			//高亮
			getInf(str, key) {
				if (str && key) {
					let replaceReg = new RegExp(key, 'g') // 匹配关键字正则
					let replaceString = "<span style='color: #1b66ff;'>" + key + "</span>" // 高亮替换
					return str.replace(replaceReg, replaceString);
				}
			},
			closeBack() {
				uni.navigateBack({
					delta: 1
				})
				this.inputValue = '';
				this.searchResultList = [];
			},

		}
	};
</script>

<style>
	.searchPage .headSearch .search-view {
		border-bottom: 1rpx solid #dddddd;
		padding: 10rpx 30rpx;
		background: rgba(255, 255, 255, 1);
		position: relative;
	}

	.searchPage .headSearch .close {
		position: absolute;
		right: 24rpx;
		top: 0;
		height: 60rpx;
		padding: 5rpx 0;
		line-height: 60rpx;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
	}

	.searchPage .headSearch .search-item {
		display: flex;
		width: 80%;
		padding: 0 24rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: rgba(249, 249, 249, 1);
		border-radius: 200px;
		align-items: center;
	}

	.searchPage .headSearch .search-item input {
		padding: 0 24rpx;
		height: 80rpx;
		font-weight: 400;
		flex: 1;
		text-align: start;
		font-size: 28rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		color: rgba(51, 51, 51, 1);
	}

	.searchPage .headSearch .search-item .placeholderClass {
		color: #CCCCCC;
	}

	.searchPage .headSearch .search-item image {
		height: 32rpx;
		width: 32rpx;
	}

	.searchPage .scroll-view {
		flex: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		/* top: 82rpx; */
		top: 182rpx;
	}

	.searchPage .search-result {
		background-color: #fff;
	}

	.searchPage .search-result li {
		font-weight: normal;
		text-align: left;
		border-bottom: 1rpx solid #f2f2f2;
		padding: 28rpx 30rpx;
		list-style: none;
	}

	.searchPage .search-result li .title {
		font-size: 32rpx;
	}

	.highlight {
		color: #1b66ff;
	}

	.searchPage .search-result li .address {
		font-size: 24rpx;
		color: #999999
	}
</style>