122 lines
2.7 KiB
Vue
122 lines
2.7 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<view class="search-bar-container">
|
||
<view class="search-box" :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
|
||
<view class="top-left">
|
||
<view class="back-button" hover-class="back-button-active" @click="goBack">
|
||
<u-icon name="arrow-left" color="#fff;" />
|
||
</view>
|
||
<view class="search-input">
|
||
<u-input v-if="!readOnly" v-model="queryParamF" :focus="true" placeholder="搜索优质产品"
|
||
prefixIcon="search" :border="false" style="background-color: #fff;border: none;"
|
||
confirm-type="go" @confirm="goSearch(queryParamF)" />
|
||
<view v-else style="width: 360rpx;padding: 10rpx 20rpx;display: flex;align-items: center;"
|
||
@click="goSearch">
|
||
<u-icon name="search" color="#969696" size="22"></u-icon>
|
||
<text
|
||
style="margin-left:10rpx;font-size: 30rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #969696;line-height: 37rpx;">搜索优质商品</text>
|
||
</view>
|
||
<view class="search-btn" @click="goSearch">搜索</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "searchBar",
|
||
props: {
|
||
searchBarTop: {
|
||
//搜索栏的外边框高度，单位px
|
||
type: Number,
|
||
default: 30
|
||
},
|
||
searchBarHeight: {
|
||
//搜索栏的高度，单位px
|
||
type: Number,
|
||
default: 30
|
||
},
|
||
queryParam: {
|
||
type: String,
|
||
default: null
|
||
},
|
||
readOnly: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
queryParamF: ''
|
||
}
|
||
},
|
||
watch: {
|
||
queryParam: {
|
||
handler(val) {
|
||
this.queryParamF = this.queryParam || ''
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
goSearch(value) {
|
||
if (!this.queryParamF && value) {
|
||
this.queryParamF = value
|
||
}
|
||
if (this.readOnly) {
|
||
this.$emit('navigate')
|
||
return
|
||
}
|
||
this.$emit('search', this.queryParamF)
|
||
},
|
||
goBack() {
|
||
this.$emit('back')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.search-bar-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
// z-index: 999;
|
||
width: 100%;
|
||
background-color: #12CA64;
|
||
|
||
.search-box {
|
||
margin: 10rpx 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.top-left {
|
||
width: calc(100% - 200rpx);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height: 100%;
|
||
|
||
.search-input {
|
||
display: flex;
|
||
border: 2rpx solid #fff;
|
||
background-color: #fff;
|
||
border-radius: 50rpx;
|
||
height: 100%;
|
||
margin-left: 10rpx;
|
||
|
||
.search-btn {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #3E3E3E;
|
||
line-height: 64rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|