网络书店前端代码

最新推荐文章于 2024-01-11 09:08:17 发布

欧皇夏老板

最新推荐文章于 2024-01-11 09:08:17 发布

阅读量531

点赞数 1

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44203782/article/details/130007932

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<template>
  <el-container>
    <el-header >
      <el-menu
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff">
        <el-menu-item index="1">在线书城</el-menu-item>
        <el-menu-item index="2">首页</el-menu-item>

        <el-submenu index="3">
          <template slot="title">图书类型</template>
          <el-menu-item index="3-1">哲学</el-menu-item>
          <el-menu-item index="3-2">政治</el-menu-item>
          <el-menu-item index="3-3">经济</el-menu-item>
        </el-submenu>
        <el-menu-item index="4">登录</el-menu-item>
        <el-menu-item index="5">安全退出</el-menu-item>
        <el-menu-item index="6">注册</el-menu-item>
        <el-menu-item index="7" class="el-icon-shopping-cart-full">订单管理</el-menu-item>
        <el-menu-item style="right: 5%; position:fixed" >
              <el-input placeholder="请输入图书名称" clearable  v-model="bookSearch"></el-input>
              <el-button type="primary" icon="el-icon-search" style="height: 40px;margin-left:5px;margin-top: 2px"></el-button>
        </el-menu-item>


      </el-menu>
    </el-header>


    <el-main>
      <el-row>
        <el-col :span="24" style="height: 300px">
    <el-carousel indicator-position="none" style="height: 300px">
      <el-carousel-item v-for="item in imgList" :key="item.id">
        <img :src="item.idView" class="image" style="width: 100%;height: 300px" >
      </el-carousel-item>
    </el-carousel>
        </el-col>
      </el-row>


      <el-row >
        <el-col :span="6" v-for="(b,index) in booksList" :key="index" >
          <el-card>
            <img :src="require('../assets/'+b.image)" class="image">
            <div style="font-size: 18px;padding-top: 5px">
              {{b.name}}
            </div>
            <div style="font-size: 10px;text-align: left;padding-top: 5px">
              作者：{{b.author}}
            </div>


            <el-popover class="button"
                        placement="right"
                        width="400"
                        trigger="click">
              <el-descriptions title="书籍信息">
                <el-descriptions-item label="书名">{{book.bookName}}}</el-descriptions-item>
                <el-descriptions-item label="作者">{{book.author}}</el-descriptions-item>
                <el-descriptions-item label="价格">{{book.price}}</el-descriptions-item>
                <el-descriptions-item label="简介">{{book.description}}</el-descriptions-item>
              </el-descriptions>
              <el-button type="text" slot="reference" @click="open(b.id)">更多信息</el-button>
            </el-popover>






          </el-card>
        </el-col>
      </el-row>


      <el-row>
        <el-col>
          <div class="block">
            <el-pagination
                :page-sizes="[2,4]"
                :page-size="pageSize"
                :current-page="pageNum"
                @current-change="handleCurrentChange"
                @prev-click="prevPage"
                @next-click="nextPage"
                @size-change="changePage"
                layout="total,sizes,prev, pager, next"
                :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>





    </el-main>
  </el-container>
</template>
<script>

export default {
data(){
  return{
    total:0,
    pageNum:1,
    pageSize:4,
    bookSearch:'',
    ing:'.jpg',
    imgList: [
      {id:0,idView:require("@/assets/1.jpg")},
      {id:1,idView:require("@/assets/2.jpg")},
      {id:2,idView:require("@/assets/3.jpg")},
      {id:3,idView:require("@/assets/4.jpg")},
    ],
    booksList: {},
    book:{
      bookName:'',
      author:'',
      price:'',
      description:'',
    },
    }

  },
  methods:{
    open(id) {
      console.log(id)
      this.$axios.get(
          'api/book/findBookInformation?id='+id,
          {headers:{"jwt":localStorage.getItem("jwt")}})
          .then(res =>{
            console.log(res.data);
            this.book = res.data.data
          })
    },
    requestBookList(){
      let param = {};
          param.pageNum = this.pageNum;
          param.pageSize = this.pageSize;
          this.$axios.post(
              'api/book/findBookList',
              param,
              {headers:{"jwt":localStorage.getItem("jwt")}})
              .then(res =>{
                console.log(res.data)
                this.pageSize = res.data.data.pageSize;
                this.pageNum = res.data.data.pageNum;
                this.booksList = res.data.data.list;
                this.total = res.data.data.total
                console.log(this.booksList)
              })
    },
    prevPage(val){
      this.pageNum = val
      this.requestBookList();
    },
    nextPage(val){
      this.pageNum = val
      this.requestBookList();
    },
    changePage(val){
      this.pageNum = 1;
      this.pageSize = val;
      this.requestBookList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.requestBookList();
    },


  },
  created() {
  this.requestBookList();
  }


}
</script>

<style scoped>
.el-header {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}


.image {
  width: 100%;
  display: block;
}



.button {
  padding: 0;
  float: left;
}

.group-item-vo {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 14px;
}


</style>