feat:地图功能

src/components/shadow-card/shadow-card.vue

@@ -1,8 +1,21 @@
 <template>
   <view class="shadow-card">
-    <view v-for="(item, index) in list" :key="index">
+    <slot></slot>
+    <view
+      v-for="(item, index) in list"
+      :key="index"
+      :style="{
+        marginTop: index === 0 ? '0rpx' : '40rpx',
+      }"
+    >
       <view class="label">{{ item.label }}</view>
-      <view class="value">{{ item.value }}</view>
+      <view
+        class="value"
+        :style="{
+          color: item.color ? item.color : '#000',
+        }"
+        >{{ item.value }}</view
+      >
     </view>
   </view>
 </template>
@@ -27,13 +40,8 @@ export default {
   padding: 40rpx;
 
   & > view {
-    margin-top: 40rpx;
     display: flex;
 
-    &:first-child {
-      margin-top: 0rpx;
-    }
-
     .label {
       width: 156rpx;
       flex-shrink: 0;
@@ -43,7 +51,6 @@ export default {
 
     .value {
       flex-grow: 1;
-      color: #000;
       font-size: 26rpx;
     }
   }

src/pages-charge/order/order.vue

@@ -1,6 +1,16 @@
 <template>
   <view class="body" v-if="list">
-    <shadow-card :list="list"></shadow-card>
+    <shadow-card :list="list">
+      <view class="flex-column flex-center pb-48">
+        <view class="fw-500 color-000">
+          <text class="fs-40 mr-8">¥</text>
+          <text class="fs-60 lh-60">{{ price }}</text>
+        </view>
+        <view class="fs-26 mt-8" style="color: rgba(0, 0, 0, 0.4)"
+          >实付金额</view
+        >
+      </view>
+    </shadow-card>
   </view>
 </template>
 
@@ -9,13 +19,14 @@ import { fetchOrder } from "../../api/user";
 import { onLoad } from "@dcloudio/uni-app";
 import { ref } from "vue";
 
-// TODO 优惠金额
-
 const list = ref<any[]>();
+const price = ref();
 onLoad((options: any) => {
   fetchOrder(options.id)
     .then((res) => {
-      const total_money = (res.totalMoney / 100).toFixed(2);
+      const totalMoney = (res.totalMoney / 100).toFixed(2);
+      const discountAmount = (res.discountAmount / 100).toFixed(2);
+      const discountAmountText = "TODO";
       const reg = new RegExp("\B(?=(\d{3})+(?!\d))", "g");
       const start = new Date(res.startTime.replace(/-/g, "/"));
       const end = new Date(res.endTime.replace(/-/g, "/"));
@@ -33,8 +44,15 @@ onLoad((options: any) => {
           value: `${res.totalPower}度`,
         },
         {
-          label: "累计费用",
-          value: `${total_money.replace(reg, ",")}元`,
+          label: "订单金额",
+          value: `${totalMoney.replace(reg, ",")}元`,
+        },
+        {
+          label: "优惠金额",
+          value: `${
+            Number(discountAmount) <= 0 ? "" : "-"
+          }${discountAmount}元${discountAmountText}`,
+          color: "#F43636",
         },
         {
           label: "开始时间",
@@ -45,10 +63,11 @@ onLoad((options: any) => {
           value: res.endTime,
         },
         {
-          label: "累计用时",
+          label: "充电用时",
           value: time,
         },
       ];
+      price.value = (res.payAmount / 100).toFixed(2);
     })
     .catch(() => {
       uni.showModal({

src/pages/map/map.vue

@@ -17,10 +17,7 @@
           @click="toSearch"
         ></image>
       </view>
-      <view
-        class="height-72 flex"
-        style="background-color: #f9f9f9"
-      >
+      <view class="height-72 flex" style="background-color: #f9f9f9">
         <view class="width-half flex-center" @click.stop="checkFilterDistance">
           <view class="fs-26 color-000-6 mr-8">距离</view>
           <view
@@ -94,7 +91,7 @@
         </view>
       </view>
       <!-- <view class="dialog_event" v-if="ready && !filterDialog.distanceSelector">
-        // TODO 接入接口
+        // TODO 接入活动接口
         <swiper
           class="swiper"
           circular
@@ -112,16 +109,18 @@
       </view> -->
     </view>
     <view
-      v-if="styleData.dialogHeight"
-      :style="{ height: `${styleData.dialogHeight}px` }"
+      v-if="styleData.dialogPlaceHolderHeight"
+      :style="{ height: `${styleData.dialogPlaceHolderHeight}px` }"
     ></view>
     <map
       id="map"
       :style="{
         width: '100%',
-        height: `calc(100vh - ${styleData.dialogHeight}px - ${styleData.cardHeight}px)`,
+        height: `calc(100vh - ${styleData.dialogHeight}px - ${
+          styleData.cardHeight - 24
+        }px)`,
         zIndex: 1,
-        pointerEvents: loading ? 'none' : 'auto',
+        pointerEvents: loading || !mapMode ? 'none' : 'auto',
       }"
       :latitude="mapProps.latitude"
       :longitude="mapProps.longitude"
@@ -134,8 +133,20 @@
       @markertap="tapMarker"
       :show-scale="true"
     ></map>
-    <view class="card" :style="{ height: `${styleData.cardHeight}px` }">
+    <view
+      class="card"
+      :style="{
+        height: mapMode
+          ? `${styleData.cardHeight}px`
+          : `calc(100vh - ${styleData.dialogHeight}px)`,
+        bottom: '0px',
+        borderRadius: mapMode ? '16rpx 16rpx 0px 0px' : '0px',
+      }"
+      @touchstart.stop="touchCardStart"
+      @touchmove.stop="touchCardMove"
+    >
       <view
+        v-if="mapMode"
         class="card_location height-64 width-64 bg-fff flex-center"
         @click="resetLocation"
       >
@@ -147,36 +158,40 @@
       </view>
       <block v-if="station.length">
         <!-- 列表 -->
-        <!-- <view class="station" v-for="(item, index) in station" :key="index">
-          <view v-if="index !== 0" class="card_line"></view>
-          <charge-station
-            :title="item.stationName"
-            :address="item.address"
-            :price="item.totalFee"
-            :fast="item.fastEquipmentInfos"
-            :slow="item.slowEquipmentInfos"
-            :sId="item.StationID"
-            :distance="item.stationLatDistance"
-            :latitude="item.location.stationLat"
-            :longitude="item.location.stationLng"
-            :fromMap="true"
-          ></charge-station>
-        </view> -->
-        <!-- 单个 -->
-        <view class="station">
-          <charge-station
-            :title="station[markersIndex].stationName"
-            :address="station[markersIndex].address"
-            :price="station[markersIndex].totalFee"
-            :fast="station[markersIndex].fastEquipmentInfos"
-            :slow="station[markersIndex].slowEquipmentInfos"
-            :sId="station[markersIndex].StationID"
-            :distance="station[markersIndex].stationLatDistance"
-            :latitude="station[markersIndex].location.stationLat"
-            :longitude="station[markersIndex].location.stationLng"
-            :fromMap="true"
-          ></charge-station>
-        </view>
+        <block v-if="!mapMode">
+          <view class="station" v-for="(item, index) in station" :key="index">
+            <view v-if="index !== 0" class="card_line"></view>
+            <charge-station
+              :title="item.stationName"
+              :address="item.address"
+              :price="item.totalFee"
+              :fast="item.fastEquipmentInfos"
+              :slow="item.slowEquipmentInfos"
+              :sId="item.StationID"
+              :distance="item.stationLatDistance"
+              :latitude="item.location.stationLat"
+              :longitude="item.location.stationLng"
+              :fromMap="true"
+            ></charge-station>
+          </view>
+        </block>
+        <block v-else>
+          <!-- 单个 -->
+          <view class="station">
+            <charge-station
+              :title="station[markersIndex].stationName"
+              :address="station[markersIndex].address"
+              :price="station[markersIndex].totalFee"
+              :fast="station[markersIndex].fastEquipmentInfos"
+              :slow="station[markersIndex].slowEquipmentInfos"
+              :sId="station[markersIndex].StationID"
+              :distance="station[markersIndex].stationLatDistance"
+              :latitude="station[markersIndex].location.stationLat"
+              :longitude="station[markersIndex].location.stationLng"
+              :fromMap="true"
+            ></charge-station>
+          </view>
+        </block>
       </block>
       <block v-else>
         <view class="card_empty flex-column flex-align-center pt-20">
@@ -231,7 +246,8 @@ import { fetchLocation } from "@/utils/location";
 import { onLoad } from "@dcloudio/uni-app";
 import { ref } from "vue";
 
-// TODO 手势拖动
+// TODO 支持省钱充电
+// TODO 充电中
 
 const isIOS = ref(false);
 const token = ref<string>();
@@ -240,6 +256,7 @@ const loading = ref(false);
 const styleData = ref({
   dialog: "",
   dialogHeight: 0,
+  dialogPlaceHolderHeight: 0,
   cardHeight: 0,
 });
 
@@ -312,6 +329,7 @@ const stationPage = ref({
 });
 const station = ref<any[]>([]);
 
+const mapMode = ref(true);
 const mapProps = ref({
   latitude: 23.098994,
   longitude: 113.32252,
@@ -449,20 +467,20 @@ const refresh = () => {
 
 const handleNavReady = (e: any) => {
   styleData.value.dialog = `padding-top:${e.detail.statusBarHeight - 6}px;`;
+  const searchHeight = rpxToPx(88);
+  const filterHeight = rpxToPx(72);
   styleData.value.dialogHeight =
-    e.detail.statusBarHeight -
-    6 +
-    rpxToPx(88) +
-    rpxToPx(72) -
-    e.detail.navigationBarHeight;
-  styleData.value.cardHeight = rpxToPx(402);
+    e.detail.statusBarHeight - 6 + searchHeight + filterHeight;
+  styleData.value.dialogPlaceHolderHeight =
+    styleData.value.dialogHeight - e.detail.navigationBarHeight;
+  styleData.value.cardHeight = rpxToPx(410);
 };
 
 const toSearch = () => {
   uni.navigateTo({
     url: "/pages-charge/search/search",
   });
-}
+};
 
 onLoad((query: any) => {
   // 只为了打包进tab-bar使用
@@ -524,6 +542,9 @@ const checkDiscounts = () => {
 };
 
 const checkFilterDistance = () => {
+  if (!mapMode.value) {
+    mapMode.value = true
+  }
   filterDialog.value.distanceSelector = !filterDialog.value.distanceSelector;
 };
 
@@ -624,6 +645,31 @@ const loginMask = (e: any) => {
   login(e);
 };
 
+let startpageY = 0;
+const touchCardStart = (e: any) => {
+  if (loading.value || station.value.length <= 0) {
+    return;
+  }
+  if (e.touches && e.touches.length) {
+    startpageY = e.touches[0].pageY;
+  }
+};
+
+const touchCardMove = (e: any) => {
+  if (!startpageY) {
+    return;
+  }
+  const threshold = 150;
+  if (e.touches && e.touches.length) {
+    if (mapMode.value && startpageY - e.touches[0].pageY > threshold) {
+      mapMode.value = false;
+    }
+    if (!mapMode.value && e.touches[0].pageY - startpageY > threshold) {
+      mapMode.value = true;
+    }
+  }
+};
+
 // TORM
 // const changeMarker = (e: any) => {
 //   _changeMarker(e.detail.current);
@@ -747,15 +793,14 @@ page {
 .card {
   position: fixed;
   width: 100%;
-  /* max-height: 622rpx; */ 
   left: 0px;
-  bottom: 0rpx;
   z-index: 999;
+  transition: all 0.3s;
   box-shadow: 0px 8rpx 20rpx rgba(0, 0, 0, 0.2);
   background-color: #fff;
   margin-bottom: constant(safe-area-inset-bottom);
   margin-bottom: env(safe-area-inset-bottom);
-  border-radius: 16rpx 16rpx 0px 0px;
+  overflow-y: auto;
 
   &_location {
     position: absolute;
@@ -780,5 +825,4 @@ page {
     }
   }
 }
-
 </style>

src/utils/constant.ts

@@ -12,9 +12,11 @@ console.log("env", env);
 isDevelopment = env === "develop" || env === "trial";
 // #endif
 
-// debug
-// isDevelopment = false
+export const isDebug = false;
 
-export const domain = isDevelopment ? "dev.kuaiyuman.cn" : "www.kuaiyuman.cn";
+export const domain = isDebug
+  ? "www.kuaiyuman.cn"
+  : isDevelopment
+  ? "dev.kuaiyuman.cn"
+  : "www.kuaiyuman.cn";
 export const host = `https://${domain}/api`;
-export const isDebug = false