newCashBook/frontEndMobile/src/views/BooksPage.vue

<template>
  <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>
    <van-button round block type="primary" @click="add"> 新增 </van-button>

  </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.data
})

function selectBook (item) {
  window.localStorage.setItem('book', JSON.stringify(item))
  window.localStorage.setItem('bookId', item.id)

  // const route = useRoute()
  router.back()
}
function add() {
  router.push('/add_books')
}
</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;
    color: black;
    .id {
      padding-right: 12px;
    }
  }
}
</style>