244 lines
8.4 KiB
Vue
244 lines
8.4 KiB
Vue
<template>
|
|
<view class="summaryOfPortraitsMain">
|
|
<view class="summaryTab" v-if="selectPortrait!==6 && selectPortrait!==7" :style="{height: (menu.bottom + 62) + 'px',background:selectPortrait===0?'':
|
|
selectPortrait===1?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #A8BFED 0%, #F0F5FF 100%)':'linear-gradient(180deg, #A8BFED 0%, #C3D3F4 100%)':
|
|
selectPortrait===2?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #A0D0C1 0%, #EEF7F8 100%)':'linear-gradient(180deg, #A0D0C1 0%, #C0E0D7 100%)':
|
|
selectPortrait===3?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)':'linear-gradient(180deg, #D9CCEF 0%, #F4F0FF 100%)':
|
|
selectPortrait===4?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)':'linear-gradient(180deg, #ECD1AF 0%, #F0DDC4 100%)':
|
|
selectPortrait===5?serviceInfo.SERVERPART_NAME==='安徽驿达'?'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)':'linear-gradient(180deg, #C5C1F0 0%, #EEF0FE 100%)':
|
|
''}">
|
|
<div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" >
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click="handleBack"></image>
|
|
<div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleChangeService">
|
|
<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">{{serviceInfo.SERVERPART_NAME?serviceInfo.SERVERPART_NAME:''}}</view>
|
|
<p class="area">{{serviceInfo.SPREGIONTYPE_NAME?serviceInfo.SPREGIONTYPE_NAME:''}}</p>
|
|
<text class="noticeText" v-if="serviceInfo.SERVERPART_NAME==='安徽驿达'">选择您要看的服务区</text>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<view style="width: 100%">
|
|
<sliderPage :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else :style="{width: '100%',position:'fixed',top:(menu.bottom + 14) + 'px',left:0,zIndex:999}">
|
|
<sliderPage :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
|
|
</view>
|
|
|
|
<swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait" >
|
|
<!-- 服务区基本信息 0-->
|
|
<swiper-item class="swiperItem">
|
|
<mapDetail :selectIndex="selectPortrait"/>
|
|
</swiper-item>
|
|
<!-- 车流预警 1-->
|
|
<swiper-item class="swiperItem" >
|
|
<carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo"/>
|
|
</swiper-item>
|
|
<!-- 客群画像 2-->
|
|
<swiper-item class="swiperItem">
|
|
<guestPortrait :selectIndex="selectPortrait"/>
|
|
</swiper-item>
|
|
<!-- 经营画像 3-->
|
|
<swiper-item class="swiperItem">
|
|
<managePortrait :selectIndex="selectPortrait"/>
|
|
</swiper-item>
|
|
<!-- 交易画像 4-->
|
|
<swiper-item class="swiperItem">
|
|
<businessPortrait :selectIndex="selectPortrait"/>
|
|
</swiper-item>
|
|
<!-- 业态品牌 5-->
|
|
<swiper-item class="swiperItem">
|
|
<formatPortraitBI v-if="serviceInfo.SERVERPART_NAME!=='安徽驿达'" :selectIndex="selectPortrait"/>
|
|
<formatPortrait v-else :selectIndex="selectPortrait" :comeType="'summaryOfPortraits'"/>
|
|
</swiper-item>
|
|
<!-- 考评考核 6-->
|
|
<swiper-item class="swiperItem">
|
|
<newAmine :selectIndex="selectPortrait" :pageType="1" />
|
|
</swiper-item>
|
|
<!-- 日常巡检 7-->
|
|
<swiper-item class="swiperItem">
|
|
<newAmine :selectIndex="selectPortrait" :pageType="2"/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import mapDetail from "./components/mapDetail.vue";
|
|
import carPortrait from "./components/carPortrait.vue";
|
|
import guestPortrait from "./components/guestPortrait.vue";
|
|
import managePortrait from "./components/managePortrait.vue";
|
|
import businessPortrait from "./components/businessPortrait.vue"
|
|
import formatPortraitBI from "./components/formatPortraitBI.vue";
|
|
import formatPortrait from "./components/formatPortrait.vue";
|
|
import newAmine from "./components/newAmine.vue";
|
|
import sliderPage from "./components/components/sliderPage.vue";
|
|
export default {
|
|
components:{mapDetail,carPortrait,guestPortrait,managePortrait,businessPortrait,formatPortraitBI,newAmine,sliderPage,formatPortrait},
|
|
data(){
|
|
return {
|
|
selectPortrait:0,// 选择要看的商业画像
|
|
query:'',// 传入的页面元素
|
|
isShowSwiper:false,// 是否显示滑动块
|
|
menu:{},
|
|
serviceInfo:{},// 当前选中服务区
|
|
isHandleOnShow: true,// 是否调用onShow的方法
|
|
}
|
|
},
|
|
onLoad(query){
|
|
console.log('query',query)
|
|
if (query.index){
|
|
this.selectPortrait = Number(query.index)
|
|
}
|
|
console.log('onLoad')
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
},
|
|
onShow(){
|
|
console.log('onShow')
|
|
this.isShowSwiper = true
|
|
let seat = uni.getStorageSync('currentService')
|
|
console.log('seat',seat)
|
|
this.serviceInfo = seat
|
|
},
|
|
onHide(){
|
|
this.isShowSwiper = false
|
|
},
|
|
methods:{
|
|
// 商业汇总的滑动方法
|
|
handleChangeSelect(e){
|
|
console.log('e',e)
|
|
// this.handleChangePreview(true)
|
|
this.selectPortrait = e.detail.current
|
|
},
|
|
// 切换页码
|
|
handleChangeIndex(e){
|
|
this.selectPortrait = e
|
|
this.$forceUpdate()
|
|
},
|
|
// 返回
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
// 服务区跳转
|
|
handleChangeService(){
|
|
let currentService = uni.getStorageSync('currentService')
|
|
let lastDay = uni.getStorageSync('lastDay')
|
|
let pageList = getCurrentPages()
|
|
console.log('pageList',pageList)
|
|
if (pageList.length>2){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:`/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.summaryOfPortraitsMain{
|
|
width: 100%;
|
|
height: 100%;
|
|
.summaryTab{
|
|
position: fixed;
|
|
left:0;top: 0;
|
|
width: 100vw;
|
|
background: transparent;
|
|
z-index: 99;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
padding-bottom: 16px;
|
|
.leftArrow{
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index:99999999999;
|
|
.img{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
.picker{
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-40px);
|
|
box-sizing: border-box;
|
|
padding-left: 35px;
|
|
padding-right: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.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;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
.noticeText{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #B6BACB;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.summaryOfPortraitsBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
.swiperItem{
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
}
|
|
}
|
|
</style>
|