1032 lines
50 KiB
Vue
1032 lines
50 KiB
Vue
<template>
|
|
<view class="main">
|
|
<!-- :scroll-y="pageScroll" :scroll-into-view="currentView" :scroll-with-animation="true"-->
|
|
<view class="pageContent">
|
|
<view class="topImg" :style="{height: serviceImageList && serviceImageList.length>0 ? '430rpx':(menu.bottom + 20) + 'px' }" @click="handlePreview">
|
|
<image class="img" :style="{top: menu.top + ((menu.height - 24)/2) + 'px'}" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" @click.stop="handleBack"></image>
|
|
<swiper :current="currentImg" class="carousel" @change="changeSwiper">
|
|
<swiper-item class="imgIndex" v-for="(item,index) in serviceImageList" :key="index" >
|
|
<image style="width: 100%;height: 100%" :src="item" ></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view v-if="serviceImageList && serviceImageList.length>0" class="picNumber" >
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/discovery/noImg.svg"></image>
|
|
<text class="text"> {{ currentImg+1<=1?1:currentImg>serviceImageList.length?serviceImageList.length:currentImg + 1 }} / {{ serviceImageList.length }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="contentBox" :style="{height: serviceImageList && serviceImageList.length>0 ? 'calc(100vh - 430rpx + 42rpx)' : 'calc(100vh - ' + (menu.bottom + 20) +'px'+' )' }">
|
|
<!-- 顶部内容-->
|
|
<view class="topBg">
|
|
<view class="contentTop">
|
|
<view class="left">
|
|
<view class="leftTop">
|
|
<view class="serviceName">{{detail.SERVERPART_NAME || ''}}</view>
|
|
<view class="stateBox">运营中</view>
|
|
</view>
|
|
<view class="leftBottom">
|
|
<span class="address" v-if="detail && detail.ServerpartInfo">{{detail.ServerpartInfo.SERVERPART_ADDRESS || ''}}</span>
|
|
</view>
|
|
</view>
|
|
<view class="rightMessage" @click="handleToMap" v-if="detail.SERVERPART_DISTANCE">
|
|
<image class="navigationIcon" src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"/>
|
|
<span class="distance">{{detail.SERVERPART_DISTANCE?detail.SERVERPART_DISTANCE + 'km' : ''}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--tab-->
|
|
<view class="tabBox">
|
|
<view :class="selectTab === item.value ?'tabItem selectTabItem':'tabItem'" v-for="(item,index) in tabList" :key="index" @click="handleChangeTab(item.value)">{{item.label || ''}}</view>
|
|
</view>
|
|
<scroll-view class="scrollBox" :scroll-y="pageScroll" :scroll-into-view="currentView" :scroll-with-animation="true">
|
|
<!-- 充电信息-->
|
|
<view class="detailItem" id="chargeBox">
|
|
<view class="top">
|
|
<image class="boxIcon" src="https://eshangtech.com/ShopICO/discovery/chargeIcon.png"/>
|
|
<span class="boxName">充电信息</span>
|
|
</view>
|
|
<view class="chargeContent">
|
|
<!-- 充电桩 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image class="configIcon" src="https://eshangtech.com/ShopICO/discovery/chargeLabel1.png"/>
|
|
</view>
|
|
<view class="rightItem">
|
|
<image class="smallIcon" src="https://eshangtech.com/ShopICO/discovery/chargeSmallIcon.png"/>
|
|
<span class="value">{{ detailInfo.LIVESTOCKPACKING || '-' }}</span>
|
|
</view>
|
|
</view>
|
|
<!-- 国网 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image class="configIcon" src="https://eshangtech.com/ShopICO/discovery/chargeLabel2.png"/>
|
|
</view>
|
|
<view class="rightItem">
|
|
<image class="smallIcon" src="https://eshangtech.com/ShopICO/discovery/chargeSmallIcon.png"/>
|
|
<span class="value">{{ detailInfo.STATEGRIDCHARGE || '-' }}</span>
|
|
</view>
|
|
</view>
|
|
<!-- 理想5C -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image class="configIcon" src="https://eshangtech.com/ShopICO/discovery/chargeLabel3.png"/>
|
|
</view>
|
|
<view class="rightItem">
|
|
<image class="smallIcon" src="https://eshangtech.com/ShopICO/discovery/chargeSmallIcon.png"/>
|
|
<span class="value">{{ detailInfo.LIAUTOCHARGE || '-' }}</span>
|
|
</view>
|
|
</view>
|
|
<!-- 广汽能源 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image class="configIcon" src="https://eshangtech.com/ShopICO/discovery/chargeLabel4.png"/>
|
|
</view>
|
|
<view class="rightItem">
|
|
<image class="smallIcon" src="https://eshangtech.com/ShopICO/discovery/chargeSmallIcon.png"/>
|
|
<span class="value">{{ detailInfo.GACENERGYCHARGE || '-' }}</span>
|
|
</view>
|
|
</view>
|
|
<!-- 其他 -->
|
|
<view class="contentItem">
|
|
<view class="leftItem">
|
|
<image class="configIcon" src="https://eshangtech.com/ShopICO/discovery/chargeLabel5.png"/>
|
|
</view>
|
|
<view class="rightItem">
|
|
<image class="smallIcon" src="https://eshangtech.com/ShopICO/discovery/chargeSmallIcon.png"/>
|
|
<span class="value">{{ detailInfo.OTHERCHARGE || '-' }}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 加油信息-->
|
|
<view class="detailItem" id="gasBox">
|
|
<view class="top">
|
|
<image class="boxIcon" src="https://eshangtech.com/ShopICO/discovery/gasIcon.png"/>
|
|
<span class="boxName">加油信息</span>
|
|
</view>
|
|
|
|
<view class="gasContent">
|
|
<view class="gasItem first">
|
|
<image class="gasItemIcon" src="https://eshangtech.com/ShopICO/discovery/92Icon.png"/>
|
|
<span class="label">#加油枪</span>
|
|
<span class="value">{{ detailInfo.REFUELINGGUN92 || '-' }}</span>
|
|
</view>
|
|
<view class="gasItem second">
|
|
<image class="gasItemIcon" src="https://eshangtech.com/ShopICO/discovery/95Icon.png"/>
|
|
<span class="label">#加油枪</span>
|
|
<span class="value">{{ detailInfo.REFUELINGGUN95 || '-' }}</span>
|
|
</view>
|
|
<view class="gasItem third">
|
|
<image class="gasItemIcon" src="https://eshangtech.com/ShopICO/discovery/zeroIcon.png"/>
|
|
<span class="label">#加油枪</span>
|
|
<span class="value">{{ detailInfo.REFUELINGGUN0 || '-' }}</span>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 服务信息-->
|
|
<view class="detailItem" id="serviceConfigBox">
|
|
<view class="top">
|
|
<image class="boxIcon" src="/static/images/discovery/serviceConfigIcon.png"/>
|
|
<span class="boxName">服务区信息</span>
|
|
</view>
|
|
<view class="serviceContent">
|
|
<view class="serviceItem">
|
|
<view class="smallTitle">卫生间</view>
|
|
<view class="serviceMessage">
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.HASPANTRY?'https://eshangtech.com/ShopICO/discovery/manWCIcon.png':'https://eshangtech.com/ShopICO/discovery/noManWCIcon.png'"/>
|
|
<view class="serviceName">男厕</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.HASPANTRY || '-'}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.HASWIFI?'https://eshangtech.com/ShopICO/discovery/womanWCIcon.png':'https://eshangtech.com/ShopICO/discovery/noWomanWCIcon.png'"/>
|
|
<view class="serviceName">女厕</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.HASWIFI || '-'}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.TOILETCOUNT?'https://eshangtech.com/ShopICO/discovery/tideWC.png':'https://eshangtech.com/ShopICO/discovery/noTideWC.png'"/>
|
|
<view class="serviceName">潮汐厕位</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.TOILETCOUNT || '-'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="serviceItem" style="margin-top: 40rpx">
|
|
<view class="smallTitle">其他服务</view>
|
|
<view class="serviceMessage">
|
|
<view class="messageItem" style="margin-bottom: 24rpx;">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.HASSHOWERROOM?'https://eshangtech.com/ShopICO/discovery/shower.png':'https://eshangtech.com/ShopICO/discovery/noShower.png'"/>
|
|
<view class="serviceName">淋浴间</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.HASSHOWERROOM || '-'}}</view>
|
|
</view>
|
|
<view class="messageItem" style="margin-bottom: 24rpx;">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.HASWATERROOM?'https://eshangtech.com/ShopICO/discovery/waterBoiler.png':'https://eshangtech.com/ShopICO/discovery/noWaterBoiler.png'"/>
|
|
<view class="serviceName">开水器</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.HASWATERROOM || '-'}}</view>
|
|
</view>
|
|
<view class="messageItem" style="margin-bottom: 24rpx;">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.MICROWAVEOVEN?'https://eshangtech.com/ShopICO/discovery/microwave.png':'https://eshangtech.com/ShopICO/discovery/noMicrowave.png'"/>
|
|
<view class="serviceName">微波炉</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.MICROWAVEOVEN || '-'}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.WASHERCOUNT?'https://eshangtech.com/ShopICO/discovery/washing.png':'https://eshangtech.com/ShopICO/discovery/noWashing.png'"/>
|
|
<view class="serviceName">洗衣机</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.WASHERCOUNT || '-'}}</view>
|
|
</view>
|
|
<view class="messageItem">
|
|
<view class="serviceTop">
|
|
<image class="serviceIcon" :src="detailInfo.SLEEPINGPODS?'https://eshangtech.com/ShopICO/discovery/sleep.png':'https://eshangtech.com/ShopICO/discovery/noSleep.png'"/>
|
|
<view class="serviceName">睡眠仓</view>
|
|
</view>
|
|
<view class="serviceBottom">{{detailInfo.SLEEPINGPODS || '-'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="serviceItem" style="margin-top: 40rpx">
|
|
<view class="smallTitle">配套设置</view>
|
|
<view class="otherMessage">
|
|
<view class="otherItem">
|
|
<image class="haveIcon" :src="detailInfo.HASPILOTLOUNGE?'https://eshangtech.com/ShopICO/discovery/haveIcon.png':'https://eshangtech.com/ShopICO/discovery/noHaveIcon.png'"/>
|
|
<span class="configText">司机之家</span>
|
|
</view>
|
|
<view class="otherItem">
|
|
<image class="haveIcon" :src="detailInfo.HASCHILD?'https://eshangtech.com/ShopICO/discovery/haveIcon.png':'https://eshangtech.com/ShopICO/discovery/noHaveIcon.png'"/>
|
|
<span class="configText">车辆维修</span>
|
|
</view>
|
|
<view class="otherItem">
|
|
<image class="haveIcon" :src="detailInfo.VEHICLEWATERFILLING?'https://eshangtech.com/ShopICO/discovery/haveIcon.png':'https://eshangtech.com/ShopICO/discovery/noHaveIcon.png'"/>
|
|
<span class="configText">车辆加水</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 停车信息-->
|
|
<view class="detailItem" id="stopCarBox">
|
|
<view class="top">
|
|
<image class="boxIcon" src="https://eshangtech.com/ShopICO/discovery/stopCarIcon.png"/>
|
|
<span class="boxName">停车信息</span>
|
|
</view>
|
|
<view class="carContent">
|
|
<view class="carItem">
|
|
<view class="carTop">
|
|
<image class="carIcon" :src="detailInfo.SMALLPARKING?'https://eshangtech.com/ShopICO/discovery/carIcon.png':'https://eshangtech.com/ShopICO/discovery/noCarIcon.png'"/>
|
|
<view class="carName">轿车车位</view>
|
|
</view>
|
|
<view class="carBottom">{{detailInfo.SMALLPARKING || '-'}}</view>
|
|
</view>
|
|
<view class="carItem">
|
|
<view class="carTop">
|
|
<image class="carIcon" :src="detailInfo.PACKING?'https://eshangtech.com/ShopICO/discovery/bus.png':'https://eshangtech.com/ShopICO/discovery/noBus.png'"/>
|
|
<view class="carName">客车车位</view>
|
|
</view>
|
|
<view class="carBottom">{{detailInfo.PACKING || '-'}}</view>
|
|
</view>
|
|
<view class="carItem">
|
|
<view class="carTop">
|
|
<image class="carIcon" :src="detailInfo.TRUCKPACKING?'https://eshangtech.com/ShopICO/discovery/train.png':'https://eshangtech.com/ShopICO/discovery/noTrain.png'"/>
|
|
<view class="carName">货车车位</view>
|
|
</view>
|
|
<view class="carBottom">{{detailInfo.TRUCKPACKING || '-'}}</view>
|
|
</view>
|
|
<view class="carItem" style="margin-top: 24rpx">
|
|
<view class="carTop">
|
|
<image class="carIcon" :src="detailInfo.DANPACKING?'https://eshangtech.com/ShopICO/discovery/chemicals.png':'https://eshangtech.com/ShopICO/discovery/noChemicals.png'"/>
|
|
<view class="carName">危化品车位</view>
|
|
</view>
|
|
<view class="carBottom">{{detailInfo.DANPACKING || '-'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 经营信息-->
|
|
<view class="detailItem" id="storeBox">
|
|
<view class="top">
|
|
<image class="boxIcon" src="https://eshangtech.com/ShopICO/discovery/storeIcon.png"/>
|
|
<span class="boxName">经营信息</span>
|
|
</view>
|
|
<view class="storeContent">
|
|
<view class="storeItem" style="width: 100%">
|
|
<view class="storeTop">
|
|
<image class="storeIcon" src="https://eshangtech.com/ShopICO/discovery/storeAll.png"/>
|
|
<view class="storeName">商铺总量</view>
|
|
<view class="mode">{{detailInfo.BUSINESSTYPE || ''}}</view>
|
|
</view>
|
|
<view class="storeBottom">{{detailInfo.DININGBXCOUNT || ''}}</view>
|
|
</view>
|
|
|
|
<view style="display: flex;align-items: center;margin-top: 28rpx">
|
|
<view class="storeItem">
|
|
<view class="storeTop">
|
|
<image class="storeIcon" src="https://eshangtech.com/ShopICO/discovery/foodStore.png"/>
|
|
<view class="storeName">餐饮店</view>
|
|
</view>
|
|
<view class="storeBottom">{{detailInfo.DININGROOMCOUNT || '-'}}</view>
|
|
</view>
|
|
|
|
<view class="storeItem">
|
|
<view class="storeTop">
|
|
<image class="storeIcon" src="https://eshangtech.com/ShopICO/discovery/storeFacilitate.png"/>
|
|
<view class="storeName">便利店</view>
|
|
</view>
|
|
<view class="storeBottom">{{detailInfo.HASBACKGROUNDRADIO || '-'}}</view>
|
|
</view>
|
|
|
|
<view class="storeItem">
|
|
<view class="storeTop">
|
|
<image class="storeIcon" src="https://eshangtech.com/ShopICO/discovery/guest.png"/>
|
|
<view class="storeName">客房</view>
|
|
</view>
|
|
<view class="storeBottom">{{detailInfo.POINTCONTROLCOUNT || '-'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'index',
|
|
data () {
|
|
return {
|
|
serviceImageList: [],
|
|
defaultBg: ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'],
|
|
currentImg: 0, // 当前选中的图片
|
|
menu: {},
|
|
detail: {}, // 服务区详情信息
|
|
tabList: [
|
|
{label: '充电信息', value: 1},
|
|
{label: '加油信息', value: 2},
|
|
{label: '服务信息', value: 3},
|
|
{label: '停车信息', value: 4},
|
|
{label: '经营信息', value: 5}
|
|
], // tab的数组
|
|
selectTab: 1, // 选中的tab
|
|
detailInfo: {}, // 服务区两侧需要的字段加起来的合计对象
|
|
BUSINESSTYPEObj: {}, // 经营模式枚举
|
|
pageScroll: true, // 是否允许页面滚动
|
|
currentView: ''// 现在要滚动到的锚点位置
|
|
}
|
|
},
|
|
async onLoad (query) {
|
|
this.menu = mpvue.getMenuButtonBoundingClientRect()
|
|
console.log('query', query)
|
|
await this.handleGetServiceDetail(query.id)
|
|
await this.handleGetSumObj(query.id)
|
|
},
|
|
methods: {
|
|
handleBack () {
|
|
mpvue.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
handleToMap () {
|
|
let _this = this
|
|
mpvue.openLocation({
|
|
latitude: _this.detail.ServerpartInfo.SERVERPART_Y * 1,
|
|
longitude: _this.detail.ServerpartInfo.SERVERPART_X * 1,
|
|
scale: 16, // 缩放比例
|
|
name: _this.detail.SERVERPART_NAME,
|
|
address: '', // 这个可能会影响地图的定位，所以可以选择不填
|
|
success (data) {
|
|
console.log(data)
|
|
},
|
|
fail (err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
// 请求服务区详情数据
|
|
async handleGetServiceDetail (id) {
|
|
let seatInfo = mpvue.getStorageSync('actualLocation')
|
|
console.log('seatInfo', seatInfo)
|
|
|
|
const req = {
|
|
ServerpartId: id,
|
|
longitude: seatInfo.longitude || '',
|
|
latitude: seatInfo.latitude || ''
|
|
}
|
|
const data = await this.$api.$get(
|
|
'/CommercialApi/BaseInfo/GetServerpartInfo',
|
|
req
|
|
)
|
|
let res = data.Result_Data
|
|
console.log('res', res)
|
|
this.detail = res
|
|
let sumObj = {
|
|
LIVESTOCKPACKING: 0, // 充电桩数
|
|
STATEGRIDCHARGE: 0, // 国网充电桩数量
|
|
LIAUTOCHARGE: 0, // 理想5C充电桩数量
|
|
GACENERGYCHARGE: 0, // 广汽能源充电桩数量
|
|
OTHERCHARGE: 0, // 其他充电桩数量
|
|
REFUELINGGUN92: 0, // 加油枪92号
|
|
REFUELINGGUN95: 0, // 加油枪95号
|
|
REFUELINGGUN0: 0, // 加油枪0号
|
|
HASPANTRY: 0, // 男厕数量
|
|
HASWIFI: 0, // 女厕数量
|
|
TOILETCOUNT: 0, // 潮汐厕位
|
|
HASSHOWERROOM: 0, // 淋浴房
|
|
HASWATERROOM: 0, // 开水器
|
|
MICROWAVEOVEN: 0, // 微波炉
|
|
WASHERCOUNT: 0, // 洗衣机数量
|
|
SLEEPINGPODS: 0, // 睡眠仓
|
|
HASPILOTLOUNGE: false, // 有无司机之家
|
|
HASCHILD: false, // 有无车辆维修
|
|
VEHICLEWATERFILLING: false, // 有无车辆加水
|
|
SMALLPARKING: 0, // 轿车车位
|
|
PACKING: 0, // 客车车位
|
|
TRUCKPACKING: 0, // 货车车位
|
|
DANPACKING: 0, // 危化品车位
|
|
DININGBXCOUNT: 0, // 商铺数量
|
|
DININGROOMCOUNT: 0, // 餐饮店
|
|
HASBACKGROUNDRADIO: 0, // 便利店
|
|
POINTCONTROLCOUNT: 0, // 客房
|
|
BUSINESSTYPE: ''
|
|
}
|
|
console.log('res.RegionInfo', res.RegionInfo)
|
|
if (res.RegionInfo && res.RegionInfo.length > 0) {
|
|
res.RegionInfo.forEach(item => {
|
|
sumObj.LIVESTOCKPACKING += item.LIVESTOCKPACKING
|
|
sumObj.STATEGRIDCHARGE += item.STATEGRIDCHARGE
|
|
sumObj.LIAUTOCHARGE += item.LIAUTOCHARGE
|
|
sumObj.GACENERGYCHARGE += item.GACENERGYCHARGE
|
|
sumObj.OTHERCHARGE += item.OTHERCHARGE
|
|
sumObj.REFUELINGGUN92 += item.REFUELINGGUN92
|
|
sumObj.REFUELINGGUN95 += item.REFUELINGGUN95
|
|
sumObj.REFUELINGGUN0 += item.REFUELINGGUN0
|
|
sumObj.HASPANTRY += item.HASPANTRY
|
|
sumObj.HASWIFI += item.HASWIFI
|
|
sumObj.TOILETCOUNT += item.TOILETCOUNT
|
|
sumObj.HASSHOWERROOM += item.HASSHOWERROOM
|
|
sumObj.HASWATERROOM += item.HASWATERROOM
|
|
sumObj.MICROWAVEOVEN += item.MICROWAVEOVEN
|
|
sumObj.WASHERCOUNT += item.WASHERCOUNT
|
|
sumObj.SLEEPINGPODS += item.SLEEPINGPODS
|
|
sumObj.SMALLPARKING += item.SMALLPARKING
|
|
sumObj.PACKING += item.PACKING
|
|
sumObj.TRUCKPACKING += item.TRUCKPACKING
|
|
sumObj.DANPACKING += item.DANPACKING
|
|
sumObj.BUSINESSTYPE = item.BUSINESSTYPE
|
|
if (item.HASPILOTLOUNGE) {
|
|
sumObj.HASPILOTLOUNGE = true
|
|
}
|
|
if (item.VEHICLEWATERFILLING) {
|
|
sumObj.VEHICLEWATERFILLING = true
|
|
}
|
|
if (item.HASCHILD) {
|
|
sumObj.HASCHILD = true
|
|
}
|
|
sumObj.DININGBXCOUNT += item.DININGBXCOUNT
|
|
sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT
|
|
sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO
|
|
sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT
|
|
})
|
|
}
|
|
|
|
this.detailInfo = sumObj
|
|
console.log('this.detailInfo', this.detailInfo)
|
|
this.serviceImageList = res.ImageLits
|
|
console.log('this.serviceImageList', this.serviceImageList)
|
|
},
|
|
// 点击预览图片
|
|
handlePreview (type) {
|
|
if (type === 'default') {
|
|
mpvue.previewImage({
|
|
current: this.defaultBg[this.currentImg], // 图片的地址url
|
|
urls: this.defaultBg // 预览的地址url
|
|
})
|
|
} else {
|
|
mpvue.previewImage({
|
|
current: this.serviceImageList[this.currentImg], // 图片的地址url
|
|
urls: this.serviceImageList // 预览的地址url
|
|
})
|
|
}
|
|
},
|
|
// 改变tab
|
|
handleChangeTab (value) {
|
|
this.selectTab = value
|
|
let nameList = ['chargeBox', 'gasBox', 'serviceConfigBox', 'stopCarBox', 'storeBox']
|
|
this.currentView = nameList[value - 1]
|
|
},
|
|
// 拿到设施的合计信息
|
|
async handleGetSumObj (id) {
|
|
const req = {
|
|
ProvinceCode: 530000,
|
|
ServerpartIds: id
|
|
}
|
|
const data = await this.$api.$get(
|
|
'/CommercialApi/BaseInfo/GetServerInfoTree',
|
|
req
|
|
)
|
|
console.log('sum', data)
|
|
},
|
|
// 滚动轮播图
|
|
changeSwiper (e) {
|
|
console.log('e', e)
|
|
this.currentImg = Number(e.mp.detail.current)
|
|
console.log('this.currentImg', this.currentImg)
|
|
},
|
|
// 请求枚举
|
|
async handleGetEnumeration () {
|
|
const data = await this.$api.$get(
|
|
'/EShangApiMain/FrameWork/GetFieldEnumByField',
|
|
{ FieldExplainField: 'BUSINESS_TYPE' }
|
|
)
|
|
console.log('Enumeration', data)
|
|
let res = data.Result_Data.List
|
|
let obj = {}
|
|
if (res && res.length > 0) {
|
|
res.forEach(item => {
|
|
obj[item.value] = item.label
|
|
})
|
|
}
|
|
this.BUSINESSTYPEObj = obj
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="stylus">
|
|
.main{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #F7F7F8;
|
|
.pageContent{
|
|
width: 100%;
|
|
height: 100%;
|
|
//min-height: 100vh;
|
|
.topImg{
|
|
background: #fff;
|
|
width: 100%;
|
|
height: 430rpx;
|
|
position: relative;
|
|
.img{
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 32rpx;
|
|
top: 32rpx;
|
|
z-index: 20;
|
|
}
|
|
.topDefaultBg{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.carousel{
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
float: left;
|
|
display: flex;
|
|
.imgIndex{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.picNumber{
|
|
position: absolute;
|
|
left: 32rpx;
|
|
bottom: 66rpx;
|
|
padding: 8rpx 16rpx;
|
|
background: rgba(0,0,0,0.3);
|
|
border-radius: 32rpx;
|
|
border: 2rpx solid rgba(255,255,255,0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
.icon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
opacity: 0.7;
|
|
margin-right: 4rpx;
|
|
}
|
|
.text{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentBox{
|
|
width: 100%;
|
|
height: calc(100vh - 430rpx + 42rpx);
|
|
background-color: #F7F7F8;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
overflow: hidden;
|
|
transform: translateY(-42rpx);
|
|
box-sizing: border-box;
|
|
.topBg{
|
|
height: 162rpx;
|
|
background: #fff;
|
|
.contentTop{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
background-image: url("https://eshangtech.com/ShopICO/discovery/navigationBg.png");
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left{
|
|
flex: 1;
|
|
margin-right: 16rpx;
|
|
.leftTop{
|
|
display: flex;
|
|
align-items: center;
|
|
.serviceName{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #282622;
|
|
line-height: 52rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.stateBox{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #1BA74D;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 2rpx 8rpx;
|
|
background: #E9F8EE;
|
|
border-radius: 4rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
.leftBottom{
|
|
margin-top: 8rpx;
|
|
.address{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #5F5B52;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.rightMessage{
|
|
width: 162rpx;
|
|
height: 64rpx;
|
|
border-radius: 32rpx;
|
|
border: 2rpx solid #AE8D3E;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 8rpx;
|
|
.navigationIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
.distance{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #AE8D3E;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabBox{
|
|
width: 100%;
|
|
height: 98rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 32rpx 12rpx;
|
|
background: #F9F9F9;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.tabItem{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #5F5B52;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
height: 55rpx;
|
|
}
|
|
.selectTabItem{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #AE8D3E;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.selectTabItem:after{
|
|
content:'';
|
|
width: 34rpx;
|
|
height: 6rpx;
|
|
background: #C5A65B;
|
|
border-radius: 2rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.scrollBox{
|
|
width: 100%;
|
|
height: calc(100% - 260rpx);
|
|
.detailItem{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 32rpx 8rpx;
|
|
background: #fff;
|
|
margin-bottom: 24rpx;
|
|
.top{
|
|
display: flex;
|
|
align-items: center;
|
|
.boxIcon{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.boxName{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #282622;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.chargeContent{
|
|
margin-top: 24rpx;
|
|
.contentItem{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding-right: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
background-image: url("https://eshangtech.com/ShopICO/discovery/chargeBg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
.leftItem{
|
|
width: 128rpx;
|
|
height: 64rpx;
|
|
.configIcon{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.rightItem{
|
|
display: flex;
|
|
align-items: center;
|
|
.smallIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
.value{
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gasContent{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
padding-bottom: 40rpx;
|
|
.gasItem{
|
|
width: calc((100% - 32rpx) / 3);
|
|
padding: 32rpx 0;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.gasItemIcon{
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
.label{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #2A2B2E;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin: 16rpx 0;
|
|
}
|
|
.value{
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #2A2B2E;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.first{
|
|
background: linear-gradient( 180deg, #F3FBF7 0%, #F3FAF7 100%);
|
|
}
|
|
.second{
|
|
background: linear-gradient( 180deg, #F8F9FF 0%, #F5F6FE 100%);
|
|
}
|
|
.third{
|
|
background: linear-gradient( 180deg, #F1F7FF 0%, #F2F7FF 100%);
|
|
}
|
|
}
|
|
|
|
.serviceContent{
|
|
padding-bottom: 40rpx;
|
|
box-sizing: border-box;
|
|
.serviceItem{
|
|
margin-top: 24rpx;
|
|
.smallTitle{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
position: relative;
|
|
text-indent: 12rpx;
|
|
}
|
|
.smallTitle:before{
|
|
width: 4rpx;
|
|
height: 24rpx;
|
|
background: #C5A65B;
|
|
content:'';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.serviceMessage{
|
|
margin-top: 16rpx;
|
|
width: 100%;
|
|
background: #FAFAFC;
|
|
border-radius: 8rpx;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 24rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
.messageItem{
|
|
width: calc(100% / 3);
|
|
.serviceTop{
|
|
display: flex;
|
|
align-items: center;
|
|
.serviceIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.serviceName{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.serviceBottom{
|
|
margin-top: 4rpx;
|
|
padding-left: 38rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #8C8981;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
.otherMessage{
|
|
width: 100%;
|
|
display: flex;
|
|
margin-top: 16rpx;
|
|
align-items: center;
|
|
.otherItem{
|
|
width: calc(100% / 3);
|
|
display: flex;
|
|
align-items: center;
|
|
.haveIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.configText{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.carContent{
|
|
width: 100%;
|
|
background: #FAFAFC;
|
|
border-radius: 8rpx;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 32rpx;
|
|
.carItem{
|
|
width: calc(100% / 3);
|
|
.carTop{
|
|
display: flex;
|
|
align-items: center;
|
|
.carIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.carName{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
.carBottom{
|
|
margin-top: 4rpx;
|
|
padding-left: 38rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #8C8981;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.storeContent{
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
background: #FAFAFC;
|
|
border-radius: 8rpx;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
.storeItem{
|
|
width: calc(100% / 3);
|
|
.storeTop{
|
|
display: flex;
|
|
align-items: center;
|
|
.storeIcon{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
.storeName{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #282622;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.mode{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FF7D00;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
background: #FEEEDE;
|
|
border-radius: 4rpx;
|
|
display: inline-block;
|
|
padding: 2rpx 8rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
.storeBottom{
|
|
margin-top: 4rpx;
|
|
padding-left: 62rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #8C8981;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|