通用字段

frontEndMobile/src/App.vue

@@ -12,7 +12,7 @@ const isTabbar = ref(true)
 
 watch(
   route,
-  (newValue) => {
+  newValue => {
     title.value = `${newValue.meta.title || '首页'}`
   },
   {
@@ -20,17 +20,17 @@ watch(
   }
 )
 
-watch(title, (newValue) => {
+watch(title, newValue => {
   pageInit(newValue)
 })
 const onClickLeft = () => {
   router.go(-1)
 }
 
-function pageInit(newValue) {
+function pageInit (newValue) {
   isBack.value = ['首页', '我的'].indexOf(newValue) < 0
   isTabbar.value = ['首页', '我的'].indexOf(newValue) > -1
-  if(['首页', '我的', '记账'].indexOf(newValue) > -1) {
+  if (['首页', '我的', '记账'].indexOf(newValue) > -1) {
     active.value = newValue
   }
 }
@@ -39,7 +39,6 @@ onMounted(() => {
   setTimeout(() => {
     title.value = `${route.meta.title || '首页'}`
   }, 300)
-
 })
 </script>
 
@@ -53,29 +52,39 @@ onMounted(() => {
   <div :class="['view-box', !isTabbar && 'no-tabbar']">
     <RouterView />
   </div>
-  <van-tabbar v-model="active" v-if="isTabbar || false">
-    <van-tabbar-item name="首页" to="/home" icon="balance-list-o">明细</van-tabbar-item>
-    <van-tabbar-item name="记账" to="/accountLog" class="add-box" icon="add-o">记账</van-tabbar-item>
-    <van-tabbar-item name="我的" to="/me" icon="contact-o">我的</van-tabbar-item>
+  <div>isTabbar:{{ isTabbar }}</div>
+  <van-tabbar v-model="active" v-if="isTabbar">
+    <van-tabbar-item name="首页" to="/home" icon="balance-list-o"
+      >明细</van-tabbar-item
+    >
+    <van-tabbar-item name="记账" to="/accountLog" class="add-box" icon="add-o"
+      >记账</van-tabbar-item
+    >
+    <van-tabbar-item name="我的" to="/me" icon="contact-o"
+      >我的</van-tabbar-item
+    >
   </van-tabbar>
 </template>
 
 <style scoped lang="scss">
+$base-height: 98px; // 默认高度
+$no-tabbar-height: 46px; // 无 tabbar 时的高度
+$safe-area-inset-bottom: env(safe-area-inset-bottom); // 兼容 iOS >= 11.2
+$safe-area-inset-bottom-legacy: constant(
+  safe-area-inset-bottom
+); // 兼容 iOS < 11.2
+
 .view-box {
-  height: calc(
-    100vh - 98px + constant(safe-area-inset-bottom)
-  ); /* 兼容 iOS < 11.2 */
-  height: calc(
-    100vh - 98px + env(safe-area-inset-bottom)
-  ); /* 兼容 iOS >= 11.2 */
+  background-color: #f7f8fa;
+  height: calc(100vh - #{$base-height} + #{$safe-area-inset-bottom});
+  height: calc(100vh - #{$base-height} + #{$safe-area-inset-bottom-legacy});
   overflow-y: scroll;
+
   &.no-tabbar {
+    height: calc(100vh - #{$no-tabbar-height} + #{$safe-area-inset-bottom});
     height: calc(
-      100vh - 46px + constant(safe-area-inset-bottom)
-    ); /* 兼容 iOS < 11.2 */
-    height: calc(
-      100vh - 46px + constant(ssafe-area-inset-bottom)
-    ); /* 兼容 iOS >= 11.2 */
+      100vh - #{$no-tabbar-height} + #{$safe-area-inset-bottom-legacy}
+    );
   }
 }
 </style>

frontEndMobile/src/store/common.ts

@@ -9,7 +9,8 @@ export const useCommonStore = defineStore('common', {
   // 其他配置...
   state: () => ({
     bookInfo: {},
-    token: ''
+    token: '',
+    isLogin: false
   }),
   actions: {
     async initBook() {

frontEndMobile/src/views/BooksPage.vue

@@ -1,22 +1,55 @@
 <template>
-  选择book
-  <br />
-  <div>
-    <div v-for="item in books" :key="item.id">
-      {{ item.book_name }}
+  <div class="books-box">
+    <div
+      v-for="item in books"
+      :key="item.id"
+      class="book-box"
+      @click="selectBook(item)"
+    >
+      <div class="id">{{ item.id }}</div>
+      <div class="book_name">{{ item.book_name }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useRouter, useRoute } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import { getAllBook } from '@/api/api'
+import { useCommonStore } from '@/store/common'
+const commonStore = useCommonStore()
 
 const books = ref([])
+const router = useRouter()
 
 onMounted(async () => {
   const res = await getAllBook()
   console.log(101010, res)
   books.value = res
 })
+
+function selectBook (item) {
+  window.localStorage.setItem('book', JSON.stringify(item))
+  window.localStorage.setItem('bookId', item.id)
+  
+  // const route = useRoute()
+  router.back()
+}
 </script>
+
+<style scoped lang="scss">
+.books-box {
+  padding: 24px;
+  .book-box {
+    text-align: left;
+    padding: 24px;
+    border-radius: 12px;
+    background-color: #fff;
+    margin-bottom: 24px;
+    display: flex;
+    .id {
+      padding-right: 12px;
+    }
+  }
+}
+</style>

node_expores/environment/index.js

@@ -1,12 +1,12 @@
 function dbInfo() {
   // 根据需要更新db的数据配置
-  // return {
-  //   host: "localhost",
-  //   port: 3306,
-  //   user: "root",
-  //   password: "12345678",
-  //   database: "cashbook",
-  // };
+  return {
+    host: "localhost",
+    port: 3306,
+    user: "root",
+    password: "12345678",
+    database: "cashbook",
+  };
   return {
     host: "192.168.2.101",
     port: 6806,