qingyuan/components/template/searchView.vue

<template>
	<view class="searchView">
		<view class="searchViewPackage">
			<view class="searchInput">
				<!-- <view @click.stop="goCity">
					<span>{{ address }}</span>
					<image :src="imgfixUrls + 'merchant/city.png'" />
				</view> -->
				<view :class="type == 1 ? 'white' : ''">
					<view>
						<image :src="seachImg" />
						<input @click="goSearch" v-model="inputSearch" :placeholder="languageStatus != 1?'请输入名称或者内容':'검색하기'" :placeholder-style="color" />
						<text v-if="showSearch" @click="goSearch" class="showSearch">搜索</text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';

	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	export default {
		props: {
			type: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				address: '',
				color: 'white',
				seachImg: 'merchant/serach.png',
				search: 'merchant/serach.png',
				searchGray: 'merchant/searchGray.png',
				inputSearch: '',
				showSearch: false,
				img:''
			};
		},
		mounted() {
			this.img = this.imgfixUrl;
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route
			if (curRoute == 'pages/mainPages/pocketIInformant/pocketIInformant') {
				this.showSearch = true;

			} else {
				this.showSearch = false;
			}
			let _this = this;
			if (_this.type == 1) {
				_this.color = 'color:rgba(153,153,153,1)';
				_this.seachImg = _this.imgfixUrl + _this.searchGray;
			} else {
				_this.seachImg = _this.imgfixUrl + _this.seachImg;
				_this.color = 'color:white';
			}
			_this.init();
			uni.getStorage({
				key: 'agencyData',
				success: function(res) {
					console.info(res);
					_this.address = res.data.areaname;
				},
				fail: function(res) {
					console.info('我失败了');
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							let data = {
								lat: res.latitude,
								lng: res.longitude
							};
							App._post_form('&do=cityLocation', data, res => {
								_this.address = res.data.address_component.city;
							});
						},
						fail: function() {
							_this.address = '获取定位失败';
							uni.showToast({
								icon: 'none',
								title: '获取定位失败',
								duration: 2000
							});
						}
					});
				}
			});
		},
		methods: {
			init() {
				let _this = this;
			},
			goCity() {
				App.navigationTo({
					url: 'pages/subPages/city/city'
				});
			},
			goSearch() {
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route
				if (curRoute == 'pages/mainPages/pocketIInformant/pocketIInformant') {
					this.$emit("getChild", this.inputSearch);

				} else {
					App.navigationTo({
						url: 'pages/subPages/search/search'
					});
				}
			}
		}
	};
</script>

<style lang="less">
	.showSearch {
		font-size: 28rpx;
		position: absolute;
		z-index: 999;
		top: 14rpx;
		right: 20rpx;
		color: rgba(255, 255, 255, 1);
	}

	.white {
		background: rgba(255, 255, 255, 1) !important;
	}

	.searchViewPackage {
		padding: 0 30upx;
	}

	.searchInput {
		position: absolute;
		top: 27upx;

		// >view:nth-child(1) {
		// 	vertical-align: middle;
		// 	text-align: right;

		// 	>span {
		// 		display: inline-block;
		// 		width: 150upx;
		// 		overflow: hidden;
		// 		white-space: nowrap;
		// 		text-overflow: ellipsis;
		// 		vertical-align: middle;
		// 		font-size: 30upx;


		// 		color: rgba(255, 255, 255, 1);
		// 	}

		// 	>image {
		// 		margin-left: 15upx;
		// 		vertical-align: middle;
		// 		width: 40upx;
		// 		height: 40upx;
		// 	}
		// }

		>view:nth-child(1) {
			margin-left: 30upx;
			vertical-align: middle;
			display: inline-block;
			width: 680upx;
			height: 63upx;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 32upx;

			>view {
				padding-left: 30upx;
				height: 63upx;

				>image {
					vertical-align: middle;
					width: 28upx;
					height: 28upx;
				}

				>input {
					height: 100%;
					padding-left: 25upx;
					display: inline-block;
					vertical-align: middle;
					width: 500upx;
					font-size: 28upx;
					font-family: Source Han Sans CN;

					color: rgba(255, 255, 255, 1);
				}
			}
		}

		>view {
			vertical-align: middle;
			display: inline-block;
		}
	}
</style>