searchbar.vue 1.91 KB
<template>
	<view class="flex_searchbar">
		<i class="logo"></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="请输入商品名称">
		</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';
	export default {
		props: {
			isLogin: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				keyword: ''
			}
		},
		methods: {
			jumpPhpPage(url) {
				let link = url ? `${php}${url}` : php;
				window.location.href =  link;
			},
			search() {
				uni.navigateTo({
				    url: `/pages/searchhistory/searchhistory?keyword=${this.keyword}`
				});
			}
		},
		components: {
			
		}
	}
</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;
		background: #fff;
		.flex {
			display: flex;
		}
		.logo {
			width: 192rpx;
			height: 60rpx;
			background: url(../static/index/2931581575297_.pic.jpg) no-repeat;
			background-size: 100% 100%;
		}
		.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>