yicangzongtai_app_240321/pages/government/subNVue/mapModule/search.vue

<template>
	<view :class="['search-box' , searchType === 2 ? '': 'search-box-bg']" @touchmove="(e) => {return false}"
		:style="{'top': setTop(statusBarHeight)}">
		<view class="search-frame">
			<text v-if="[1,2].includes(searchType)" 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', searchType === 2 ? '': 'hide-element' ]" ref="searchTypeRefs2">
			<block v-for="(item , index) in classifyTree" :key="`hot__${index}`">
				<view class="classify-item" v-if="index<5" :key="`hot_${index}`" @click.stop="selectHotClassify(item)">
					<image class="classify-icon" :src="item.icon" mode="aspectFit" />
					<text class="classify-text nvue-one-row">{{item.name}}</text>
				</view>
				<view class="classify-item" v-if="index === 5" @click.stop="onMore()" :key="`hot_${index}`">
					<image class="classify-icon" src="@/static/map/moer.png" mode="aspectFit">
					</image>
					<text class="classify-text">更多</text>
				</view>
			</block>
		</view> -->

		<!-- 选择类型 -->
		<view :class="['hot-classify', searchType === 2 ? '': 'hide-element' ]" ref="searchTypeRefs2">
			<scroll-view class="scroll-condition" scroll-x="true" :show-scrollbar="false">
				<template v-if=" classifyTree && classifyTree.length > 0 ">
					<block v-for="(item , index) in classifyTree" :key="`hot__${index}`">
						<view v-if="index<5" class="auto-width-item hot-item" @click.stop="selectHotClassify(item)"
							:key="`hot_${index}`">
							<image class="hot-item-icon" :src="item.icon"></image>
							<text class="hot-item-text">{{item.name}}</text>
						</view>
					</block>
					<view class="auto-width-item hot-item" @click.stop="onMore()" :key="`hot_${index}`">
						<image class="hot-item-icon" src="@/static/map/moer.png"></image>
						<text class="hot-item-text">更多</text>
					</view>
				</template>
			</scroll-view>
		</view>

		<!-- 筛选条件 -->
		<view :class="['condition-box' , [3,4,5].includes(searchType) ? '' : 'hide-element' ]">
			<!-- v-if="[3,4,5].includes(searchType)" -->
			<view class="condition-label" ref="searchTypeRefs345_lable"
				:style="{'border-bottom-width':[3,4,5].includes(searchType)?'1rpx':0}">

				<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="[ searchType === 3 &&classifyTree && classifyTree[oneClassifyIndex] &&classifyTree[oneClassifyIndex].children.length >0 ? '': 'hide-element' ]">
				<view class="condition-val" ref="searchTypeRefs3">
					<scroll-view class="scroll-condition" scroll-x="true" :show-scrollbar="false">
						<template v-if=" classifyTree[oneClassifyIndex] && classifyTree[oneClassifyIndex].children">
							<block v-for="(item , index) in classifyTree[oneClassifyIndex].children"
								:key="`classify__${index}`">
								<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>
						</template>
					</scroll-view>
				</view>
			</view>

			<view :class="['condition-list-box' , [4,5].includes(searchType) ? '' : 'hide-element' ]">
				<!-- 选择范围 -->
				<view ref="searchTypeRefs4" :class="['distance-list', searchType === 4 ? '': 'hide-element' ]">
					<scroll-view :style="{'height': 260  +'px' }" class="scroll-condition" scroll-y="true"
						:show-scrollbar="false">
						<block v-for="(item , index) in distance" :key="`Distance__${index}`">
							<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 ref="searchTypeRefs5" :class="['condition-list', searchType === 5 ? '': 'hide-element' ]">
					<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" :key="`classifyTree__${index}`">
								<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">
							<template
								v-if="classifyTree && classifyTree[oneClassifyIndex] && classifyTree[oneClassifyIndex].children">
								<block v-for="(item , index) in classifyTree[oneClassifyIndex].children || []"
									:key="`classifyTree_two__${index}`">
									<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>
							</template>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import Mixin from "./Mixin.js"
	export default {
		mixins: [Mixin],
		// classifyList
		data() {
			return {
				keyWord_: '',
				oldValue: '',
				awaitTime: 0,
				awaitInterval: null,
				distance: [{
					label: '1公里',
					value: 1000
				}, {
					label: '3公里',
					value: 3000
				}, {
					label: '5公里',
					value: 5000
				}],
			}
		},
		mounted() {
			// setTimeout(()=> {
			// 	console.log('aaaaa = ' , 1)
			// 	this.blur()
			// },3000)
		},
		watch: {
			keyWord: {
				handler: function(newK) {
					this.keyWord_ = newK || ''
				},
				immediate: true
			},
			searchType: {
				handler: function(newS, oldS) {
					this.$nextTick(() => {
						setTimeout(() => {
							this.animationStyle(newS, oldS)
							const Refs2 = this.$refs.searchTypeRefs2;
							const Refs345_lable = this.$refs.searchTypeRefs345_lable;
							const Refs3 = this.$refs.searchTypeRefs3;
							const Refs4 = this.$refs.searchTypeRefs4;
							const Refs5 = this.$refs.searchTypeRefs5;
							// 
							switch (newS) {
								case 1:
									this.animationStyle(Refs2, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs3, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs345_lable, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs4, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs5, {
										height: 0 + 'px'
									}, 70)
									break;
								case 2:
									this.animationStyle(Refs3, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs345_lable, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs4, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs5, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs2, {
										height: uni.upx2px(80) + 'px'
									}, 70, 80)
									break;
								case 3:
									this.animationStyle(Refs2, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs4, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs5, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs345_lable, {
										height: uni.upx2px(92) + 'px'
									}, 70, 71)
									this.animationStyle(Refs3, {
										height: uni.upx2px(121) + 'px'
									}, 70, 141)
									break;
								case 4:
									this.animationStyle(Refs2, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs3, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs5, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs4, {
										height: 260 + 'px'
									}, 70, 71)
									break;
								case 5:
									this.animationStyle(Refs2, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs3, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs4, {
										height: 0 + 'px'
									}, 70)
									this.animationStyle(Refs5, {
										height: 260 + 'px'
									}, 70, 70)
									break;
							}
						}, 100)
					})
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * el: 动画元素
			 * styles 动画样式
			 * duration 动画时间
			 * delay 延迟动画
			 */
			animationStyle(el, styles, duration, delay) {
				if (el) {
					const animation = weex.requireModule('animation')
					animation.transition(el, {
						styles: styles,
						duration: duration, //ms
						needLayout: true,
						timingFunction: 'linear',
						delay: delay || 0 //ms
					}, res => {})
				}
			},



			setTop(statusBarH) {
				// console.log('statusBarH = ', statusBarH)
				const searchH = uni.upx2px(30)
				return searchH + statusBarH + 'px'
			},






			blur() {
				// console.log('-------------------999-----------------')
				try {
					this.$refs.searchInputRef.blur()
				} catch (e) {
					//TODO handle the exception

					// console.log('------------------------------------', e)
				}
				uni.hideKeyboard()
			},
			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-bg {
		background: #fff !important;
	}

	.search-box {
		position: absolute;
		z-index: 2;
		left: 20rpx;
		right: 20rpx;
		// margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: transparent;

		.search-frame {
			background-color: #fff;
			height: 89rpx;
			flex-direction: row;
			align-items: center;
			padding: 10rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0px 10rpx 16rpx 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 {
				// background-color: skyblue;
				height: 60rpx;
				flex: 1;
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}

		.classify-box {
			width: 710rpx;
			height: 0;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			overflow: hidden;

			.classify-item {
				width: 106rpx;
				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;
				}
			}

			// @keyframes identifier {
			// 	to {
			// 		height: 0;
			// 	}

			// 	from {
			// 		height: 179rpx;
			// 	}
			// }
		}

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

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

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

					.label-item-text {
						max-width: 400rpx;
						// 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: 0;
				flex-direction: row;
				align-items: center;
				padding: 0 30rpx;

				.scroll-condition {
					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: 26rpx;
						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 {
					height: 0;
					overflow: hidden;

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

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

					.condition-list-left {
						width: 200rpx;
						background-color: #f9f9f9;

						.scroll-condition {
							background-color: #f9f9f9;
						}

						.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;
				}
			}

		}
	}

	.hot-classify {
		height: 80rpx;
		padding-top: 20rpx;
		.scroll-condition {
			flex-direction: row;

			.hot-item {
				margin-right: 20rpx;
				background-color: #fff;
				padding: 0 25rpx;
				height: 56rpx;
				border-radius: 30rpx;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.hot-item-icon {
					width: 30rpx;
					height: 30rpx;
				}

				.hot-item-text {
					padding-left: 8rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>