yicangzongtai_app_240321/pages/government/subNVue/mapModule/search - 副本.vue

<template>
	<view class="search-box" @touchmove="(e) => {return false}">
		<view class="search-val">
			<view class="search-frame">
				<text v-if="searchType === 1" class="search-icon iconfont_nvue">&#xe653;</text>
				<text v-else class="back-icon search-icon iconfont_nvue"
					@click.stop="$emit('clearSearch')">&#xe65f;</text>
				<!-- <image class="search-icon" src="/static/map/icon_01.png" mode="scaleToFill"></image> -->
				<input confirm-type="search" ref="searchInputRef" class="search-input" :auto-blur="true" type="text" placeholder="请输入关键字"
					v-model="keyWord_" @focus="onSearchFocus()" @blur="onSearchBlur()" 
					@confirm="getMapList"
					/>
			</view>

			<!-- 选择类型 -->
			<view class="classify-box" v-if="searchType === 2">
				<block v-for="(item , index) in hotClassify">
					<view class="classify-item" :key="`hot_${index}`" @click.stop="selectHotClassify(item)">
						<image class="classify-icon" :src="item.icon" mode="aspectFit">
						</image>
						<text class="classify-text">{{item.name}}</text>
					</view>
				</block>
				<view class="classify-item">
					<image class="classify-icon" :src="deIocn" mode="aspectFit">
					</image>
					<text class="classify-text">更多</text>
				</view>
			</view>

			<!-- 筛选条件 -->
			<view class="condition-box" v-if="[3,4,5].includes(searchType)">
				<view class="condition-label">
					<view class="label-item" @click.stop="selectLabel(searchType , 4)">
						<text
							class="label-item-text nvue-one-row">{{ activeDistance ? activeDistance.label : '位置距离' }}</text>
						<image :class="['label-item-icon' , searchType === 4 ? 'active-condition-label' : '' ]"
							src="/static/map/icon_02.png" mode="aspectFit"></image>
					</view>
					<view class="label-item" @click.stop="selectLabel(searchType , 5)">
						<text
							class="label-item-text nvue-one-row">{{ activeClassify ? activeClassify.name : '全部分类' }}</text>
						<image :class="['label-item-icon' , searchType === 5 ? 'active-condition-label' : '' ]"
							src="/static/map/icon_02.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="condition-val" v-if="searchType === 3">
					<scroll-view class="scroll-condition" scroll-x="true" :show-scrollbar="false">
						<view class="scroll-condition-content">
							<block v-for="(item , index) in classifyList">
								<view class="auto-width-item" :key="`classify_${index}`">
									<view class="auto-width-item-v" @click.stop="selectHotClassify(item)">
										<text
											:class="['condition-item-v' , activeClassify && activeClassify.id=== item.id ? 'active-condition-val' : '' ]">
											{{ item.name }}
										</text>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
				<view class="condition-list-box initial-style show-style" v-if="[4,5].includes(searchType)">
					<!-- 选择范围 -->
					<view class="distance-list" v-if="searchType === 4">
						<scroll-view :style="{'height': 260  +'px' }" class="scroll-condition" scroll-y="true"
							:show-scrollbar="false">
							<block v-for="(item , index) in distance">
								<text :key="`Distance_${index}`"
									:class="['condition-list-item' , 'nvue-one-row' , activeDistance && activeDistance.value === item.value ? 'active-condition' : '']"
									@click.stop="onSelectClassify(3,item , index)">
									{{item.label}}
								</text>
							</block>
						</scroll-view>
					</view>
					<view class="condition-list" v-if="searchType === 5">
						<view class="condition-list-left">
							<scroll-view :style="{'height': 260  +'px' }" class="scroll-condition" scroll-y="true"
								:show-scrollbar="false">
								<block v-for="(item , index) in classifyTree">
									<text :key="`classifyTree_${index}`"
										:class="['condition-list-item' , 'nvue-one-row' , oneClassifyIndex === index? 'active-condition' : '']"
										@click.stop="onSelectClassify(1,item , index)">
										{{item.name}}
									</text>
								</block>
							</scroll-view>
						</view>
						<view class="condition-list-right">
							<scroll-view :style="{'height': 260  +'px' }" class="scroll-condition" scroll-y="true"
								:show-scrollbar="false">
								<block v-for="(item , index) in classifyTree[oneClassifyIndex].children || []">
									<text :key="`classifyTree_two_${index}`"
										:class="['condition-list-item' , 'nvue-one-row' , activeClassify && activeClassify.id === item.id ? 'active-condition' : '']"
										@click.stop="onSelectClassify(2,item , index)">
										{{item.name}}
									</text>
								</block>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import { string } from "clipboard"
