<template><el-container><el-header ><el-menumode="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.totalconsole.log(this.booksList)})},prevPage(val){this.pageNum = valthis.requestBookList();},nextPage(val){this.pageNum = valthis.requestBookList();},changePage(val){this.pageNum = 1;this.pageSize = val;this.requestBookList();},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.pageNum = valthis.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>
