|
|
@@ -1,27 +1,27 @@
|
|
|
<template>
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
- <page-meta page-style="overflow: {{y ? 'hidden' : 'visible'}}" />
|
|
|
+ <page-meta page-style="overflow: visible"/>
|
|
|
<!-- #endif -->
|
|
|
<view :class="['pb-40']" v-if="station">
|
|
|
<view class="banner">
|
|
|
<swiper
|
|
|
- class="full-percent"
|
|
|
- circular
|
|
|
- :indicator-dots="true"
|
|
|
- :autoplay="true"
|
|
|
- :interval="3000"
|
|
|
+ class="full-percent"
|
|
|
+ circular
|
|
|
+ :indicator-dots="true"
|
|
|
+ :autoplay="true"
|
|
|
+ :interval="3000"
|
|
|
>
|
|
|
<swiper-item
|
|
|
- class="full-percent"
|
|
|
- v-for="(item, index) in station.bannerImages"
|
|
|
- :key="index"
|
|
|
+ class="full-percent"
|
|
|
+ v-for="(item, index) in station.bannerImages"
|
|
|
+ :key="index"
|
|
|
>
|
|
|
<view
|
|
|
- class="full-percent banner-image"
|
|
|
- :style="{
|
|
|
+ class="full-percent banner-image"
|
|
|
+ :style="{
|
|
|
backgroundImage: `url(${item})`,
|
|
|
}"
|
|
|
- @click="previewImage(item)"
|
|
|
+ @click="previewImage(item)"
|
|
|
></view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
@@ -42,22 +42,22 @@
|
|
|
</view>
|
|
|
<view class="flex-align-center mt-10 height-48 relative flex-shrink">
|
|
|
<image
|
|
|
- src="/pages-charge/static/machines-banner-address.png"
|
|
|
- mode="widthFix"
|
|
|
- style="width: 16px; display: block; flex-shrink: 0"
|
|
|
+ src="/pages-charge/static/machines-banner-address.png"
|
|
|
+ mode="widthFix"
|
|
|
+ style="width: 16px; display: block; flex-shrink: 0"
|
|
|
/>
|
|
|
<view class="ml-12 fs-26 color-666">{{ location.address }}</view>
|
|
|
<view class="flex-center ml-auto nav" @click="openAddress">
|
|
|
<image
|
|
|
- src="/pages-charge/static/machines-banner-nav.png"
|
|
|
- mode="widthFix"
|
|
|
+ src="/pages-charge/static/machines-banner-nav.png"
|
|
|
+ mode="widthFix"
|
|
|
/>
|
|
|
<view class="fs-26" style="color: #2d9e95">导航</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
- class="foot mt-30 flex-align-center flex-shrink"
|
|
|
- @click="openDesc"
|
|
|
+ class="foot mt-30 flex-align-center flex-shrink"
|
|
|
+ @click="openDesc"
|
|
|
>
|
|
|
<view class="fs-28 color-666">可用充电桩:</view>
|
|
|
<view class="fs-36 fw-500 color-primary">{{ canUseCount }}</view>
|
|
|
@@ -65,30 +65,31 @@
|
|
|
<view class="fs-28 color-666 ml-auto">{{ canUseTime }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-<!-- <view class="pt-40 pb-20 fs-32 fw-500 color-999">详细说明</view>-->
|
|
|
+ <!-- <view class="pt-40 pb-20 fs-32 fw-500 color-999">详细说明</view>-->
|
|
|
<view class="desc" v-if="station">
|
|
|
<view class="flex-align-center" @click="openDesc">
|
|
|
<view class="width-168 fs-26 color-666">充电费用</view>
|
|
|
<view class="fs-26 color-000">{{ canUsePrice }}元/度</view>
|
|
|
<view class="ml-auto lh-0">
|
|
|
<uni-icons
|
|
|
- type="right"
|
|
|
- size="18"
|
|
|
- color="rgba(0,0,0,0.4)"
|
|
|
+ type="right"
|
|
|
+ size="18"
|
|
|
+ color="rgba(0,0,0,0.4)"
|
|
|
></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flex-align-center">
|
|
|
<view class="width-168 fs-26 color-666">停车费用</view>
|
|
|
<view class="fs-26 color-000">{{
|
|
|
- Number(station.parkFee) > 0
|
|
|
- ? station.parkFee
|
|
|
- : "以停车场公示信息为准"
|
|
|
- }}</view>
|
|
|
+ Number(station.parkFee) > 0
|
|
|
+ ? station.parkFee
|
|
|
+ : "以停车场公示信息为准"
|
|
|
+ }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view
|
|
|
- class="flex-align-center"
|
|
|
- v-if="
|
|
|
+ class="flex-align-center"
|
|
|
+ v-if="
|
|
|
station &&
|
|
|
station.equipmentInfos &&
|
|
|
station.equipmentInfos.length &&
|
|
|
@@ -97,26 +98,29 @@
|
|
|
>
|
|
|
<view class="width-168 fs-26 color-666">充电桩类型</view>
|
|
|
<view class="fs-26 color-000"
|
|
|
- >{{
|
|
|
+ >{{
|
|
|
station.equipmentInfos[0].connectorInfos[0].connectorType === 1
|
|
|
- ? "直流"
|
|
|
- : "交流"
|
|
|
- }}{{ station.equipmentInfos[0].connectorInfos[0].power }}kw</view
|
|
|
+ ? "直流"
|
|
|
+ : "交流"
|
|
|
+ }}{{ station.equipmentInfos[0].connectorInfos[0].power }}kw
|
|
|
+ </view
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pt-40 flex-align-center">
|
|
|
-<!-- <view class="fs-32 fw-500 color-999">充电桩</view>-->
|
|
|
+ <!-- <view class="fs-32 fw-500 color-999">充电桩</view>-->
|
|
|
<view class="fs-26 ml-30 color-999" v-if="station"
|
|
|
- >设备数量(共{{ totalCount }}台)</view
|
|
|
+ >设备数量(共{{ totalCount }}台)
|
|
|
+ </view
|
|
|
>
|
|
|
<view class="ml-auto flex-align-center" @click="openStatus">
|
|
|
<view class="fs-28 color-333 mr-16">{{
|
|
|
- statusList[status].title
|
|
|
- }}</view>
|
|
|
+ statusList[status].title
|
|
|
+ }}
|
|
|
+ </view>
|
|
|
<view
|
|
|
- class="mr-20"
|
|
|
- style="
|
|
|
+ class="mr-20"
|
|
|
+ style="
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
border: 8rpx solid;
|
|
|
@@ -126,32 +130,36 @@
|
|
|
></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
<template
|
|
|
- v-if="station"
|
|
|
- v-for="(item, index) in stationEquipmentInfos"
|
|
|
- :key="index"
|
|
|
+ v-if="station"
|
|
|
+ v-for="(item, index) in stationEquipmentInfos"
|
|
|
+ :key="index"
|
|
|
>
|
|
|
<ChargeMachine
|
|
|
- :title="'NO.' + item.shortId"
|
|
|
- :price="station.totalFee"
|
|
|
- :list="item.connectorInfos"
|
|
|
- :parkingNo="item.parkingNo"
|
|
|
+ :title="'NO.' + item.shortId"
|
|
|
+ :price="station.totalFee"
|
|
|
+ :list="item.connectorInfos"
|
|
|
+ :parkingNo="item.parkingNo"
|
|
|
></ChargeMachine>
|
|
|
</template>
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
<PriceDesc
|
|
|
- v-if="dialogVisible && dialogType === 'desc'"
|
|
|
- :desc="desc"
|
|
|
- @close="closeDialog"
|
|
|
+ v-if="dialogVisible && dialogType === 'desc'"
|
|
|
+ :desc="desc"
|
|
|
+ @close="closeDialog"
|
|
|
></PriceDesc>
|
|
|
<view
|
|
|
- class="dialog flex-align-end"
|
|
|
- v-if="dialogVisible && dialogType === 'status'"
|
|
|
+ class="dialog flex-align-end"
|
|
|
+ v-if="dialogVisible && dialogType === 'status'"
|
|
|
>
|
|
|
<view class="status-dialog">
|
|
|
<view class="status-dialog_head flex-center">
|
|
|
<view class="fw-500 color-000" style="font-size: 16px"
|
|
|
- >选择充电桩状态</view
|
|
|
+ >选择充电桩状态
|
|
|
+ </view
|
|
|
>
|
|
|
<view class="close" @click="closeDialog">
|
|
|
<uni-icons type="closeempty" size="24" color="#2D284B"></uni-icons>
|
|
|
@@ -160,11 +168,11 @@
|
|
|
<view class="status-dialog_body">
|
|
|
<view class="status">
|
|
|
<view
|
|
|
- :class="['fs-32', 'flex-align-center']"
|
|
|
- :style="{ color: status === index ? '#2d9e95' : '#2d284b' }"
|
|
|
- v-for="(statusItem, index) in statusList"
|
|
|
- :key="index"
|
|
|
- @click="changeStatus(index)"
|
|
|
+ :class="['fs-32', 'flex-align-center']"
|
|
|
+ :style="{ color: status === index ? '#2d9e95' : '#2d284b' }"
|
|
|
+ v-for="(statusItem, index) in statusList"
|
|
|
+ :key="index"
|
|
|
+ @click="changeStatus(index)"
|
|
|
>
|
|
|
{{ statusItem.title }}
|
|
|
</view>
|
|
|
@@ -177,12 +185,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from "vue";
|
|
|
-import { fetchStation, fetchStationPriceDesc } from "../../api/charge";
|
|
|
-import { onLoad } from "@dcloudio/uni-app";
|
|
|
+import {ref} from "vue";
|
|
|
+import {fetchStation, fetchStationPriceDesc} from "../../api/charge";
|
|
|
+import {onLoad} from "@dcloudio/uni-app";
|
|
|
import ChargeMachine from "./charge-machine/charge-machine.vue";
|
|
|
import PriceDesc from "./price-desc/price-desc.vue";
|
|
|
import StationCoupon from "@/components/station-coupon/station-coupon.vue";
|
|
|
+
|
|
|
const dialogVisible = ref(false);
|
|
|
const dialogType = ref("");
|
|
|
const desc = ref<any[]>([]);
|
|
|
@@ -223,8 +232,8 @@ onLoad((options: any) => {
|
|
|
});
|
|
|
title.value = _title;
|
|
|
if (getApp<any>().globalData.lastData.station) {
|
|
|
- const { address, latitude, longitude ,activityList} =
|
|
|
- getApp<any>().globalData.lastData.station;
|
|
|
+ const {address, latitude, longitude, activityList} =
|
|
|
+ getApp<any>().globalData.lastData.station;
|
|
|
location.value = {
|
|
|
address,
|
|
|
latitude,
|
|
|
@@ -238,59 +247,59 @@ onLoad((options: any) => {
|
|
|
mask: true,
|
|
|
});
|
|
|
fetchStation(Number(options.id))
|
|
|
- .then((res) => {
|
|
|
- console.log(res);
|
|
|
- let ConnectorID = "";
|
|
|
- if (res.equipmentInfos && res.equipmentInfos.length) {
|
|
|
- res.equipmentInfos.forEach((item: any) => {
|
|
|
- if (item.connectorInfos && item.connectorInfos.length) {
|
|
|
- item.connectorInfos.forEach((con: any) => {
|
|
|
- totalCount.value++;
|
|
|
- if (!ConnectorID) {
|
|
|
- ConnectorID = con.connectorId;
|
|
|
- }
|
|
|
- if (
|
|
|
- con.connectorStatusInfo &&
|
|
|
- con.connectorStatusInfo.status === 1
|
|
|
- ) {
|
|
|
- canUseCount.value++;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ let ConnectorID = "";
|
|
|
+ if (res.equipmentInfos && res.equipmentInfos.length) {
|
|
|
+ res.equipmentInfos.forEach((item: any) => {
|
|
|
+ if (item.connectorInfos && item.connectorInfos.length) {
|
|
|
+ item.connectorInfos.forEach((con: any) => {
|
|
|
+ totalCount.value++;
|
|
|
+ if (!ConnectorID) {
|
|
|
+ ConnectorID = con.connectorId;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ con.connectorStatusInfo &&
|
|
|
+ con.connectorStatusInfo.status === 1
|
|
|
+ ) {
|
|
|
+ canUseCount.value++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ res.bannerImages = res.pictures.split(";");
|
|
|
+ station.value = res;
|
|
|
+ stationEquipmentInfos.value = res.equipmentInfos.map((item: any) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ };
|
|
|
});
|
|
|
- }
|
|
|
- res.bannerImages = res.pictures.split(";");
|
|
|
- station.value = res;
|
|
|
- stationEquipmentInfos.value = res.equipmentInfos.map((item: any) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- };
|
|
|
- });
|
|
|
- if (ConnectorID) {
|
|
|
- return fetchStationPriceDesc(ConnectorID);
|
|
|
- } else {
|
|
|
- // eslint-disable-next-line promise/no-return-wrap
|
|
|
- return Promise.resolve({
|
|
|
- policyInfos: [],
|
|
|
+ if (ConnectorID) {
|
|
|
+ return fetchStationPriceDesc(ConnectorID);
|
|
|
+ } else {
|
|
|
+ // eslint-disable-next-line promise/no-return-wrap
|
|
|
+ return Promise.resolve({
|
|
|
+ policyInfos: [],
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ currentTime.value = res.currentTime;
|
|
|
+ canUseTime.value = res.useTime;
|
|
|
+ canUsePrice.value = `${res.minPrice}~${res.maxPrice}`;
|
|
|
+ desc.value = res.policyInfos || [];
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ // eslint-disable-next-line no-console
|
|
|
+ console.log(err);
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: "加载失败,请重试",
|
|
|
+ icon: "none",
|
|
|
});
|
|
|
- }
|
|
|
- })
|
|
|
- .then((res) => {
|
|
|
- uni.hideLoading();
|
|
|
- currentTime.value = res.currentTime;
|
|
|
- canUseTime.value = res.useTime;
|
|
|
- canUsePrice.value = `${res.minPrice}~${res.maxPrice}`;
|
|
|
- desc.value = res.policyInfos || [];
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- // eslint-disable-next-line no-console
|
|
|
- console.log(err);
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: "加载失败,请重试",
|
|
|
- icon: "none",
|
|
|
});
|
|
|
- });
|
|
|
});
|
|
|
const openAddress = function () {
|
|
|
uni.openLocation({
|
|
|
@@ -320,11 +329,11 @@ const changeStatus = function (index: number) {
|
|
|
status.value = index;
|
|
|
if (index === 0) {
|
|
|
stationEquipmentInfos.value = station.value.equipmentInfos.map(
|
|
|
- (item: any) => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- };
|
|
|
- }
|
|
|
+ (item: any) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ };
|
|
|
+ }
|
|
|
);
|
|
|
closeDialog();
|
|
|
return;
|
|
|
@@ -336,8 +345,8 @@ const changeStatus = function (index: number) {
|
|
|
if (item.connectorInfos && item.connectorInfos.length) {
|
|
|
item.connectorInfos.forEach((con: any) => {
|
|
|
if (
|
|
|
- con.connectorStatusInfo &&
|
|
|
- Number(con.connectorStatusInfo.status) === STATUS_MAP[status.value]
|
|
|
+ con.connectorStatusInfo &&
|
|
|
+ Number(con.connectorStatusInfo.status) === STATUS_MAP[status.value]
|
|
|
) {
|
|
|
check = true;
|
|
|
}
|
|
|
@@ -357,7 +366,7 @@ const previewImage = (url: string) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const showStationCoupon = ()=>{
|
|
|
+const showStationCoupon = () => {
|
|
|
console.log(station.value)
|
|
|
station_coupon_ref.value?.open(station.value.StationID);
|
|
|
}
|
|
|
@@ -365,6 +374,7 @@ const showStationCoupon = ()=>{
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import "../../styles/dialog.scss";
|
|
|
+
|
|
|
page {
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
@@ -372,6 +382,7 @@ page {
|
|
|
.banner {
|
|
|
height: 440rpx;
|
|
|
background-color: transparent;
|
|
|
+
|
|
|
.banner-image {
|
|
|
background-position: center;
|
|
|
background-size: cover;
|
|
|
@@ -395,6 +406,7 @@ page {
|
|
|
height: 48rpx;
|
|
|
border-radius: 40rpx;
|
|
|
background: rgba(52, 125, 255, 0.1);
|
|
|
+
|
|
|
image {
|
|
|
width: 36rpx;
|
|
|
}
|
|
|
@@ -411,9 +423,11 @@ page {
|
|
|
padding: 0rpx 30rpx;
|
|
|
border-radius: 20rpx;
|
|
|
background-color: #fff;
|
|
|
+
|
|
|
& > view {
|
|
|
height: 90rpx;
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
&:first-child {
|
|
|
border-top: none;
|
|
|
}
|
|
|
@@ -430,6 +444,7 @@ page {
|
|
|
padding: 24rpx 0px;
|
|
|
position: relative;
|
|
|
background-color: #fff;
|
|
|
+
|
|
|
.close {
|
|
|
position: absolute;
|
|
|
right: 30rpx;
|
|
|
@@ -449,6 +464,7 @@ page {
|
|
|
& > view {
|
|
|
height: 92rpx;
|
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
&:first-child {
|
|
|
border-top: none;
|
|
|
}
|
|
|
@@ -467,6 +483,7 @@ page {
|
|
|
font-size: 14rpx;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 0rpx 6rpx;
|
|
|
+
|
|
|
text {
|
|
|
font-size: 24rpx;
|
|
|
}
|