fix:样式问题

src/api/charge.ts

@@ -441,6 +441,8 @@ function _fetchStationStatus(list: any[]) {
                   (costatus: any) => costatus.connectorId === coInfo.connectorId
                 );
               if (connectorStatusInfo) {
+                // debug
+                // connectorStatusInfo.status = 255
                 coInfo.connectorStatusInfo = connectorStatusInfo;
               }
             }

src/api/user.ts

@@ -8,13 +8,13 @@ export function fetchProfile() {
     res.balance = (Number(res.balance) / 100).toFixed(2);
     res.discountAmount = (Number(res.discountAmount) / 100).toFixed(2);
     res.refundableAmount = (Number(res.refundableAmount) / 100).toFixed(2);
-    if (isDebug) {
-      res.userRechargeRightsList = [
-        {
-          discount: 90,
-        },
-      ];
-    }
+    // if (isDebug) {
+    //   res.userRechargeRightsList = [
+    //     {
+    //       discount: 90,
+    //     },
+    //   ];
+    // }
     getApp<any>().globalData.user = res;
     return res;
   });

src/components/charge-station/charge-station.vue

@@ -11,7 +11,7 @@
   >
     <view class="flex-between">
       <view>
-        <view class="fs-32 fw-blod">{{ title }}</view>
+        <view class="fs-32 fw-bold">{{ title }}</view>
         <view v-if="tag">
           <view class="flex-center tag">{{ tagMap[tag] }}</view>
         </view>

src/components/style-dialog/style-dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="style-dialog">
-    <view>
+    <view :style="{ background }">
       <view class="style-dialog_head flex-center">
         <view class="fw-500 color-000 fs-32">{{ title }}</view>
         <view class="close" @click="close">
