|
|
|
<template name="head">
|
|
|
|
<!-- 头部内容 -->
|
|
|
|
<view class="headBoxBox" :style="{height: headHeight + 'px'}">
|
|
|
|
<view class="headBox" :style="{height: headHeight + 'px',background:'#'+ bgColor}">
|
|
|
|
<!-- 状态栏 -->
|
|
|
|
<view class="state" :style="{height: statusHeight + 'px'}"></view>
|
|
|
|
<!-- 导航栏 -->
|
|
|
|
<view class="nav" :style="{height: navHeight + 'px'}">
|
|
|
|
<!-- 返回按钮 -->
|
|
|
|
<view :class="[backBtnColor ? 'backBtnWhite' : 'backBtnBlack']" v-if="backBtn" @click="backDefault">
|
|
|
|
</view>
|
|
|
|
<!-- 定位 -->
|
|
|
|
<view class="address" v-if="bottomBtn" @click="toAddress">
|
|
|
|
<view class="addressText">
|
|
|
|
{{address}}
|
|
|
|
</view>
|
|
|
|
<view class="bottomBtn"></view>
|
|
|
|
</view>
|
|
|
|
<!-- 首页搜索框 -->
|
|
|
|
<view class="search" :style="{height: ellipse + 'px'}" v-if="search" @click="toNewPage">
|
|
|
|
<image class="searchImg" src="/static/mine/ic_search.png" mode="widthFix"></image>
|
|
|
|
<input type="text" :focus="true" placeholder="搜索" placeholder-class="placeholder" />
|
|
|
|
</view>
|
|
|
|
<!-- 地址搜索框 -->
|
|
|
|
<view class="searchTwo" :style="{height: ellipse + 'px'}" v-if="addressSearch" @click="toNewPage">
|
|
|
|
<image class="searchImg" src="/static/mine/ic_search.png" mode="widthFix"></image>
|
|
|
|
<input class="overdian" type="text" :value="searchContent" :placeholder="placeholder" placeholder-class="placeholderTwo" @input="iptContent"/>
|
|
|
|
</view>
|
|
|
|
<!-- 顶部标题 -->
|
|
|
|
<view class="title" v-if="showTitle">
|
|
|
|
{{title}}
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: "head",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
headHeight: '',
|
|
|
|
|
|
|
|
//状态栏高度
|
|
|
|
statusHeight: '',
|
|
|
|
|
|
|
|
//导航栏高度
|
|
|
|
navHeight: '',
|
|
|
|
|
|
|
|
// 胶囊高度
|
|
|
|
ellipse: '',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
//背景色
|
|
|
|
bgColor: String,
|
|
|
|
// 标题
|
|
|
|
title: String, //内容
|
|
|
|
showTitle: Boolean, //显隐
|
|
|
|
// 返回按钮
|
|
|
|
backBtnColor: Boolean, //颜色 默认黑色 true为白色
|
|
|
|
backBtn: Boolean, // 按钮显隐
|
|
|
|
howBack: Boolean, //返回方式 默认返回上一页 true为自定义返回页面
|
|
|
|
customURL: String, //自定义返回路径 绝对路径
|
|
|
|
// 搜索框
|
|
|
|
search: Boolean, //首页搜索框显隐
|
|
|
|
addressSearch: Boolean, //普通搜索框显隐
|
|
|
|
searchContent: String, // 搜索值
|
|
|
|
placeholder: String, //输入框提示信息
|
|
|
|
toNewUrl: String, //点击跳转页面路径
|
|
|
|
// 地址
|
|
|
|
bottomBtn: Boolean, //显隐
|
|
|
|
address: String, //地址信息
|
|
|
|
newAddress: String, //地址跳转
|
|
|
|
// 定位搜索
|
|
|
|
showSearhcInput: Boolean
|
|
|
|
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
// 设备信息
|
|
|
|
let detail = uni.getSystemInfoSync()
|
|
|
|
// 获取设备的系统
|
|
|
|
let system = detail.system
|
|
|
|
//获取状态栏高度
|
|
|
|
this.statusHeight = detail.statusBarHeight
|
|
|
|
// 胶囊信息
|
|
|
|
let ellipse = uni.getMenuButtonBoundingClientRect()
|
|
|
|
//获取胶囊高度
|
|
|
|
this.ellipse = ellipse.height
|
|
|
|
//获取胶囊距顶部距离
|
|
|
|
let absTop = ellipse.top
|
|
|
|
//计算导航栏高度 = (胶囊距顶部距离 - 状态栏高度) * 2 + 胶囊高度
|
|
|
|
this.navHeight = (absTop - this.statusHeight) * 2 + this.ellipse
|
|
|
|
//计算整体高度
|
|
|
|
let cheack = /iOS/
|
|
|
|
//判断设备型号
|
|
|
|
if (cheack.test(system)) {
|
|
|
|
// iOS
|
|
|
|
this.headHeight = this.statusHeight + this.navHeight + 4
|
|
|
|
} else {
|
|
|
|
//Android
|
|
|
|
this.headHeight = this.statusHeight + this.navHeight
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
//返回上一页
|
|
|
|
backDefault() {
|
|
|
|
if (this.howBack) {
|
|
|
|
uni.reLaunch({
|
|
|
|
url: this.customURL
|
|
|
|
})
|
|
|
|
console.log("请填写指定路径");
|
|
|
|
console.log(this.customURL);
|
|
|
|
} else {
|
|
|
|
uni.navigateBack({
|
|
|
|
delta: 1
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// 搜索框点击
|
|
|
|
toNewPage() {
|
|
|
|
uni.navigateTo({
|
|
|
|
url: this.toNewUrl
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//地址跳转
|
|
|
|
toAddress() {
|
|
|
|
let that = this
|
|
|
|
uni.authorize({
|
|
|
|
scope: 'scope.userLocation',
|
|
|
|
success() {
|
|
|
|
uni.navigateTo({
|
|
|
|
url: that.newAddress
|
|
|
|
})
|
|
|
|
},
|
|
|
|
fail(err){
|
|
|
|
console.log(err)
|
|
|
|
that.$emit('alertModel',true)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//监听输入内容
|
|
|
|
iptContent(e){
|
|
|
|
// console.log(e)
|
|
|
|
this.$emit('getChild',e)
|
|
|
|
let val = e.detail.value
|
|
|
|
if(/^[\x00-\xff]/.test(val)){
|
|
|
|
let v = {
|
|
|
|
first:val
|
|
|
|
}
|
|
|
|
this.$myRequest('/api/index/cit',v).then(res =>{
|
|
|
|
this.$emit('getRes',res)
|
|
|
|
})
|
|
|
|
}else{
|
|
|
|
let v = {
|
|
|
|
shortname:val
|
|
|
|
}
|
|
|
|
this.$myRequest('/api/index/keywords',v).then(res =>{
|
|
|
|
this.$emit('getRes',res)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.headBoxBox {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.headBox,
|
|
|
|
.state,
|
|
|
|
.nav {
|
|
|
|
width: 750rpx;
|
|
|
|
}
|
|
|
|
/* 头部整体内容 */
|
|
|
|
.headBox {
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
/* 状态栏 */
|
|
|
|
.state {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 导航栏 */
|
|
|
|
.nav {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 搜索框 */
|
|
|
|
.search {
|
|
|
|
width: 400rpx;
|
|
|
|
border-radius: 200rpx;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-55%, -50%);
|
|
|
|
background: rgba(255, 255, 255, 0.8);
|
|
|
|
}
|
|
|
|
|
|
|
|
.searchTwo {
|
|
|
|
padding-left: 32rpx;
|
|
|
|
width: 448rpx;
|
|
|
|
border-radius: 200rpx;
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: center;
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 48%;
|
|
|
|
transform: translate(-60%, -50%);
|
|
|
|
background: rgba(247, 248, 250, 0.8);
|
|
|
|
}
|
|
|
|
|
|
|
|
.searchImg {
|
|
|
|
width: 32rpx;
|
|
|
|
height: 32rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search>input {
|
|
|
|
width: 60rpx;
|
|
|
|
color: #323233;
|
|
|
|
}
|
|
|
|
|
|
|
|
.searchTwo>input {
|
|
|
|
color: #323233;
|
|
|
|
margin-left: 8rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.placeholder {
|
|
|
|
color: #969799;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.placeholderTwo {
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #C8C9CC;
|
|
|
|
}
|
|
|
|
|
|
|
|
.backBtnBlack {
|
|
|
|
margin-left: 32rpx;
|
|
|
|
right: 50rpx;
|
|
|
|
top: 150rpx;
|
|
|
|
content: "";
|
|
|
|
display: inline-block;
|
|
|
|
height: 20rpx;
|
|
|
|
width: 20rpx;
|
|
|
|
border-width: 0 0 2px 2px;
|
|
|
|
border-color: #000;
|
|
|
|
border-style: solid;
|
|
|
|
transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
|
|
|
|
-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.backBtnWhite {
|
|
|
|
margin-left: 32rpx;
|
|
|
|
right: 50rpx;
|
|
|
|
top: 150rpx;
|
|
|
|
content: "";
|
|
|
|
display: inline-block;
|
|
|
|
height: 20rpx;
|
|
|
|
width: 20rpx;
|
|
|
|
border-width: 0 0 2px 2px;
|
|
|
|
border-color: #fff;
|
|
|
|
border-style: solid;
|
|
|
|
transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
|
|
|
|
-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.bottomBtn {
|
|
|
|
right: 50rpx;
|
|
|
|
top: 150rpx;
|
|
|
|
content: "";
|
|
|
|
display: inline-block;
|
|
|
|
height: 16rpx;
|
|
|
|
width: 16rpx;
|
|
|
|
border-width: 0 2px 2px 0;
|
|
|
|
border-color: #fff;
|
|
|
|
border-style: solid;
|
|
|
|
transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
|
|
|
|
-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.address {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
margin-left: 32rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.addressText {
|
|
|
|
color: #fff;
|
|
|
|
font-weight: 600;
|
|
|
|
width: 96rpx;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.overdian{
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
display: -webkit-box;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
