<template>
|
<div class="homePage">
|
<div class="bannerBox imgBox">
|
<img class="bannerImg" :src="banner[0]?.icon" @click="bannerLink(item)" />
|
<div class="bannerText">
|
<div>数字教材</div>
|
<div class="enText">ABOUT US</div>
|
</div>
|
</div>
|
<div class="contentBox" style="margin-top: 50px">
|
<div class="imgBox">
|
<img class="autoimg" src="@/assets/images/bookStore/feblei.png" />
|
</div>
|
<div class="classificationBox">
|
<div style="width: 100px">分类：</div>
|
<div class="classificaListBox">
|
<div class="classificaItem" v-for="(item, index) in classfeild" :key="index">
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
|
<div class="bookList">
|
<div class="bookfilterList">
|
<div class="listTitle">
|
<div>结果：共计***条</div>
|
<div style="width: 300px">
|
<el-input
|
v-model="input3"
|
placeholder="输入教材名称、作者姓名、出品方名称搜索"
|
class="input-with-select"
|
>
|
<template #append>
|
<el-button :icon="Search" />
|
</template>
|
</el-input>
|
</div>
|
</div>
|
|
<div>
|
<div class="recommendList">
|
<div
|
class="recommendItem"
|
v-for="item in bookListData"
|
:key="item.id"
|
@click="toDetail(item)"
|
>
|
<div class="recommendItemImg">
|
<img class="autoImg" :src="item.icon" />
|
</div>
|
<div class="infoBox">
|
<div class="bookName">{{ item.name }}</div>
|
<div class="author">
|
作者：{{ item.authorcaupress_author ? item.caupress_author : '-' }}
|
</div>
|
<div class="priceBox">
|
<span class="oldPrice" v-if="item.oldPrice">原价：¥{{ item.oldPrice }}</span>
|
<span class="price" v-if="item.price && item.price > 0">
|
定价：¥
|
<span>{{ item.price }}</span>
|
</span>
|
<span class="price" v-else> 定价：<span class="freePrice">免费</span> </span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="!bookListData.length > 0">
|
<el-empty class="noData" description="暂无数据" />
|
</div>
|
|
<div class="pagingBox">
|
<el-pagination
|
layout="total, prev, pager, next"
|
:total="total"
|
v-model:current-page="currentPage1"
|
:page-size="20"
|
@current-change="handleCurrentChange"
|
hide-on-single-page="true"
|
/>
|
</div>
|
</div>
|
<div class="recommendBox">
|
<div class="recommendTitle">推荐教材</div>
|
<div class="newRecommendList">
|
<div class="recommendItem" v-for="item in bookListData" :key="item.id">
|
<div class="recommendItemImg">
|
<img class="autoImg" :src="item.icon" />
|
</div>
|
<div class="infoBox">
|
<div class="bookName">{{ item.name }}</div>
|
<div class="author">
|
作者：{{ item.authorcaupress_author ? item.caupress_author : '-' }}
|
</div>
|
<div class="priceBox">
|
<span class="oldPrice" v-if="item.oldPrice">原价：¥{{ item.oldPrice }}</span>
|
<span class="price" v-if="item.price && item.price > 0">
|
定价：¥
|
<span>{{ item.price }}</span>
|
</span>
|
<span class="price" v-else> 定价：<span class="freePrice">免费</span> </span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue'
|
import { useRouter, useRoute } from 'vue-router'
|
|
const MG = inject('MG')
|
const toolClass = inject('toolClass')
|
const banner = reactive([])
|
const feildList = reactive([])
|
const classfeild = reactive([])
|
import { Search } from '@element-plus/icons-vue'
|
const input3 = ref('')
|
let bookListData = ref([])
|
const total = ref(50)
|
const currentPage1 = ref(1)
|
const router = useRouter()
|
|
const toDetail = (item) => {
|
router.push({
|
path: '/bookdetail',
|
query: {
|
bookId: item.id,
|
},
|
})
|
}
|
|
const getBanner = () => {
|
MG.resource
|
.getItem({
|
path: 'banner\\educationPublishing',
|
fields: { link: [] },
|
paging: { start: 0, size: 9 },
|
})
|
.then((res) => {
|
banner.push(...res.datas)
|
console.log(res.datas)
|
})
|
}
|
|
const handleCurrentChange = (val) => {
|
currentPage1.value = val
|
getBookList()
|
}
|
|
const getBookList = () => {
|
MG.store
|
.getProductList({
|
path: 'recommendedTextbooks',
|
paging: {
|
start: 0,
|
size: 5,
|
},
|
fields: {
|
author: [],
|
},
|
})
|
.then((res) => {
|
console.log(res, '推荐教材')
|
bookListData.value = res.datas
|
})
|
}
|
|
const classifList = () => {
|
const query = {
|
refCodes: ['digitalTextbooks'],
|
}
|
MG.resource.getCmsTypeByRefCode(query).then((res) => {
|
console.log(res, 'res')
|
const types = toolClass.handleTypeList(res)
|
const typeData = types[0].cmsTypeLinks[0].children
|
feildList.push(...typeData)
|
const temp_classfeild = typeData.find((item) => item.typeField.refCode === 'teachingLevel')
|
?.typeField.cfg.option
|
classfeild.push({ name: '全部', value: 'all' }, ...temp_classfeild)
|
console.log(typeData, 'typeData')
|
console.log(classfeild, 'classfeild')
|
})
|
}
|
onMounted(() => {
|
getBanner()
|
classifList()
|
getBookList()
|
})
|
</script>
|
|
<style lang="less" scoped>
|
.homePage {
|
min-width: 1220px;
|
min-height: calc(100vh - 61.8%);
|
background-color: #fff;
|
padding-bottom: 100px;
|
|
.bannerBox {
|
height: 380px;
|
position: relative;
|
.bannerText {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
font-size: 36px;
|
font-weight: 700;
|
color: #fff;
|
text-shadow: 0px 0px 10px #000000;
|
text-align: center;
|
}
|
.enText {
|
font-size: 36px;
|
opacity: 0.45;
|
margin-top: 20px;
|
}
|
}
|
|
.classificationBox {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 30px;
|
.classificaListBox {
|
display: flex;
|
flex-wrap: wrap;
|
.classificaItem {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 20px;
|
margin-bottom: 20px;
|
padding: 10px 16px;
|
width: 200px;
|
line-height: 20px;
|
background: #f5f5f5;
|
text-align: center;
|
}
|
}
|
}
|
.bookList {
|
display: flex;
|
justify-content: space-between;
|
padding: 20px;
|
|
.bookfilterList {
|
width: 80%;
|
border: 1px solid #e4e7ed;
|
height: 100%;
|
border-radius: 10px;
|
.listTitle {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20px 30px;
|
}
|
}
|
.recommendBox {
|
width: 19%;
|
border: 1px solid #e4e7ed;
|
border-radius: 10px;
|
.recommendTitle {
|
height: 50px;
|
line-height: 50px;
|
padding-left: 20px;
|
border-bottom: 1px solid #e4e7ed;
|
color: #333333;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
.recommendList {
|
display: flex;
|
padding: 20px;
|
padding-top: 0;
|
flex-wrap: wrap;
|
justify-content: start;
|
|
.recommendItem {
|
margin-right: 20px;
|
width: 22%;
|
height: 300px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
border: 1px solid #dedede;
|
background-color: #fff;
|
padding-top: 10px;
|
margin-top: 10px;
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
.recommendItemImg {
|
width: 150px;
|
height: 200px;
|
position: relative;
|
margin: 0 auto;
|
}
|
.infoBox {
|
text-align: center;
|
margin-top: 10px;
|
}
|
.author {
|
margin-top: 10px;
|
}
|
.priceBox {
|
margin-top: 10px;
|
.oldPrice {
|
font-size: 16px;
|
color: #444444;
|
text-decoration: line-through;
|
margin-right: 20px;
|
}
|
.price {
|
span {
|
font-weight: bold;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
|
.newRecommendList {
|
padding-top: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
.recommendItem {
|
margin-right: 20px;
|
height: 300px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
background-color: #fff;
|
padding-top: 10px;
|
margin-top: 10px;
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
.recommendItemImg {
|
width: 150px;
|
height: 200px;
|
position: relative;
|
margin: 0 auto;
|
}
|
.infoBox {
|
text-align: center;
|
margin-top: 10px;
|
}
|
.author {
|
margin-top: 10px;
|
}
|
.priceBox {
|
margin-top: 10px;
|
.oldPrice {
|
font-size: 16px;
|
color: #444444;
|
text-decoration: line-through;
|
margin-right: 20px;
|
}
|
.price {
|
span {
|
font-weight: bold;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
.pagingBox {
|
display: flex;
|
justify-content: center;
|
margin: 20px 0;
|
padding-bottom: 30px;
|
}
|
</style>
|
