Procházet zdrojové kódy

修复地图导航无反应的问题;修复站点充电桩无法滚动展示的问题

zuy před 1 rokem
rodič
revize
b9905d8e1d

+ 1 - 3
src/components/charge-station/charge-station.vue

@@ -15,8 +15,6 @@
           <image v-if="activityList&&activityList.length>0" class="ml-10" src="/static/images/coupon-center.png" mode="widthFix" style="width:32rpx"/>
           <view class="coupon-box ml-5" @click.stop="toCouponCenter"
                 v-if="activityList&&activityList.length>0"
-                @touchstart="touchstart"
-                @touchend.stop="touchend"
           >
             <text>活动中</text>
           </view>
@@ -32,10 +30,10 @@
         >
       </view>
       <view
+          @click.top="nav"
           class="nav flex-center flex-shrink"
           @touchstart="touchstart"
           @touchend.stop="touchend"
-          data-method="nav"
       >
         <image src="/static/images/icon-nav.png" mode="widthFix"/>
         <text>导航</text>

+ 137 - 120
src/pages-charge/machines/machines.vue

@@ -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;
   }