商品分类展示页面和关键字搜索所显示的商品页面,只是传入的信息不同,重复调用了相同的子组件。子组件为商品列表组件和详细信息组件,点击列表页展示的商品时,跳转到对应商品详情页。列表页用到的分页功能单独制作为分页组件,通过父子组件传值来与商品列表组件联系,点击分页组件的上/下一页以及对应页号时可以展示不同的商品。
商品列表分页功能主要通过数据库查询语句select-limit来实现,点击不同分类时传入对应字段category的值以及预先设定好的展示数量,查询数据库product表将对应数据返回渲染到页面。而搜索功能将用户输入的关键字进行简单处理后,主要通过数据库的模糊查询来实现。
<template>
<!-- 商品列表 -->
<div id="ProductList">
<!-- 商品列表展示 -->
<div :class="{displayEmpty:!isShow}">
<div class="list_box" :style="{height: listheight}">
<ul>
<li :key="index" v-for="(item,index) in proList" @click="gopinfopage(item.id)">
<img :src="item.bimg">
<h4>{{item.name}}</h4>
<div>¥{{item.price}}</div>
<h6>已售:{{item.sellout}}</h6>
</li>
</ul>
</div>
<!-- 触发事件 表单名 搜索条件 标志 默认显示数量-->
<Paging @pageChange="pageChange" formname="productlist" :condition="category" :keysign="keysign"
:defcount="this.defCount">
</Paging>
</div>
<div class="searchEmpty" :class="{displayEmpty:isShow}">
未搜索到与此关键词有关的商品。<br>
请换用其他关键词重新搜索,或去 <router-link to="/home/first">首页逛逛>></router-link>
</div>
</div>
</template>
<script>
import Paging from '../children/Paging'
import { getProList } from '@/api/index'
export default {
name: 'ProductList',
components:{
Paging
},
props:[
'keysign',
'category',
'catname'
],
data() {
return {
proList:[],
defCount:10, //默认页数
isShow:true
}
},
mounted(){
this.pageChange(1)
},
computed:{
listheight(){
// 页面高度不固定,由商品数量计算得出
var k = parseInt(this.proList.length / 5)
if(this.proList.length % 5){
k += 1
}
return (k * 300 + 10) + 'px'
}
},
methods:{
pageChange(index){
//请求此页商品列表数据,传参商品页所属类别
getProList({
keysign:this.keysign,
category:this.category,
offset:(index - 1) * this.defCount,
count:this.defCount
})
.then((res) => {
if(res.length <= 0){
this.isShow = false
}else{
this.proList = res
this.isShow = true
}
})
.catch(error => {
alert('error1')
})
},
gopinfopage(id){
// 将被点击商品的对应数据库id,所属类别以及类别名称传入详情页
//query传参要用path来引入,params传参要用name来引入
this.$router.push({
path:'pinfo',
query:{
productId:id,
category:this.category,
catname:this.catname
}
})
}
}
}
</script>
<style scoped>
*{
padding: 0;
margin: 0;
list-style: none;
}
.list_box{
width: 1112px;
background-color: #f3f3f3;
margin: 50px auto;
}
.list_box li{
display: block;
width: 188px;
height: 278px;
background-color: white;
margin: 10px 0 0 10px;
float: left;
padding: 10px 10px 0 10px;
border: 1px solid white;
}
.list_box li:hover{
border: 1px solid red;
cursor:pointer
}
.list_box li img{
display: block;
width: 150px;
height: 170px;
padding: 20px;
}
.list_box li h4{
font-size: 15px;
color: #444;
margin-top: 5px;
/* 单行多余隐藏 */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.list_box li:hover h4{
text-decoration: underline;
color: #000;
}
.list_box li:hover img{
width: 170px;
height: 190px;
transition: all 0.5s;
padding: 10px;
}
.list_box li div{
color: #be1616;
font-weight: 500;
font-size: 20px;
height: 22px;
float: left;
margin-top: 10px;
}
.list_box li h6{
color: #555;
float: right;
font-size: 15px;
font-weight: 400;
margin-top: 13px;
}
.searchEmpty{
width: 500px;
height: 500px;
line-height: 30px;
margin: 0 auto;
margin-top: 200px;
text-align: center;
}
.displayEmpty{
display: none;
}
.searchEmpty a{
color: #237dd6;
cursor: pointer;
text-decoration: none;
}
</style>
用户点击分页组件的不同按钮后,分页组件先进行处理,判断当前显示按钮的样式转变,以及整体的移动让当前显示页按钮时刻位于显示页码的中间部分。点击上一页和下一页时,判断是否有页码可以左右移动。最后再调动商品列表父组件的对应事件pageChange(),请求数据库,切换商品列表显示内容。