565 lines
14 KiB
Vue
565 lines
14 KiB
Vue
<template>
|
||
<!-- 搜索框 -->
|
||
<view>
|
||
<view class="mp-header">
|
||
<!-- #ifdef MP || APP-PLUS -->
|
||
<view class="sys-head tui-skeleton" :style="{ height: `${isSmallPage?0:statusBarHeight}px` }"></view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP -->
|
||
<view class="serch-box tui-skeleton" :style="[boxStyle]" style="height: 43px;">
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP -->
|
||
<!-- 大粽子注释于 圈层功能 py-24 -->
|
||
<view class="serch-box tui-skeleton " :style="[boxStyle]">
|
||
<!-- #endif -->
|
||
<view class="serch-wrapper flex">
|
||
<view class="leftNav-box" v-if="merId">
|
||
<view class="select_nav flex justify-center align-center" id="home">
|
||
<text class="iconfont icon-ic_left px-20" @tap="returns" ></text>
|
||
<text class="iconfont icon-ic_home px-20" @tap="toHome"></text>
|
||
<text class="nav_line"></text>
|
||
</view>
|
||
</view>
|
||
<view v-if="logoConfig&&!merId" class="logo skeleton-rect">
|
||
<image :src="logoUrl" mode=""></image>
|
||
</view>
|
||
<!-- 圈层管理模式：显示位置选择 -->
|
||
<LocationDisplay v-if="locationConfig"
|
||
class="region-location-display"
|
||
:isScrolled="isScrolled"
|
||
:enableScroll="true"
|
||
:positioningType="positioningType"
|
||
@click="navigateToRegionSelect" />
|
||
|
||
<navigator :style="[contentStyle]" v-if="hotWords.length > 0"
|
||
:url="merId?'/pages/goods/goods_list/index?merId='+merId + '&searchValue='+ searchVal : `/pages/goods/goods_search/index?searchVal=${searchVal}`"
|
||
:class="inputWidth"
|
||
hover-class="none" class="input skeleton-rect">
|
||
<view class='swiperTxt' :style="[swiperTxtStyle]">
|
||
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
||
:duration="duration" vertical="true" circular="true" @change="textChange">
|
||
<block v-for="(item,index) in hotWords" :key='index'>
|
||
<swiper-item catchtouchmove='catchTouchMove'>
|
||
<view class='acea-row row-between-wrapper'>
|
||
<view class='text'>
|
||
<view class='newsTitle line1'><text class="iconfont icon-ic_search"></text><text class="ml-6">{{item.val}}</text></view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
</view>
|
||
</navigator>
|
||
<navigator hover-class="none" v-else
|
||
:url="merId?'/pages/goods/goods_list/index?merId='+merId + '&searchValue='+ searchVal : `/pages/goods/goods_search/index?searchVal=${searchVal}`" :style="[contentStyle]"
|
||
:class="inputWidth" class="skeleton-rect input">
|
||
<view class='newsTitle swiperTxt' :style="[swiperTxtStyle]">
|
||
<text class="iconfont icon-ic_search" ></text><text>{{placeWords}}</text>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view :style="'height:'+marTop+'px;'"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import LocationDisplay from '@/components/locationDisplay/index.vue'
|
||
import { getAreasList } from '@/api/api.js'
|
||
import locationManager from "@/utils/locationManager";
|
||
|
||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||
let app = getApp();
|
||
export default {
|
||
name: 'headerSerch',
|
||
components: {
|
||
LocationDisplay
|
||
},
|
||
props: {
|
||
dataConfig: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
merId: { // 商户id
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
//是否为微页面
|
||
isSmallPage: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//是否开始滚动
|
||
isScrolled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight: app.globalData.statusBarHeight,
|
||
indicatorDots: false,
|
||
autoplay: true,
|
||
duration: 500,
|
||
marTop: 0,
|
||
searchH: 0,
|
||
searchVal: '',
|
||
searchTop:0,
|
||
searchRight:0,
|
||
searchHeight:0,
|
||
statusWidth:0,
|
||
searchBoxHeight:0,
|
||
// currentLocationName: '', // 已移至LocationDisplay内部管理
|
||
// storageTimer: null, // 已移至LocationDisplay内部管理
|
||
};
|
||
},
|
||
computed: {
|
||
// 搜索框长度判断
|
||
inputWidth(){
|
||
const hasPlaceholder = this.merId || this.dataConfig?.searConfig?.tabVal !== 0;
|
||
const long = this.merId || this.dataConfig?.searConfig?.tabVal === 0;
|
||
// let hasPlaceholder = this.merId || (this.dataConfig.searConfig && this.dataConfig.searConfig.tabVal !== 0)
|
||
// let long = this.merId || (this.dataConfig.searConfig && this.dataConfig.searConfig.tabVal === 0)
|
||
return hasPlaceholder && this.isSmallPage? 'uninput-new' : long && !this.isSmallPage?'uninput':'maxInput'
|
||
},
|
||
// 页面类型，商城首页还是圈层首页
|
||
fromToType(){
|
||
return this.dataConfig.fromToType ? this.dataConfig.fromToType : ''
|
||
},
|
||
// 定位类型，0 定位，1 圈层
|
||
positioningType() {
|
||
return this.dataConfig.searchConfig ? this.dataConfig.searchConfig.tabVal == 1 : false;
|
||
},
|
||
//轮播切换时间
|
||
interval() {
|
||
return this.dataConfig.titleConfig.val * 1000
|
||
},
|
||
//判断logo图是否展示
|
||
logoConfig() {
|
||
if(!this.merId){
|
||
return this.dataConfig.logoConfig && this.dataConfig.logoConfig.url && this.dataConfig?.searConfig.tabVal === 1
|
||
}else{
|
||
return true
|
||
}
|
||
},
|
||
//判断搜索框左侧是否展示定位
|
||
locationConfig() {
|
||
if(!this.merId){
|
||
return this.dataConfig.searConfig.tabVal === 2
|
||
}else{
|
||
return false
|
||
}
|
||
},
|
||
//logo图
|
||
logoUrl() {
|
||
if(!this.merId){
|
||
if(this.isScrolled&&this.dataConfig.logoFixConfig.url){
|
||
return this.dataConfig.logoFixConfig.url
|
||
}else{
|
||
return this.dataConfig.logoConfig.url
|
||
}
|
||
}
|
||
},
|
||
//最外层盒子的样式
|
||
boxStyle() {
|
||
return {
|
||
borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
|
||
background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
|
||
margin: 0 + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
|
||
' ' + 0,
|
||
// #ifdef MP
|
||
height:this.searchBoxHeight + 'px',
|
||
// #endif
|
||
}
|
||
},
|
||
//搜索热词
|
||
hotWords() {
|
||
return this.dataConfig.hotWords.list.length ? this.dataConfig.hotWords.list : []
|
||
},
|
||
//内容圆角
|
||
contentStyle() {
|
||
return {
|
||
borderRadius: this.dataConfig.contentStyle.val ? this.dataConfig.contentStyle.val + 'px' : '0',
|
||
background: this.dataConfig.borderColor.color[0].item,
|
||
color: this.dataConfig.textColor.color[0].item,
|
||
textAlign: this.dataConfig.textPosition.list[this.dataConfig.textPosition.tabVal].style,
|
||
// #ifdef MP
|
||
height:this.searchHeight + 'px',
|
||
flex:!this.isSmallPage?1:'',
|
||
marginRight:!this.isSmallPage?(this.statusWidth + this.searchRight+'px'):'',
|
||
// #endif
|
||
}
|
||
},
|
||
swiperTxtStyle(){
|
||
return {
|
||
// #ifdef MP
|
||
lineHeight:this.searchHeight + 'px',
|
||
// #endif
|
||
// #ifdef H5
|
||
lineHeight: '58rpx',
|
||
height: '58rpx',
|
||
// #endif
|
||
}
|
||
},
|
||
//搜索提示语
|
||
placeWords() {
|
||
return this.dataConfig.placeWords.val;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.clearRegionIds();
|
||
// 搜热词刚进入页面
|
||
this.searchVal = this.hotWords.length ? this.hotWords[0].val : '';
|
||
// 使用nextTick，确保页面更新结束后，再请求高度
|
||
// #ifdef MP || APP-PLUS
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
// 获取小程序头部高度
|
||
let info = uni.createSelectorQuery().in(this).select(".serch-box");
|
||
info.boundingClientRect((data)=> {
|
||
this.marTop = this.isSmallPage ? data.height :data.height + this.statusBarHeight
|
||
}).exec()
|
||
}, 100)
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef MP
|
||
const res = uni.getMenuButtonBoundingClientRect()
|
||
const statusHeight = res.top //胶囊距离顶部
|
||
const statusRight = res.right //胶囊右边界坐标
|
||
const jnHeight = res.height //胶囊高度
|
||
this.statusWidth= res.width
|
||
this.searchTop=statusHeight-this.statusBarHeight
|
||
this.searchHeight=jnHeight
|
||
this.searchBoxHeight = this.searchTop*2 + jnHeight
|
||
//搜索框宽度计算
|
||
uni.getSystemInfo({
|
||
success:res=>{
|
||
this.searchRight=res.windowWidth-statusRight-this.dataConfig.lrConfig.val
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
this.marTop = 43
|
||
// #endif
|
||
},
|
||
methods: {
|
||
clearRegionIds(){
|
||
if(this.dataConfig.searConfig && this.dataConfig.searConfig.tabVal< 2) locationManager.clearHistoricalAreaCache()
|
||
},
|
||
// 后退
|
||
returns: function() {
|
||
uni.navigateBack();
|
||
},
|
||
textChange(e) {
|
||
let { source } = e.detail;
|
||
if (source === 'autoplay' || source === 'touch') {
|
||
this.searchVal = this.hotWords[e.detail.current]['val'];
|
||
}
|
||
},
|
||
toBack(){
|
||
uni.navigateBack();
|
||
},
|
||
toHome(){
|
||
this.$util.navigateTo('/pages/index/index');
|
||
},
|
||
// ============ 以下位置管理方法已移至LocationDisplay内部 ============
|
||
// 圈层管理模式：根据用户地址查询圈层列表
|
||
|
||
async navigateToRegionSelect() {
|
||
if(this.positioningType){
|
||
uni.navigateTo({
|
||
url: '/pages/circle/specify'
|
||
});
|
||
return
|
||
}
|
||
try {
|
||
// 获取当前用户地址
|
||
const locationInfo = uni.getStorageSync('location_info');
|
||
let userAddress = '';
|
||
|
||
if (locationInfo && (locationInfo.name || locationInfo.address)) {
|
||
userAddress = locationInfo.name || locationInfo.address;
|
||
} else {
|
||
// 没有地址信息，跳转到选择页面
|
||
uni.navigateTo({
|
||
url: '/pages/circle/select'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 调用API查询圈层列表
|
||
const response = await getAreasList({
|
||
address: userAddress,
|
||
distance: 10 // 默认10km范围
|
||
});
|
||
|
||
if (response && response.data && response.data.length > 0) {
|
||
// 查询成功，跳转到圈层选择页面并传递数据
|
||
const regionsData = encodeURIComponent(JSON.stringify(response.data));
|
||
uni.navigateTo({
|
||
url: `/pages/circle/select?regions=${regionsData}&fromAddress=${encodeURIComponent(userAddress)}`
|
||
});
|
||
} else {
|
||
// 没有查询到圈层，提示用户
|
||
uni.showToast({
|
||
title: '该地址暂无可选圈层',
|
||
icon: 'none'
|
||
});
|
||
// 仍然跳转到选择页面让用户手动选择
|
||
|
||
uni.navigateTo({
|
||
url: '/pages/circle/select'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('查询圈层列表失败:', error);
|
||
// 出错时跳转到原来的选择页面
|
||
uni.navigateTo({
|
||
url: '/pages/circle/select'
|
||
});
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.uninput-new{
|
||
width: 75% !important;
|
||
}
|
||
.ml40 {
|
||
margin-left: 40rpx;
|
||
}
|
||
.sys-head{
|
||
background: #f5f5f5;
|
||
}
|
||
.header {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
|
||
.btn {
|
||
position: relative;
|
||
|
||
.iconfont {
|
||
font-size: 45rpx;
|
||
}
|
||
}
|
||
|
||
.iconnum {
|
||
min-width: 6px;
|
||
color: #fff;
|
||
border-radius: 15rpx;
|
||
position: absolute;
|
||
right: -10rpx;
|
||
top: -10rpx;
|
||
font-size: 10px;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.serch-wrapper {
|
||
align-items: center;
|
||
padding: 20rpx 24rpx 20rpx 24rpx;
|
||
|
||
.logo {
|
||
width: 152rpx;
|
||
height: 60rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.swiperTxt {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* #ifndef MP */
|
||
line-height: 58rpx;
|
||
/* #endif */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.swiperTxt .text {
|
||
width: 100%;
|
||
}
|
||
|
||
.swiperTxt .text .label {
|
||
font-size: 20rpx;
|
||
color: #ff4c48;
|
||
width: 64rpx;
|
||
height: 30rpx;
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
line-height: 28rpx;
|
||
border: 2rpx solid #ff4947;
|
||
}
|
||
|
||
.swiperTxt .text .newsTitle {
|
||
// width: 300rpx;
|
||
font-size: 24rpx;
|
||
// text-align: center;
|
||
/* #ifdef MP */
|
||
// width: 260rpx !important;
|
||
/* #endif */
|
||
}
|
||
|
||
.swiperTxt swiper {
|
||
height: 100%;
|
||
}
|
||
|
||
.mp-header {
|
||
z-index: 90;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
|
||
.logo {
|
||
line-height: 0;
|
||
}
|
||
|
||
.serch-wrapper {
|
||
height: 100%;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
/* #ifdef H5 */
|
||
margin-top: 10rpx;
|
||
height: 60rpx;
|
||
/* #endif */
|
||
|
||
image {
|
||
width: 152rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.input,
|
||
.uninput {
|
||
display: flex;
|
||
align-items: center;
|
||
/* #ifdef MP*/
|
||
width: 48%;
|
||
/* #endif */
|
||
/* #ifdef H5 || APP*/
|
||
width: 100%;
|
||
flex: 1;
|
||
/* #endif */
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
padding: 0 20rpx 0 20rpx;
|
||
background: rgba(0, 0, 0, 0.22);
|
||
border-radius: 29rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
.iconfont {
|
||
// position: absolute;
|
||
left: 14rpx;
|
||
font-size: 26rpx;
|
||
//top: 10rpx;
|
||
}
|
||
.line1{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.uninput {
|
||
/* #ifdef MP */
|
||
width: 75% ;
|
||
/* #endif */
|
||
/* #ifndef MP */
|
||
width: 100%;
|
||
/* #endif */
|
||
}
|
||
}
|
||
}
|
||
.maxInput{
|
||
width: 100% !important;
|
||
}
|
||
.leftNav{
|
||
width: 144rpx !important;
|
||
height: 60rpx !important;
|
||
margin-right: 20rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
.leftNav-box{
|
||
position: relative;
|
||
margin-right: 20rpx;
|
||
}
|
||
.left{
|
||
position: absolute;
|
||
width: 72rpx;
|
||
height: 50rpx;
|
||
top: 10rpx;
|
||
}
|
||
.right{
|
||
position: absolute;
|
||
width: 72rpx;
|
||
height: 50rpx;
|
||
top: 10rpx;
|
||
left:72rpx;;
|
||
}
|
||
.select_nav {
|
||
background: rgba(255,255,255,0.6);
|
||
border: 1rpx solid rgba(0,0,0,0.1);
|
||
color: #000;
|
||
font-size: 18px;
|
||
line-height: 58rpx;
|
||
z-index: 1000;
|
||
border-radius: 29rpx;
|
||
}
|
||
.nav_line {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 1rpx;
|
||
height: 30rpx;
|
||
background: #e8dfdf;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 19rpx auto;
|
||
}
|
||
.px-20 {
|
||
padding: 0 20rpx 0;
|
||
}
|
||
|
||
/* 圈层管理模式下的位置显示优化 - 仅H5平台 */
|
||
/* #ifdef H5 */
|
||
.region-location-display {
|
||
width: 200rpx !important;
|
||
min-width: 200rpx !important;
|
||
max-width: 200rpx !important;
|
||
}
|
||
|
||
.region-location-display .location-text {
|
||
max-width: 170rpx !important;
|
||
min-width: 170rpx !important;
|
||
width: 170rpx !important;
|
||
height: 100% !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
.region-location-display .text-content {
|
||
font-size: 12px !important;
|
||
width: max-content !important;
|
||
line-height: 1.2 !important;
|
||
height: auto !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
}
|
||
/* #endif */
|
||
</style> |