3274 lines
107 KiB
Vue
3274 lines
107 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="topBox" :style="{
|
||
height: `${loginType === 'min' ? menu.bottom + 8 : menu.top + 50}px`,
|
||
paddingTop: `${loginType === 'min' ? menu.top : menu.top + 10}px`,
|
||
}">
|
||
<view class="topContent">
|
||
<view class="backIconBox" @click="handleBack">
|
||
<image class="backIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/brankBlackArrow.svg" />
|
||
</view>
|
||
<view class="currentServiceBox" @click="goSelectServer">
|
||
<image class="servicePosition" src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png" />
|
||
<text class="currentService">{{ detailInfo.SERVERPART_NAME }}</text>
|
||
<image class="rightArrow" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.svg" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content" :style="{
|
||
paddingTop: `${loginType === 'min' ? menu.bottom + 8 : menu.top + 50
|
||
}px`,
|
||
}">
|
||
<!-- 服务区照片 服务区距离名字信息 -->
|
||
<view class="serviceDetail">
|
||
<view class="detailTop">
|
||
<view class="serviceImg" v-if="detailInfo.ImageLits && detailInfo.ImageLits.length > 0">
|
||
<swiper scroll-x="true" circular="true" class="banner" indicator-dots="true"
|
||
indicator-active-color="#272625" autoplay interval="3000" style="width: 100%; height: 100%">
|
||
<swiper-item v-for="(img, i) in detailInfo.ImageLits" :key="i" style="width: 100%; height: 100%">
|
||
<image style="width: 100%; height: 100%" mode="aspectFill" lazy-load="true" :src="img"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<view class="noDataBg" v-else></view>
|
||
</view>
|
||
<view class="detailBottom">
|
||
<view class="detailFirst">
|
||
<view class="firstLeft">
|
||
<text class="serviceName">{{
|
||
detailInfo.SERVERPART_NAME || ""
|
||
}}</text>
|
||
<text class="serviceStatus">营业中</text>
|
||
</view>
|
||
<view class="firstRight" @click="handleGomap">
|
||
<view class="goBox">出发</view>
|
||
</view>
|
||
</view>
|
||
<view class="detailSecond">
|
||
<view class="secondLeft">
|
||
<text class="addressText">{{ detailInfo.ServerpartInfo.SERVERPART_ADDRESS || "-"
|
||
}}{{ detailInfo.ServerpartInfo.EXPRESSWAY_NAME || "-" }}</text>
|
||
</view>
|
||
|
||
<view class="secondRight">
|
||
<!-- <image class="detailFixedIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" /> -->
|
||
<image class="detailFixedIcon" src="/static/home/newFixedIcon.svg" />
|
||
|
||
<text class="address">
|
||
<text class="distance">{{
|
||
detailInfo.SERVERPART_DISTANCE === 0
|
||
? 0
|
||
: detailInfo.SERVERPART_DISTANCE || "-"
|
||
}}km</text>
|
||
</text>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view class="navigationBox" @click="handleGomap">
|
||
<image class="navigationIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/map.png" />
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加油 充电 停车场 -->
|
||
<view class="carDetailBox">
|
||
<!-- v-if="false" -->
|
||
<view class="detailTab">
|
||
<view :class="firstTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
|
||
" v-for="(item, index) in firstTabList" :key="index" @click="handleChangeFirstTab(item)">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
<view class="firstContent">
|
||
<!-- 加油 -->
|
||
<view class="gasContent" v-if="firstTab === 1">
|
||
<view class="gasItem">
|
||
<!-- <image class="gasItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/92Icon.svg" /> -->
|
||
<image class="gasItemIcon" src="/static/home/new92.svg" />
|
||
<!-- <span class="label">#加油枪</span> -->
|
||
<!-- <span class="value">
|
||
{{
|
||
oliData && oliData["92"]
|
||
? `￥${oliData["92"]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}
|
||
</span> -->
|
||
<!-- {{
|
||
detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}} -->
|
||
<view class="newValue">
|
||
<view class="newValueLeft">
|
||
<span class="unit">￥</span>
|
||
<span class="price">{{
|
||
oliData && oliData["92"]
|
||
? `${oliData["92"].toString().split('.')[0]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}</span>
|
||
<span class="smallPrice">{{
|
||
oliData && oliData["92"]
|
||
? `.${oliData["92"].toString().split('.')[1]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}</span>
|
||
</view>
|
||
|
||
<view class="newValueRight">
|
||
/升
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="gasItem">
|
||
<!-- <image class="gasItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/95Icon.svg" /> -->
|
||
<image class="gasItemIcon" src="/static/home/new95.svg" />
|
||
<!-- <span class="label">#加油枪</span> -->
|
||
<!-- <span class="value">
|
||
{{
|
||
oliData && oliData["95"]
|
||
? `￥${oliData["95"]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN95 || "-"
|
||
}}
|
||
</span> -->
|
||
<!-- {{detailInfo.sumDetail.REFUELINGGUN95 || "-"}} -->
|
||
<view class="newValue">
|
||
<view class="newValueLeft">
|
||
<span class="unit">￥</span>
|
||
<span class="price">{{
|
||
oliData && oliData["95"]
|
||
? `${oliData["95"].toString().split('.')[0]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}</span>
|
||
<span class="smallPrice">{{
|
||
oliData && oliData["95"]
|
||
? `.${oliData["95"].toString().split('.')[1]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}</span>
|
||
</view>
|
||
|
||
<view class="newValueRight">
|
||
/升
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="gasItem">
|
||
<!-- <image class="gasItemIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/zeroIcon.svg" /> -->
|
||
<image class="gasItemIcon" src="/static/home/new0.svg" />
|
||
<!-- <span class="label">#加油枪</span> -->
|
||
<!-- <span class="value">
|
||
{{
|
||
oliData && oliData["0"]
|
||
? `￥${oliData["0"]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN0 || "-"
|
||
}}
|
||
</span> -->
|
||
<!-- {{detailInfo.sumDetail.REFUELINGGUN0 || "-"}} -->
|
||
<view class="newValue">
|
||
<view class="newValueLeft">
|
||
<span class="unit">￥</span>
|
||
<span class="price">{{
|
||
oliData && oliData["0"]
|
||
? `${oliData["0"].toString().split('.')[0]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}</span>
|
||
<span class="smallPrice">{{
|
||
oliData && oliData["0"]
|
||
? `.${oliData["0"].toString().split('.')[1]}`
|
||
: detailInfo.sumDetail.REFUELINGGUN92 || "-"
|
||
}}</span>
|
||
</view>
|
||
|
||
<view class="newValueRight">
|
||
/升
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 充电信息 -->
|
||
<view class="chargeContent" v-if="false">
|
||
<!-- v-if="firstTab === 2" -->
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<img class="imgIcon" src="https://eshangtech.com/minTestImg/LXIcon.png" />
|
||
<span class="chargeTypeName">理想</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{
|
||
detailInfo.LXDetail && detailInfo.LXDetail.LXEmpty
|
||
? detailInfo.LXDetail.LXEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
detailInfo.LXDetail && detailInfo.LXDetail.LXSum
|
||
? detailInfo.LXDetail.LXSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<img class="imgIcon" src="https://eshangtech.com/minTestImg/WLIcon.png" />
|
||
<span class="chargeTypeName">蔚来</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{
|
||
detailInfo.WLDetail && detailInfo.WLDetail.WLEmpty
|
||
? detailInfo.WLDetail.WLEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
detailInfo.WLDetail && detailInfo.WLDetail.WLSum
|
||
? detailInfo.WLDetail.WLSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="chargeItem">
|
||
<view class="itemLeft">
|
||
<img class="imgIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/sunIcon.svg" />
|
||
<span class="chargeTypeName">新能源</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{
|
||
detailInfo.SunDetail && detailInfo.SunDetail.SunEmpty
|
||
? detailInfo.SunDetail.SunEmpty
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
detailInfo.SunDetail && detailInfo.SunDetail.SunSum
|
||
? detailInfo.SunDetail.SunSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="chargeItem" style="margin-bottom: 0">
|
||
<view class="itemLeft">
|
||
<img class="imgIcon" src="https://eshangtech.com/minTestImg/stateGridIcon.png" />
|
||
<span class="chargeTypeName">国网</span>
|
||
</view>
|
||
<view class="itemRight">
|
||
<span class="emptyText">空</span>
|
||
<span class="use">{{
|
||
detailInfo.chargeAndReplaceDetail &&
|
||
detailInfo.chargeAndReplaceDetail.chargeAndReplace
|
||
? detailInfo.chargeAndReplaceDetail.chargeAndReplace
|
||
: "0"
|
||
}}</span>
|
||
<span class="sum">/{{
|
||
detailInfo.chargeAndReplaceDetail &&
|
||
detailInfo.chargeAndReplaceDetail.chargeAndReplaceSum
|
||
? detailInfo.chargeAndReplaceDetail.chargeAndReplaceSum
|
||
: "0"
|
||
}}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stateGrid" v-if="false">
|
||
<view class="leftGrid">
|
||
<!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
|
||
<text class="gridText">充电桩</text>
|
||
</view>
|
||
<view class="rightGrid">
|
||
<text class="other">空</text>
|
||
<text class="have">{{ chargingObj.use || "0" }}</text>
|
||
<text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
|
||
<text class="all" v-else>/{{ detailInfo.sumDetail.LIVESTOCKPACKING || "0" }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="stateGrid" v-if="false">
|
||
<view class="leftGrid">
|
||
<!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
|
||
<text class="gridText">国网</text>
|
||
</view>
|
||
<view class="rightGrid">
|
||
<text class="other">空</text>
|
||
<text class="have">{{ chargingObj.use || "0" }}</text>
|
||
<text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
|
||
<text class="all" v-else>/{{ detailInfo.sumDetail.STATEGRIDCHARGE || "0" }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="stateGrid" v-if="false">
|
||
<view class="leftGrid">
|
||
<!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
|
||
<text class="gridText">理想5C</text>
|
||
</view>
|
||
<view class="rightGrid">
|
||
<text class="other">空</text>
|
||
<text class="have">{{ chargingObj.use || "0" }}</text>
|
||
<text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
|
||
<text class="all" v-else>/{{ detailInfo.sumDetail.LIAUTOCHARGE || "0" }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="stateGrid" v-if="false">
|
||
<view class="leftGrid">
|
||
<!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
|
||
<text class="gridText">广汽能源</text>
|
||
</view>
|
||
<view class="rightGrid">
|
||
<text class="other">空</text>
|
||
<text class="have">{{ chargingObj.use || "0" }}</text>
|
||
<text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
|
||
<text class="all" v-else>/{{ detailInfo.sumDetail.GACENERGYCHARGE || "0" }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="stateGrid" v-if="false">
|
||
<view class="leftGrid">
|
||
<!-- <image class="gridImg" src="https://eshangtech.com/wanmeiyizhanImg/home/stateGrid.png" /> -->
|
||
<text class="gridText">其他</text>
|
||
</view>
|
||
<view class="rightGrid">
|
||
<text class="other">空</text>
|
||
<text class="have">{{ chargingObj.use || "0" }}</text>
|
||
<text class="all" v-if="chargingObj.have > 0">/{{ chargingObj.have || "0" }}</text>
|
||
<text class="all" v-else>/{{ detailInfo.sumDetail.OTHERCHARGE || "0" }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 停车场信息 -->
|
||
<view class="carContent" v-if="false">
|
||
<!-- v-if="firstTab === 3" -->
|
||
<view class="carItem">
|
||
<view class="carTop">
|
||
<image class="carIcon" :src="detailInfo.sumDetail.SMALLPARKING
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/carIcon.svg'
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/home/noCarIcon.svg'
|
||
" />
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">轿车车位</view>
|
||
<view class="carValue">{{ detailInfo.sumDetail.SMALLPARKING || "-"
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
</view>
|
||
<view class="carItem">
|
||
<view class="carTop">
|
||
<image class="carIcon" :src="detailInfo.sumDetail.PACKING
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/bus.svg'
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/home/noBus.svg'
|
||
" />
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">客车车位</view>
|
||
<view class="carValue">{{ detailInfo.sumDetail.PACKING || "-" }}
|
||
<span class="unit">个</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="carItem">
|
||
<view class="carTop">
|
||
<image class="carIcon" :src="detailInfo.sumDetail.TRUCKPACKING
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/train.svg'
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/home/noTrain.svg'
|
||
" />
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">货车车位</view>
|
||
<view class="carValue">{{ detailInfo.sumDetail.TRUCKPACKING || "-"
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
</view>
|
||
<view class="carItem" style="margin-top: 24rpx">
|
||
<view class="carTop">
|
||
<image class="carIcon" :src="detailInfo.sumDetail.DANPACKING
|
||
? 'https://eshangtech.com/wanmeiyizhanImg/home/chemicals.svg'
|
||
: 'https://eshangtech.com/wanmeiyizhanImg/home/noChemicals.svg'
|
||
" />
|
||
</view>
|
||
<view class="carBottom">
|
||
<view class="carName">危化品车位</view>
|
||
<view class="carValue">{{ detailInfo.sumDetail.DANPACKING || "-"
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 车辆维修 -->
|
||
<view class="vehicleMaintenance" v-if="false">
|
||
<!-- v-if="firstTab === 4" -->
|
||
<!-- v-if="detailInfo.sumDetail.HASCHILD" -->
|
||
<view class="vehicleTitle">车辆维修</view>
|
||
<view class="vehicleContent">
|
||
<view class="vehicleContentLeft">
|
||
<view class="leftLabel">{{
|
||
detailInfo.sumDetail.REPAIR_TEL || "-"
|
||
}}</view>
|
||
<view class="onlineTime">营业时间：24小时</view>
|
||
</view>
|
||
<view class="vehicleContentRight" @click="handleCallPhone(detailInfo.sumDetail.REPAIR_TEL)">
|
||
<image class="callPhone" src="https://eshangtech.com/wanmeiyizhanImg/home/callPhoneIcon.svg" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新的司机之家等图片的展示 -->
|
||
<view class="newContentBox" v-if="
|
||
detailInfo &&
|
||
detailInfo.configList &&
|
||
detailInfo.configList.length > 0
|
||
">
|
||
<view class="detailTab">
|
||
<view :class="thirdTab === item.key ? 'tabItem selectTabItem' : 'tabItem'"
|
||
v-for="(item, index) in detailInfo.configList" :key="index" @click="handleChangeThirdTab(item)">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
<scroll-view class="detailContent" :scroll-x="true" v-if="
|
||
detailInfo &&
|
||
detailInfo.configObj &&
|
||
detailInfo.configObj[thirdTab] &&
|
||
detailInfo.configObj[thirdTab].length > 0
|
||
">
|
||
<view class="imgList">
|
||
<view class="configImg" v-for="(item, index) in detailInfo.configObj[thirdTab]" :key="index"
|
||
@click="handleShowImg(index, detailInfo.configObj[thirdTab])">
|
||
<image class="img" :src="item.src" lazy-load="true" />
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 热门商家 -->
|
||
<view class="popularMerchants">
|
||
<view class="popularTitle">热门商家</view>
|
||
<template v-if="merchantList && merchantList.length > 0">
|
||
<div class="newShopUnit" v-for="(item, i) in merchantList" :key="i" @click="goShop(item)" :style="{
|
||
marginBottom: i + 1 === merchantList.length ? '0' : '',
|
||
}">
|
||
<!-- borderWidth: i + 1 === merchantList.length ? '0' : '', -->
|
||
<div>
|
||
<div class="shopItemTop">
|
||
<div class="shopImg">
|
||
<image class="shopIcon" :src="item.MERCHANTS_LOGO ||
|
||
'https://eshangtech.com/ShopICO/no-picture.png'
|
||
" mode="aspectFit" />
|
||
</div>
|
||
<div class="shopDetail">
|
||
|
||
<div class="shopDetailLeft">
|
||
<div class="detailLeftTop">
|
||
<span class="topShopName">{{ item.MERCHANTS_NAME }}</span>
|
||
</div>
|
||
|
||
<div class="detailLeftBottom">
|
||
<view class="scoreBox">
|
||
<uni-rate :value="item.MERCHANTS_SCORE" size="16" readonly allowHalf color="#D9D9D9"
|
||
activeColor="#FFC300" style="margin-right: 8rpx" />
|
||
{{ item.MERCHANTS_SCORE || '' }}
|
||
</view>
|
||
<view class="newOtherDetail">
|
||
<span class="label">月售</span>
|
||
<span class="value">{{ item.MONTHLYSALES || "-" }}</span>
|
||
<span class="label" style="margin-left: 20rpx;">人均</span>
|
||
<span class="value">￥{{ item.PERCAPITA || "-" }}</span>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
<div class="shopDetailRight">
|
||
<view class="goFood" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">点餐</view>
|
||
<view class="search" v-else-if="item.GOODSLIST && item.GOODSLIST.length > 0"
|
||
@click.stop="goBuy(item)">查看</view>
|
||
</div>
|
||
|
||
<!-- <div class="shopName">
|
||
<span class="shopTitle">{{ item.MERCHANTS_NAME }}</span>
|
||
</div> -->
|
||
|
||
<!-- <span class="titleIcon" v-if="item.SCANCODE_ORDER === 1"></span> -->
|
||
<!-- <div class="otherDetail">
|
||
<div class="leftDetail">
|
||
<span class="mark">{{ item.MERCHANTS_SCORE
|
||
}}<span class="unit">分</span></span>
|
||
<span class="monthSales">月售{{ item.MONTHLYSALES || "-" }}</span>
|
||
<span class="perCapita">人均 ￥{{ item.PERCAPITA || "-" }}</span>
|
||
</div>
|
||
<div class="rightDetail">
|
||
|
||
</div>
|
||
</div> -->
|
||
<!-- <span class="perCapita"
|
||
>人均 ￥{{ item.PERCAPITA || "-" }}</span
|
||
> -->
|
||
<!-- <span
|
||
v-show="item.CouponList && item.CouponList.length > 0"
|
||
class="icon-coupon"
|
||
>优惠券</span
|
||
> -->
|
||
|
||
<!-- <div class="couponList">
|
||
<div class="couponBox" :style="{
|
||
right:
|
||
item.SCANCODE_ORDER === 1 &&
|
||
item.CouponList &&
|
||
item.CouponList.length > 0
|
||
? '160rpx'
|
||
: '0',
|
||
}" v-if="item.CouponList && item.CouponList.length > 0">
|
||
<view class="couponIconBox">
|
||
<image class="couponIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.svg" />
|
||
</view>
|
||
<span class="couponText">优惠券</span>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 去点餐 -->
|
||
<!-- <div class="goOrder" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">
|
||
<image class="orderIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.svg" />
|
||
<span class="goOrderText">去点餐</span>
|
||
</div> -->
|
||
|
||
|
||
|
||
<!-- 优惠券 -->
|
||
<!-- <div
|
||
class="couponBox"
|
||
:style="{
|
||
right:
|
||
item.SCANCODE_ORDER === 1 &&
|
||
item.CouponList &&
|
||
item.CouponList.length > 0
|
||
? '160rpx'
|
||
: '0',
|
||
}"
|
||
v-if="item.CouponList && item.CouponList.length > 0"
|
||
>
|
||
<image
|
||
class="couponIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.png"
|
||
/>
|
||
<span class="couponText">优惠券</span>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shopList" v-if="
|
||
item.GOODSLIST &&
|
||
item.GOODSLIST.length > 0 &&
|
||
item.SCANCODE_ORDER === 1
|
||
">
|
||
<div class="shopItem" v-for="(subItem, subIndex) in item.GOODSLIST" :key="subIndex">
|
||
<div class="shopImgBox">
|
||
<!-- mode="aspectFit" -->
|
||
<image class="shopImg" lazy-load :src="subItem.IMAGE_URL" />
|
||
</div>
|
||
<div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
|
||
<div class="itemPrice">
|
||
<span class="itemUnit">¥</span>
|
||
<span class="itemPrice">{{
|
||
subItem.COMMODITY_RETAILPRICE || ""
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 卫生间 母婴室 司机之家 -->
|
||
<view class="otherFacilities" v-if="false">
|
||
<view class="detailTab">
|
||
<view :class="secondTab === item.value ? 'tabItem selectTabItem' : 'tabItem'
|
||
" v-for="(item, index) in secondTabList" :key="index" @click="handleChangeSecondTab(item)">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
<view class="secondContent">
|
||
<view class="toiletBox" v-if="secondTab === 1">
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWCIcon.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">男厕</view>
|
||
<view class="value">{{ detailInfo.sumDetail.HASPANTRY
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
|
||
<!-- <view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
|
||
<text class="toiletText">男厕</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.HASPANTRY > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASPANTRY }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/womanWCIcon.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">女厕</view>
|
||
<view class="value">{{ detailInfo.sumDetail.HASWIFI
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/woManWC.svg"
|
||
/>
|
||
<text class="toiletText">女厕</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.HASWIFI > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASWIFI }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/tideToiletSeat.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">潮汐厕位</view>
|
||
<view class="value">{{ detailInfo.sumDetail.TOILETCOUNT
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/tideToiletSeat.svg"
|
||
/>
|
||
<text class="toiletText">潮汐厕位</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.TOILETCOUNT > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.TOILETCOUNT }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/toiletPaperTowels.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">厕纸巾</view>
|
||
<view class="value">{{ detailInfo.sumDetail.TOILET_PAPER
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/toiletPaperTowels.svg"
|
||
/>
|
||
<text class="toiletText">厕纸巾</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.TOILET_PAPER > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.TOILET_PAPER }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="toiletBox" v-if="secondTab === 2">
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/waterDispenser.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">饮水机</view>
|
||
<view class="value">{{ detailInfo.sumDetail.MABROOMWATER_DISPENSER
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
|
||
<text class="toiletText">饮水机</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.MABROOMWATER_DISPENSER > 0
|
||
? '#009F43'
|
||
: '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.MABROOMWATER_DISPENSER }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/nursingTable.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">哺乳桌</view>
|
||
<view class="value">{{ detailInfo.sumDetail.NURSING_TABLE
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
|
||
<text class="toiletText">哺乳桌</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.NURSING_TABLE > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.NURSING_TABLE }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/crib.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">婴儿床</view>
|
||
<view class="value">{{ detailInfo.sumDetail.BABY_COT
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
|
||
<text class="toiletText">婴儿床</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.BABY_COT > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.BABY_COT }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/changingTable.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">尿布台</view>
|
||
<view class="value">{{ detailInfo.sumDetail.CHANGING_TABLE
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/manWC.svg" />
|
||
<text class="toiletText">尿布台</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.CHANGING_TABLE > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.CHANGING_TABLE }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="toiletBox" v-if="secondTab === 3">
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">淋浴间</view>
|
||
<view class="value">{{
|
||
detailInfo.sumDetail.SHOWERROOM === 0
|
||
? "无"
|
||
: detailInfo.sumDetail.SHOWERROOM === 1
|
||
? "有"
|
||
: detailInfo.sumDetail.SHOWERROOM === 2
|
||
? "热水"
|
||
: "-"
|
||
}}</view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg"
|
||
/>
|
||
<text class="toiletText">淋浴间</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color: detailInfo.sumDetail.SHOWERROOM > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{
|
||
detailInfo.sumDetail.SHOWERROOM === 0
|
||
? "无"
|
||
: detailInfo.sumDetail.SHOWERROOM === 1
|
||
? "有"
|
||
: detailInfo.sumDetail.SHOWERROOM === 2
|
||
? "热水"
|
||
: "-"
|
||
}}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">饮水机</view>
|
||
<view class="value">{{ detailInfo.sumDetail.DROOMWATER_DISPENSER
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg"
|
||
/>
|
||
<text class="toiletText">饮水机</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.DROOMWATER_DISPENSER > 0
|
||
? '#009F43'
|
||
: '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.DROOMWATER_DISPENSER }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="toiletBox" v-if="secondTab === 4">
|
||
<view class="toiletItem" v-if="false">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">淋浴间</view>
|
||
<view class="value">{{ detailInfo.sumDetail.HASSHOWERROOM
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/showerRoom.svg"
|
||
/>
|
||
<text class="toiletText">淋浴间</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.HASSHOWERROOM > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASSHOWERROOM }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">开水器</view>
|
||
<view class="value">{{ detailInfo.sumDetail.HASWATERROOM
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/waterBoiler.svg"
|
||
/>
|
||
<text class="toiletText">开水器</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.HASWATERROOM > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.HASWATERROOM }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/microwave.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">微波炉</view>
|
||
<view class="value">{{ detailInfo.sumDetail.MICROWAVEOVEN
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/microwave.svg"
|
||
/>
|
||
<text class="toiletText">微波炉</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.MICROWAVEOVEN > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.MICROWAVEOVEN }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem">
|
||
<view class="toiletItemLeft">
|
||
<image class="icon" src="https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg" />
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<view class="label">洗衣机</view>
|
||
<view class="value">{{ detailInfo.sumDetail.WASHERCOUNT
|
||
}}<span class="unit">个</span></view>
|
||
</view>
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/washingMachine.svg"
|
||
/>
|
||
<text class="toiletText">洗衣机</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.WASHERCOUNT > 0 ? '#009F43' : '',
|
||
}"
|
||
>{{ detailInfo.sumDetail.WASHERCOUNT }}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem" v-if="false">
|
||
<!-- <view class="toiletItemLeft">
|
||
<image
|
||
class="toiletIcon"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/watering.svg"
|
||
/>
|
||
<text class="toiletText">加水</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<text
|
||
class="rightText"
|
||
:style="{
|
||
color:
|
||
detailInfo.sumDetail.VEHICLEWATERFILLING > 0
|
||
? '#009F43'
|
||
: '',
|
||
}"
|
||
>{{
|
||
detailInfo.sumDetail.VEHICLEWATERFILLING > 0 ? "有" : "无"
|
||
}}</text
|
||
>
|
||
</view> -->
|
||
</view>
|
||
<view class="toiletItem" v-if="false">
|
||
<view class="toiletItemLeft">
|
||
<image class="toiletIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/urea.svg" />
|
||
<text class="toiletText">尿素</text>
|
||
</view>
|
||
<view class="toiletItemRight">
|
||
<!-- #009F43 绿 -->
|
||
<text class="rightText" :style="{
|
||
color: detailInfo.sumDetail.UREA_COUNT ? '#009F43' : '',
|
||
}">{{ detailInfo.sumDetail.UREA_COUNT ? "有" : "无" }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import customLoading from "../../components/customLoading.vue";
|
||
export default {
|
||
components: { customLoading },
|
||
data() {
|
||
return {
|
||
menu: {},
|
||
detailInfo: {}, // 服务区信息对象
|
||
firstTabList: [
|
||
{ label: "加油", value: 1 },
|
||
// { label: "充电", value: 2 },
|
||
// { label: "停车场", value: 3 },
|
||
// { label: "汽修", value: 4 },
|
||
], // 加油 充电 停车场 的tab
|
||
firstTab: 1,
|
||
secondTabList: [
|
||
{ label: "卫生间", value: 1 },
|
||
{ label: "母婴室", value: 2 },
|
||
{ label: "司机之家", value: 3 },
|
||
{ label: "其他设施", value: 4 },
|
||
],
|
||
secondTab: 1,
|
||
thirdTab: "",
|
||
selectTypeList: [],
|
||
seatInfo: {},
|
||
serverpart: "", // 传入的服务区id
|
||
merchantList: [], // 商家列表
|
||
chargingObj: {
|
||
have: 0,
|
||
use: 0,
|
||
}, // 充电桩数据
|
||
loginType: "",
|
||
come: "", // 来自哪个页面
|
||
isFirst: true,
|
||
isLoading: false,
|
||
oliData: {}, // 油价信息
|
||
};
|
||
},
|
||
async onLoad(query) {
|
||
// this.isLoading = true;
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
if (type === "min") {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
} else {
|
||
this.menu = systemInfo.safeArea;
|
||
}
|
||
console.log("query", query);
|
||
if (query.id) {
|
||
this.serverpart = query.id;
|
||
}
|
||
if (query.come) {
|
||
this.come = query.come;
|
||
}
|
||
|
||
await this.handleGetServerpartDetail(this.serverpart);
|
||
await this.handleGetMerchant();
|
||
|
||
// this.isLoading = false;
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
async onShow() {
|
||
// this.isLoading = true;
|
||
if (this.isFirst) {
|
||
this.isFirst = false;
|
||
} else {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
// && this.come !== "chargeBox"
|
||
if (currentService.SERVERPART_ID !== this.serverpart) {
|
||
this.serverpart = currentService.SERVERPART_ID;
|
||
await this.handleGetServerpartDetail(this.serverpart);
|
||
await this.handleGetMerchant();
|
||
}
|
||
}
|
||
// this.isLoading = false;
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
methods: {
|
||
// 预览新的图片
|
||
handleShowImg(index, imgList) {
|
||
console.log("imgList", imgList);
|
||
let list = [];
|
||
imgList.forEach((item) => {
|
||
list.push(item.src);
|
||
});
|
||
|
||
uni.previewImage({
|
||
urls: list,
|
||
current: index,
|
||
loop: true,
|
||
indicator: "number",
|
||
});
|
||
},
|
||
// 新的tab选择
|
||
handleChangeThirdTab(obj) {
|
||
console.log("obj", obj);
|
||
this.thirdTab = obj.key;
|
||
},
|
||
handleChangeFirstTab(obj) {
|
||
this.firstTab = obj.value;
|
||
},
|
||
handleChangeSecondTab(obj) {
|
||
this.secondTab = obj.value;
|
||
},
|
||
// 打开导航
|
||
handleGomap() {
|
||
let obj = this.detailInfo;
|
||
uni.openLocation({
|
||
latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
|
||
longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
|
||
scale: 16, // 缩放比例
|
||
name: obj.SERVERPART_NAME,
|
||
// address: "", // 这个可能会影响地图的定位，所以可以选择不填
|
||
success(data) {
|
||
console.log(data);
|
||
},
|
||
fail(err) {
|
||
console.log(err);
|
||
},
|
||
});
|
||
},
|
||
// 查询服务区详情
|
||
async handleGetServerpartDetail(id) {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
this.seatInfo = seatInfo;
|
||
console.log('currentServicecurrentService', currentService);
|
||
console.log('this.seatInfothis.seatInfothis.seatInfo', seatInfo);
|
||
|
||
|
||
let req = {
|
||
ServerpartId: id || currentService.SERVERPART_ID,
|
||
latitude: this.seatInfo.latitude,
|
||
longitude: this.seatInfo.longitude,
|
||
excludeProperty: true,
|
||
};
|
||
// uni.showLoading({
|
||
// title: "加载中...",
|
||
// });
|
||
|
||
const data = await this.$api.$javaGet2(
|
||
"/third-party/getServerPartInfo",
|
||
req
|
||
);
|
||
|
||
// const data = await this.$api.$get(
|
||
// "/CommercialApi/BaseInfo/GetServerpartInfo",
|
||
// req
|
||
// );
|
||
|
||
let obj = data.Result_Data;
|
||
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, // 有无司机之家
|
||
SHOWERROOM: 0, // 司机之家淋浴间
|
||
HASCHILD: false, // 有无车辆维修
|
||
// VEHICLEWATERFILLING: false, // 有无车辆加水
|
||
SMALLPARKING: 0, // 轿车车位
|
||
PACKING: 0, // 客车车位
|
||
TRUCKPACKING: 0, // 货车车位
|
||
DANPACKING: 0, // 危化品车位
|
||
DININGBXCOUNT: 0, // 商铺数量
|
||
DININGROOMCOUNT: 0, // 餐饮店
|
||
HASBACKGROUNDRADIO: 0, // 便利店
|
||
POINTCONTROLCOUNT: 0, // 客房
|
||
BUSINESSTYPE: "",
|
||
TOILET_PAPER: 0, // 厕纸巾
|
||
MABROOMWATER_DISPENSER: 0, // 母婴室饮水机
|
||
NURSING_TABLE: 0, // 哺乳桌
|
||
BABY_COT: 0, // 婴儿床
|
||
CHANGING_TABLE: 0, // 尿布台
|
||
DROOMWATER_DISPENSER: 0, // 司机之家饮水机
|
||
REPAIR_TEL: "",
|
||
UREA_COUNT: 0, // 尿素
|
||
VEHICLEWATERFILLING: 0, // 加水
|
||
};
|
||
|
||
let LXSum = 0; // 理想
|
||
let WLSum = 0; // 蔚来
|
||
let SunSum = 0; // 新能源
|
||
let chargeAndReplaceSum = 0; // 国网
|
||
|
||
let configList = []; // 方位区的内容
|
||
let typeList = []; // 类型判断有过没
|
||
let typeObj = {
|
||
1001: "母婴室",
|
||
1002: "司机之家",
|
||
2001: "住宿",
|
||
2002: "便利店",
|
||
};
|
||
let configObj = {};
|
||
|
||
console.log("res.RegionInfo", obj.RegionInfo);
|
||
if (obj.RegionInfo && obj.RegionInfo.length > 0) {
|
||
obj.RegionInfo.forEach((item) => {
|
||
if (item.ImgList && item.ImgList.length > 0) {
|
||
item.ImgList.forEach((subItem) => {
|
||
if (subItem.key) {
|
||
if (typeList.indexOf(subItem.key) === -1) {
|
||
typeList.push(subItem.key);
|
||
configList.push({
|
||
key: subItem.key,
|
||
name: typeObj[subItem.key],
|
||
});
|
||
configObj[subItem.key] = [
|
||
{
|
||
key: subItem.key,
|
||
name: typeObj[subItem.key],
|
||
SERVERPART_REGIONNAME: item.SERVERPART_REGIONNAME,
|
||
SERVERPART_REGION: item.SERVERPART_REGION,
|
||
SERVERPART_ID: item.SERVERPART_ID,
|
||
src: subItem.value,
|
||
},
|
||
];
|
||
} else {
|
||
configObj[subItem.key].push({
|
||
key: subItem.key,
|
||
name: typeObj[subItem.key],
|
||
SERVERPART_REGIONNAME: item.SERVERPART_REGIONNAME,
|
||
SERVERPART_REGION: item.SERVERPART_REGION,
|
||
SERVERPART_ID: item.SERVERPART_ID,
|
||
src: subItem.value,
|
||
});
|
||
}
|
||
}
|
||
|
||
// configList.push({
|
||
// SERVERPART_REGIONNAME: item.SERVERPART_REGIONNAME,
|
||
// SERVERPART_REGION: item.SERVERPART_REGION,
|
||
// SERVERPART_ID: item.SERVERPART_ID,
|
||
// ImgList: item.ImgList,
|
||
// });
|
||
});
|
||
}
|
||
|
||
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;
|
||
sumObj.TOILET_PAPER += item.TOILET_PAPER;
|
||
sumObj.MABROOMWATER_DISPENSER += item.MABROOMWATER_DISPENSER;
|
||
sumObj.NURSING_TABLE += item.NURSING_TABLE;
|
||
sumObj.BABY_COT += item.BABY_COT;
|
||
sumObj.CHANGING_TABLE += item.CHANGING_TABLE;
|
||
sumObj.DROOMWATER_DISPENSER += item.DROOMWATER_DISPENSER;
|
||
sumObj.UREA_COUNT += item.UREA_COUNT;
|
||
sumObj.HASSHOWERROOM += item.HASSHOWERROOM;
|
||
sumObj.VEHICLEWATERFILLING += item.VEHICLEWATERFILLING;
|
||
if (item.HASPILOTLOUNGE) {
|
||
sumObj.HASPILOTLOUNGE = true;
|
||
}
|
||
if (item.HASCHILD) {
|
||
sumObj.HASCHILD = true;
|
||
}
|
||
sumObj.DININGBXCOUNT += item.DININGBXCOUNT;
|
||
sumObj.DININGROOMCOUNT += item.DININGROOMCOUNT;
|
||
sumObj.HASBACKGROUNDRADIO += item.HASBACKGROUNDRADIO;
|
||
sumObj.POINTCONTROLCOUNT += item.POINTCONTROLCOUNT;
|
||
if (item.REPAIR_TEL) {
|
||
sumObj.REPAIR_TEL = item.REPAIR_TEL;
|
||
}
|
||
sumObj.SHOWERROOM = item.SHOWERROOM;
|
||
|
||
// chargeAndReplaceSum += item.STATEGRIDCHARGE; // 国网
|
||
// SunSum += item.GACENERGYCHARGE; // 新能源
|
||
// WLSum += item.OTHERCHAGRE; // 蔚来
|
||
// LXSum += item.LIAUTOCHARGE; // 理想
|
||
});
|
||
}
|
||
|
||
// // 理想的随机百分比
|
||
// let LXRate = this.handleGetRandomData(0, 60);
|
||
// // 蔚来的随机百分比
|
||
// let WLRate = this.handleGetRandomData(0, 60);
|
||
// // 阳光的随机百分比
|
||
// let SunRate = this.handleGetRandomData(0, 60);
|
||
// // 充换电的随机百分比
|
||
// let chargeAndReplaceRate = this.handleGetRandomData(0, 60);
|
||
|
||
// obj.LXDetail = {
|
||
// LXEmpty: Math.floor(LXSum * (LXRate / 100)),
|
||
// LXSum: LXSum,
|
||
// };
|
||
// obj.WLDetail = {
|
||
// WLEmpty: Math.floor(WLSum * (WLRate / 100)),
|
||
// WLSum: WLSum,
|
||
// };
|
||
// obj.SunDetail = {
|
||
// SunEmpty: Math.floor(SunSum * (SunRate / 100)),
|
||
// SunSum: SunSum,
|
||
// };
|
||
// obj.chargeAndReplaceDetail = {
|
||
// chargeAndReplace: Math.floor(
|
||
// chargeAndReplaceSum * (chargeAndReplaceRate / 100)
|
||
// ),
|
||
// chargeAndReplaceSum: chargeAndReplaceSum,
|
||
// };
|
||
|
||
console.log("configObj", configObj);
|
||
|
||
obj.configList = configList;
|
||
console.log("configList", configList);
|
||
obj.configObj = configObj;
|
||
obj.sumDetail = sumObj;
|
||
if (configList && configList.length > 0) {
|
||
this.thirdTab = configList[0].key;
|
||
}
|
||
this.detailInfo = obj;
|
||
console.log("this.detailInfo", this.detailInfo);
|
||
// let sortName = this.detailInfo.SERVERPART_NAME.split("服务区")[0];
|
||
// if (["新桥", "丰乐", "肥东"].indexOf(sortName) !== -1) {
|
||
// // 调用理想的数据
|
||
// this.handleGetChargeData(sortName);
|
||
// }
|
||
|
||
// 拿到油价的数据
|
||
this.handleGetOilData();
|
||
|
||
// uni.hideLoading();
|
||
},
|
||
// 拿到油价数据
|
||
async handleGetOilData() {
|
||
// 拿服务区数据 知道服务区id对应的服务区名称
|
||
const data = await this.$api.$javaGet2("/oil-price/getList", {
|
||
serverpartId: this.detailInfo.SERVERPART_ID,
|
||
});
|
||
let oliData = data.Result_Data.List;
|
||
// 暂时只展示 92 95 0
|
||
let oliObj = {};
|
||
if (oliData && oliData.length > 0) {
|
||
oliData.forEach((item) => {
|
||
if (
|
||
item.oilNo === "92" ||
|
||
item.oilNo === "95" ||
|
||
item.oilNo === "0"
|
||
) {
|
||
oliObj[item.oilNo] = item.price;
|
||
}
|
||
});
|
||
}
|
||
this.oliData = oliObj;
|
||
console.log("this.oliData", this.oliData);
|
||
|
||
// const tokenData = await new Promise((resolve, reject) => {
|
||
// uni.request({
|
||
// url: `https://wmgs.anhui-expressway.net/token/generate?client=4d1cf0d1-3bfc-4c91-b9ac-3a3f4ce7a4b5&secret=fEoBj6DFSKmz2fjgIauQkg`,
|
||
// method: "GET",
|
||
// success(res) {
|
||
// resolve(res);
|
||
// },
|
||
// });
|
||
// });
|
||
// let token = tokenData.data.data;
|
||
|
||
// const serviceData = await new Promise((resolve, reject) => {
|
||
// uni.request({
|
||
// url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/v1/jt/share/ext_service_areas`,
|
||
// method: "GET",
|
||
// data: {
|
||
// pageSize: 999,
|
||
// pageNum: 1,
|
||
// beginDate: "2000-01-01",
|
||
// endDate: "2025-03-20",
|
||
// },
|
||
// header: {
|
||
// Authorization: `Bearer ${token}`,
|
||
// "content-type": "application/x-www-form-urlencoded",
|
||
// },
|
||
// success(res) {
|
||
// resolve(res);
|
||
// },
|
||
// });
|
||
// });
|
||
// let serviceList = serviceData.data.data.records;
|
||
// console.log("serviceList", serviceList);
|
||
// // 从他们的服务区列表中 找到我们当前的服务区 并拿到他们对应的服务区id 之后 再去查数据
|
||
// let currentObj = {};
|
||
// if (serviceList && serviceList.length > 0) {
|
||
// serviceList.forEach((item) => {
|
||
// if (item.name === this.detailInfo.SERVERPART_NAME) {
|
||
// currentObj = item;
|
||
// }
|
||
// });
|
||
// }
|
||
|
||
// console.log("currentObj", currentObj);
|
||
|
||
// const oilres = await new Promise((resolve, reject) => {
|
||
// uni.request({
|
||
// url: `https://wmgs.anhui-expressway.net/api/ydcx/v1/service-area/oil/price`,
|
||
// method: "GET",
|
||
// data: {
|
||
// areaId: currentObj.id,
|
||
// },
|
||
// header: {
|
||
// Authorization: `Bearer ${token}`,
|
||
// "content-type": "application/x-www-form-urlencoded",
|
||
// },
|
||
// success(res) {
|
||
// resolve(res);
|
||
// },
|
||
// });
|
||
// });
|
||
// let oliData = oilres.data.data;
|
||
// console.log("oliData", oliData);
|
||
// // 暂时只展示 92 95 0
|
||
// let oliObj = {}
|
||
// if (oliData && oliData.length > 0) {
|
||
// oliData.forEach(item => {
|
||
// if (item.oilNo === "92" || item.oilNo === "95" || item.oilNo === '0') {
|
||
// oliObj[item.oilNo] = item.price
|
||
// }
|
||
// })
|
||
// }
|
||
// this.oliData = oliObj
|
||
// console.log('this.oliData', this.oliData);
|
||
},
|
||
// 生成随机数
|
||
handleGetRandomData(max, min) {
|
||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||
},
|
||
// 拿到充电的理想数据
|
||
async handleGetChargeData(name) {
|
||
// uni.showLoading({
|
||
// title: "查询理想设备信息...",
|
||
// });
|
||
|
||
const LiOperatorSecret = "bGMyYwJFl17BqwD3";
|
||
const LiOperCode = "MA7EBGWBX";
|
||
const LiSigSecret = "V7I6yvHvEk8STt0P";
|
||
const LiDataSecret = "P2S3WjoLv3rqL0hn";
|
||
const LiIV = "ZRlwcrx7k63ihzXF";
|
||
|
||
const OperatorID = "78109626X"; // 组织机构代码（OperatorID）
|
||
const OperatorSecret = "Xh2vLq1Pz9zF7wK3"; // Xh2vLq1Pz9zF7wK3 运营商秘钥（OperatorSecret）
|
||
const SigSecret = "bT8sWn2Aq0Jv6GvD"; // bT8sWn2Aq0Jv6GvD 签名秘钥（SigSecret）
|
||
const DataSecret = "fK7YzAq1R8Vp9hL0"; // fK7YzAq1R8Vp9hL0 数据加密秘钥（DataSecret）
|
||
const DataSecretIV = "z3XnWl8FQ2pTm5Ba"; // z3XnWl8FQ2pTm5Ba 初始化向量（DataSecretIV）
|
||
|
||
let tokenData = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_token",
|
||
|
||
data: JSON.stringify({
|
||
OperatorID: OperatorID,
|
||
OperatorSecret: LiOperatorSecret,
|
||
}),
|
||
id: 0,
|
||
seq: "001",
|
||
token: "",
|
||
});
|
||
console.log("tokenData", tokenData);
|
||
// token的实际值
|
||
let token = tokenData.Data.AccessToken;
|
||
|
||
// 拿到所有站点的数据
|
||
const allStationList = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_stations_info",
|
||
data: JSON.stringify({
|
||
PageNo: 1,
|
||
PageSize: 999,
|
||
}),
|
||
id: 0,
|
||
seq: "002",
|
||
token: token,
|
||
});
|
||
let stationList = allStationList.Data.StationInfos;
|
||
console.log("stationList", stationList);
|
||
|
||
let newStationList = [];
|
||
if (stationList && stationList.length > 0) {
|
||
stationList.forEach((item) => {
|
||
if (item.Address) {
|
||
if (item.Address.indexOf(name) !== -1) {
|
||
newStationList.push(item);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 这段是和自己最近的三个服务区的 理想充电筛出来的数据
|
||
console.log("newStationList", newStationList);
|
||
|
||
let stationIds = [];
|
||
// 创建吧id当key的对象
|
||
let stationObj = {};
|
||
// 拿到充电站的id数组 去查里面的充电枪详情
|
||
if (newStationList && newStationList.length > 0) {
|
||
newStationList.forEach((item) => {
|
||
stationIds.push(item.StationID);
|
||
stationObj[item.StationID] = item;
|
||
});
|
||
}
|
||
|
||
// 查询具体状态
|
||
if (stationIds && stationIds.length > 0) {
|
||
const stationInfo = await this.$testApi.$post("/send", {
|
||
url: "https://openapi.chehejia.com/lcp-inter-evio-service/evcs/v1/evio/query_station_status",
|
||
data: JSON.stringify({
|
||
StationIDs: stationIds,
|
||
}),
|
||
id: 0,
|
||
seq: "003",
|
||
token: token,
|
||
});
|
||
let statusList = stationInfo.Data.StationStatusInfos;
|
||
console.log("statusList", statusList);
|
||
if (statusList && statusList.length > 0) {
|
||
statusList.forEach((item) => {
|
||
if (stationObj[item.StationID]) {
|
||
stationObj[item.StationID].statusList = item.ConnectorStatusInfos;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
console.log("stationObj", stationObj);
|
||
|
||
// 带有状态的充电站列表格式
|
||
let haveStationList = [];
|
||
if (stationObj) {
|
||
for (let key in stationObj) {
|
||
haveStationList.push(stationObj[key]);
|
||
}
|
||
}
|
||
|
||
console.log("haveStationList", haveStationList);
|
||
|
||
let LXCharge = [];
|
||
let LXInfoList = [];
|
||
if (haveStationList && haveStationList.length > 0) {
|
||
haveStationList.forEach((subItem) => {
|
||
if (subItem.Address.indexOf(name) !== -1) {
|
||
LXCharge.push(...subItem.statusList);
|
||
if (subItem.EquipmentInfos && subItem.EquipmentInfos.length > 0) {
|
||
subItem.EquipmentInfos.forEach((thirdItem) => {
|
||
if (
|
||
thirdItem.ConnectorInfos &&
|
||
thirdItem.ConnectorInfos.length > 0
|
||
) {
|
||
thirdItem.ConnectorInfos.forEach((fourthItem) => {
|
||
LXInfoList.push(fourthItem);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
// 空多少个
|
||
let LXEmpty = 0;
|
||
// 一共多少个
|
||
let LXSum = 0;
|
||
|
||
if (LXCharge && LXCharge.length > 0) {
|
||
LXCharge.forEach((subItem) => {
|
||
if (subItem.Status !== 3) {
|
||
LXEmpty += 1;
|
||
}
|
||
LXSum += 1;
|
||
});
|
||
}
|
||
|
||
this.detailInfo.LXDetail = {
|
||
LXEmpty: LXEmpty,
|
||
LXSum: LXSum,
|
||
};
|
||
}
|
||
// uni.hideLoading();
|
||
},
|
||
// 跳转到选择服务区
|
||
goSelectServer() {
|
||
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
||
},
|
||
// 返回上级页面
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
// uni.switchTab({
|
||
// url: "/pages/index/index",
|
||
// });
|
||
},
|
||
// 拿到精选商家数据
|
||
async handleGetMerchant() {
|
||
// uni.showLoading({
|
||
// title: "加载中...",
|
||
// });
|
||
|
||
// const data = await this.$api.getCoop({
|
||
// action_type: "GetSellerList",
|
||
// showSales: 1,
|
||
// showCoupon: 1,
|
||
// showComment: 1,
|
||
// serverpartId: this.detailInfo.SERVERPART_ID,
|
||
// provinceCode: "340000",
|
||
// showGoods: 1,
|
||
// pageSize: 9999,
|
||
// pageIndex: 1,
|
||
// });
|
||
// let list = data.Data.List || [];
|
||
|
||
const data = await this.$api.$javaGet2("/third-party/getMerchantsList", {
|
||
serverpartId: this.detailInfo.SERVERPART_ID,
|
||
});
|
||
let list = data.Result_Data.List;
|
||
|
||
console.log("handleGetMerchant", list);
|
||
this.merchantList = list;
|
||
// uni.hideLoading();
|
||
this.isLoading = false;
|
||
},
|
||
goShop(item) {
|
||
console.log("goShop", item);
|
||
this.goBuy(item);
|
||
// if (item.SCANCODE_ORDER === 1) {
|
||
// this.goBuy(item);
|
||
// } else {
|
||
// uni.navigateTo({
|
||
// url: `/pages/storeDetail/index?id=${item.MERCHANTS_ID}`,
|
||
// });
|
||
// }
|
||
},
|
||
// 去点餐的跳转
|
||
goBuy(item) {
|
||
console.log("goBuy", item);
|
||
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}&buyType=${item.SCANCODE_ORDER}`,
|
||
});
|
||
} else {
|
||
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}&buyType=${item.SCANCODE_ORDER}`,
|
||
});
|
||
this.isLogin = true;
|
||
}
|
||
},
|
||
// 打电话
|
||
handleCallPhone(phone) {
|
||
if (!phone) {
|
||
return;
|
||
}
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone, //仅为示例
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
|
||
.topBox {
|
||
width: 100%;
|
||
padding: 0 32rpx 16rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9;
|
||
|
||
.topContent {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.backIconBox {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
|
||
.backIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.currentServiceBox {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8rpx 16rpx;
|
||
background: #fff;
|
||
border-radius: 32rpx;
|
||
border: 1rpx solid #e7e7e6;
|
||
margin-left: 8rpx;
|
||
|
||
.servicePosition {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.currentService {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #090c1a;
|
||
line-height: 40rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx 48rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.serviceDetail {
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
.detailTop {
|
||
width: 100%;
|
||
height: 320rpx;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.serviceImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.noDataBg {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url(https://eshangtech.com/wanmeiyizhanImg/discovery/defaultIcon.png);
|
||
background-repeat: no-repeat;
|
||
background-position-x: 50%;
|
||
background-position-y: 50%;
|
||
}
|
||
}
|
||
|
||
.detailBottom {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20rpx 28rpx 28rpx;
|
||
position: relative;
|
||
|
||
.detailFirst {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.firstLeft {
|
||
width: calc(100% - 150rpx);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
.serviceName {
|
||
max-width: calc(100% - 190rpx);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #130f05;
|
||
line-height: 46rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.serviceStatus {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #009f43;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
padding: 2rpx 6rpx;
|
||
background: #e9f8ee;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.firstRight {
|
||
.goBox {
|
||
font-family: "MicrosoftYaHei";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 4rpx 30rpx;
|
||
border-radius: 32rpx;
|
||
background-color: #00C920;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.detailSecond {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10rpx;
|
||
|
||
.secondLeft {
|
||
width: calc(100% - 150rpx);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
|
||
.addressText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.secondRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.distance {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.detailFixedIcon {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.navigationBox {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
position: absolute;
|
||
right: 24rpx;
|
||
top: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f8f4ea;
|
||
border-radius: 50%;
|
||
|
||
.navigationIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carDetailBox {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.detailTab {
|
||
width: 100%;
|
||
// border-bottom: 1px solid #f3f3f3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 40rpx;
|
||
padding-bottom: 14rpx;
|
||
}
|
||
|
||
.selectTabItem {
|
||
font-weight: 600;
|
||
color: #160002;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem::after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 2rem;
|
||
height: 6rpx;
|
||
background: #009DFF;
|
||
border-radius: 3rpx;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.detailContent {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
}
|
||
|
||
.firstContent {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.gasContent {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
.gasItem {
|
||
width: calc((100% - 44rpx) / 3);
|
||
box-sizing: border-box;
|
||
padding: 20rpx 20rpx 10rpx;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
border: 1px solid #F7F7F7;
|
||
|
||
.gasItemIcon {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
// .label {
|
||
// font-family: "PingFangSC";
|
||
// font-weight: 400;
|
||
// font-size: 26rpx;
|
||
// color: #2a2b2e;
|
||
// line-height: 36rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// margin: 16rpx 0;
|
||
// }
|
||
|
||
.value {
|
||
font-family: "DINAlternate";
|
||
font-size: 24rpx;
|
||
color: #2a2b2e;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.newValue {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10rpx;
|
||
|
||
.newValueLeft {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.unit {
|
||
font-family: "MicrosoftYaHei";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FF6200;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.price {
|
||
font-family: "MicrosoftYaHei";
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
line-height: 36rpx;
|
||
color: #FF6200;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
|
||
.smallPrice {
|
||
font-family: "MicrosoftYaHei";
|
||
font-weight: bold;
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
color: #FF6200;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.newValueRight {
|
||
font-family: "MicrosoftYaHei";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: rgba(0, 0, 0, 0.3);
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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%);
|
||
}
|
||
}
|
||
|
||
.chargeContent {
|
||
margin-top: 24rpx;
|
||
|
||
.chargeItem {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
|
||
.itemLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.imgIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.chargeTypeName {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.itemRight {
|
||
background: #f5f6f7;
|
||
border-radius: 4rpx;
|
||
padding: 4rpx 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.emptyText {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.use {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.sum {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stateGrid {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
background: #f6f6f6;
|
||
border-radius: 12rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftGrid {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.gridImg {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.gridText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.fastCharg {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #ffffff;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
display: inline;
|
||
padding: 2rpx 6rpx;
|
||
background: linear-gradient(270deg, #ff500e 0%, #ff7d0a 100%);
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
|
||
.rightGrid {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.other {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.have {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.all {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contentItem {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
// background-image: url('https://eshangtech.com/wanmeiyizhanImg/home/chargeBg.png');
|
||
// background-repeat: no-repeat;
|
||
// background-size: 100% 100%;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f5f6f7;
|
||
|
||
.leftItem {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
// width: 128rpx;
|
||
// height: 64rpx;
|
||
.carIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.configIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.rightItem {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.emptyText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.occupy {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.unit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carContent {
|
||
width: 100%;
|
||
// background: #FAFAFC;
|
||
border-radius: 8rpx;
|
||
border: 2rpx solid #f5f6f7;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 24rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 32rpx;
|
||
|
||
.carItem {
|
||
width: calc((100% / 2));
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.carTop {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1rpx solid #e7e7e6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
margin-right: 16rpx;
|
||
|
||
.carIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.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;
|
||
|
||
.carName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.carValue {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.unit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.vehicleMaintenance {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
.vehicleTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.vehicleContent {
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
|
||
.vehicleContentLeft {
|
||
.leftLabel {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.onlineTime {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 24rpx;
|
||
}
|
||
}
|
||
|
||
.vehicleContentRight {
|
||
.callPhone {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.otherFacilities {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.otherTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.detailTab {
|
||
width: 100%;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 40rpx;
|
||
padding-bottom: 14rpx;
|
||
}
|
||
|
||
.selectTabItem {
|
||
font-weight: 600;
|
||
color: #160002;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem::after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 2rem;
|
||
height: 6rpx;
|
||
background: #ba922f;
|
||
border-radius: 3rpx;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.secondContent {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.toiletBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.toiletItem {
|
||
width: calc((100% - 16rpx) / 2);
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
// background: #f6f6f6;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: space-between;
|
||
|
||
.toiletItemLeft {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border: 1rpx solid #e7e7e6;
|
||
border-radius: 50%;
|
||
margin-right: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.toiletItemRight {
|
||
.label {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.value {
|
||
margin-top: 4rpx;
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.unit {
|
||
margin-left: 4rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .toiletItemLeft {
|
||
// display: flex;
|
||
// align-items: center;
|
||
|
||
// .toiletIcon {
|
||
// width: 32rpx;
|
||
// height: 32rpx;
|
||
// margin-right: 8rpx;
|
||
// }
|
||
|
||
// .toiletText {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 28rpx;
|
||
// color: #160002;
|
||
// line-height: 40rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// }
|
||
// }
|
||
|
||
// .toiletItemRight {
|
||
// .rightText {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 28rpx;
|
||
// color: #999da3;
|
||
// line-height: 40rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.newContentBox {
|
||
width: 100%;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.detailTab {
|
||
width: 100%;
|
||
border-bottom: 1px solid #f3f3f3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #BDBDBD;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 40rpx;
|
||
padding-bottom: 14rpx;
|
||
}
|
||
|
||
.selectTabItem {
|
||
font-weight: 600;
|
||
color: #160002;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem::after {
|
||
position: absolute;
|
||
content: "";
|
||
width: 2rem;
|
||
height: 6rpx;
|
||
background: #009DFF;
|
||
border-radius: 3rpx;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.detailContent {
|
||
width: calc(100%);
|
||
height: 180rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.imgList {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
|
||
/* 防止子项换行 */
|
||
.configImg {
|
||
width: 176rpx;
|
||
height: 176rpx;
|
||
border-radius: 18rpx;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popularMerchants {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.popularTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 36rpx;
|
||
}
|
||
|
||
.newTabList {
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
border-bottom: 1px solid #f5f6f7;
|
||
|
||
.newTabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 0 50rpx 12rpx 50rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.selectTabItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
}
|
||
|
||
.selectTabItem:after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 2rem;
|
||
height: 4rpx;
|
||
background: #ba922f;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.newTabList::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.newShopUnit {
|
||
width: 100%;
|
||
margin-bottom: 30rpx;
|
||
// border-bottom: 1px solid #ededed;
|
||
// padding-bottom: 32rpx;
|
||
|
||
.shopItemTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.shopImg {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
overflow: hidden;
|
||
border-radius: 16rpx;
|
||
margin-right: 28rpx;
|
||
|
||
.shopIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.shopDetail {
|
||
width: calc(100% - 158rpx);
|
||
height: 130rpx;
|
||
// height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// flex-direction: column;
|
||
// justify-content: space-between;
|
||
// position: relative;
|
||
|
||
.shopDetailLeft {
|
||
width: calc(100% - 150rpx);
|
||
height: 130rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.detailLeftTop {
|
||
.topShopName {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 29rpx;
|
||
color: #000000;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.detailLeftBottom {
|
||
.scoreBox {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #FF6200;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.newOtherDetail {
|
||
width: 100%;
|
||
display: flex;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
margin-top: 12rpx;
|
||
|
||
.label {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
width: 50rpx;
|
||
}
|
||
|
||
.value {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #009DFF;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
width: 70rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopDetailRight {
|
||
width: 150rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.goFood {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 4rpx 28rpx;
|
||
background-color: #FF6200;
|
||
border-radius: 32rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.search {
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 4rpx 28rpx;
|
||
background-color: #009DFF;
|
||
border-radius: 32rpx;
|
||
display: inline-block;
|
||
|
||
}
|
||
}
|
||
|
||
.shopName {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.shopTitle {
|
||
display: inline-block;
|
||
max-width: calc(100% - 133rpx);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #130f05;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.titleIcon {
|
||
display: inline-block;
|
||
background: url("https://eshangtech.com/ShopICO/icos/to-eat.png") no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
|
||
background-size: contain;
|
||
width: 133rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
|
||
.otherDetail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.leftDetail {
|
||
.mark {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #ba922f;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
|
||
.unit {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #ba922f;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.monthSales {
|
||
margin-left: 16rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.perCapita {
|
||
margin-left: 16rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.rightDetail {
|
||
.perCapita {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.icon-coupon {
|
||
background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png") no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
|
||
background-size: contain;
|
||
// width 75rpx
|
||
// height 22rpx
|
||
padding-left: 40rpx;
|
||
height: 27rpx;
|
||
line-height: 27rpx;
|
||
// padding-left 25rpx
|
||
font-size: 24rpx;
|
||
color: #ec5930;
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.couponList {
|
||
display: inline-block;
|
||
margin-top: 12rpx;
|
||
|
||
.couponBox {
|
||
background: #fef0e5;
|
||
border-radius: 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.couponIconBox {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: linear-gradient(180deg, #ffddc0 0%, #ffeada 100%);
|
||
border-radius: 4rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.couponIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.couponText {
|
||
margin: 0 10rpx;
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #fa5825;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goOrder {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
padding: 10rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
border: 2rpx solid #ae8d3e;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.orderIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.goOrderText {
|
||
font-family: "PingFangSC";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #ba922f;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
// .couponBox {
|
||
// padding: 4rpx 6rpx;
|
||
// background: rgba(247, 80, 49, 0.08);
|
||
// border-radius: 2rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// position: absolute;
|
||
// right: 160rpx;
|
||
// top: 0;
|
||
// .couponIcon {
|
||
// width: 24rpx;
|
||
// height: 24rpx;
|
||
// margin-right: 4rpx;
|
||
// }
|
||
// .couponText {
|
||
// font-family: PingFangSC, PingFang SC;
|
||
// font-weight: 400;
|
||
// font-size: 22rpx;
|
||
// color: #f75031;
|
||
// line-height: 32rpx;
|
||
// text-align: left;
|
||
// font-style: normal;
|
||
// white-space: nowrap;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
|
||
.shopList {
|
||
width: calc(100% - 160rpx);
|
||
box-sizing: border-box;
|
||
margin-left: 160rpx;
|
||
overflow-x: auto;
|
||
display: flex;
|
||
margin-top: 24rpx;
|
||
|
||
.shopItem {
|
||
width: 168rpx;
|
||
margin-right: 16rpx;
|
||
|
||
.shopImgBox {
|
||
width: 146rpx;
|
||
height: 96rpx;
|
||
overflow: hidden;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.shopImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.shopName {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.itemPrice {
|
||
.itemUnit {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 20rpx;
|
||
color: #FF6200;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.itemPrice {
|
||
font-family: "DINAlternate";
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #FF6200;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopList::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.activitieBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-top: 24rpx;
|
||
|
||
.activeTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #716f69;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.couponList {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
|
||
.couponItem {
|
||
width: calc((100% - 24rpx) / 2) !important;
|
||
margin-right: 24rpx;
|
||
|
||
.itemImgBox {
|
||
width: 100%;
|
||
height: 192rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 16rpx;
|
||
|
||
.itemImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.couponText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #130f05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.couponTime {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.timeIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.couponTimeText {
|
||
width: calc(100% - 32rpx);
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716f69;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.couponItem:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |