✨ feat: 新增底部导航栏组件，新增我的页面

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-27 15:57:59
  * @Date: 2022-05-27 15:57:59
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-20 13:51:26
+ * @LastEditTime: 2022-09-21 14:59:55
  * @FilePath: /swx/src/app.config.js
  * @FilePath: /swx/src/app.config.js
  * @Description:
  * @Description:
  */
  */
@@ -21,6 +21,7 @@ export default {
   pages: [
   pages: [
     'pages/index/index',
     'pages/index/index',
     'pages/foo/index',
     'pages/foo/index',
+    'pages/my/index',
   ],
   ],
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
   subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
     {
     {

 page {
 page {
   color: #222222;
   color: #222222;
   background-color: #F6F6F6;
   background-color: #F6F6F6;
+  padding: 0;
+  margin: 0;
 }
 }

+<!--
+ * @Date: 2022-09-21 11:59:20
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-21 15:11:47
+ * @FilePath: /swx/src/components/navbar.vue
+ * @Description: 底部导航栏
+-->
+<template>
+  <view class="navbar-page">
+    <view @tap="goTo('home')" class="home">
+      <view style="height: 2rem;">
+        <van-icon :name="icon_home" size="2rem" />
+      </view>
+      <view><text :style="homeStyle">首页</text></view>
+    </view>
+    <view class="add">
+      <view>
+        <van-icon :name="icon_add" size="4.5rem" />
+      </view>
+    </view>
+    <view @tap="goTo('my')" class="my">
+      <view style="height: 2rem;">
+        <van-icon :name="icon_my" size="2rem" />
+      </view>
+      <view><text :style="myStyle">我的</text></view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, defineProps, computed, onMounted } from 'vue'
+import icon_home1 from '@/images/icon/home01@2x.png'
+import icon_home2 from '@/images/icon/home02@2x.png'
+import icon_my1 from '@/images/icon/my01@2x.png'
+import icon_my2 from '@/images/icon/my02@2x.png'
+import icon_add from '@/images/icon/new@2x.png'
+
+import Taro from '@tarojs/taro'
+
+const goTo = (page) => {
+  if (page === 'home') {
+    if (currentPage.value === 'home') return;
+    Taro.redirectTo({
+      url: '../index/index'
+    })
+  } else {
+    if (currentPage.value === 'my') return;
+    Taro.redirectTo({
+      url: '../my/index'
+    })
+  }
+}
+
+const currentPage = ref('');
+
+onMounted(() => {
+  let pages = getCurrentPages();
+  let current_page = pages[pages.length - 1];
+  let url = current_page.route;
+  if (url == 'pages/index/index') {
+    currentPage.value = 'home'
+  } else {
+    currentPage.value = 'my'
+  }
+})
+
+const props = defineProps({
+  activated: String,
+})
+
+const homeStyle = ref({})
+const myStyle = ref({})
+
+const icon_home = computed(() => {
+  if (props.activated === 'home') {
+    return icon_home1
+  } else {
+    return icon_home2
+  }
+})
+const icon_my = computed(() => {
+  if (props.activated === 'home') {
+    return icon_my2
+  } else {
+    return icon_my1
+  }
+})
+
+if (props.activated === 'home') {
+  homeStyle.value = {
+    color: '#2A5F45',
+    fontSize: '0.9rem'
+  }
+  myStyle.value = {
+    color: '#999999',
+    fontSize: '0.9rem'
+  }
+} else {
+  homeStyle.value = {
+    color: '#999999',
+    fontSize: '0.9rem'
+  }
+  myStyle.value = {
+    color: '#2A5F45',
+    fontSize: '0.9rem'
+  }
+}
+
+</script>
+
+<style lang="less">
+.navbar-page {
+  position: fixed;
+  bottom: 0;
+  background-color: #FFFFFF;
+  padding-top: 0.5rem;
+  height: 5rem;
+  width: 100%;
+
+  .home {
+    position: absolute;
+    left: 20%;
+    transform: translateX(-20%);
+    text-align: center;
+  }
+
+  .add {
+    position: absolute;
+    top: -1.25rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .my {
+    position: absolute;
+    left: 80%;
+    transform: translateX(-80%);
+    text-align: center;
+  }
+}
+</style>

 <!--
 <!--
  * @Date: 2022-09-19 14:11:06
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-21 11:02:56
+ * @LastEditTime: 2022-09-21 15:03:29
  * @FilePath: /swx/src/pages/index/index.vue
  * @FilePath: /swx/src/pages/index/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -28,12 +28,14 @@
   <view style="padding: 0 1rem;">
   <view style="padding: 0 1rem;">
     <activity-card v-for="(item, index) in activity_list" :key="index" :data="item"></activity-card>
     <activity-card v-for="(item, index) in activity_list" :key="index" :data="item"></activity-card>
   </view>
   </view>
+  <navbar activated="home" />
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import Taro from '@tarojs/taro'
 import Taro from '@tarojs/taro'
 import { ref } from 'vue';
 import { ref } from 'vue';
 import activityCard from '@/components/activity-card.vue'
 import activityCard from '@/components/activity-card.vue'
+import navbar from '@/components/navbar.vue'
 
 
 const activity_list = ref([{
 const activity_list = ref([{
   title: '智慧没有烦恼',
   title: '智慧没有烦恼',

+export default {
+  navigationBarTitleText: '我的',
+  usingComponents: {
+  },
+}

+<!--
+ * @Date: 2022-09-21 14:51:44
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-21 14:52:03
+ * @FilePath: /swx/src/pages/my/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <view>my</view>
+  <navbar activated="my" />
+
+</template>
+
+<script setup>
+import { ref } from "vue";
+import navbar from '@/components/navbar.vue'
+
+</script>
+
+<script>
+import "./index.less";
+
+export default {
+  name: "myPage",
+};
+</script>