feat:充电页面

src/App.vue

@@ -42,6 +42,14 @@ image {
   color: #000;
 }
 
+.color-primary {
+  color: var(--color-primary);
+}
+
+.color-warning {
+  color: var(--color-warning);
+}
+
 .transition {
   transition: all 0.3s;
 }

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

@@ -140,7 +140,7 @@ export default {
   methods: {
     detail() {
       const { address, latitude, longitude } = this;
-      getApp().globalData.lastData.station = {
+      getApp<any>().globalData.lastData.station = {
         address,
         latitude,
         longitude,

src/components/style-button/style-button.vue

@@ -0,0 +1,100 @@
+<template>
+  <button
+    class="button ext-class"
+    hover-class="none"
+    :openType="openType"
+    :style="{
+      display: `var(--display-${size})`,
+      width: `var(--width-${size})`,
+      height: `${height ? height + 'rpx' : 'var(--height-' + size + ')'}`,
+      'background-color': `var(--bg-${type}${border ? '-border' : ''})`,
+      color: `var(--color-${type}${border ? '-border' : ''})`,
+      'border-color': `var(--border-${type}${border ? '-border' : ''})`,
+      'font-size': `var(--fs-${size})`,
+      'border-radius': `var(--height-${size})`,
+      'font-weight': 500,
+    }"
+    @click.stop="$emit('click')"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script lang="ts">
+export default {
+  emits: ["click"],
+  options: {
+    virtualHost: true,
+  },
+  externalClasses: ["ext-class"],
+  props: {
+    type: {
+      type: String,
+      default: "default",
+    },
+    size: {
+      type: String,
+      default: "medium", // 'medium' 'small'
+    },
+    border: Boolean,
+    openType: String,
+    height: String,
+  },
+};
+</script>
+
+<style lang="scss">
+button::after {
+  content: "";
+  border: none;
+}
+
+.button {
+  --bg-default: #ffffff;
+  --bg-primary: #347dff;
+  --bg-warning: #ff9900;
+  --bg-error: red;
+  --color-default: #666666;
+  --color-primary: #ffffff;
+  --color-warning: #ffffff;
+  --color-error: #ffffff;
+  --border-default: #999999;
+  --border-primary: #347dff;
+  --border-warning: #ff9900;
+  --border-error: red;
+
+  --bg-default-border: #ffffff;
+  --bg-primary-border: #ffffff;
+  --bg-warning-border: #ffffff;
+  --bg-error-border: #ffffff;
+  --color-default-border: #666666;
+  --color-primary-border: #347dff;
+  --color-warning-border: #ff9900;
+  --color-error-border: red;
+  --border-default-border: #666666;
+  --border-primary-border: #347dff;
+  --border-warning-border: #ff9900;
+  --border-error-border: red;
+
+  --display-medium: flex;
+  --display-small: inline-flex;
+  --height-medium: 96rpx;
+  --height-small: 82rpx;
+  --width-medium: 100%;
+  --width-small: 100%;
+  --fs-medium: 32rpx;
+  --fs-small: 30rpx;
+
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  line-height: normal;
+  padding: 0;
+  margin: 0;
+  margin-right: 0;
+  margin-left: 0;
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+}
+</style>

src/components/style-input/style-input.vue

@@ -0,0 +1,69 @@
+<template>
+  <view class="input">
+    <input
+      class="input-ele"
+      :value="value"
+      :focus="focus"
+      :type="type"
+      placeholder-class="placeholder"
+      :placeholder="'请输入' + title"
+      bindinput="input"
+      bindfocus="inputFocus"
+      bindblur="inputBlur"
+      @input="input"
+      @focus="inputFocus"
+      @blur="inputBlur"
+    />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  emits: ["input", "focus"],
+  options: {
+    virtualHost: true,
+  },
+  props: {
+    type: String,
+    title: String,
+    value: String,
+    focus: Boolean,
+  },
+  methods: {
+    input(e: any) {
+      this.$emit("input", e.detail);
+    },
+    inputBlur() {
+      this.$emit("focus", {
+        focus: false,
+      });
+    },
+    inputFocus(e: any) {
+      this.$emit("focus", {
+        focus: true,
+        height: e.detail.height,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.input {
+  height: 84rpx;
+  background: #f7f7f7;
+  border-radius: 10rpx;
+  font-size: 30rpx;
+  display: flex;
+  align-items: center;
+  padding: 0 40rpx;
+}
+
+.placeholder {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.input-ele {
+  font-size: 30rpx;
+}
+</style>

src/manifest.json

@@ -48,6 +48,7 @@
   },
   "quickapp": {},
   "mp-weixin": {
+    "optimization": { "subPackages": true },
     "appid": "wx369fcff95d387bde",
     "setting": {
       "urlCheck": false,

src/pages-charge/codeing/codeing.vue

@@ -0,0 +1,51 @@
+<template>
+  <view class="pt-10 pr-60 pl-60">
+    <view class="lh-0">
+      <image
+        src="../images/charge-input-head.png"
+        mode="widthFix"
+        style="width: 100%"
+      ></image>
+    </view>
+    <view class="mt-20">
+      <style-input
+        title="充电编码"
+        :value="value"
+        :focus="focus"
+        type="text"
+        @input="input"
+      />
+    </view>
+    <view style="margin-top: 100rpx">
+      <style-button type="primary" @click="submit">确认</style-button>
+      <view class="mt-20"></view>
+      <style-button type="primary" :border="true" @click="scanCode"
+        >扫码充电</style-button
+      >
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { scanCode } from "../../utils/code";
+
+const value = ref("");
+const focus = ref(true);
+
+const submit = () => {
+  if (!value.value) {
+    uni.showToast({
+      title: "请输入充电编码",
+      icon: "none",
+    });
+    return;
+  }
+  uni.navigateTo({
+    url: `/pages-charge/ordering/ordering?sn=${value.value}`,
+  });
+};
+const input = (e: any) => {
+  value.value = e.value;
+};
+</script>

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

@@ -0,0 +1,138 @@
+<template>
+  <view :class="['charge-point', `charge-point-${open ? 'open' : 'close'}`]">
+    <view class="flex-align-center flex-between">
+      <view>
+        <view class="fs-32 fw-600">{{ title }}</view>
+        <view class="fs-24 mt-6 color-666">{{ time }}</view>
+      </view>
+      <view class="ml-auto color-warning" catchtap="toggleStatus">
+        <text class="fs-22 mr-6">¥</text>
+        <text class="fs-32 fw-600">{{ price }}</text>
+      </view>
+      <view
+        class="ml-14"
+        :style="{
+          transform: `rotate(${open ? '270deg' : '90deg'})`,
+          'transform-origin': 'center',
+        }"
+        @click="toggleStatus"
+      >
+        <uni-icons type="right" size="12" color="rgba(0,0,0,0.4)"></uni-icons>
+      </view>
+    </view>
+    <view
+      class="mt-30 pr-20 pl-20 flex-align-center"
+      :style="{
+        height: '76rpx',
+        'background-color': 'var(--color-sec)',
+        'border-radius': '10rpx',
+      }"
+      v-for="(item, index) in list"
+      :key="index"
+      @click="toOrdering(index)"
+    >
+      <charge-icon
+        :type="item.ConnectorType === 1 ? 'fast' : 'slow'"
+      ></charge-icon>
+      <view class="ml-16 fs-26 color-000">{{ item.ConnectorName }}</view>
+      <view class="ml-10 fs-26 color-0004"
+        >{{ item.ConnectorType === 1 ? "直流" : "交流"
+        }}{{ item.Power }}kw</view
+      >
+      <view class="ml-auto fs-22 flex-center pl-12 pr-12 status-tag">{{
+        (statusMap as any)[item.ConnectorStatusInfo.Status]
+      }}</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    title: String,
+    price: String,
+    time: String,
+    list: Array<any>,
+  },
+  data() {
+    return {
+      open: true,
+      statusMap: {
+        255: "故障",
+        0: "离网",
+        1: "空闲",
+        2: "未充电",
+        3: "充电中",
+        4: "已预约",
+      },
+    };
+  },
+  methods: {
+    toggleStatus() {
+      this.open = !this.open;
+    },
+    toOrdering(index: number) {
+      const { list } = this;
+      if (
+        list &&
+        list[index].ConnectorStatusInfo &&
+        list[index].ConnectorStatusInfo.Status &&
+        list[index].ConnectorStatusInfo.Status === 1
+      ) {
+        uni.showActionSheet({
+          itemList: ["去充电"],
+          success: (res) => {
+            if (res.tapIndex === 0) {
+              uni.navigateTo({
+                url: `/pages-charge/ordering/ordering?sn=${list[index].ConnectorID}`,
+              });
+            }
+          },
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../../styles/font.scss";
+@import "../../../styles/flex.scss";
+@import "../../../styles/layout.scss";
+
+.charge-point {
+  background-color: #fff;
+  border-radius: 20rpx;
+  transition: all 0.3s;
+  overflow: hidden;
+  padding: 30rpx;
+}
+
+.charge-point-close {
+  height: 148rpx;
+}
+
+.charge-point-open {
+  height: auto;
+}
+
+.color-000 {
+  color: #000;
+}
+
+.color-0004 {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.color-666 {
+  color: #666;
+}
+
+.status-tag {
+  height: 42rpx;
+  border-radius: 40rpx;
+  color: var(--color-primary);
+  background-color: rgba(52, 125, 255, 0.1);
+  white-space: nowrap;
+}
+</style>

src/pages-charge/machines/machines.vue

@@ -0,0 +1,316 @@
+<template>
+  <view
+    :class="[
+      'pl-20',
+      'pr-20',
+      'pb-40',
+      `container-${descDialog ? 'hidden' : ''}`,
+    ]"
+  >
+    <view class="banner flex-column mt-20" v-if="canUseCount >= 0">
+      <view class="flex-align-center">
+        <view class="fs-40 fw-500 color-fff">{{ title }}</view>
+        <view class="tag flex-center pl-15 pr-15 ml-20 fs-24 color-fff"
+          >{{ canUseCount }}可用</view
+        >
+      </view>
+      <view class="flex mt-20">
+        <image
+          src="../images/machines-banner-address.png"
+          mode="widthFix"
+          style="width: 16px; display: block"
+        />
+        <view class="ml-12 fs-26 color-fff">{{ location.address }}</view>
+      </view>
+      <view
+        class="foot mt-30 flex-justify-end flex-align-center"
+        @click="openDesc"
+      >
+        <view class="fs-28 mr-4 color-fff">计费说明</view>
+        <view style="margin-top: -2px">
+          <uni-icons type="right" size="8" color="#fff"></uni-icons>
+        </view>
+        <view style="margin-left: -4px; margin-top: -2px">
+          <uni-icons type="right" size="8" color="#fff"></uni-icons>
+        </view>
+      </view>
+      <image
+        src="../images/machines-banner-nav.png"
+        mode="widthFix"
+        class="nav"
+        @click="openAddress"
+      />
+    </view>
+    <view
+      class="mt-20"
+      v-if="station"
+      v-for="(item, index) in station.EquipmentInfos"
+      :key="index"
+    >
+      <ChargeMachine
+        :title="item.EquipmentID"
+        :price="station.TotalFee"
+        :time="currentTime"
+        :list="item.ConnectorInfos"
+      ></ChargeMachine>
+    </view>
+    <view class="dialog flex-center" v-if="descDialog">
+      <view class="desc-dialog">
+        <view
+          @click.stop="closeDesc"
+          class="desc-dialog_head flex-center fs-32 fw-500 color-fff"
+          >计费说明<image
+            src="/static/images/icon-close.png"
+            mode="widthFix"
+          ></image>
+        </view>
+        <view class="desc-dialog_body">
+          <view class="table">
+            <view class="tr flex">
+              <view class="th flex-center fs-28">时间</view>
+              <view class="th flex-center flex-column">
+                <view>电费</view>
+                <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
+                  >（元/kwh）</view
+                >
+              </view>
+              <view class="th flex-center flex-column">
+                <view>服务费</view>
+                <view class="fs-24 lh-24" style="color: rgba(0, 0, 0, 0.5)"
+                  >（元/kwh）</view
+                >
+              </view>
+            </view>
+            <view
+              class="tr flex"
+              v-for="(item, index) in desc"
+              :key="index"
+              :style="{
+                'border-top': `1rpx solid ${
+                  index === 0 ? 'transparent' : '#E5E5E5'
+                }`,
+              }"
+            >
+              <view class="td flex-center">{{ item.StartTimeFormat }}</view>
+              <view class="td flex-center">{{ item.ElecPrice }}</view>
+              <view class="td flex-center">{{ item.SevicePrice }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { fetchStation, fetchStationPriceDesc } from "../../api/charge";
+import { onLoad } from "@dcloudio/uni-app";
+import ChargeMachine from "./charge-machine/charge-machine.vue";
+const descDialog = ref(false);
+const desc = ref<any[]>([]);
+const canUseCount = ref(0);
+const title = ref("");
+const location = ref({
+  address: "",
+  latitude: "",
+  longitude: "",
+});
+const station = ref();
+const currentTime = ref();
+onLoad((options: any) => {
+  const _title = options.title || "";
+  uni.setNavigationBarTitle({
+    title: _title,
+  });
+  title.value = _title;
+  if (getApp<any>().globalData.lastData.station) {
+    const { address, latitude, longitude } =
+      getApp<any>().globalData.lastData.station;
+    location.value = {
+      address,
+      latitude,
+      longitude,
+    };
+    getApp<any>().globalData.lastData.station = undefined;
+  }
+  uni.showLoading({
+    title: "加载中",
+    mask: true,
+  });
+  fetchStation(Number(options.id))
+    .then((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) => {
+              if (!ConnectorID) {
+                ConnectorID = con.ConnectorID;
+              }
+              if (
+                con.ConnectorStatusInfo &&
+                con.ConnectorStatusInfo.Status === 1
+              ) {
+                canUseCount.value++;
+              }
+            });
+          }
+        });
+      }
+      station.value = res;
+      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;
+      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({
+    latitude: Number(location.value.latitude),
+    longitude: Number(location.value.longitude),
+    scale: 18,
+    name: title.value,
+    address: location.value.address,
+  });
+};
+const openDesc = function () {
+  descDialog.value = true;
+};
+const closeDesc = function () {
+  descDialog.value = false;
+};
+</script>
+
+<style lang="scss">
+@import "../../styles/dialog.scss";
+page {
+  background-color: #f5f5f5;
+}
+
+.container-hidden {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.banner {
+  border-radius: 20rpx;
+  overflow: hidden;
+  position: relative;
+  background: linear-gradient(180deg, #347dff 0%, #4faaff 100%);
+  min-height: 280rpx;
+  padding: 0 40rpx;
+  padding-top: 40rpx;
+
+  .tag {
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.2);
+    height: 20px;
+  }
+
+  .foot {
+    flex-shrink: 0;
+    border-top: 1px dashed rgba(255, 255, 255, 0.3);
+    height: 88rpx;
+  }
+
+  .nav {
+    position: absolute;
+    top: 42rpx;
+    right: 40rpx;
+    width: 120rpx;
+  }
+}
+
+.desc-dialog {
+  background-color: transparent;
+  width: 690rpx;
+  overflow: hidden;
+  border-radius: 10px;
+
+  &_head {
+    background: linear-gradient(180deg, #347dff 0%, #4faaff 100%);
+    height: 104rpx;
+    position: relative;
+
+    image {
+      position: absolute;
+      width: 12px;
+      right: 40rpx;
+      top: 40rpx;
+    }
+  }
+
+  &_body {
+    max-height: 860rpx;
+    box-sizing: border-box;
+    padding: 30rpx;
+    background-color: #fff;
+    overflow-y: auto;
+
+    .table {
+      border: 1rpx solid #e5e5e5;
+      border-radius: 10rpx;
+      overflow: hidden;
+    }
+
+    .tr {
+      width: 100%;
+
+      & > view:nth-child(1) {
+        width: 254rpx;
+        flex-shrink: 0;
+        border-right: 1rpx solid #e5e5e5;
+      }
+
+      & > view:nth-child(2) {
+        width: 200rpx;
+        flex-shrink: 0;
+        border-right: 1rpx solid #e5e5e5;
+      }
+
+      & > view:nth-child(3) {
+        flex-grow: 1;
+      }
+    }
+
+    .th {
+      border-bottom: 1rpx solid #e5e5e5;
+      background-color: #f1f6ff;
+      height: 92rpx;
+      color: rgba(0, 0, 0, 0.7);
+      font-size: 28rpx;
+
+      view {
+        color: rgba(0, 0, 0, 0.7);
+        font-size: 28rpx;
+      }
+    }
+
+    .td {
+      color: #000;
+      font-size: 26rpx;
+      height: 76rpx;
+    }
+  }
+}
+</style>

src/pages-charge/order/order.vue

@@ -0,0 +1,9 @@
+<template>
+  <view></view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+</style>

src/pages-charge/ordering/ordering.vue

@@ -0,0 +1,9 @@
+<template>
+  <view></view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+</style>

src/pages-charge/orders/orders.vue

@@ -0,0 +1,9 @@
+<template>
+  <view></view>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+</style>

src/pages-charge/search/search.vue

@@ -0,0 +1,174 @@
+<template>
+  <view style="opacity: 0; pointer-events: none">
+    <navigation-bar></navigation-bar>
+  </view>
+
+  <image
+    src="/static/images/back.png"
+    mode="widthFix"
+    class="back"
+    @click="back"
+    :style="backStyle"
+  ></image>
+
+  <view
+    class="search flex-align-center"
+    v-if="searchStyle"
+    :style="searchStyle"
+  >
+    <view class="search_icon flex-center flex-shrink">
+      <icon type="search" size="18" color="rgba(0,0,0,0.3)"></icon>
+    </view>
+    <input
+      class="search_input flex-grow"
+      :value="keyword"
+      type="text"
+      :focus="true"
+      placeholder="搜索附近充电站"
+      placeholder-class="input-placeholder"
+      @input="input"
+      @confirm="search"
+      confirm-type="search"
+    />
+    <view
+      class="search_close flex-align-center flex-shrink"
+      @click.stop="clear"
+      v-if="keyword"
+    >
+      <image class="icon" src="/static/images/search-close.png"></image>
+    </view>
+  </view>
+
+  <block v-if="list">
+    <view class="pl-20 pr-20" v-if="list.length">
+      <view class="mt-20" v-for="(item, index) in list" :key="index">
+        <charge-station
+          :title="item.StationName"
+          :tag="item.Construction"
+          :price="item.TotalFee"
+          :fast="item.fastEquipmentInfos"
+          :slow="item.slowEquipmentInfos"
+          :sId="item.StationID"
+          :address="item.Address"
+          :latitude="item.StationLat"
+          :longitude="item.StationLng"
+          :border="true"
+        ></charge-station>
+      </view>
+    </view>
+    <view class="empty flex-center flex-column" v-else>
+      <image
+        class="image"
+        src="/static/images/search-empty.png"
+        mode="widthFix"
+      ></image>
+      <view class="tip">无搜索结果...</view>
+    </view>
+  </block>
+</template>
+
+<script setup lang="ts">
+import { searchStation } from "@/api/charge";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+const searchStyle = ref<any>();
+const backStyle = ref<any>();
+const keyword = ref("");
+const list = ref<any[]>();
+
+onLoad(() => {
+  const menu = uni.getMenuButtonBoundingClientRect();
+  searchStyle.value = {
+    top: `${menu.top}px`,
+    height: `${menu.height}px`,
+  };
+  backStyle.value = {
+    top: `${menu.top + 8}px`,
+  };
+});
+
+const back = function () {
+  uni.navigateBack();
+};
+const clear = function () {
+  keyword.value = "";
+};
+const input = function (e: any) {
+  if (e.detail && e.detail.value) {
+    keyword.value = e.detail.value;
+  }
+};
+const search = function () {
+  if (!keyword.value) {
+    uni.showModal({
+      title: "温馨提示",
+      content: "请输入搜素内容",
+      showCancel: false,
+      confirmColor: "#347DFF",
+    });
+    return;
+  }
+  uni.showLoading({
+    title: "搜索中",
+  });
+  searchStation(keyword.value)
+    .then((res) => {
+      uni.hideLoading();
+      list.value = res;
+    })
+    .catch(() => {
+      uni.hideLoading();
+      list.value = [];
+    });
+};
+</script>
+
+<style lang="scss">
+.back {
+  position: absolute;
+  width: 18rpx;
+  left: 34rpx;
+}
+
+.search {
+  position: absolute;
+  left: 80rpx;
+  width: 450rpx;
+  border-radius: 32rpx;
+  background-color: var(--color-sec);
+
+  &_icon {
+    width: 72rpx;
+  }
+
+  &_input {
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0);
+    font-size: 28rpx;
+  }
+
+  .input-placeholder {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  &_close {
+    width: 50rpx;
+    .icon {
+      height: 30rpx;
+      width: 30rpx;
+    }
+  }
+}
+
+.empty {
+  margin-top: 240rpx;
+  .image {
+    width: 368rpx;
+  }
+  .tip {
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.4);
+    margin-top: 20rpx;
+  }
+}
+</style>

src/pages.json

@@ -13,11 +13,45 @@
       "path": "pages/user/index"
     }
   ],
+  "subPackages": [
+    {
+      "root": "pages-charge",
+      "pages": [
+        {
+          "path": "machines/machines",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "default",
+            "navigationBarBackgroundColor": "#F5F5F5"
+          }
+        },
+        {
+          "path": "codeing/codeing",
+          "style": {
+            "navigationBarTitleText": "编码充电",
+            "navigationStyle": "default"
+          }
+        },
+        {
+          "path": "order/order"
+        },
+        {
+          "path": "ordering/ordering"
+        },
+        {
+          "path": "orders/orders"
+        },
+        {
+          "path": "search/search"
+        }
+      ]
+    }
+  ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#ffffff",
     "navigationStyle": "custom",
     "usingComponents": {
       "navigation-bar": "./wxcomponents/navigation-bar/index"

src/pages/map/index.vue

@@ -1,10 +1,20 @@
 <template>
-  <view class="map"></view>
+  <view class="map pt-50">
+    <button @click="search">搜索</button>
+  </view>
 </template>
 
 <script module="mapwxs" lang="wxs" src="./index.wxs"></script>
 <script lang="ts">
-export default {};
+export default {
+  methods: {
+    search() {
+      uni.navigateTo({
+        url: "/pages-charge/search/search",
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss">

src/styles/dialog.scss

@@ -0,0 +1,11 @@
+.dialog {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+}

src/types/index.d.ts

@@ -1 +0,0 @@
-declare const getApp: any

types/index.d.ts

@@ -0,0 +1,3 @@
+declare const getApp: any
+
+declare const uni: any