feat:导航栏

package.json

@@ -53,6 +53,7 @@
     "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230703001",
     "@dcloudio/uni-mp-weixin": "3.0.0-3080720230703001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230703001",
+    "sass": "^1.65.1",
     "vue": "^3.2.45",
     "vue-i18n": "^9.1.9"
   },

src/App.vue

@@ -10,4 +10,8 @@ onHide(() => {
   console.log("App Hide");
 });
 </script>
-<style></style>
+<style lang="scss">
+@import "./styles/flex.scss";
+@import "./styles/font.scss";
+@import "./styles/layout.scss";
+</style>

src/custom-tab-bar/index.js

@@ -0,0 +1,109 @@
+// import {
+//   fetchToken,
+//   login,
+//   onLogin
+// } from '../api/auth'
+// import {
+//   fetchChargeStatus
+// } from '../api/charge'
+
+Component({
+  data: {
+    hidden: false,
+    dialog: false,
+    tabIndex: -1,
+    tabs: [{
+      path: "/pages/map/index",
+      text: "充电地图"
+    }, {
+      path: "",
+      text: "扫码充电"
+    }, {
+      path: "/pages/list/index",
+      text: "电站列表"
+    }, {
+      path: "/pages/user/index",
+      text: "个人中心"
+    }],
+    charging: ''
+  },
+  lifetimes: {
+    ready() {
+      // fetchToken().then(token => {
+      //   const pages = getCurrentPages()
+      //   const index = this.data.tabs.findIndex(item => item.path === `/${pages[pages.length - 1].route}`)
+      //   this.setData({
+      //     hidden: false,
+      //     tabIndex: index,
+      //     token,
+      //   })
+      //   if (!token) {
+      //     onLogin((token) => {
+      //       this.setData({
+      //         token,
+      //       })
+      //     })
+      //   }
+      // })
+    }
+  },
+  methods: {
+    switchTab(e) {
+      // fetchChargeStatus().then(res => {
+      //   this.setData({
+      //     charging: [1, 2].includes(res.StartChargeSeqStat) ? res.ConnectorID : ''
+      //   })
+      // }).catch(() => {
+      //   this.setData({
+      //     charging: ''
+      //   })
+      // })
+      const data = e.currentTarget.dataset
+      const url = data.path
+      if (!url) {
+        this.switchDialog()
+        return
+      }
+      this.setData({
+        dialog: false
+      })
+      wx.vibrateShort && wx.vibrateShort({
+        type: 'light'
+      })
+      wx.switchTab({
+        url
+      })
+    },
+    switchDialog() {
+      this.setData({
+        dialog: !this.data.dialog
+      })
+    },
+    hiddenTab() {
+      this.setData({
+        hidden: true
+      })
+    },
+    showTab() {
+      this.setData({
+        hidden: false
+      })
+    },
+    login(e) {
+      login(e)
+    },
+    scanCode() {
+      getApp().scanCode()
+    },
+    inputCode() {
+      wx.navigateTo({
+        url: '/pages-charge/codeing/codeing'
+      })
+    },
+    toCharging() {
+      wx.navigateTo({
+        url: `/pages-charge/ordering/ordering?sn=${this.data.charging}`
+      })
+    }
+  }
+})

src/custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/custom-tab-bar/index.wxml

@@ -0,0 +1,35 @@
+<view class="tab-bar {{hidden ? 'tab-bar-hidden' : ''}}">
+  <image class="tab-bar-bg" src="/static/images/custom-tab-bar/bg.png" mode="widthFix" />
+  <view class="tab-bar-main">
+    <view wx:for="{{tabs}}" wx:key="index" class="tab-bar-item" data-path="{{item.path}}" data-index="{{index}}" bindtap="switchTab">
+      <block wx:if="{{index === 1}}">
+        <image class="image image-big" src="/static/images/custom-tab-bar/2.png"></image>
+        <image class="image" style="opacity: 0;" src="/static/images/custom-tab-bar/2.png"></image>
+        <view class="text {{tabIndex === index ? 'selected-color' : ''}}">{{item.text}}</view>
+      </block>
+      <block wx:else>
+        <image wx:if="{{tabIndex === index}}" class="image" src="/static/images/custom-tab-bar/{{index+1}}-1.png"></image>
+        <image wx:else class="image" src="/static/images/custom-tab-bar/{{index+1}}.png" mode="widthFix" />
+        <view class="text {{tabIndex === index ? 'selected-color' : ''}}">{{item.text}}</view>
+      </block>
+    </view>
+  </view>
+  <button class="tab-bar-login" wx:if="{{!token}}" style="width: 100vw;height: var(--tab-bar-height);border: none;" open-type="getPhoneNumber" bindgetphonenumber="login"></button>
+</view>
+
+<view class="tab-bar-charge" style="height: {{dialog ? '100vh':'0px'}};" bindtap="switchDialog">
+  <view style="padding-left: {{charging ? '92' : '112'}}rpx;">
+    <view class="tab-bar-charge_menu" catchtouchend="scanCode" style="margin-right: {{charging ? '100' : '140'}}rpx;">
+      <image class="tab-bar-charge_menu--icon" src="/static/images/custom-tab-bar/2-2.png" mode="widthFix" />
+      <view class="tab-bar-charge_menu--text">扫二维码</view>
+    </view>
+    <view class="tab-bar-charge_menu" catchtouchend="inputCode" style="margin-right: {{charging ? '100' : '140'}}rpx;">
+      <image class="tab-bar-charge_menu--icon" src="/static/images/custom-tab-bar/2-3.png" mode="widthFix" />
+      <view class="tab-bar-charge_menu--text">输入编码</view>
+    </view>
+    <view class="tab-bar-charge_menu" catchtouchend="toCharging" wx:if="{{charging}}">
+      <image class="tab-bar-charge_menu--icon" src="/static/images/custom-tab-bar/2-4.png" mode="widthFix" />
+      <view class="tab-bar-charge_menu--text">充电中</view>
+    </view>
+  </view>
+</view>

