libroro-web/src/pages/IndexPage.vue

<script setup>
import {computed, onMounted, ref} from 'vue';
import store from "@/store/index.js";
import {useRouter} from "vue-router";
const router = useRouter();
// 使用计算属性实时响应状态变化
const isLogin = computed(() => {
  return !!store.state.user.info
})
// 获取用户详细信息（可选）
const userInfo = computed(() => store.state.user.info)
const isAdmin = computed(() => store.state.user.info?.isAdmin || false)
// 根据vuex判断用户是否已登录
onMounted(async () => {
  await store.dispatch('user/initialize')
})
// 跳转后台
const goToBackend = () => {
  console.log("go to backend")
  router.push({
    path: '/back',
  })
}
const logout = () => {
  // 调用 Vuex action
  store.dispatch('user/logout')
  // 带当前路径跳转到登录页
  router.push({
    path: '/auth',
    // query: {
    //   reason: 'logout',
    //   redirect: router.currentRoute.value.fullPath
    // }
  })
}



// 书籍搜索
const searchValue = ref('');
const onSearch = searchValue => {
  console.log('use value', searchValue);
  console.log('or use this.value', value.value);
};

// 书籍展示
const books = ref([
  {
    title: 'Vue.js设计与实现',
    author: '霍春阳',
    publisher: '人民邮电出版社',
    cover: 'https://img1.doubanio.com/view/subject/l/public/s34351329.jpg'
  },
  {
    title: 'JavaScript高级程序设计',
    author: '马特·弗里斯比',
    publisher: '人民邮电出版社',
    cover: 'https://img2.doubanio.com/view/subject/l/public/s33624615.jpg'
  }
]);

const handleBorrow = (book) => {
  console.log('借阅书籍:', book.title);
};
</script>

<template>
  <div style="padding: 1em;box-sizing: border-box">
    <!--  板块1-->
    <a-row>
      <a-col :span="6">
        <div class="block01">
          <a-card class="card">
            <p class="c-title">借书</p>
            <p>已借出：</p>
            <p>可借出：</p>
          </a-card>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="block01">
          <a-card class="card">
            <p class="c-title">还书</p>
            <p>已归还：</p>
            <p>库余量：</p>
          </a-card>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="block01">
          <a-card class="card">
            <p class="c-title">帮助</p>
            <p>借书相关</p>
            <p>其他服务</p>
          </a-card>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="block01">
          <a-card class="card" v-if="isLogin">
            <p class="c-title">{{userInfo["name"]}}            </p>
            <p>当前借书：</p>
            <p>逾期：</p>


            <p style="text-align: center;">
              <span class="inline-btn"><a-button @click="goToBackend()" type="primary">进入后台</a-button></span>
              <span  class="inline-btn"><a-button  type="primary" danger @click="logout()">退出登录</a-button></span>
            </p>
          </a-card>
          <a-card class="card" v-else>
            <p class="c-title">未登录</p>
            <p><router-link to="/auth">我要登录</router-link></p>
            <p>我要注册</p>
          </a-card>
        </div>
      </a-col>
    </a-row>
    <!--  板块1 结束-->
    <br>
    <!--  板块2 找书-->
    <div style="width: 50%;margin: auto;max-width: 500px;min-width: 200px">
      <a-input-search
          style="width: 100%;height: 24px;font-size: 20px"
          v-model:value="searchValue"
          placeholder="请输入关键词"
          enter-button
          @search="onSearch"
      />
    </div>
    <!--  板块2 结束-->
    <!-- 板块3 书籍展示 -->
    <!-- 板块3 书籍展示 -->
    <a-row :gutter="[24, 24]" style="margin-top: 2em">
      <a-col :span="24">
        <a-card title="分类" style="width: 100%">
          <a-row :gutter="16">
            <a-col
                v-for="(book, index) in books"
                :key="index"
                :xl="6" :lg="8" :md="12" :sm="24"
            >
              <div class="book-card">
                <a-card hoverable style="width: 100%; margin-bottom: 16px">
                  <template #cover>
                    <img
                        alt="封面"
                        :src="book.cover"
                        style="height: 200px; object-fit: cover"
                    />
                  </template>
                  <a-card-meta :title="book.title">
                    <template #description>
                      <p style="margin: 4px 0">作者：{{ book.author }}</p>
                      <p>出版社：{{ book.publisher }}</p>
                      <a-button
                          type="primary"
                          block
                          style="margin-top: 12px"
                          @click="handleBorrow(book)"
                      >
                        借阅
                      </a-button>
                    </template>
                  </a-card-meta>
                </a-card>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
<!--    板块3结束-->
  </div>
</template>

<style scoped>
.block01 {
  width: 95%;
  height: 100%;
  margin: 0 auto;
}

.block01 .card {
  width: 100%;
  height:200px;
  margin: auto;
}

.card p {
  margin: 0.25em auto;
}

.c-title {
  font-size: 20px;
  font-weight: bold;
}

/* 书籍展示 */
.ant-card {
  margin-top: 20px;
}
.ant-row-flex {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.ant-col-18 {
  padding-left: 20px;
}

.inline-btn{
  margin-left: 1em;
}
</style>