<template>
|
<div class="homePage">
|
<div class="bannerBox imgBox">
|
<img class="bannerImg" :src="banner[0]?.icon" @click="bannerLink(item)" />
|
</div>
|
<div v-if="informationList.length > 0" class="contentBox" style="margin-top: 50px">
|
<div class="informationBox">
|
<div class="bookListTitle">
|
<div class="title">新闻资讯</div>
|
<div class="more" @click="toMore">更多></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" @click="toMore">更多></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.author ? item.author : '-' }}</div>
|
<div class="priceBox">
|
<span class="price" v-if="item.price && item.price > 0">
|
<span> ¥{{ item.price }}</span>
|
</span>
|
<span class="oldPrice" v-if="item.oldPrice"> ¥{{ item.oldPrice }}</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 class="more" style="margin-left: 30px; font-weight: normal" @click="toMore">
|
更多>
|
</div>
|
</div>
|
</div>
|
<div class="recommendList">
|
<div
|
class="recommendItem"
|
v-for="item in navBookList"
|
: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.author ? item.author : '-' }}</div>
|
<div class="priceBox">
|
<span class="price" v-if="item.price && item.price > 0">
|
<span>¥{{ item.price }}</span>
|
</span>
|
<span class="oldPrice" v-if="item.oldPrice">¥{{ item.oldPrice }}</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, watch } from 'vue'
|
let screenheight = ref(document.documentElement.clientHeight / 2)
|
import { useRouter, useRoute } from 'vue-router'
|
const router = useRouter()
|
const route = useRoute()
|
|
const MG = inject('MG')
|
const config = inject('config')
|
const logIn = inject('logIn')
|
const tool = inject('tool')
|
const toolClass = inject('toolClass')
|
const banner = reactive([])
|
const informationList = reactive([])
|
let classfeild = ref([])
|
let activeName = ref('A1')
|
let callbackLink = ref(null)
|
|
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)
|
}
|
}
|
})
|
|
// 获取url参数
|
const getUrlParams = () => {
|
let url = window.location.href
|
let params = url.split('?')[1]
|
let paramsObj = {}
|
if (params) {
|
paramsObj = params.split('&').reduce((pre, cur) => {
|
pre[cur.split('=')[0]] = cur.split('=')[1]
|
return pre
|
}, {})
|
}
|
return paramsObj
|
}
|
|
onMounted(() => {
|
// 监听是否来自数字阅读
|
const params = getUrlParams()
|
if (params.login) {
|
localStorage.setItem('loginBack', decodeURIComponent(params.callBackUrl))
|
logIn()
|
}
|
getBanner()
|
classifList()
|
getInformationList()
|
getBookList()
|
getNavBookList()
|
})
|
|
watch(
|
() => route, // 监听 path 变化
|
(newPath, oldPath) => {
|
console.log('路由路径从', oldPath, '变为', newPath)
|
},
|
)
|
|
const toMore = () => {
|
router.push({
|
path: '/bookStore',
|
})
|
}
|
|
const toDetail = (item) => {
|
router.push({
|
path: '/bookdetail',
|
query: {
|
bookId: item.id,
|
},
|
})
|
}
|
|
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,
|
author: [],
|
},
|
})
|
.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) {
|
if (localStorage.getItem(config.tokenKey)) {
|
teacherDialog.value = true
|
} else {
|
logIn()
|
}
|
} 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;
|
|
.bannerBox {
|
height: 615px;
|
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: 28px;
|
opacity: 0.45;
|
margin-top: 10px;
|
}
|
}
|
}
|
.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;
|
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;
|
}
|
}
|
.recommendItem:hover {
|
background-image: url(@/assets/images/Mouse_fill.png);
|
}
|
}
|
|
.recommendItemImg {
|
width: 150px;
|
height: 200px;
|
position: relative;
|
margin: 0 auto;
|
}
|
|
.infoBox {
|
text-align: center;
|
margin-top: 10px;
|
}
|
.bookName {
|
font-weight: 700;
|
}
|
.author {
|
margin-top: 10px;
|
color: #333333;
|
}
|
.priceBox {
|
margin-top: 10px;
|
.oldPrice {
|
font-size: 16px;
|
color: #999999;
|
text-decoration: line-through;
|
margin-left: 20px;
|
}
|
.price {
|
span {
|
font-weight: bold;
|
font-size: 14px;
|
color: #d91523;
|
}
|
}
|
}
|
|
.funBox {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 60px;
|
margin-bottom: 60px;
|
.authentication {
|
width: 48%;
|
height: 123px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png');
|
}
|
.manual {
|
width: 48%;
|
height: 123px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url('@/assets/images/xiehe/home/caozuoshouce.png');
|
}
|
}
|
|
.titleTabs {
|
margin-left: 50px;
|
width: 85%;
|
}
|
.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;
|
line-height: 20px;
|
}
|
}
|
|
::v-deep(.el-tabs__item) {
|
align-items: stretch;
|
height: 60px !important;
|
line-height: 20px;
|
text-align: center;
|
white-space: pre-wrap !important;
|
}
|
</style>
|