src/custom-tab-bar/index.wxss

@@ -0,0 +1,126 @@
+:host {
+  --tab-bar-height: 104rpx;
+}
+
+button::after {
+  content: '';
+  border: none;
+}
+
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  height: var(--tab-bar-height);
+  width: 100vw;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: content-box;
+  background-color: #fff;
+}
+
+.tab-bar-bg {
+  position: absolute;
+  left: 0;
+  bottom: constant(safe-area-inset-bottom);
+  bottom: env(safe-area-inset-bottom);
+  width: 100%;
+}
+
+.tab-bar-login {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+.tab-bar-main {
+  height: var(--tab-bar-height);
+  width: 100vw;
+  display: flex;
+  align-items: center;
+}
+
+.tab-bar-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+}
+
+.tab-bar-item .image {
+  width: 48rpx;
+  height: 48rpx;
+  margin-bottom: 8rpx;
+}
+
+.tab-bar-item .image-big {
+  position: absolute;
+  left: 50%;
+  bottom: 24rpx;
+  transform: translateX(-50%);
+  width: 110rpx;
+  height: 110rpx;
+}
+
+.tab-bar-item .text {
+  font-size: 20rpx;
+  font-weight: 400;
+  color: #646E7E;
+}
+
+.tab-bar-item .selected-color {
+  color: #347DFF;
+  font-weight: 500;
+}
+
+.tab-bar-charge {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 98;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #000000 100%);
+  transition: all 0.3;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  box-sizing: content-box;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-bar-charge>view {
+  display: flex;
+  align-items: center;
+  padding-bottom: 206rpx;
+  box-sizing: border-box;
+}
+
+.tab-bar-charge_menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tab-bar-charge_menu--icon {
+  width: 104rpx;
+  height: 104rpx;
+}
+
+.tab-bar-charge_menu--text {
+  font-size: 28rpx;
+  color: #fff;
+  margin-top: 16rpx;
+}

src/manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx369fcff95d387bde",
         "setting" : {
             "urlCheck" : false
         },

src/pages.json

@@ -1,10 +1,16 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [
 		{
-			"path": "pages/index/index",
+			"path": "pages/map/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/list/index"
+		},
+		{
+			"path": "pages/user/index"
 		}
 	],
 	"globalStyle": {
@@ -12,5 +18,19 @@
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
-	}
-}
+	},
+	"tabBar": {
+    "custom": true,
+    "list": [
+      {
+        "pagePath": "pages/map/index"
+      },
+      {
+        "pagePath": "pages/list/index"
+      },
+      {
+        "pagePath": "pages/user/index"
+      }
+    ]
+  }
+}

src/pages/list/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <view class="content">
+    <image class="logo" src="/static/logo.png" />
+    <view class="text-area">
+      <text class="title">{{ title }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const title = ref('Hello')
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50rpx;
+}
+
+.text-area {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
+</style>

src/pages/map/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <view class="map">
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const title = ref('Hello')
+</script>
+
+<style>
+
+</style>

src/pages/user/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <view class="content">
+    <image class="logo" src="/static/logo.png" />
+    <view class="text-area">
+      <text class="title">{{ title }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const title = ref('Hello')
+</script>
+
+<style>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50rpx;
+}
+
+.text-area {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
+</style>

src/styles/flex.scss

@@ -0,0 +1,101 @@
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
+.flex-align-baseline {
+  display: flex;
+  align-items: baseline;
+}
+
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.flex-align-end {
+  display: flex;
+  align-items: flex-end;
+}
+
+.flex-justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-column-between {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.flex-column-justify-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.flex-column-justify-end {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.flex-column-align-end {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-shrink {
+  flex-shrink: 0;
+}

src/styles/font.scss

@@ -0,0 +1,36 @@
+@for $i from 2 to 100 {
+  .fs-#{$i} {
+    font-size: #{$i}px;
+  }
+  .lh-#{$i} {
+    line-height: #{$i}px;
+  }
+}
+
+.fs-0 {
+  font-size: 0px;
+}
+
+.fw-500 {
+  font-weight: 500;
+}
+
+.fw-600 {
+  font-weight: 600;
+}
+
+.fw-bold {
+  font-weight: bold;
+}
+
+.lh-0 {
+  line-height: 0px;
+}
+
+.lh-normal {
+  line-height: normal;
+}
+
+.text-center {
+  text-align: center;
+}

src/styles/layout.scss

@@ -0,0 +1,39 @@
+$position: top, right, bottom, left;
+
+@each $item in $position {
+  .m#{str-slice($item, 0, 1)}-auto {
+    margin-#{$item}: auto;
+  }
+  .m#{str-slice($item, 0, 1)}-0 {
+    margin-#{$item}: 0px;
+  }
+}
+
+@for $i from 2 to 100 {
+  @each $item in $position {
+    .m#{str-slice($item, 0, 1)}-#{$i} {
+      margin-#{$item}: #{$i}px;
+    }
+    .p#{str-slice($item, 0, 1)}-#{$i} {
+      padding-#{$item}: #{$i}px;
+    }
+  }
+  .height-#{$i} {
+    height: #{$i}px;
+  }
+  .width-#{$i} {
+    width: #{$i}px;
+  }
+}
+
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}