import Mixin from "./Mixin.js"
	export default {
		mixins: [Mixin],
		props: {
			keyWord:{
				type:String,
				default:''
			}
		},
		watch:{
			keyWord:{
				handler:function(newK){
					this.keyWord_ = newK || ''
				},immediate:true
			}
		},
		// classifyList
		data() {
			return { 
				keyWord_:'',
				oldValue: '',
				awaitTime: 0,
				awaitInterval: null,
				deIocn: 'http://t13.baidu.com/it/u=3259673001,1762014915&fm=224&app=112&f=JPEG?w=500&h=500',
				distance: [{
					label: '1公里',
					value: 1000
				}, {
					label: '2公里',
					value: 2000
				}, {
					label: '3公里',
					value: 3000
				}, {
					label: '5公里',
					value: 5000
				}, {
					label: '10公里',
					value: 10000
				}, {
					label: '20公里',
					value: 20000
				}],
			}
		},
		mounted() {
			// setTimeout(()=> {
			// 	console.log('aaaaa = ' , 1)
			// 	this.blur()
			// },3000)
		},
		methods: {
			blur() {
				console.log('-------------------999-----------------')
				try {
					this.$refs.searchInputRef.blur()
				} catch (e) {
					//TODO handle the exception

					console.log('------------------------------------', e)
				}
		
			},
			onSearchFocus() {
				this.$emit('onSearchFocus')
			},
			selectHotClassify(item) {
				console.log('000')
				this.$emit('selectHotClassify', item)
			},
			onSelectClassify(level, val, index) {
				this.$emit('onSelectClassify', {
					level: level,
					val: val,
					index: index
				})
			},
			selectLabel(avt, num) {
				const n = avt === num ? 3 : num;
				this.$emit('selectLabel', n)
			},
			getMapList(kw) { 
				if (kw.detail.value === this.oldValue) return false;
				this.oldValue = kw.detail.value
				this.$emit('onSearch', kw.detail.value);
				// try {
				// 	clearInterval(this.awaitInterval)
				// } catch (e) {
				// 	//TODO handle the exception
				// }
				// if (kw.detail.value === this.oldValue) return false;
				// this.awaitTime = 0;
				// this.awaitInterval = setInterval(() => {
				// 	this.awaitTime = this.awaitTime + 100;
				// 	if (this.awaitTime >= 500) {
				// 		if (kw.detail.value) { 
				// 			this.$emit('onSearch', kw.detail.value);
				// 		}
				// 		this.oldValue = kw.detail.value
				// 		clearInterval(this.awaitInterval)
				// 	}
				// }, 100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./style.scss");
	.iconfont_nvue {
		font-family: iconfont_nvue;
	}

	.search-box {
		position: absolute;
		z-index: 21111111111;
		top: 70rpx;
		left: 20rpx;
		right: 20rpx;
		// margin-top: 20rpx;
		background: #fff;
		border-radius: 20rpx;

		.search-val {
			position: relative;
			z-index: 999;
			border-radius: 20rpx;
			background: rgba(184, 184, 184, 0.30);

			.search-frame {
				background-color: #fff;
				height: 89rpx;
				flex-direction: row;
				align-items: center;
				padding: 20rpx;
				border-radius: 20rpx;
				box-shadow: 0px 10px 16px 0px rgba(153, 153, 153, 0.15);

				.back-icon {
					transform: rotate(-180deg) !important;
				}

				.search-icon {
					font-size: 40rpx;
					color: #666666;
					width: 40rpx;
					height: 40rpx;
					transform: rotate(0deg);
				}

				.search-input {
					flex: 1;
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}

			.classify-box {
				height: 179rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 30rpx;

				.classify-item {
					height: 100rpx;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.classify-icon {
						width: 64rpx;
						height: 64rpx;
					}

					.classify-text {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #373737;
					}
				}
			}

			.condition-box {
				.condition-label {
					flex-direction: row;
					align-items: center;
					height: 92rpx;
					border-bottom: 1rpx solid $zw-border-color;
					padding: 0 30rpx;

					.label-item {
						// width: 200rpx;
						flex-direction: row;
						align-items: center;

						&+.label-item {
							margin-left: 20rpx;
						}

						.label-item-text {
							width: 130rpx;
							font-size: 28rpx;
							line-height: 36rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: center;
							color: #1a1a1a;
							padding-right: 4px;
						}

						.label-item-icon {
							width: 28rpx;
							height: 28rpx;
							transform: rotate(0deg);
							transition: transform 1s;
						}

						.active-condition-label {
							transform: rotate(-180deg);
						}
					}
				}

				.condition-val {
					height: 121rpx;
					flex-direction: row;
					align-items: center;

					.scroll-condition {
						// width: 710rpx;
						padding: 0 30rpx;
						flex-direction: row;

						.scroll-condition-content {

							flex-direction: row;
						}
					}

					.auto-width-item-v {
						padding-right: 30rpx;

						.condition-item-v {
							height: 70rpx;
							background-color: #f2f2f2;
							line-height: 70rpx;
							padding: 0 30rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: center;
							color: #666666;
							border-radius: 10rpx;
							border-width: 1rpx;
							border-style: solid;
							border-color: #f2f2f2;

						}

						.active-condition-val {
							border-color: #4fc9d5;
							background-color: #EDFDFD;
							color: #3FB9D4;
						}
					}

				}

				.condition-list-box {
					.distance-list {
						.active-condition {
							background-color: #fff;
							color: #3DB8D2;
						}
					}

					.condition-list {
						// padding: 0 30rpx;
						flex-direction: row;
						justify-content: space-between;
						align-items: stretch;

						.condition-list-left {
							width: 200rpx;

							.active-condition {
								background-color: #fff;
							}
						}

						.condition-list-right {
							// width: 430rpx;
							flex: 1;
							background-color: #fff;

							.active-condition {
								color: #3DB8D2;
							}
						}
					}


					.condition-list-item {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #666666;
						padding: 0 20rpx;
					}
				}

			}
		}
	}
</style>