Huanyuyuehui/pages/index/component/headerSerch.vue

202 lines
5.1 KiB
Vue

<template>
<!-- #ifdef H5 -->
<view class="header" :style="'background: '+ bgColor +' ;margin-top:'+ mbConfig +'rpx;'">
<view class="serch-wrapper acea-row row-between-wrapper" :style="'padding-left:'+prConfig+'rpx;'">
<view v-if="logoConfig" class="logo skeleton-rect">
<image :src="logoConfig" mode=""></image>
</view>
<navigator :url="merId ? '/pages/store/list/index?mer_id='+merId : '/pages/columnGoods/goods_search/index'" :class="logoConfig ? 'input' : 'uninput'" class="skeleton-rect box" hover-class="none"
:style="'border-radius:'+boxStyle+'rpx;text-align:'+txtStyle">
<text class="iconfont icon-xiazai5"></text>
搜索商品
</navigator>
<navigator class="btn skeleton-rect" url="/pages/chat/customer_list/index?type=0" hover-class="none">
<view class="iconfont icon-xiaoxi" :style="'color:'+iconColor"></view>
<text class="iconnum" v-if="userInfo.total_unread">{{ userInfo.total_unread }}</text>
</navigator>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP || APP-PLUS -->
<view>
<view class="mp-header" :style="'background: '+ bgColor +' ;margin-top:'+ mbConfig +'rpx;'">
<view class="sys-head skeleton-rect" :style="{ height: statusBarHeight }"></view>
<view class="serch-box skeleton-rect" style="height: 43px;">
<view class="serch-wrapper flex" :style="'padding-left:'+prConfig+'rpx;'">
<view v-if="logoConfig" class="logo skeleton-rect"><image :src="logoConfig" mode=""></image></view>
<navigator :url="merId ? '/pages/store/list/index?mer_id='+merId : '/pages/columnGoods/goods_search/index'" :class="logoConfig ? 'input' : 'uninput'"
hover-class="none" class="skeleton-rect box" :style="'border-radius:'+boxStyle+'rpx;text-align:'+txtStyle">
<text class="iconfont icon-xiazai5"></text>
搜索商品
</navigator>
</view>
</view>
</view>
<view :style="'height:'+marTop+'px;'"></view>
</view>
<!-- #endif -->
</template>
<script>
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight*2 + 'rpx';
export default {
name: 'headerSerch',
props: {
dataConfig: {
type: Object,
default: () => {}
},
userInfo: {
type: Object,
default: () => {}
},
merId: {
type: String || Number,
default: ''
}
},
data() {
return {
statusBarHeight: statusBarHeight,
marTop:0,
searchH: 0,
bgColor: this.dataConfig.bgColor && this.dataConfig.bgColor.color[0].item,
iconColor: this.dataConfig.iconColor && this.dataConfig.iconColor.color[0].item,
boxStyle: this.dataConfig.boxStyle.type ? '0' : '32',
logoConfig: this.dataConfig.logoConfig.url,
mbConfig: this.dataConfig.mbConfig.val*2,
prConfig: this.dataConfig.prConfig.val*2,
txtStyle: this.dataConfig.txtStyle.type ? 'center' : 'xleft',
};
},
mounted(){
let that = this;
// #ifdef H5
// 获取H5 搜索框高度
setTimeout(() => {
let appSearchH = uni.createSelectorQuery().select('.serch-wrapper');
appSearchH
.boundingClientRect(function(data) {
that.searchH = data.height;
})
.exec();
}, 800);
// #endif
// #ifdef MP || APP-PLUS
setTimeout(() => {
// 获取小程序头部高度
let info = uni.createSelectorQuery().in(this).select(".mp-header");
info.boundingClientRect(function(data) {
that.marTop = data.height
}).exec()
}, 300)
// #endif
},
methods: {}
}
</script>
<style lang="scss" scoped>
.header {
width: 100%;
background: #ffffff;
.btn {
position: relative;
margin-left: 30rpx;
.iconfont {
font-size: 45rpx;
}
}
.iconnum {
min-width: 6px;
color: #fff;
background: #e93323;
border-radius: 15rpx;
position: absolute;
right: -10rpx;
top: -10rpx;
font-size: 10px;
padding: 0 4px;
}
.serch-wrapper {
display: flex;
align-items: center;
padding: 20rpx 30rpx 20rpx 30rpx;
.box{
flex: 1;
}
.logo {
width: 127rpx;
height: 46rpx;
margin-right: 20rpx;
}
image {
width: 118rpx;
height: 42rpx;
}
.input,.uninput {
line-height: 64rpx;
padding: 0 0 0 30rpx;
background: rgba(237, 237, 237, 1);
border: 1px solid rgba(241, 241, 241, 1);
color: #bbbbbb;
font-size: 28rpx;
.iconfont {
margin-right: 20rpx;
}
}
}
}
/* #ifdef MP || APP-PLUS */
.mp-header {
z-index: 999;
position: fixed;
left: 0;
top: 0;
width: 100%;
/* #ifdef H5 */
padding-bottom: 20rpx;
/* #endif */
background-color: #fff;
.serch-wrapper {
height: 100%;
align-items: center;
padding: 0 50rpx 0 53rpx;
image {
width: 118rpx;
height: 42rpx;
margin-right: 30rpx;
}
.input,.uninput {
display: flex;
align-items: center;
/* #ifndef APP-PLUS */
width: 305rpx;
/* #endif */
/* #ifdef APP-PLUS */
flex: 1;
width: 500rpx;
/* #endif */
height: 58rpx;
padding: 0 0 0 30rpx;
background: rgba(247, 247, 247, 1);
border: 1px solid rgba(241, 241, 241, 1);
border-radius: 29rpx;
color: #bbbbbb;
font-size: 28rpx;
.iconfont {
margin-right: 20rpx;
}
}
.uninput {
/* #ifdef MP */
min-width: 450rpx;
max-width: 480rpx;
/* #endif*/
}
}
}
/* #endif */
</style>