<template>
|
<div class="indexPage">
|
<el-carousel :height="screenheight + 'px'">
|
<el-carousel-item v-for="item in bannerList" :key="item.id">
|
<div
|
class="bannerBox imgBox"
|
:style="item.caupress_link ? 'cursor: pointer' : ''"
|
>
|
<img
|
id="autoHeight"
|
class="bannerImg"
|
:src="item.icon"
|
@click="bannerLink(item)"
|
/>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
<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"
|
>原价：¥{{ tool.toDecimal2(item.oldPrice) }}</span
|
>
|
<span class="price" v-if="item.price && item.price > 0">
|
定价：¥
|
<span>{{ tool.toDecimal2(item.price) }}</span>
|
</span>
|
<span class="price" v-else>
|
定价：<span class="freePrice">免费</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="funBox">
|
<div class="authentication"></div>
|
<div class="manual"></div>
|
</div>
|
<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"
|
>原价：¥{{ tool.toDecimal2(item.oldPrice) }}</span
|
>
|
<span class="price" v-if="item.price && item.price > 0">
|
定价：¥
|
<span>{{ tool.toDecimal2(item.price) }}</span>
|
</span>
|
<span class="price" v-else>
|
定价：<span class="freePrice">免费</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "home",
|
data() {
|
return {
|
bannerList: [],
|
informationData: [],
|
noticeData: [],
|
honorData: [],
|
menuData: [],
|
bookListData: [],
|
bookListTotal: 0,
|
bookListLoading: true,
|
showMenuIndex: 0,
|
screenheight: document.documentElement.clientWidth / 4,
|
};
|
},
|
created() {
|
window.onresize = () => {
|
let c = 2.628;
|
if (document.documentElement.clientWidth >= 1220) {
|
this.screenheight = document.documentElement.clientWidth / c;
|
}
|
};
|
var url = window.location.href;
|
if (url.indexOf("WeChatScanningCodeLogin") > -1) {
|
var querys = url.substring(url.indexOf("?") + 1).split("&");
|
var result = {};
|
for (var i = 0; i < querys.length; i++) {
|
var temp = querys[i].split("=");
|
if (temp.length < 2) {
|
result[temp[0]] = "";
|
} else {
|
result[temp[0]] = temp[1];
|
}
|
}
|
if (result && result.code) {
|
this.MG.identity
|
.loginByWeChatOpenCode({
|
code: result.code,
|
appRefCode: this.config.appRefCode,
|
platform: "PCWeb",
|
})
|
.then((res) => {
|
if (res && res.status == "Ok") {
|
this.$store.dispatch("setToken", res.token);
|
this.getUserInfo(() => {
|
window.location.href = this.config.requestCtx;
|
});
|
}
|
});
|
} else {
|
this.getBanner();
|
this.getHonor();
|
this.getBookMenu();
|
}
|
} else {
|
this.getBanner();
|
this.getHonor();
|
this.getBookMenu();
|
}
|
},
|
methods: {
|
//点击轮播图跳转
|
|
bannerLink(val) {
|
if (val.caupress_link) {
|
window.open(val.caupress_link);
|
}
|
},
|
getUserInfo(callback) {
|
this.MG.identity.getCurrentAppUser().then((res) => {
|
// 用户信息优先级：教师认证 > 微信 > 学生（注册时默认）
|
if (res) {
|
let teacherRole = res.roleLinks.find(
|
(item) => item.role.refCode == "teacher"
|
);
|
let teacherInfo = res.infoList.find(
|
(item) => item.type == "teacherInfo"
|
);
|
let wechatInfo = res.infoList.find((item) => item.type == "WeChat");
|
let studentInfo = res.infoList.find((item) => item.type == "Default");
|
let phoneInfo = res.secretList.find(
|
(item) => item.type == "MobilePhone"
|
);
|
if (teacherRole && teacherInfo) {
|
let data = {};
|
try {
|
data = JSON.parse(teacherInfo.data);
|
} catch (error) {
|
data = {};
|
}
|
this.$store.dispatch("setUserInfo", {
|
...data,
|
name: data.fullName,
|
phoneNumber: phoneInfo?.credential,
|
role: "Teacher",
|
roleId: teacherRole.role.id,
|
});
|
} else if (wechatInfo) {
|
this.$store.dispatch("setUserInfo", {
|
...wechatInfo,
|
phoneNumber: phoneInfo?.credential,
|
role: "Student",
|
});
|
} else if (studentInfo) {
|
this.$store.dispatch("setUserInfo", {
|
...studentInfo,
|
phoneNumber: phoneInfo?.credential,
|
role: "Student",
|
});
|
}
|
}
|
// 清空本地储存的申请样书清单
|
this.$store.commit("emptyBookList");
|
callback();
|
});
|
},
|
getBanner() {
|
this.MG.resource
|
.getItem({
|
path: this.config.refCodes.index.banner,
|
fields: {
|
caupress_link: [],
|
},
|
coverSize: {
|
height: 750,
|
},
|
paging: {
|
start: 0,
|
size: 999,
|
},
|
})
|
.then((res) => {
|
this.bannerList = res.datas;
|
});
|
},
|
|
getHonor() {
|
this.MG.resource
|
.getItem({
|
path: this.config.refCodes.index.honor,
|
coverSize: {
|
height: 200,
|
},
|
paging: {
|
start: 0,
|
size: 999,
|
},
|
})
|
.then((res) => {
|
this.honorData = res.datas;
|
});
|
},
|
getBookMenu() {
|
this.MG.store
|
.getStoreChannelList({
|
storeRefCode: this.config.goodsStore,
|
path: this.config.refCodes.index.column,
|
start: 0,
|
size: 999,
|
})
|
.then((res) => {
|
if (res.datas && res.datas.length) {
|
this.menuData = res.datas;
|
this.getBookList();
|
}
|
});
|
},
|
getBookList() {
|
this.bookListLoading = true;
|
this.MG.store
|
.getProductList({
|
path:
|
this.config.refCodes.index.column +
|
"\\" +
|
this.menuData[this.showMenuIndex].refCode,
|
paging: {
|
start: 0,
|
size: 5,
|
},
|
fields: {
|
caupress_author: [],
|
caupress_recommendationReason: [],
|
},
|
coverSize: {
|
width: 150,
|
},
|
})
|
.then((res) => {
|
this.bookListData = res.datas;
|
this.bookListTotal = res.total;
|
this.bookListLoading = false;
|
});
|
},
|
toInformation(selected) {
|
this.$router.push({
|
name: "informationCenter-index",
|
query: {
|
tabsSelected: selected,
|
},
|
});
|
},
|
toDetails(tabsSelected, linkInfo) {
|
this.$router.push({
|
name: "informationCenter-detail",
|
query: {
|
tabsSelected: tabsSelected,
|
path: linkInfo[0].LinkPath,
|
id: linkInfo[0].ChildrenId,
|
},
|
});
|
},
|
toDetail(row) {
|
this.$router.push({
|
name: "teachingServices-detail",
|
query: { id: row.id, cmsPath: row.rootCmsItemId },
|
});
|
},
|
// 跳转至列表页
|
toList() {
|
this.$router.push({
|
path: "/teachingServices",
|
query: {
|
searchOptionHidden: true,
|
searchPath:
|
this.config.refCodes.index.column +
|
"\\" +
|
this.menuData[this.showMenuIndex].refCode,
|
},
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import "@/assets/css/theme.less";
|
.indexPage {
|
min-width: 1220px;
|
background-color: #fff;
|
.bannerBox {
|
background: #f3f3f3;
|
}
|
.imgBox {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
// 本社资讯
|
.informationBox {
|
padding-right: 30px;
|
border-right: 1px dashed #b3b3b3;
|
.informationList {
|
.informationItem {
|
margin-bottom: 50px;
|
cursor: pointer;
|
.imgBox {
|
position: relative;
|
width: 150px;
|
height: 90px;
|
margin-right: 30px;
|
background: #f2f2f2;
|
.date {
|
color: #999999;
|
text-align: center;
|
font-size: 30px;
|
padding-top: 20px;
|
.year {
|
font-size: 17px;
|
margin-top: 5px;
|
}
|
}
|
}
|
.infoBox {
|
.title {
|
font-size: 16px;
|
color: #444444;
|
margin-bottom: 20px;
|
font-weight: bold;
|
line-height: 1.5;
|
cursor: pointer;
|
}
|
.detail {
|
font-size: 12px;
|
color: #444444;
|
line-height: 2;
|
display: -webkit-box;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
}
|
}
|
}
|
}
|
}
|
// 本社通知
|
.noticeBox {
|
width: 400px;
|
padding-left: 30px;
|
.noticeList {
|
.noticeItem {
|
margin-bottom: 40px;
|
cursor: pointer;
|
.indexBox {
|
width: 60px;
|
height: 60px;
|
text-align: center;
|
line-height: 60px;
|
font-size: 36px;
|
color: #b3b3b3;
|
background: #f2f2f2;
|
margin-right: 30px;
|
}
|
.infoBox {
|
.title {
|
font-size: 16px;
|
color: #444444;
|
height: 40px;
|
line-height: 20px;
|
margin-bottom: 8px;
|
cursor: pointer;
|
display: -webkit-box;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
}
|
.date {
|
font-size: 12px;
|
color: #bcbcbc;
|
}
|
}
|
}
|
}
|
}
|
// 书籍列表
|
.bookListBox {
|
width: 100%;
|
padding: 80px 0;
|
margin-top: 60px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("@/assets/images/tuijian-bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 42%;
|
.contentBox {
|
min-height: 776px;
|
}
|
.menuBox {
|
width: 180px;
|
border-right: 1px solid #d9d9d9;
|
padding: 30px 0 30px;
|
.menuItem {
|
padding-left: 30px;
|
border-right: 3px solid #fff;
|
font-size: 16px;
|
height: 40px;
|
line-height: 40px;
|
cursor: pointer;
|
margin-bottom: 20px;
|
&:hover {
|
background: #f2f2f2;
|
}
|
&.active {
|
color: @color;
|
border-color: @color;
|
}
|
}
|
}
|
.bookList {
|
padding: 40px;
|
min-height: 826px;
|
box-sizing: border-box;
|
|
.bookItem {
|
margin-bottom: 30px;
|
cursor: pointer;
|
.imgBox {
|
width: 150px;
|
height: 200px;
|
border: 1px solid #e6e6e6;
|
}
|
.infoBox {
|
margin-left: 30px;
|
.title {
|
color: #333333;
|
font-size: 20px;
|
margin-top: 14px;
|
margin-bottom: 12px;
|
font-weight: bold;
|
cursor: pointer;
|
}
|
.author {
|
color: #808080;
|
margin-bottom: 20px;
|
}
|
.reasonBox {
|
display: flex;
|
line-height: 24px;
|
font-size: 14px;
|
color: #333333;
|
margin-bottom: 20px;
|
min-height: 72px;
|
.reasonTxt {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
}
|
}
|
}
|
.allList {
|
width: 160px;
|
height: 40px;
|
line-height: 40px;
|
font-size: 16px;
|
background: #e5f3eb;
|
color: @color;
|
text-align: center;
|
border-radius: 50px;
|
margin: 10px auto;
|
cursor: pointer;
|
}
|
}
|
}
|
.boxTitle {
|
font-size: 18px;
|
color: #333333;
|
margin-bottom: 30px;
|
font-weight: bold;
|
span {
|
float: right;
|
font-size: 12px;
|
color: #999999;
|
line-height: 18px;
|
cursor: pointer;
|
}
|
}
|
.honorBox {
|
margin-bottom: 60px;
|
}
|
}
|
// 模块标题
|
.blockTitle {
|
text-align: center;
|
font-size: 24px;
|
font-weight: bold;
|
margin-top: 60px;
|
margin-bottom: 30px;
|
span {
|
display: inline-block;
|
width: 60px;
|
height: 6px;
|
margin-top: 10px;
|
background: @color;
|
}
|
}
|
|
.bookListTitle {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
|
.title {
|
font-size: 20px;
|
color: #333333;
|
font-weight: bold;
|
}
|
.more {
|
font-size: 14px;
|
color: #999999;
|
cursor: pointer;
|
}
|
}
|
.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: 80px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("@/assets/images/xiehe/home/jiaoshirenzheng.png");
|
}
|
.manual {
|
width: 40%;
|
height: 80px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("@/assets/images/xiehe/home/jiaoshirenzheng.png");
|
}
|
}
|
</style>
|
