1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<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')"></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;
height: 100rpx;
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>