wangluohuoyun-huozhuapp/pages/mine/cargoowner/selectcompany.vue

<template>
	<view>
		<luo-nav-bar @leftClick='navback' :searchText='searchText' @rightClick='cancel' @input='companyInput'
			:isSearch="true" :isPlaceText='true' placeText='输入企业名称' rightText='取消' leftIcon='back'></luo-nav-bar>
		<view v-if='searching' style='padding:10px;'>
			<view style='color:#999;margin-bottom:40px;font-size:14px;' v-if='more'>#输入更多关键字精准获取企业</view>
			<view @click='checkcompany(item)' class='company' v-for='item in companyList'>
				<rich-text :nodes="item.colorcompanyName"></rich-text>
				<view class='flex items-center align-center'>
					<view class='legal_person'>法人</view>
					<view>{{item.legalPersonName}}</view>
				</view>
			</view>
		</view>
		<view style='margin-left:20px;' v-if='!searching'>
			<view>最近搜索</view>
			<view @click='clicksearch(item)' class='historysearch' :style="{'margin-left':index==0 ? '0':'10px'}"
				v-for='(item,index) in history'>{{item.searchContent}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import luoNavBar from '@/components/luo-navBar/components/luo-navBar/luo-navBar.vue';
	export default {
		data() {
			return {
				more: false,
				companyList: [],
				lastTime: 0,
				history: [],
				searching: false,
				searchText: ''
			}
		},
		components: {
			luoNavBar
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad() {
			this.$request.baseRequest('get', '/searchRecordsInfo/selectSearchRecordsInfo', {
					functionType: 1,
					commonId: this.userInfo.id
				}).then(res => {
					this.history = res.data.records
				})
				.catch(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
		},
		methods: {
			navback() {
				uni.navigateBack({})
			},
			cancel() {
				this.searchText = ''
				this.searching = false
				this.companyList = []
			},
			join(str, key) {
				var reg = new RegExp((`(${key})`), "gm");
				var replace = '<span style="color:#2772FB;">$1</span>';
				return str.replace(reg, replace);
			},
			clicksearch(item) {
				this.searchText = item.searchContent
				this.companyInput('', this.searchText)
				// this.s
			},
			checkcompany(item) {
				uni.setStorageSync('currectcompany', item)
				this.goDetailPage('pages/mine/cargoowner/addEnerprise')
			},
			goDetailPage(src) {
				uni.$u.route(src);
			},
			currectsearch(value) {
				var _this = this
				var arr = [],
					filterArr = []
				this.$request.baseRequest('post', '/searchRecordsInfo/api/addInfo', {
						functionType: 1,
						commonId: this.userInfo.id,
						searchContent: value
					}).then(res => {})
					.catch(res => {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
				this.$request.baseRequest('get', '/companyInfo/selectAllCompany', {
						searchKeyWord: value
					}).then(res => {
						uni.hideLoading()
						var len = 0
						console.log(res)
						if (res.data.records.length > 10) {
							_this.more = true
							len = 10
						} else {
							len = res.data.records.length
							_this.more = false
						}
						for (var i = 0; i < len; i++) {
							// console.log(res.data.records[i])
							res.data.records[i].colorcompanyName = res.data.records[i].companyName
							res.data.records[i].colorcompanyName = _this.join(res.data.records[i].colorcompanyName,
								value)
							arr.push(res.data.records[i])
						}
						_this.companyList = arr
						console.log(arr)
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
			},
			companyInput(e, value) {
				var _this = this
				this.searching = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				if (this.lastTime == 0) {
					this.lastTime = setTimeout(() => {
						_this.currectsearch(value)
					}, 2000)
				} else {
					clearTimeout(this.lastTime)
					this.lastTime = setTimeout(() => {
						_this.currectsearch(value)
					}, 2000)
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	/deep/.u-navbar__content {
		/deep/>.u-nav-solt {
			width: 90%;
		}
	}

	.legal_person {
		color: #2772FB;
		font-size: 20rpx;
		border: 1px solid #2772FB;
		padding: 4rpx 6rpx;
		border-radius: 10rpx;
		margin: 8rpx 10rpx 8rpx 0;
	}

	.company {
		padding-bottom: 80rpx;
	}

	.historysearch {
		background: #F5F6FA;
		display: inline-block;
		padding: 10rpx 20rpx;
		margin: 15rpx 20rpx;
		border-radius: 10rpx;
	}
</style>