167 lines
3.1 KiB
Vue
167 lines
3.1 KiB
Vue
<!--商品-->
|
|
<template>
|
|
|
|
<el-row v-if="isPage">
|
|
<el-col :span="24">
|
|
<div style="padding: 10px 10px 10px 10px;width: 350px;margin: 0 auto" >
|
|
<el-input
|
|
v-model="state.page.title"
|
|
style="max-width: 600px"
|
|
placeholder="寻找好书籍"
|
|
class="input-with-select"
|
|
clearable
|
|
@input="init"
|
|
>
|
|
<template #append>
|
|
<el-button :icon="Search" @click="init"/>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-space wrap>
|
|
<el-card
|
|
v-for="item in getList" :key="item.id"
|
|
class="box-card"
|
|
@click="to(item.id)"
|
|
shadow="hover" >
|
|
<!-- 图片-->
|
|
<el-image :src="item.image" fit="fill" />
|
|
<!-- 标题-->
|
|
<div class="item-title ">{{ item.title }}</div>
|
|
<!-- 价格&& 评分-->
|
|
<div class="price-box">
|
|
<span class="price-now ft16 " style="line-height: 1;">
|
|
￥ {{item.price}}
|
|
<!-- <el-rate-->
|
|
<!-- v-model="item.ratingStarCount"-->
|
|
<!-- disabled-->
|
|
<!-- show-score-->
|
|
<!-- text-color="#ff9900"-->
|
|
<!-- score-template="{value}"-->
|
|
<!-- />-->
|
|
</span>
|
|
</div>
|
|
</el-card>
|
|
</el-space>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <el-row class="pagination-container">-->
|
|
<el-row v-if="isPage" class="pagination-container">
|
|
<el-col :span="24">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
@current-change="handleCurrentChange"
|
|
:total="state.total" />
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { itemPage } from '~/api/itemApi'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
const props = defineProps({
|
|
isPage: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
getList: {
|
|
type: Array,
|
|
default: () => [], // 默认值为空数组
|
|
},
|
|
})
|
|
// 计算属性来判断 list 是否为空，如果为空则使用 props.getList
|
|
const getList = computed(() => {
|
|
return state.getList.length > 0 ? state.getList : props.getList;
|
|
});
|
|
const state = reactive(<any>{
|
|
total:0,
|
|
page:{
|
|
page:1,
|
|
title:"",
|
|
status:0
|
|
},
|
|
getList:[]
|
|
})
|
|
|
|
/**
|
|
* 初始化
|
|
*/
|
|
function init() {
|
|
if (props.isPage){
|
|
itemPage(state.page).then(res =>{
|
|
state.getList = res.data.list
|
|
state.total = res.data.total
|
|
})
|
|
}
|
|
}
|
|
/**
|
|
*分页
|
|
* @param val
|
|
*/
|
|
const handleCurrentChange = (val: number) => {
|
|
state.page.page = val
|
|
init()
|
|
}
|
|
|
|
/**
|
|
* 跳转
|
|
*/
|
|
const to = (id:number) => {
|
|
router.push(`/info/${id}`)
|
|
}
|
|
|
|
onMounted(()=>{
|
|
init()
|
|
})
|
|
|
|
</script>
|
|
<style scoped>
|
|
.box-card{
|
|
cursor: pointer;
|
|
width: 232px;
|
|
height: 300px
|
|
}
|
|
:deep(.el-image){
|
|
display: block;
|
|
width: 170px;
|
|
height: 180px;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.item-title{
|
|
color: #333;
|
|
font-size: 14px;
|
|
width: 164px;
|
|
margin: 0 auto 8px auto;
|
|
line-height: 1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
.price-box{
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
.price-now{
|
|
color: #FF0000;
|
|
padding-right: 10px;
|
|
}
|
|
.ft16 {
|
|
font-size: 16px;
|
|
}
|
|
.ft14 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pagination-container{
|
|
padding-top: 10px;
|
|
}
|
|
|
|
</style>
|