511 lines
15 KiB
Vue
511 lines
15 KiB
Vue
<template>
|
|
<div class="header" :style="{backgroundImage: 'url('+ bgUrl +')'}">
|
|
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px',background:topBg}">
|
|
<div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
|
|
<div class="icon" @click="handleBack">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
|
|
</div>
|
|
<text class="title">{{title}}</text>
|
|
<div class="seize"></div>
|
|
</div>
|
|
</div>
|
|
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" >
|
|
<div class="picker" @click="handleGoSelectService">
|
|
<div class="selectService">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="content">
|
|
<!-- <view class="uni-input">{{serviceArray[serviceIndex]}}</view>-->
|
|
<view class="uni-input">{{serverpartName}}</view>
|
|
<!-- <text class="area">{{area}}</text>-->
|
|
<text class="area" v-if="serviceInfo.Serverpart_ID">{{spregionTypeName}}</text>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detailBox" :style="{background: detailBoxBg}">
|
|
<div class="detailTop">
|
|
<div class="topLeft" :style="{background:topLeftBg,color:topLeftColor}">{{serviceTypeObj[serviceInfoObj.SERVERPART_TYPE]}}</div>
|
|
<div class="topRight" @click="handleGoServiceMessage">
|
|
<span class="rightText">查看更多</span>
|
|
<img class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
|
|
</div>
|
|
</div>
|
|
<div class="functionList">
|
|
<div class="functionItem">
|
|
<image class="haveFun" :src="haveFun.car?haveIconObj.have:haveIconObj.noHave"/>
|
|
<image class="carIcon" :src="iconObj.car"/>
|
|
<text class="funText">司机之家</text>
|
|
</div>
|
|
<div class="functionItem">
|
|
<image class="haveFun" :src="haveFun.charge?haveIconObj.have:haveIconObj.noHave"/>
|
|
<image class="carIcon" :src="iconObj.charge"/>
|
|
<text class="funText">充电桩</text>
|
|
</div>
|
|
<div class="functionItem">
|
|
<image class="haveFun" :src="haveFun.bady?haveIconObj.have:haveIconObj.noHave"/>
|
|
<image class="carIcon" :src="iconObj.bady"/>
|
|
<text class="funText">母婴室</text>
|
|
</div>
|
|
<div class="functionItem">
|
|
<image class="haveFun" :src="haveFun.gusetHome?haveIconObj.have:haveIconObj.noHave"/>
|
|
<image class="carIcon" :src="iconObj.guestRoom"/>
|
|
<text class="funText">客房</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="label">-->
|
|
<!-- <div :class="index===0?'labelItem labelItem0':index===1?'labelItem labelItem1':index===2?'labelItem labelItem2':index===3?'labelItem labelItem3':-->
|
|
<!-- index===4?'labelItem labelItem4':index===5?'labelItem labelItem5':''" v-for="(item,index) in labelList" :key="index"-->
|
|
<!-- :style="{background: 'linear-gradient('+bgColor+')'}"-->
|
|
<!-- >{{ item }}</div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<!-- <div class="analyse" v-if="analyseText">-->
|
|
<!-- <text class="title">分析</text>-->
|
|
<!-- <text class="content">{{analyseText}}</text>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
name: "headerTop",
|
|
props:{
|
|
menu:{
|
|
type: Object,
|
|
default: ()=>{}
|
|
},
|
|
bgUrl:{
|
|
type:String,
|
|
default: ""
|
|
},
|
|
bgColor:{
|
|
type:String,
|
|
default: ""
|
|
},
|
|
title:{
|
|
type:String,
|
|
default: ""
|
|
},
|
|
topBg:{
|
|
type:String,
|
|
default: ""
|
|
},
|
|
serverpartName:{
|
|
type:String,
|
|
deafault:''
|
|
},
|
|
spregionTypeName:{
|
|
type:String,
|
|
deafault:''
|
|
},
|
|
page:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
serviceInfo:{
|
|
type:Object,
|
|
default:()=>{}
|
|
},
|
|
backType:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
analyseInfo:{
|
|
type:Object,
|
|
default:()=>{}
|
|
},
|
|
iconObj:{
|
|
type:Object,
|
|
default:{
|
|
car:'',
|
|
charge:'',
|
|
bady:'',
|
|
guestRoom:''
|
|
}
|
|
},
|
|
haveIconObj:{
|
|
type:Object,
|
|
default:{
|
|
have:'',
|
|
noHave:'',
|
|
}
|
|
},
|
|
topLeftBg:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
topLeftColor:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
detailBoxBg:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
haveFun:{
|
|
type:Object,
|
|
default:{
|
|
car:false,
|
|
charge:false,
|
|
bady:false,
|
|
gusetHome:false
|
|
}
|
|
},
|
|
serviceInfoObj:{
|
|
type:Object,
|
|
default:()=>{}
|
|
},
|
|
serviceTypeObj:{
|
|
type:Object,
|
|
default:()=>{}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
labelList:[],
|
|
analyseText:''
|
|
}
|
|
},
|
|
watch:{
|
|
analyseInfo:{
|
|
handler(value){
|
|
//获得标签
|
|
this.getLabelDetail()
|
|
},
|
|
immediate:true,
|
|
deep:true
|
|
}
|
|
},
|
|
// onLoad(){
|
|
// this.getLabelDetail()
|
|
// },
|
|
methods:{
|
|
// 点击查看更多跳转
|
|
handleGoServiceMessage(){
|
|
this.$util.toNextRoute('navigateTo', `/pages/map/detail`)
|
|
},
|
|
//获得标签
|
|
async getLabelDetail(){
|
|
let storeTime = uni.getStorageSync('lastDay')
|
|
let storeServiceInfo = uni.getStorageSync('currentService')
|
|
//六个标签
|
|
let req = {
|
|
SearchParameter:{
|
|
STATISTICS_DATE:storeTime,
|
|
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
|
|
ANALYSISINS_FORMAT:1000,
|
|
ANALYSISINS_STATE:1,
|
|
SERVERPART_ID:storeServiceInfo.Serverpart_ID,
|
|
},
|
|
PageIndex:1,
|
|
PageSize:10
|
|
}
|
|
//分析的文字
|
|
let reqText = {
|
|
SearchParameter:{
|
|
STATISTICS_DATE:storeTime,
|
|
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
|
|
ANALYSISINS_FORMAT:2000,
|
|
ANALYSISINS_STATE:1,
|
|
SERVERPART_ID:storeServiceInfo.Serverpart_ID,
|
|
},
|
|
PageIndex:1,
|
|
PageSize:10
|
|
}
|
|
//六个标签
|
|
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
|
|
let list = []
|
|
data.Result_Data.List.forEach(item=>{
|
|
list.push(item.ANALYSIS_CONTENT)
|
|
})
|
|
this.labelList = list
|
|
//分析的文字
|
|
const total = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqText)
|
|
this.analyseText = total.Result_Data.List[0]?total.Result_Data.List[0].ANALYSIS_CONTENT:''
|
|
},
|
|
//返回上一级s
|
|
handleBack(){
|
|
if (this.backType==='userCenter'){
|
|
uni.switchTab({
|
|
url: '/pages/userCenter/userCenter'
|
|
})
|
|
}else{
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
},
|
|
//点击跳转服务区
|
|
handleGoSelectService(){
|
|
uni.navigateTo({
|
|
url:`/pages/map/index?page=${this.page}&chartType=${true}&serviceInfo=${JSON.stringify(this.serviceInfo)}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header{
|
|
width: 100%;
|
|
height: 648rpx;
|
|
//height: calc(1.056 * 100vw);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding: 0 16px;
|
|
background-repeat: no-repeat;
|
|
//background-size: cover;
|
|
background-size: 100% 100%;
|
|
.headerTop{
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index:99999;
|
|
.box{
|
|
padding: 0 16px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transform: translateY(-50%);
|
|
.icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.title{
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #1C2130;
|
|
line-height: 56rpx;
|
|
}
|
|
.seize{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
.serviceArea{
|
|
width: calc(100% - 32px);
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
.picker{
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
min-width: 174px;
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
.area{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
position: absolute;
|
|
right: 0px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.detailBox{
|
|
width: 340rpx;
|
|
height: 312rpx;
|
|
border-radius: 16rpx;
|
|
margin-top: 32rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 32rpx;
|
|
.detailTop{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.topLeft{
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
|
|
border-radius: 8rpx;
|
|
padding: 0 16rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #1E67FF;
|
|
line-height: 40rpx;
|
|
}
|
|
.topRight{
|
|
display: flex;
|
|
align-items: center;
|
|
.rightText{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
}
|
|
.moreIcon{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.functionList{
|
|
.functionItem{
|
|
margin-top: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.haveFun{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
.carIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
.funText{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #6C737A;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.label{
|
|
width: calc(60% + 20px);
|
|
height: 127px;
|
|
position: relative;
|
|
margin-top: 44px;
|
|
.labelItem{
|
|
position: absolute;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 22px;
|
|
border-radius: 4px 4px 0 4px;
|
|
padding: 4px 12px;
|
|
}
|
|
.labelItem0{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
z-index:9;
|
|
}
|
|
.labelItem1{
|
|
top: 30%;
|
|
left: 5%;
|
|
z-index:8;
|
|
opacity: 0.8;
|
|
}
|
|
.labelItem2{
|
|
right: 0;
|
|
top: 30%;
|
|
opacity: 0.7;
|
|
}
|
|
.labelItem3{
|
|
top: 10%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 0.6;
|
|
}
|
|
.labelItem4{
|
|
bottom: 20%;
|
|
left: 10%;
|
|
opacity: 0.5;
|
|
}
|
|
.labelItem5{
|
|
bottom: 20%;
|
|
right: 20%;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
.analyse{
|
|
position: absolute;
|
|
bottom: 16px;
|
|
width: calc(100vw - 32px);
|
|
height: 48px;
|
|
box-sizing: border-box;
|
|
padding: 6px 12px;
|
|
background: #fff;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
.title{
|
|
width: 28px;
|
|
height: 18px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 18px;
|
|
padding: 0 4px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
background:rgba(6, 93, 255, 0.1);
|
|
}
|
|
.content{
|
|
width: calc(100% - 46px);
|
|
padding-left: 6px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|