<template>
|
<div class="homePage">
|
<el-carousel :height="screenheight + 'px'">
|
<el-carousel-item v-for="(item, index) in banner" :key="index">
|
<div class="bannerBox imgBox">
|
<img id="autoHeight" class="bannerImg" :src="item.icon" @click="bannerLink(item)" />
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="contentBox" style="margin-top: 50px">
|
<div class="informationBox">
|
<div class="bookListTitle">
|
<div class="title">新闻资讯</div>
|
<div class="more">更多></div>
|
</div>
|
<div class="informationList">
|
<div class="informationItem" v-for="(item, index) in informationList" :key="index">
|
<div class="imgBox"><img class="autoImg" :src="item.icon" alt="" /></div>
|
<div class="informationContent">
|
<div class="informationTitle" :alt="item.name">{{ item.name }}</div>
|
<div class="informationDate">{{ moment(item.publishDate).format('YYYY-MM-DD') }}</div>
|
<div class="informationText">{{ item.description }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="bookListBox">
|
<div class="contentBox">
|
<div class="bookListTitle">
|
<div class="title">推荐教材</div>
|
<div class="more">更多></div>
|
</div>
|
<div class="recommendList">
|
<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 class="contentBox">
|
<div class="funBox">
|
<div class="authentication">
|
<div class="cardNav" @click="toAuthentication(true)">
|
<div class="cardTitle">教师认证</div>
|
<div class="cardText">
|
学校任课老师上传教师证明文件，通过认证后，可进行样书与教学资源下载申请
|
</div>
|
</div>
|
</div>
|
<div class="manual">
|
<div class="cardNav" @click="toAuthentication(false)">
|
<div class="cardTitle">操作手册</div>
|
<div class="cardText">快速了解使用步骤，轻松开启教学支持之旅。</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="bookListTitle">
|
<div class="title" style="display: flex; line-height: 50px">
|
<div>教学导航</div>
|
<div class="titleTabs" v-if="classfeild.length > 0">
|
<el-tabs v-model="activeName" @tab-change="handleClick">
|
<el-tab-pane
|
v-for="item in classfeild"
|
:key="item.value"
|
:label="item.name"
|
:name="item.value"
|
/>
|
</el-tabs>
|
</div>
|
</div>
|
|
<div class="more">更多></div>
|
</div>
|
<div class="recommendList">
|
<div class="recommendItem" v-for="item in navBookList" :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>
|
<teacherCertification :isShow="teacherDialog" @dialog-Change="dialogChange" />
|
</div>
|
</template>
|
|
<script setup>
|
import moment from 'moment'
|
import { ElMessage } from 'element-plus'
|
import teacherCertification from '@/views/personalCenter/teacherCertification.vue'
|
import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue'
|
let screenheight = ref(document.documentElement.clientHeight / 2)
|
const MG = inject('MG')
|
const config = inject('config')
|
const tool = inject('tool')
|
const toolClass = inject('toolClass')
|
const banner = reactive([])
|
const informationList = reactive([])
|
let classfeild = ref([])
|
let activeName = ref('A1')
|
|
let bookListData = ref([])
|
let navBookList = ref([])
|
let teacherDialog = ref(false)
|
onBeforeMount(() => {
|
console.log(document.documentElement.clientWidth / 2.628)
|
window.onresize = () => {
|
let c = 2.628
|
if (document.documentElement.clientWidth >= 1220) {
|
screenheight.value = document.documentElement.clientWidth / c
|
console.log(document.documentElement.clientWidth / c)
|
}
|
}
|
})
|
|
onMounted(() => {
|
getBanner()
|
classifList()
|
getInformationList()
|
getBookList()
|
getNavBookList()
|
})
|
|
const handleClick = (tab, event) => {
|
console.log(tab)
|
|
activeName.value = tab
|
getNavBookList()
|
}
|
|
const classifList = () => {
|
const query = {
|
refCodes: ['digitalTextbooks'],
|
}
|
MG.resource.getCmsTypeByRefCode(query).then((res) => {
|
const types = toolClass.handleTypeList(res)
|
const typeData = types[0].cmsTypeLinks[0].children
|
const temp_classfeild = typeData.find((item) => item.typeField.refCode === 'teachingLevel')
|
?.typeField.cfg.option
|
|
const noCheck = temp_classfeild.map((item) => {
|
return {
|
name: item.name,
|
value: item.value,
|
}
|
})
|
console.log(noCheck, 'noCheck')
|
|
classfeild.value = noCheck
|
console.log(classfeild, 'classfeild')
|
})
|
}
|
|
const getNavBookList = () => {
|
MG.store
|
.getProductList({
|
path: '*',
|
queryType: '*',
|
storeInfo: 'defaultGoodsStore1',
|
paging: {
|
start: 0,
|
size: 5,
|
},
|
fields: {
|
'teachingLevel=': activeName.value,
|
},
|
})
|
.then((res) => {
|
console.log(res, '11111111111')
|
navBookList.value = res.datas
|
})
|
}
|
|
const dialogChange = (val) => {
|
getTeacherInfo()
|
if (val == false) {
|
teacherDialog.value = false
|
} else {
|
teacherDialog.value = true
|
}
|
}
|
|
//教师信息
|
function getTeacherInfo() {
|
const data = {
|
start: 0,
|
size: 10,
|
topicIdOrRefCode: 'teacherRoleApproval',
|
appRefCode: config.appRefCode,
|
sort: {
|
type: 'Desc',
|
field: 'CreateDate',
|
},
|
}
|
MG.ugc.getTopicMessageList(data).then((res) => {
|
try {
|
const resData = res.datas.find((i) => i.appUserCreator.userId == userId.value)
|
if (resData) {
|
teacherState.value = resData.state
|
if (resData.feedBack != null) {
|
reasonTxt.value = JSON.parse(resData.feedBack).reason
|
}
|
} else {
|
teacherState.value = ''
|
}
|
loading.value = false
|
} catch (error) {
|
loading.value = false
|
}
|
})
|
}
|
|
const toAuthentication = (type) => {
|
if (type) {
|
teacherDialog.value = true
|
} else {
|
ElMessage({
|
message: '建设中...',
|
type: 'warning',
|
})
|
}
|
}
|
|
const getBookList = () => {
|
MG.store
|
.getProductList({
|
path: 'recommendedTextbooks',
|
paging: {
|
start: 0,
|
size: 5,
|
},
|
fields: {
|
author: [],
|
},
|
})
|
.then((res) => {
|
console.log(res, '推荐教材')
|
bookListData.value = res.datas
|
})
|
}
|
|
const getInformationList = () => {
|
MG.resource
|
.getItem({
|
path: 'information',
|
fields: { publishDate: [], content: [] },
|
paging: { start: 0, size: 9 },
|
})
|
.then((res) => {
|
informationList.push(...res.datas)
|
console.log(res.datas)
|
})
|
}
|
|
const getBanner = () => {
|
MG.resource
|
.getItem({
|
path: 'banner\\homeBanner',
|
fields: { link: [] },
|
paging: { start: 0, size: 9 },
|
})
|
.then((res) => {
|
banner.push(...res.datas)
|
console.log(res.datas)
|
})
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.homePage {
|
min-width: 1220px;
|
min-height: calc(100vh - 61.8%);
|
background-color: #fff;
|
padding-bottom: 100px;
|
}
|
.el-carousel__item h3 {
|
color: #475669;
|
opacity: 0.75;
|
line-height: 150px;
|
margin: 0;
|
text-align: center;
|
}
|
|
.el-carousel__item:nth-child(2n) {
|
background-color: #99a9bf;
|
}
|
|
.el-carousel__item:nth-child(2n + 1) {
|
background-color: #d3dce6;
|
}
|
|
.informationList {
|
display: flex;
|
flex-wrap: wrap;
|
.informationItem {
|
display: flex;
|
width: 42%;
|
min-height: 100px;
|
margin-right: 5%;
|
margin-bottom: 20px;
|
border: 1px solid #ebebeb;
|
border-radius: 10px;
|
padding: 10px;
|
cursor: pointer;
|
.imgBox {
|
width: 30%;
|
height: 100%;
|
position: relative;
|
}
|
.informationContent {
|
width: 70%;
|
padding-left: 10px;
|
.informationTitle {
|
font-size: 14px;
|
width: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
color: #333333;
|
font-weight: bold;
|
margin-bottom: 10px;
|
}
|
.informationDate {
|
margin-top: 10px;
|
}
|
.informationText {
|
color: #666666;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
margin-top: 10px;
|
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
|
-webkit-line-clamp: 3; /* 显示的行数 */
|
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
|
overflow: hidden; /* 溢出隐藏 */
|
}
|
}
|
}
|
.informationItem:hover {
|
border: 1px solid #019e58;
|
}
|
}
|
.bookListBox {
|
width: 100%;
|
padding: 80px 0;
|
margin-top: 30px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url('@/assets/images/tuijian-bg.png');
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.recommendList {
|
display: flex;
|
padding-top: 20px;
|
|
.recommendItem {
|
flex: 1;
|
margin-right: 20px;
|
height: 300px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
cursor: pointer;
|
border: 1px solid #dedede;
|
background-color: #fff;
|
padding-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;
|
}
|
}
|
}
|
|
.funBox {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 60px;
|
margin-bottom: 60px;
|
.authentication {
|
width: 40%;
|
height: 100px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png');
|
}
|
.manual {
|
width: 40%;
|
height: 100px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png');
|
}
|
}
|
|
.titleTabs {
|
margin-left: 50px;
|
width: 70%;
|
}
|
.bookListTitle {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
border-bottom: 1px solid #ebebeb;
|
|
padding-bottom: 20px;
|
.title {
|
font-size: 20px;
|
color: #333333;
|
font-weight: bold;
|
}
|
.more {
|
font-size: 14px;
|
color: #999999;
|
cursor: pointer;
|
}
|
}
|
.cardNav {
|
margin-left: 30%;
|
margin-top: 20px;
|
padding-right: 20px;
|
cursor: pointer;
|
.cardTitle {
|
font-size: 28px;
|
color: #ffffff;
|
}
|
.cardText {
|
font-size: 14px;
|
color: #ccc;
|
margin-top: 10px;
|
}
|
}
|
</style>
|
