1140 lines
36 KiB
Vue
1140 lines
36 KiB
Vue
<template>
|
|
<div class="main">
|
|
<!-- <div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" @click="handleBack">-->
|
|
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>-->
|
|
<!-- </div>-->
|
|
<view class="mapBox" v-if="isShowMap">
|
|
<map
|
|
id="myMap"
|
|
:longitude="longitude"
|
|
:latitude="latitude"
|
|
:markers="markers"
|
|
class="map"
|
|
show-location
|
|
></map>
|
|
<!-- <view class="ydBox" @click="handleClickYD">-->
|
|
<!-- <image class="ydIcon" src="https://eshangtech.com/wanmeiyizhanImg/tabBar/company_active.png"/>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
<!-- <view v-else class="map"></view>-->
|
|
<div
|
|
class="list"
|
|
:style="{
|
|
transform: isMoveUp ? `translateY(calc(-40vh + 40px))` : '',
|
|
}"
|
|
>
|
|
<!-- :style="{transform:isMoveUp?`translateY(calc(-40vh + ${menu.bottom + 5}px))`:''}"-->
|
|
<div class="top">
|
|
<div class="topImg">
|
|
<image
|
|
class="packUp"
|
|
:style="{ transform: isMoveUp ? 'rotate(180deg)' : '' }"
|
|
src="https://eshangtech.com/ShopICO/ahyd-BID/service/packUp.svg"
|
|
@click="handleClickShowMoveUp"
|
|
></image>
|
|
</div>
|
|
<div class="search">
|
|
<!-- <div class="left">
|
|
<picker class="pick" @change="handleChangeService($event)" :value="selectIndex" :range="array" range-key="name">
|
|
<div class="box">
|
|
<view class="picker">
|
|
{{selectName || ''}}
|
|
</view>
|
|
<image class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/upArrow.svg"></image>
|
|
</div>
|
|
</picker>
|
|
</div> -->
|
|
<div class="right">
|
|
<input
|
|
class="searchText"
|
|
v-model="searchText"
|
|
confirm-type="search"
|
|
@confirm="handleSearch"
|
|
placeholder="搜索服务区"
|
|
placeholder-style="font-size: 14px;color: #A69E9F;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="serviceList"
|
|
:style="{ height: isMoveUp ? `calc(100vh - 130px)` : '' }"
|
|
>
|
|
<div v-if="false">
|
|
<div
|
|
class="serviceItem"
|
|
v-for="(item, index) in serviceList"
|
|
:key="index"
|
|
@click="handleGoDetail(item.SERVERPART_ID, item)"
|
|
>
|
|
<div class="topItem">
|
|
<view class="leftItem">
|
|
<p class="title">{{ item.SERVERPART_NAME }}</p>
|
|
<view class="typeBox" v-if="false">{{
|
|
item.SERVERPART_TYPE
|
|
? serviceTypeObj[item.SERVERPART_TYPE]
|
|
: ""
|
|
}}</view>
|
|
</view>
|
|
<div class="box">
|
|
<div class="imgBox">
|
|
<image
|
|
class="icon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/phone.png"
|
|
></image>
|
|
</div>
|
|
<div
|
|
class="imgBox"
|
|
style="margin-right: 0px"
|
|
@click.stop="handleGomap(item)"
|
|
>
|
|
<image
|
|
class="icon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/map.png"
|
|
></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <p class="distance">
|
|
距您 <text class="number">{{ item.SERVERPART_DISTANCE }}</text> km
|
|
</p> -->
|
|
<div class="info">
|
|
<image
|
|
class="infoIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/address.svg"
|
|
></image>
|
|
<div class="addressBox">
|
|
<span class="distance">{{ item.SERVERPART_DISTANCE }}km</span>
|
|
<div class="line"></div>
|
|
<span class="address">{{ item.SERVERPART_ADDRESS }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="info" v-if="item.STARTDATE">
|
|
<image
|
|
class="infoIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/time.png"
|
|
></image>
|
|
<p class="time">{{ item.STARTDATE }}</p>
|
|
</div>
|
|
|
|
<view class="centerItem">
|
|
<view
|
|
class="centerConfigItemNew"
|
|
v-for="(subItem, index) in item.imgList.slice(0, 12)"
|
|
:key="index"
|
|
>
|
|
<image class="configImg" :src="subItem.url" />
|
|
<text class="configText">{{ subItem.title || "" }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<div class="typeList" v-if="false">
|
|
<image
|
|
class="typeItem"
|
|
:src="
|
|
item.HASCHARGE
|
|
? 'https://eshangtech.com/wanmeiyizhanImg/home/Charging.svg'
|
|
: 'https://eshangtech.com/wanmeiyizhanImg/home/noCharging.svg'
|
|
"
|
|
></image>
|
|
<image
|
|
class="typeItem"
|
|
:src="
|
|
item.HASPILOTLOUNGE
|
|
? 'https://eshangtech.com/wanmeiyizhanImg/home/jinCar.svg'
|
|
: 'https://eshangtech.com/wanmeiyizhanImg/home/noJinCar.svg'
|
|
"
|
|
></image>
|
|
<image
|
|
class="typeItem"
|
|
:src="
|
|
item.SERVERPART_TYPE
|
|
? 'https://eshangtech.com/wanmeiyizhanImg/home/health.svg'
|
|
: 'https://eshangtech.com/wanmeiyizhanImg/home/noHealth.svg'
|
|
"
|
|
></image>
|
|
<image
|
|
class="typeItem"
|
|
:src="
|
|
item.HASMOTHER
|
|
? 'https://eshangtech.com/wanmeiyizhanImg/home/baby.svg'
|
|
: 'https://eshangtech.com/wanmeiyizhanImg/home/nobaby.svg'
|
|
"
|
|
></image>
|
|
|
|
<image
|
|
class="typeItem"
|
|
:src="
|
|
item.HASGUESTROOM
|
|
? 'https://eshangtech.com/wanmeiyizhanImg/home/hotel.svg'
|
|
: 'https://eshangtech.com/wanmeiyizhanImg/home/nohotel.svg'
|
|
"
|
|
></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="chaegeBoxList && chaegeBoxList.length > 0">
|
|
<charge-box
|
|
:serviceAreaList="chaegeBoxList"
|
|
:pageType="'newMap'"
|
|
:comeForm="comeForm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
handleHavePointInMin,
|
|
handleHavePointInApp,
|
|
hanldeHavePointInIos,
|
|
} from "../../../utils/publicMethods";
|
|
import ChargeBox from "../../../components/chargeBox.vue";
|
|
export default {
|
|
components: { ChargeBox },
|
|
data() {
|
|
return {
|
|
menu: {}, // 手机参数
|
|
longitude: null,
|
|
latitude: null,
|
|
userLongitude: null,
|
|
userLatitude: null,
|
|
seat: "",
|
|
statusBarHeight: "",
|
|
isMoveUp: false, // 是否展开
|
|
array: [], // 服务区选择器选择的列表
|
|
selectIndex: null, // 服务区选择器选择的值
|
|
selectValue: "", // 选择的值
|
|
selectName: "", // 选择的片区名字
|
|
searchText: "",
|
|
serviceList: [],
|
|
isShowMap: false,
|
|
serviceTypeObj: {},
|
|
currentServiceMessage: {}, // 当前的服务区数据
|
|
seatInfo: {}, // 经纬度
|
|
loginType: "", // 登录类别
|
|
comeForm: "",
|
|
chaegeBoxList: [], //服务区名称列表
|
|
};
|
|
},
|
|
async onLoad(option) {
|
|
console.log("option", option);
|
|
if (option.comeForm) {
|
|
this.comeForm = option.comeForm;
|
|
}
|
|
// 获取手机参数
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight);
|
|
this.loginType = type;
|
|
if (type === "min") {
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
} else {
|
|
this.menu = systemInfo.safeArea;
|
|
}
|
|
// 地图初始化
|
|
this.mapCtx = uni.createMapContext("myMap");
|
|
let seatInfo = uni.getStorageSync("seatInfo");
|
|
if (seatInfo) {
|
|
this.seatInfo = JSON.parse(seatInfo);
|
|
}
|
|
let type = uni.getStorageSync("loginType");
|
|
// wx.getLocation({
|
|
// type: 'gcj02',
|
|
// altitude: true,
|
|
// success: async (res) => {
|
|
// console.log('rewrwqerwq', res)
|
|
// let seatInfo = {
|
|
// latitude: res.latitude,
|
|
// longitude: res.longitude
|
|
// }
|
|
// uni.setStorageSync('seatInfo', seatInfo)
|
|
// }
|
|
// })
|
|
|
|
if (this.seatInfo.longitude && this.seatInfo.latitude) {
|
|
let res = uni.getStorageSync("currentService");
|
|
console.log("res", res);
|
|
// 已经拿到选中的服务区了
|
|
if (res) {
|
|
this.currentServiceMessage = res;
|
|
}
|
|
// 获取片区列表
|
|
await this.getServiceList();
|
|
// 服务区的枚举类型
|
|
await this.handleServiceType();
|
|
|
|
// 拿到服务区的列表
|
|
await this.handleGetServiceList();
|
|
} else {
|
|
if (this.loginType === "min") {
|
|
handleHavePointInMin().then((res) => {
|
|
console.log("handleHavePointInMin", res);
|
|
_this.handleGetOnLoad();
|
|
});
|
|
} else if (this.loginType === "android") {
|
|
handleHavePointInApp().then((res) => {
|
|
console.log("handleHavePointInApp", res);
|
|
});
|
|
} else {
|
|
console.log("ios");
|
|
hanldeHavePointInIos();
|
|
}
|
|
}
|
|
},
|
|
onHide() {
|
|
this.isShowMap = true;
|
|
},
|
|
onUnload() {
|
|
this.isShowMap = false;
|
|
},
|
|
methods: {
|
|
// 点击了展开
|
|
handleClickShowMoveUp() {
|
|
if (this.isMoveUp) {
|
|
this.isMoveUp = false;
|
|
} else {
|
|
this.isMoveUp = true;
|
|
}
|
|
},
|
|
// 切换片区
|
|
handleChangeService(e) {
|
|
console.log("e", e);
|
|
this.selectIndex = Number(e.mp.detail.value);
|
|
this.selectValue = this.array[this.selectIndex].value;
|
|
this.selectName = this.array[this.selectIndex].name;
|
|
},
|
|
// 获取片区列表
|
|
async getServiceList() {
|
|
let req = {
|
|
Province_Code: "340000",
|
|
};
|
|
const data = await this.$api.$get(
|
|
"/CommercialApi/BaseInfo/GetSPRegionList",
|
|
req
|
|
);
|
|
console.log("data", data);
|
|
this.array = data.Result_Data.List;
|
|
// 已经有选择的服务区的话 根据数据 自动把片区选择起来
|
|
if (this.currentServiceMessage.SPREGIONTYPE_ID) {
|
|
console.log("1");
|
|
let selectIndex = 0;
|
|
this.array.forEach((item, index) => {
|
|
if (item.value === this.currentServiceMessage.SPREGIONTYPE_ID) {
|
|
selectIndex = index;
|
|
}
|
|
});
|
|
this.selectIndex = selectIndex;
|
|
this.selectValue = this.currentServiceMessage.SPREGIONTYPE_ID;
|
|
this.selectName = this.currentServiceMessage.SPREGIONTYPE_NAME;
|
|
} else {
|
|
console.log("2");
|
|
this.selectIndex = 0;
|
|
this.selectValue = this.array[this.selectIndex].value;
|
|
this.selectName = this.array[this.selectIndex].name;
|
|
}
|
|
},
|
|
// 拿到服务区列表
|
|
async handleGetServiceList() {
|
|
if (!(this.seatInfo.longitude && this.seatInfo.latitude)) {
|
|
return;
|
|
}
|
|
|
|
let req = {
|
|
Province_Code: "340000",
|
|
SPRegionType_ID: this.selectValue,
|
|
Serverpart_ID: this.currentServiceMessage.Serverpart_ID || "",
|
|
// 用自己当前位置去查找
|
|
longitude: this.seatInfo.longitude,
|
|
latitude: this.seatInfo.latitude,
|
|
ShowService: true,
|
|
// longitude: this.currentServiceMessage.ServerPart_X || "",
|
|
// latitude: this.currentServiceMessage.ServerPart_Y || "",
|
|
};
|
|
const data = await this.$api.$get(
|
|
"/CommercialApi/BaseInfo/GetServerpartList",
|
|
req
|
|
);
|
|
|
|
let list = data.Result_Data.List;
|
|
let nameList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
nameList.push(item.SERVERPART_NAME);
|
|
|
|
// 理想总数
|
|
let LIAUTOCHARGESum = 0;
|
|
// 国网总数
|
|
let STATEGRIDCHARGESum = 0;
|
|
// 充换电总数
|
|
let GACENERGYCHARGESum = 0;
|
|
let HASPANTRY = 0; // 男厕数量
|
|
let HASWIFI = 0; // 女厕数量
|
|
let MICROWAVEOVEN = 0; // 微波炉
|
|
let WASHERCOUNT = 0; // 洗衣机数量
|
|
let HASPILOTLOUNGE = false; // 有无司机之家
|
|
let HASCHILD = false; // 有无车辆维修
|
|
let SMALLPARKING = 0; // 轿车车位
|
|
let PACKING = 0; // 客车车位
|
|
let TRUCKPACKING = 0; // 货车车位
|
|
let DANPACKING = 0; // 危化品车位
|
|
let DININGROOMCOUNT = 0; // 餐饮店
|
|
let HASBACKGROUNDRADIO = 0; // 便利店
|
|
let POINTCONTROLCOUNT = 0; // 客房
|
|
let REFUELINGGUN92 = 0; // 加油枪92号
|
|
let REFUELINGGUN95 = 0; // 加油枪95号
|
|
let REFUELINGGUN0 = 0; // 加油枪0号
|
|
|
|
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
|
item.RegionInfo.forEach((subItem) => {
|
|
HASPANTRY += subItem.HASPANTRY;
|
|
HASWIFI += subItem.HASPANTRY;
|
|
MICROWAVEOVEN += subItem.MICROWAVEOVEN;
|
|
WASHERCOUNT += subItem.WASHERCOUNT;
|
|
SMALLPARKING += subItem.SMALLPARKING;
|
|
PACKING += subItem.PACKING;
|
|
TRUCKPACKING += subItem.TRUCKPACKING;
|
|
DANPACKING += subItem.DANPACKING;
|
|
DININGROOMCOUNT += subItem.DININGROOMCOUNT;
|
|
HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
|
|
POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
|
|
REFUELINGGUN92 += subItem.REFUELINGGUN92;
|
|
REFUELINGGUN95 += subItem.REFUELINGGUN95;
|
|
REFUELINGGUN0 += subItem.REFUELINGGUN0;
|
|
|
|
if (subItem.HASPILOTLOUNGE) {
|
|
HASPILOTLOUNGE = true;
|
|
}
|
|
if (subItem.HASCHILD) {
|
|
HASCHILD = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
item.imgList = [
|
|
{
|
|
url:
|
|
HASPANTRY > 0 || HASWIFI > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
|
|
isShow: HASPANTRY > 0,
|
|
title: "卫生间",
|
|
},
|
|
{
|
|
url:
|
|
HASPANTRY > 0 || HASWIFI > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
|
|
isShow: HASPANTRY > 0 || HASWIFI > 0,
|
|
title: "母婴室",
|
|
},
|
|
{
|
|
url:
|
|
HASPILOTLOUNGE > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
|
|
isShow: HASPILOTLOUNGE > 0,
|
|
title: "司机之家",
|
|
},
|
|
{
|
|
url:
|
|
SMALLPARKING > 0 ||
|
|
PACKING > 0 ||
|
|
TRUCKPACKING > 0 ||
|
|
DANPACKING > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
|
|
isShow:
|
|
SMALLPARKING > 0 ||
|
|
PACKING > 0 ||
|
|
TRUCKPACKING > 0 ||
|
|
DANPACKING > 0,
|
|
title: "停车场",
|
|
},
|
|
{
|
|
url:
|
|
REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
|
|
isShow:
|
|
REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0,
|
|
title: "加油站",
|
|
},
|
|
{
|
|
url:
|
|
LIAUTOCHARGESum > 0 ||
|
|
STATEGRIDCHARGESum > 0 ||
|
|
GACENERGYCHARGESum > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
|
|
isShow:
|
|
LIAUTOCHARGESum > 0 ||
|
|
STATEGRIDCHARGESum > 0 ||
|
|
GACENERGYCHARGESum > 0,
|
|
title: "充电桩",
|
|
},
|
|
{
|
|
url:
|
|
DININGROOMCOUNT > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
|
|
isShow: DININGROOMCOUNT > 0,
|
|
title: "餐饮",
|
|
},
|
|
{
|
|
url:
|
|
HASBACKGROUNDRADIO > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
|
|
isShow: HASBACKGROUNDRADIO > 0,
|
|
title: "便利店",
|
|
},
|
|
{
|
|
url: HASCHILD
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
|
|
isShow: SMALLPARKING,
|
|
title: "车辆维修",
|
|
},
|
|
{
|
|
url:
|
|
POINTCONTROLCOUNT > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
|
|
isShow: POINTCONTROLCOUNT > 0,
|
|
title: "客房",
|
|
},
|
|
{
|
|
url:
|
|
WASHERCOUNT > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/WASHERCOUNT.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noWASHERCOUNT.svg",
|
|
isShow: WASHERCOUNT > 0,
|
|
title: "洗衣机",
|
|
},
|
|
{
|
|
url:
|
|
MICROWAVEOVEN > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/MICROWAVEOVEN.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noMICROWAVEOVEN.svg",
|
|
isShow: MICROWAVEOVEN > 0,
|
|
title: "微波炉",
|
|
},
|
|
];
|
|
});
|
|
}
|
|
|
|
this.chaegeBoxList = nameList;
|
|
this.serviceList = list;
|
|
console.log("this.serviceList", this.serviceList);
|
|
await this.getServiceDetail(this.serviceList[0].SERVERPART_ID);
|
|
},
|
|
// 选择的服务区详情
|
|
handleGoDetail(id, obj) {
|
|
console.log("id", id);
|
|
console.log("obj", obj);
|
|
let res = this.handleChangeServiceInfo(obj);
|
|
// let res = {
|
|
// SERVERPART_NAME: obj.SERVERPART_NAME, // 服务区
|
|
// SPREGIONTYPE_NAME: obj.SPREGIONTYPE_NAME, // 片区
|
|
// Serverpart_ID: obj.SERVERPART_ID,
|
|
// SPRegionType_ID: obj.SPREGIONTYPE_ID,
|
|
// longitude: obj.SERVERPART_X,
|
|
// latitude: obj.SERVERPART_Y
|
|
// }
|
|
console.log("this.comeForm", this.comeForm);
|
|
|
|
uni.setStorageSync("currentService", res); // 当前选中服务区信息
|
|
if (this.comeForm === "home") {
|
|
uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/index" });
|
|
} else {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
}
|
|
},
|
|
// 兼容一下老接口要的服务区对象的内容
|
|
handleChangeServiceInfo(obj) {
|
|
let newObj = {
|
|
...obj,
|
|
Distance: obj.SERVERPART_DISTANCE,
|
|
OwnerUnitId: obj.OWNERUNIT_ID,
|
|
OwnerUnitName: obj.OWNERUNIT_NAME,
|
|
ProvinceCode: "340000",
|
|
ServerPart_Id: obj.SERVERPART_ID,
|
|
ServerPart_Name: obj.SERVERPART_NAME,
|
|
ServerPart_Tel: "",
|
|
ServerPart_X: obj.SERVERPART_X,
|
|
ServerPart_Y: obj.SERVERPART_Y,
|
|
showName: `${obj.SERVERPART_NAME}(${obj.SERVERPART_DISTANCE}km)`,
|
|
};
|
|
return newObj;
|
|
},
|
|
// 获取服务区详情信息
|
|
async getServiceDetail(id) {
|
|
let req = {
|
|
ServerpartId: id,
|
|
longitude: this.seatInfo.longitude,
|
|
latitude: this.seatInfo.latitude,
|
|
};
|
|
const data = await this.$api.$get(
|
|
"/CommercialApi/BaseInfo/GetServerpartInfo",
|
|
req
|
|
);
|
|
console.log("data", data);
|
|
this.longitude = data.Result_Data.ServerpartInfo.SERVERPART_X;
|
|
this.latitude = data.Result_Data.ServerpartInfo.SERVERPART_Y;
|
|
this.isShowMap = true;
|
|
},
|
|
// 枚举服务区类型 SERVERPART_TYPE
|
|
async handleServiceType() {
|
|
const data = await this.$api.$get(
|
|
"/EShangApiMain/FrameWork/GetFieldEnumByField",
|
|
{ FieldExplainField: "SERVERPART_TYPE" }
|
|
);
|
|
console.log("data", data);
|
|
let obj = {};
|
|
data.Result_Data.List.forEach((item) => {
|
|
obj[Number(item.value)] = item.label;
|
|
});
|
|
console.log("obj", obj);
|
|
this.serviceTypeObj = obj;
|
|
},
|
|
// 搜索框触发的方法
|
|
async handleSearch() {
|
|
this.chaegeBoxList = [];
|
|
let req = {
|
|
// longitude: this.longitude,
|
|
Province_Code: "340000",
|
|
longitude: this.seatInfo.longitude,
|
|
latitude: this.seatInfo.latitude,
|
|
Serverpart_Name: this.searchText,
|
|
ShowService: true,
|
|
};
|
|
const data = await this.$api.$get(
|
|
"/CommercialApi/BaseInfo/GetServerpartList",
|
|
req
|
|
);
|
|
let list = data.Result_Data.List;
|
|
let nameList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
nameList.push(item.SERVERPART_NAME);
|
|
// 理想总数
|
|
let LIAUTOCHARGESum = 0;
|
|
// 国网总数
|
|
let STATEGRIDCHARGESum = 0;
|
|
// 充换电总数
|
|
let GACENERGYCHARGESum = 0;
|
|
let HASPANTRY = 0; // 男厕数量
|
|
let HASWIFI = 0; // 女厕数量
|
|
let MICROWAVEOVEN = 0; // 微波炉
|
|
let WASHERCOUNT = 0; // 洗衣机数量
|
|
let HASPILOTLOUNGE = false; // 有无司机之家
|
|
let HASCHILD = false; // 有无车辆维修
|
|
let SMALLPARKING = 0; // 轿车车位
|
|
let PACKING = 0; // 客车车位
|
|
let TRUCKPACKING = 0; // 货车车位
|
|
let DANPACKING = 0; // 危化品车位
|
|
let DININGROOMCOUNT = 0; // 餐饮店
|
|
let HASBACKGROUNDRADIO = 0; // 便利店
|
|
let POINTCONTROLCOUNT = 0; // 客房
|
|
let REFUELINGGUN92 = 0; // 加油枪92号
|
|
let REFUELINGGUN95 = 0; // 加油枪95号
|
|
let REFUELINGGUN0 = 0; // 加油枪0号
|
|
|
|
if (item.RegionInfo && item.RegionInfo.length > 0) {
|
|
item.RegionInfo.forEach((subItem) => {
|
|
HASPANTRY += subItem.HASPANTRY;
|
|
HASWIFI += subItem.HASPANTRY;
|
|
MICROWAVEOVEN += subItem.MICROWAVEOVEN;
|
|
WASHERCOUNT += subItem.WASHERCOUNT;
|
|
SMALLPARKING += subItem.SMALLPARKING;
|
|
PACKING += subItem.PACKING;
|
|
TRUCKPACKING += subItem.TRUCKPACKING;
|
|
DANPACKING += subItem.DANPACKING;
|
|
DININGROOMCOUNT += subItem.DININGROOMCOUNT;
|
|
HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
|
|
POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
|
|
REFUELINGGUN92 += subItem.REFUELINGGUN92;
|
|
REFUELINGGUN95 += subItem.REFUELINGGUN95;
|
|
REFUELINGGUN0 += subItem.REFUELINGGUN0;
|
|
|
|
if (subItem.HASPILOTLOUNGE) {
|
|
HASPILOTLOUNGE = true;
|
|
}
|
|
if (subItem.HASCHILD) {
|
|
HASCHILD = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
item.imgList = [
|
|
{
|
|
url:
|
|
HASPANTRY > 0 || HASWIFI > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/WC.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noWC.svg",
|
|
isShow: HASPANTRY > 0,
|
|
title: "卫生间",
|
|
},
|
|
{
|
|
url:
|
|
HASPANTRY > 0 || HASWIFI > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/motherAndBaby.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/nomotherAndBaby.svg",
|
|
isShow: HASPANTRY > 0 || HASWIFI > 0,
|
|
title: "母婴室",
|
|
},
|
|
{
|
|
url:
|
|
HASPILOTLOUNGE > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/HASPILOTLOUNGE.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASPILOTLOUNGE.svg",
|
|
isShow: HASPILOTLOUNGE > 0,
|
|
title: "司机之家",
|
|
},
|
|
{
|
|
url:
|
|
SMALLPARKING > 0 ||
|
|
PACKING > 0 ||
|
|
TRUCKPACKING > 0 ||
|
|
DANPACKING > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/SMALLPARKING.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noSMALLPARKING.svg",
|
|
isShow:
|
|
SMALLPARKING > 0 ||
|
|
PACKING > 0 ||
|
|
TRUCKPACKING > 0 ||
|
|
DANPACKING > 0,
|
|
title: "停车场",
|
|
},
|
|
{
|
|
url:
|
|
REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/REFUELINGGUN.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noREFUELINGGUN.svg",
|
|
isShow:
|
|
REFUELINGGUN92 > 0 || REFUELINGGUN95 > 0 || REFUELINGGUN0 > 0,
|
|
title: "加油站",
|
|
},
|
|
{
|
|
url:
|
|
LIAUTOCHARGESum > 0 ||
|
|
STATEGRIDCHARGESum > 0 ||
|
|
GACENERGYCHARGESum > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/chargingStation.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/nochargingStation.svg",
|
|
isShow:
|
|
LIAUTOCHARGESum > 0 ||
|
|
STATEGRIDCHARGESum > 0 ||
|
|
GACENERGYCHARGESum > 0,
|
|
title: "充电桩",
|
|
},
|
|
{
|
|
url:
|
|
DININGROOMCOUNT > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/DININGROOMCOUNT.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noDININGROOMCOUNT.svg",
|
|
isShow: DININGROOMCOUNT > 0,
|
|
title: "餐饮",
|
|
},
|
|
{
|
|
url:
|
|
HASBACKGROUNDRADIO > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/HASBACKGROUNDRADIO.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASBACKGROUNDRADIO.svg",
|
|
isShow: HASBACKGROUNDRADIO > 0,
|
|
title: "便利店",
|
|
},
|
|
{
|
|
url: HASCHILD
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/HASCHILD.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noHASCHILD.svg",
|
|
isShow: SMALLPARKING,
|
|
title: "车辆维修",
|
|
},
|
|
{
|
|
url:
|
|
POINTCONTROLCOUNT > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/POINTCONTROLCOUNT.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noPOINTCONTROLCOUNT.svg",
|
|
isShow: POINTCONTROLCOUNT > 0,
|
|
title: "客房",
|
|
},
|
|
{
|
|
url:
|
|
WASHERCOUNT > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/WASHERCOUNT.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noWASHERCOUNT.svg",
|
|
isShow: WASHERCOUNT > 0,
|
|
title: "洗衣机",
|
|
},
|
|
{
|
|
url:
|
|
MICROWAVEOVEN > 0
|
|
? "https://eshangtech.com/minTestImg/chargeImgNew/MICROWAVEOVEN.svg"
|
|
: "https://eshangtech.com/minTestImg/chargeImgNew/noMICROWAVEOVEN.svg",
|
|
isShow: MICROWAVEOVEN > 0,
|
|
title: "微波炉",
|
|
},
|
|
];
|
|
});
|
|
}
|
|
this.serviceList = list;
|
|
this.chaegeBoxList = nameList;
|
|
console.log("this.chaegeBoxList", this.chaegeBoxList);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="stylus">
|
|
.main {
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.leftArrow {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 16px;
|
|
z-index: 99999999999;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.mapBox {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 40vh;
|
|
|
|
.map {
|
|
width: 100%;
|
|
height: 40vh;
|
|
}
|
|
|
|
.ydBox {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.ydIcon {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
height: calc(60vh + 20px);
|
|
box-sizing: border-box;
|
|
transform: translateY(-20px);
|
|
background: #F2F4F5;
|
|
position: absolute;
|
|
top: 40vh;
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 74px;
|
|
padding: 0 16px;
|
|
// border-radius: 20px 20px 0 0;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
box-shadow: 0 4px 4px 0 rgba(22, 0, 2, 0.04);
|
|
|
|
.topImg {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.packUp {
|
|
width: 26px;
|
|
height: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
width: 100%;
|
|
height: 36px;
|
|
background: #F2F4F5;
|
|
border-radius: 4px;
|
|
margin-top: 13px;
|
|
box-sizing: border-box;
|
|
padding: 8px 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 40%;
|
|
position: relative;
|
|
|
|
.pick {
|
|
.box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.picker {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.selectIcon {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left:after {
|
|
content: '';
|
|
width: 2px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
background: #E1DFDF;
|
|
}
|
|
|
|
.right {
|
|
width: 100%;
|
|
|
|
.searchText {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.serviceList {
|
|
width: 100%;
|
|
height: calc(100% - 90px);
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
overflow-y: auto;
|
|
background: #FFFFFF;
|
|
|
|
.serviceItem {
|
|
width: 100%;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #F5F6F7;
|
|
margin-bottom: 12px;
|
|
|
|
.topItem {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.leftItem {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #130F05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.typeBox {
|
|
// background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
|
|
background: #FEF7E5;
|
|
border-radius: 4rpx;
|
|
padding: 0 8rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
// color: #1E67FF;
|
|
color: #BA922F;
|
|
line-height: 40rpx;
|
|
// margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.imgBox {
|
|
width: 28px;
|
|
height: 28px;
|
|
// border: 1px solid #F1F1F1;
|
|
// overflow: hidden;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
background: #F5F6F7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.distance {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
|
|
.number {
|
|
color: #D7000F;
|
|
margin: 0 2px;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
|
|
.time {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.infoIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.addressBox, .time {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.distance {
|
|
color: #130F05;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.line {
|
|
width: 1px;
|
|
height: 24rpx;
|
|
background: #E7E7E6;
|
|
margin: 0 12rpx;
|
|
}
|
|
|
|
.address {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.typeList {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.typeItem {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
|
|
.centerItem {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.centerConfigItem {
|
|
width: calc((100% / 5));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
.configImg {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
// margin-right: 8rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.configText {
|
|
font-family: 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.centerConfigItemNew {
|
|
width: calc((100% / 6));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
.configImg {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
// margin-right: 8rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.configText {
|
|
font-family: 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|