298 lines
10 KiB
Vue
298 lines
10 KiB
Vue
<template>
|
|
<view class="summaryOfPortraitsMain">
|
|
<view class="summaryTab" v-if="selectPortrait !== 6 && selectPortrait !== 7" :style="{
|
|
height: (menu.bottom + 14) + '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.SAName ? serviceInfo.SAName : '' }}</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" :name="serviceInfo.SERVERPART_NAME"/>
|
|
</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> -->
|
|
|
|
<view class="summaryOfPortraitsBox" v-if="isHandleOnShow">
|
|
<view class="swiperItem">
|
|
<mapDetail :selectIndex="selectPortrait" />
|
|
</view>
|
|
</view>
|
|
|
|
<template v-if=false>
|
|
<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" v-if=false>
|
|
<carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo" />
|
|
</swiper-item>
|
|
<!-- 客群画像 2-->
|
|
<swiper-item class="swiperItem" v-if=false>
|
|
<guestPortrait :selectIndex="selectPortrait" />
|
|
</swiper-item>
|
|
<!-- 经营画像 3-->
|
|
<swiper-item class="swiperItem" v-if=false>
|
|
<managePortrait :selectIndex="selectPortrait" />
|
|
</swiper-item>
|
|
<!-- 交易画像 4-->
|
|
<swiper-item class="swiperItem" v-if=false>
|
|
<businessPortrait :selectIndex="selectPortrait" />
|
|
</swiper-item>
|
|
<!-- 业态品牌 5-->
|
|
<swiper-item class="swiperItem" v-if=false>
|
|
<formatPortraitBI v-if="serviceInfo.SERVERPART_NAME !== '安徽驿达'" :selectIndex="selectPortrait" />
|
|
<formatPortrait v-else :selectIndex="selectPortrait" :comeType="'summaryOfPortraits'" />
|
|
</swiper-item>
|
|
<!-- 考评考核 6-->
|
|
<swiper-item class="swiperItem" v-if=false>
|
|
<newAmine :selectIndex="selectPortrait" :pageType="1" />
|
|
</swiper-item>
|
|
<!-- 日常巡检 7-->
|
|
<swiper-item class="swiperItem" v-if=false>
|
|
<newAmine :selectIndex="selectPortrait" :pageType="2" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
|
|
</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)
|
|
} else {
|
|
let seat = uni.getStorageSync('currentService')
|
|
this.selectPortrait = seat.SERVERPART_NAME === '安徽驿达' ? 1 : 0
|
|
}
|
|
this.query = query
|
|
console.log('onLoad')
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
},
|
|
onShow() {
|
|
console.log('onShow')
|
|
console.log('selectPortrait', this.selectPortrait)
|
|
this.isShowSwiper = true
|
|
let seat = uni.getStorageSync('currentService')
|
|
console.log('seat', seat)
|
|
console.log('this.serviceInfo', JSON.parse(JSON.stringify(this.serviceInfo)))
|
|
if (this.serviceInfo.SAName !== seat.SAName) {
|
|
this.serviceInfo = seat
|
|
this.isHandleOnShow = false
|
|
this.selectPortrait = -1
|
|
uni.showLoading()
|
|
this.$forceUpdate()
|
|
setTimeout(() => {
|
|
this.isHandleOnShow = true
|
|
this.selectPortrait = 0
|
|
uni.hideLoading()
|
|
}, 100)
|
|
}
|
|
|
|
// if (this.selectPortrait) {
|
|
|
|
// } else {
|
|
// this.selectPortrait = this.query.index ? this.query.index : seat.SERVERPART_NAME === '安徽驿达' ? 1 : 0
|
|
// }
|
|
},
|
|
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)
|
|
uni.navigateTo({
|
|
url: `/pages/map/index?time=${lastDay}&serviceInfo=${JSON.stringify(currentService)}`
|
|
})
|
|
|
|
// 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-image: url("https://eshangtech.com/minTestImg/pageBg.png");
|
|
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>
|