@@ -18,6 +18,10 @@
 export default {
   props: {
     title: String,
+    background: {
+      type: String,
+      default: "#fff",
+    },
   },
   methods: {
     close() {
@@ -44,10 +48,7 @@ export default {
     width: 100%;
     overflow: hidden;
     border-radius: 20rpx 20rpx 0px 0px;
-    background-color: #fff;
     box-sizing: content-box;
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
   }
   &_head {
     height: 92rpx;

src/custom-tab-bar/index.wxss

@@ -115,8 +115,8 @@ button::after {
 }
 
 .tab-bar-charge_menu--icon {
-  width: 104rpx;
-  height: 104rpx;
+  width: 128rpx;
+  height: 128rpx;
 }
 
 .tab-bar-charge_menu--text {

src/pages-charge/appointment/appointment.vue

@@ -246,6 +246,7 @@
           >
             {{ hour.format }}
           </view>
+          <view class="hour-placeholder"></view>
         </scroll-view>
       </view>
     </style-dialog>
@@ -810,4 +811,10 @@ onShow(() => {
   height: 148rpx;
   border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
 }
+
+.hour-placeholder {
+  box-sizing: content-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
 </style>

src/pages-charge/discount/discount.vue

@@ -29,7 +29,7 @@
           </view>
           <view class="flex-align-center" v-if="mode === 0">
             <view class="fs-26 color-999 mt-24"
-              >充{{ item.rightsBalanceFormat }}元送｜</view
+              >权益余额{{ item.rightsBalanceFormat }}元｜</view
             >
             <view class="fs-26 color-999 mt-24"
               >{{ item.endTimeFormat }}到期</view
@@ -53,7 +53,7 @@
           <style-checkbox
             :size="48"
             :checked="checkIndex === index"
-            :iconsize="16"
+            :iconsize="17"
           ></style-checkbox>
         </view>
         <view

src/pages-charge/machines/charge-machine/charge-machine.vue

@@ -5,27 +5,16 @@
     :key="index"
     @click="toOrdering(index)"
   >
-    <view :class="['charge-point_icon']">
+    <view
+      :class="[
+        'charge-point_icon',
+        'flex-center',
+        `charge-point_icon-${item.connectorStatusInfo.status}`,
+      ]"
+    >
       <image
-        style="width: 100%"
-        v-if="item.connectorStatusInfo.status === 1"
-        src="/pages-charge/static/icon-status-1.png"
-        mode="widthFix"
-      ></image>
-      <image
-        style="width: 100%"
-        v-else-if="
-          item.connectorStatusInfo.status === 0 ||
-          item.connectorStatusInfo.status === 255 ||
-          item.connectorStatusInfo.status === 2
-        "
-        src="/pages-charge/static/icon-status-3.png"
-        mode="widthFix"
-      ></image>
-      <image
-        style="width: 100%"
-        v-else
-        src="/pages-charge/static/icon-status-2.png"
+        class="width-28"
+        src="/pages-charge/static/charge-status-icon.png"
         mode="widthFix"
       ></image>
     </view>
@@ -131,17 +120,19 @@ export default {
     height: 56rpx;
     width: 56rpx;
     border-radius: 50%;
-    &-0,
-    &-2,
     &-255 {
-      background-color: #b1b1b1;
+      background: #f43636;
+    }
+    &-0 {
+      background-color: rgba(177, 177, 177, 0.1);
     }
     &-1 {
-      background-color: #00dab3;
+      background: rgba(33, 220, 130, 0.1);
     }
+    &-2,
     &-3,
     &-4 {
-      background-color: var(--color-warning);
+      background: rgba(255, 153, 0, 1);
     }
   }
   .tag {
@@ -162,14 +153,8 @@ export default {
     color: #21dc82;
     background: rgba(33, 220, 130, 0.1);
   }
-  .tag-2 {
-    color: rgba(255, 153, 0, 1);
-    background: rgba(255, 153, 0, 0.1);
-  }
-  .tag-3 {
-    color: var(--color-primary);
-    background: rgba(52, 125, 255, 0.10);
-  }
+  .tag-2,
+  .tag-3,
   .tag-4 {
     color: rgba(255, 153, 0, 1);
     background: rgba(255, 153, 0, 0.1);

src/pages-charge/machines/price-desc/price-desc.vue

@@ -37,7 +37,9 @@
             }"
           >
             <view class="td flex-center">
-              <text style="width: 158rpx;text-align:center">{{ item.startTimeFormat }}</text>
+              <text style="width: 158rpx; text-align: center">{{
+                item.startTimeFormat
+              }}</text>
               <text
                 class="ml-16 width-38 height-38 br-round fs-24 flex-center"
                 v-if="item.iconIndex >= 0"
@@ -151,6 +153,10 @@ export default defineComponent({
       }
     }
 
+    .tr:nth-child(2n) {
+      background-color: #fbfcff;
+    }
+
     .th {
       border-bottom: 1rpx solid #e5e5e5;
       background-color: #f1f6ff;

src/pages-charge/order/order.vue

@@ -29,7 +29,9 @@ onLoad((options: any) => {
       const discountAmountText = res.rightsDesc;
       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, "/"));
+      const end = new Date(
+        res.endTime ? res.endTime.replace(/-/g, "/") : undefined
+      );
       const diff = parseInt(`${(end.getTime() - start.getTime()) / 1000}`);
       const min = parseInt(`${diff / 60}`);
       const time =

src/pages-charge/ordering/ordering.vue

@@ -212,7 +212,7 @@ const finish = () => {
     .then((res) => {
       if (res.isStarted) {
         // 当前充电中
-        const start = new Date(res.startTime.replace(/-/g, "/"));
+        const start = new Date(res.startTime ? res.startTime.replace(/-/g, "/") : undefined);
         const end = new Date();
         const diff = parseInt(`${(end.getTime() - start.getTime()) / 1000}`);
         const min = parseInt(`${diff / 60}`);
@@ -235,7 +235,7 @@ const finish = () => {
           },
           {
             label: "开始时间",
-            value: res.startTime,
+            value: res.startTime || format("y-M-d h:m:s"),
           },
           {
             label: "结束时间",
@@ -299,7 +299,7 @@ const finish = () => {
     });
 };
 const setChargeData = (res: any) => {
-  const start = new Date(res.startTime.replace(/-/g, "/"));
+  const start = new Date(res.startTime ? res.startTime.replace(/-/g, "/") : undefined);
   const end = new Date();
   const diff = parseInt(`${(end.getTime() - start.getTime()) / 1000}`);
   const min = parseInt(`${diff / 60}`);
@@ -321,7 +321,7 @@ const setChargeData = (res: any) => {
     },
     {
       label: "开始时间",
-      value: res.startTime,
+      value: res.startTime || format("y-M-d h:m:s"),
     },
     {
       label: "累计用时",

src/pages-charge/orders/orders.vue

@@ -3,48 +3,49 @@
     class="pl-30 pr-30"
     v-if="infiniteScroller.list && infiniteScroller.list.length"
   >
-    <view
-      class="item flex-align-center"
-      v-for="(item, index) in infiniteScroller.list"
-      :key="index"
-      @click="detail(index)"
-    >
-      <view class="mr-28" v-if="isInvoice">
-        <style-checkbox :checked="item.checked"></style-checkbox>
-      </view>
-      <view>
-        <view class="flex-align-center">
-          <view
-            class="fs-30 fw-500"
-            :style="{ opacity: item.invoiceStatus === 1 ? 0.5 : 1 }"
-            >充电费用</view
-          >
-          <view
-            v-if="
-              isInvoice &&
-              (item.invoiceStatus === 1 ||
-                item.invoiceStatus === 2 ||
-                item.invoiceStatus === 3)
-            "
-            class="flex-center ml-24 fs-24 color-000-6 width-96 height-46 br-8"
-            style="background: #e5e5e5"
-            >{{ isInvoiceTitles[item.invoiceStatus] }}</view
-          >
+    <block v-for="(item, index) in infiniteScroller.list" :key="index">
+      <view
+        class="item flex-align-center"
+        @click="detail(index)"
+        v-if="!item.hidden"
+      >
+        <view class="mr-28" v-if="isInvoice">
+          <style-checkbox :checked="item.checked"></style-checkbox>
         </view>
-        <view class="fs-24 mt-10" style="color: rgba(0, 0, 0, 0.4)">{{
-          item.endTime
-        }}</view>
-      </view>
-      <view class="ml-auto" style="text-align: right">
-        <view class="fs-36 fw-500">
-          <text>{{ item.totalMoney }}</text>
-          <text class="fs-24 ml-6">元</text>
+        <view>
+          <view class="flex-align-center">
+            <view
+              class="fs-30 fw-500"
+              :style="{ opacity: item.invoiceStatus === 1 ? 0.5 : 1 }"
+              >充电费用</view
+            >
+            <view
+              v-if="
+                isInvoice &&
+                (item.invoiceStatus === 1 ||
+                  item.invoiceStatus === 2 ||
+                  item.invoiceStatus === 3)
+              "
+              class="flex-center ml-24 fs-24 color-000-6 width-96 height-46 br-8"
+              style="background: #e5e5e5"
+              >{{ isInvoiceTitles[item.invoiceStatus] }}</view
+            >
+          </view>
+          <view class="fs-24 mt-10" style="color: rgba(0, 0, 0, 0.4)">{{
+            item.endTime
+          }}</view>
+        </view>
+        <view class="ml-auto" style="text-align: right">
+          <view class="fs-36 fw-500">
+            <text>{{ item.payAmount }}</text>
+            <text class="fs-24 ml-6">元</text>
+          </view>
+        </view>
+        <view class="ml-20">
+          <uni-icons type="right" size="12" color="rgba(0,0,0,0.4)"></uni-icons>
         </view>
       </view>
-      <view class="ml-20">
-        <uni-icons type="right" size="12" color="rgba(0,0,0,0.4)"></uni-icons>
-      </view>
-    </view>
+    </block>
   </view>
 
   <view
@@ -121,12 +122,13 @@ const checkedPrice = ref(0);
 const checkedCount = ref(0);
 
 // 0-未开票 1-已开票 2-已作废 3-开票中
-const infiniteScroller = useInfiniteScroll(10, (page) => {
-  return fetchOrders(page, 10).then((res: any) => {
+const infiniteScroller = useInfiniteScroll(20, (page) => {
+  return fetchOrders(page, 20).then((res: any) => {
     if (res && res.list && res.list.length) {
       res.list.forEach((item: any) => {
-        item.totalMoney = (Number(item.totalMoney) / 100).toFixed(2);
+        item.payAmount = (Number(item.payAmount) / 100).toFixed(2);
         item.checked = false;
+        item.hidden = item.chargeStatus === 4 && !item.endTime;
       });
     }
     return res.list;
@@ -139,7 +141,7 @@ const setCheckData = () => {
   infiniteScroller.list.forEach((item: any) => {
     if (item.checked) {
       count++;
-      price += Number(item.totalMoney);
+      price += Number(item.payAmount);
     }
   });
   checkAll.value = infiniteScroller.list.every((item: any) => item.checked);

src/pages.json

@@ -26,7 +26,7 @@
           "style": {
             "navigationBarTitleText": "",
             "navigationStyle": "default",
-            "navigationBarBackgroundColor": "#F5F5F5"
+            "navigationBarBackgroundColor": "#ffffff"
           }
         },
         {

src/pages/map/map.vue

@@ -88,7 +88,7 @@
           :interval="3000"
         >
           <swiper-item
-            class="full-percent"
+            class="swiper-item full-percent"
             v-for="(item, index) in mapBanner"
             :key="index"
             @click="to(item.linkUrl)"
@@ -159,7 +159,7 @@
       :style="{
         height: mapMode
           ? `${styleData.cardHeight}px`
-          : `calc(100vh - ${styleData.dialogHeight}px)`,
+          : `calc(100vh - ${styleData.navHeight}px)`,
         bottom: '0px',
         borderRadius: mapMode ? '16rpx 16rpx 0px 0px' : '0px',
         overflowY: mapMode ? 'visible' : 'auto',
@@ -297,6 +297,7 @@ const styleData = ref({
   dialogHeight: 0,
   dialogPlaceHolderHeight: 0,
   cardHeight: 0,
+  navHeight: 0
 });
 
 const filterDialog = ref({
@@ -512,6 +513,7 @@ const refresh = () => {
 };
 
 const handleNavReady = (e: any) => {
+  console.log(e)
   styleData.value.dialog = `padding-top:${e.detail.statusBarHeight - 6}px;`;
   const searchHeight = rpxToPx(88);
   const filterHeight = 0; // rpxToPx(72);
@@ -519,7 +521,8 @@ const handleNavReady = (e: any) => {
     e.detail.statusBarHeight - 6 + searchHeight + filterHeight;
   styleData.value.dialogPlaceHolderHeight =
     styleData.value.dialogHeight - e.detail.navigationBarHeight;
-  styleData.value.cardHeight = rpxToPx(402);
+  styleData.value.cardHeight = rpxToPx(402) + e.detail.statusBarHeight;
+  styleData.value.navHeight = e.detail.navigationBarHeight;
 };
 
 const toSearch = () => {
@@ -592,6 +595,7 @@ onLoad((query: any) => {
 
 onShow(() => {
   if (token.value) {
+    fetchBanner();
     charging.value = undefined;
     setTimeout(() => {
       fetchCharging();
@@ -609,7 +613,7 @@ const fetchCharging = () => {
 
 const fetchBanner = () => {
   fetchHomeBanner().then((res) => {
-    mapBanner.value = res;
+    mapBanner.value = res.filter((item: any) => item.status === 1);
   });
 };
 
@@ -821,16 +825,18 @@ page {
     margin-top: 20rpx;
     padding: 0rpx 32rpx;
     .swiper {
-      height: 176rpx;
+      height: 160rpx;
       width: 100%;
       border-radius: 16rpx;
       overflow: hidden;
+      .swiper-item {
+        border-radius: 16rpx;
+        overflow: hidden;
+      }
       view {
         background-position: center;
         background-repeat: no-repeat;
-        background-size: 100% auto;
-        border-radius: 16rpx;
-        overflow: hidden;
+        background-size: 100% 100%;
       }
     }
   }
@@ -903,8 +909,6 @@ page {
   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);
 
   &_location {
     position: absolute;

src/utils/constant.ts

@@ -15,4 +15,4 @@ isDevelopment = env === "develop" || env === "trial";
 export const domain = isDevelopment ? "dev.kuaiyuman.cn" : "www.kuaiyuman.cn";
 export const host = `https://${domain}/api`;
 
-export const isDebug = false
+export const isDebug = isDevelopment