searchbar.vue

<template>
	<view class="flex_searchbar" :style="{'background':wrapper_props.bg_color}">
		<i class="logo" :style="{'background-image': 'url('+wrapper_props.logo_url+')'}"></i>
		<view class="search_view flex">
			<icon type="search" class="search_icon" size="16" @click="search"></icon>
			<input type="text" @click="search" class="search_input" v-model="keyword" placeholder="请输入商品名称" :value="wrapper_props.placeholder">
		</view>
		<text class="login_btn" @click="jumpPhpPage('app=member&act=login')" v-if="!isLogin">登录</text>
		<i v-else class="eosfont person_icon" @click="jumpPhpPage('app=member')">&#xe636;</i>
	</view>
</template>

<script>
	import { php } from '../../../common/host.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		props: {
			wrapper_props: {
				type: Object,
				required: true
			},
			isLogin: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				keyword: this.wrapper_props.placeholder
			}
		},
		methods: {
			jumpPhpPage(url) {
				let link = url ? `${php}${url}` : php;
				window.location.href =  link;
			},
			search() {
				uni.navigateTo({
				    url: `/pages/searchhistory/searchhistory?keyword=${this.keyword}`
				});
			}
		},
		components: {
			uniIcons
		}
	}
</script>

<style lang="less" scoped>
	.person_icon {
		font-size: 48rpx;
		line-height: 60rpx;
	}
	.flex_searchbar {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		box-sizing: border-box;
		z-index: 100;
		.flex {
			display: flex;
		}
		.logo {
			width: 192rpx;
			height: 60rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.search_view {
			width: 380rpx;
			height: 60rpx;
			background: #F5F5F5;
			border-radius: 30rpx;
		}
		.search_icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 56rpx;
			height: 56rpx;
		}
		.search_input {
			height: 60rpx;
			font-size: 28rpx;
		}
		.login_btn {
			width: 92rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFCD00;
			border-radius: 16rpx;
			color: #212121;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>