<template>
|
<view class="search">
|
<view class="search_box">
|
<view class="search_input">
|
<image src="@/static/ic_search@2x.png" alt="">
|
<input v-model="text" @confirm="searchInput()" type="text" :placeholder="placeholder" />
|
</view>
|
<view class="search_operation" v-if="isShow">
|
<view class="search_operation_w"></view>
|
<image @click="openCate()" src="@/static/filter@2x.png" mode="widthFix">
|
</view>
|
</view>
|
<u-popup closeOnClickOverlay :show="open" @close="open=false" :round="10" mode="bottom">
|
<scroll-view scroll-y class="content">
|
<slot name="content"></slot>
|
</scroll-view>
|
<view class="zhanwei"></view>
|
<view class="footer">
|
<view class="footer_close" @click="closes">重置</view>
|
<view class="footer_submit" @click="submit">确定</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
text: '',
|
open: false
|
};
|
},
|
props: {
|
isShow: Boolean,
|
placeholder: String
|
},
|
methods: {
|
// 搜索框搜索
|
searchInput() {
|
this.$emit('searchInput', this.text)
|
},
|
// 打开弹窗
|
openCate() {
|
this.open = true
|
},
|
// 重置
|
closes() {
|
this.open = false
|
this.text = ''
|
this.$emit('reset', this.text)
|
},
|
// 搜索提交
|
submit() {
|
this.open = false
|
this.$emit('submit')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.search {
|
width: 100%;
|
height: 68rpx;
|
display: flex;
|
align-items: center;
|
.zhanwei {
|
width: 100%;
|
height: calc(88rpx + 30rpx);
|
background: #ffffff;
|
}
|
.content {
|
padding: 30rpx 30rpx 0 30rpx;
|
width: 100%;
|
height: 800rpx;
|
box-sizing: border-box;
|
}
|
.footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-left: 40rpx;
|
padding-right: 40rpx;
|
padding-bottom: env(safe-area-inset-bottom);
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
background: #ffffff;
|
z-index: 99;
|
.footer_close {
|
flex: 1;
|
padding: 28rpx 0;
|
height: 88rpx;
|
box-sizing: border-box;
|
margin-right: 22rpx;
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #999999;
|
background: #F7F7F7;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.footer_submit {
|
flex: 1;
|
height: 88rpx;
|
padding: 28rpx 0;
|
box-sizing: border-box;
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #ffffff;
|
background: $nav-color;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
.search_box {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.search_input {
|
flex: 1;
|
height: 100%;
|
background: #F7F7F7;
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
padding: 15rpx 30rpx;
|
box-sizing: border-box;
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 10rpx;
|
}
|
input {
|
width: 100%;
|
border: none;
|
outline: none;
|
background: #F7F7F7;
|
font-size: 26rpx;
|
}
|
input::-webkit-input-placeholder { /* WebKit browsers */
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
input::-moz-placeholder { /* Mozilla Firefox 19+ */
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
input:-ms-input-placeholder { /* Internet Explorer 10+ */
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
}
|
.search_operation {
|
flex-shrink: 0;
|
/*width: 150rpx;*/
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
/*margin-left: 30rpx;*/
|
image {
|
width: 44rpx;
|
height: 44rpx;
|
}
|
.search_operation_w {
|
width: 30rpx;
|
}
|
}
|
}
|
}
|
</style>
|
