<template>
|
<!-- 首页 -->
|
<div class="home">
|
<!-- <back-header :arrow="false"></back-header> -->
|
<div class="home-header">
|
<!-- 搜索和轮播 -->
|
<div>
|
<div class="selcet">
|
<img src="@/assets/images/home/logo_3.png" alt class="selectImg" />
|
<van-search
|
placeholder="请输入要搜索的图书"
|
shape="round"
|
v-model="searchAllWords"
|
@search="select"
|
/>
|
</div>
|
<!-- lunbo -->
|
<div
|
class="common"
|
v-if="educate.swipePic && educate.swipePic.length > 0"
|
>
|
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
<!-- -->
|
<van-swipe-item
|
v-for="(item, index) in educate.swipePic"
|
:key="index"
|
>
|
<div
|
:style="{
|
background: 'url(' + item.icon + ') no-repeat 100%,center',
|
}"
|
alt
|
class="banner"
|
/>
|
</van-swipe-item>
|
</van-swipe>
|
</div>
|
<div class="common" v-else>
|
<van-loading type="spinner" color="#1989fa" />
|
</div>
|
</div>
|
<!-- 轮播图下方 -->
|
<div class="circle">
|
<div
|
v-for="(item, index) in educate.circles"
|
:key="index"
|
@click="goApply(item.url, item.circleName)"
|
class="circles_one"
|
:class="item.itemN"
|
>
|
<img :src="item.img" alt />
|
<div class="circleName">{{ item.circleName }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="line"></div>
|
<!--推荐教材 -->
|
<div class="popularRecommend padding">
|
<div class="rowSpan">
|
<div class="title">推荐教材</div>
|
<div class="more" @click="showMore()">更多 +</div>
|
</div>
|
<div
|
class="flexWrap"
|
v-if="!bookRecommendLoading && bookRecommendList.length > 0"
|
>
|
<div
|
class="displayColumn"
|
v-for="(item, index) in bookRecommendList"
|
:key="index"
|
@click="goBookDetail(item)"
|
>
|
<div class="imgBox">
|
<img :src="item.icon" alt class="autoImg" />
|
</div>
|
<div class="bookInfo">
|
<div class="title" :title="item.name">
|
{{ item.name }}
|
</div>
|
<div class="author" :title="item.tourism_author">
|
{{ item.tourism_author }}
|
</div>
|
<div class="priceBox">
|
<span v-if="item.price > 0" class="price">{{
|
"¥" + tool.toDecimal2(item.price)
|
}}</span>
|
<span class="freePrice" v-if="item.price == 0">免费</span>
|
<span class="oldPrice" v-if="item.oldPrice">{{
|
"¥" + tool.toDecimal2(item.oldPrice)
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else-if="bookRecommendLoading" class="loadingBox">
|
<van-loading type="spinner" color="#1989fa" />
|
</div>
|
<div v-else class="noData">暂无数据</div>
|
</div>
|
<div class="line"></div>
|
<div class="textBookDescription" v-if="videoInfo">
|
<div class="titleBox">
|
<div class="title">{{ videoInfo.name }}</div>
|
<div class="operate" @click="getManual()">
|
<img src="@/assets/images/home/ce_icon3.png" alt class="" />
|
<span>操作手册</span>
|
</div>
|
</div>
|
<div class="flex descriptionBox">
|
<div class="videoBox">
|
<video
|
:src="showDataVod"
|
class="videoPlayer"
|
controls
|
controlslist="nodownload"
|
:poster="videoInfo.icon"
|
@ended="handleVideoEnded"
|
ref="videoPlayer"
|
></video>
|
</div>
|
<div class="descriptionCon">
|
<div class="con" v-html="videoInfo.tourism_content"></div>
|
</div>
|
</div>
|
</div>
|
<div class="line"></div>
|
<div class="listBox padding">
|
<div class="rowSpan">
|
<div class="title">合作院校</div>
|
<div class="more" @click="openBtn('false')" v-if="isOpen">更多 +</div>
|
<div class="more" @click="openBtn('true')" v-else>收起 -</div>
|
</div>
|
<div class="partnerList">
|
<div class="list" v-if="!partnersLoading && partnersList.length > 0">
|
<div
|
class="partnerItem"
|
v-for="(item, index) in partnersList"
|
:key="index"
|
>
|
<div class="imgBox">
|
<img class="autoImg" :src="item.icon" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<Footer />
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import Footer from "@/components/footer/footer";
|
import { mapState } from "vuex";
|
import { Loading, Dialog } from "vant";
|
import toolClass from "@/assets/js/toolClass";
|
import myConfig from "@/assets/js/config";
|
|
Vue.use(Loading);
|
Vue.use(Dialog);
|
export default {
|
name: "home",
|
data() {
|
return {
|
searchAllWords: "",
|
educate: {
|
title: "数字教材",
|
// 轮播图片
|
swipePic: [],
|
circles: [
|
{
|
img: require("@/assets/images/home/guanwang3.png"),
|
circleName: "官网主页",
|
url: "https://www.tepcb.com/mobile/website/",
|
itemN: "circle-one",
|
},
|
{
|
img: require("@/assets/images/home/shuzijiaocai3.png"),
|
circleName: "数字教材",
|
url: "/bookList",
|
itemN: "circle-two",
|
},
|
{
|
img: require("@/assets/images/home/jiaoshirenzheng3.png"),
|
circleName: "教师认证",
|
url: "/teacherCertificate",
|
itemN: "circle-three",
|
},
|
],
|
},
|
bookRecommendList: [],
|
bookRecommendLoading: true,
|
videoInfo: {},
|
showDataVod: "",
|
partnersList: [],
|
partnersLoading: false,
|
isOpen: true,
|
token: "",
|
};
|
},
|
created() {
|
var that = this;
|
var accToken = toolClass.getCookie(myConfig.tokenKey);
|
that.token = accToken;
|
if (that.token) {
|
this.getUserRoleMine();
|
}
|
that.getBanner();
|
that.getBookRecommendList();
|
that.getVideoInfo();
|
that.getPartnersList();
|
},
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
methods: {
|
getUserRoleMine() {
|
let that = this;
|
that.MG.identity.getCurrentAppUser().then((res) => {
|
if (res) {
|
that.userId = res.userId;
|
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 == "basicInfo" || item.type == "Default"
|
);
|
let phoneInfo = res.secretList.find(
|
(item) => item.type == "MobilePhone"
|
);
|
if (teacherRole && teacherInfo) {
|
this.$store.dispatch("setUserInfo", {
|
...teacherInfo,
|
phoneNumber: phoneInfo?.credential,
|
icon: wechatInfo?.icon,
|
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,
|
icon: wechatInfo?.icon,
|
phoneNumber: phoneInfo?.credential,
|
role: "Student",
|
});
|
}
|
}
|
});
|
},
|
|
// 获取轮播图
|
getBanner() {
|
this.MG.resource
|
.getItem({
|
path: "tourism_digitalTextbook\\tourism_digitalBannerMobile",
|
})
|
.then((res) => {
|
this.educate.swipePic = res.datas;
|
console.log(res.datas);
|
});
|
},
|
// 跳转搜索
|
select() {
|
this.$router.push({
|
path: "/bookList",
|
query: {
|
searchAllWords: this.searchAllWords,
|
},
|
});
|
},
|
//推荐教材
|
getBookRecommendList() {
|
this.bookRecommendList = [];
|
this.bookRecommendLoading = true;
|
// 处理搜索
|
this.MG.store
|
.getProductList({
|
storeInfo: this.config.digitalTextBooksGoodsStore,
|
path:
|
this.config.digitalTextBooksGoodsStore +
|
"\\" +
|
this.config.refCodes.textBooksStore.textBookRecommendation,
|
queryType: "*",
|
paging: {
|
start: 0,
|
size: 5,
|
},
|
fields: {
|
tourism_author: [],
|
tourism_publicationDate: [],
|
viewCount: [],
|
},
|
sort: {
|
type: "Desc",
|
field: "CreateDate",
|
},
|
coverSize: {
|
height: 560,
|
},
|
})
|
.then((res) => {
|
this.bookRecommendList = res.datas;
|
this.bookRecommendLoading = false;
|
});
|
},
|
|
// 去详情
|
goBookDetail(data) {
|
this.$router.push({
|
path: "/bookDetail",
|
query: {
|
id: data.id,
|
},
|
});
|
},
|
// 轮播图下方 列表跳转页面
|
goApply(url, name) {
|
console.log(name);
|
if (name === "官网主页") {
|
window.open(url);
|
} else {
|
this.$router.push({
|
path: url,
|
});
|
}
|
},
|
showMore() {
|
this.$router.push({
|
path: "/bookList",
|
});
|
},
|
//视频说明
|
getVideoInfo() {
|
this.MG.resource
|
.getItem({
|
path: "tourism_digitalTextbook\\tourism_digitalRecommendedTextbooks",
|
fields: {
|
tourism_file: [],
|
tourism_content: [],
|
},
|
})
|
.then((res) => {
|
if (res.datas.length > 0) {
|
res.datas.forEach((element) => {
|
if (
|
element.refCode == "tourism_digitalRecommendedTextbooksMobile"
|
) {
|
this.videoInfo = element;
|
this.showDataVod =
|
this.config.requestCtx +
|
"/file/api/ApiDownload?md5=" +
|
element.tourism_file;
|
}
|
});
|
}
|
});
|
},
|
handleVideoEnded() {
|
const videoPlayer = this.$refs.videoPlayer;
|
if (videoPlayer) {
|
videoPlayer.currentTime = 0;
|
videoPlayer.load(); // 这会重新加载视频并显示海报图
|
}
|
},
|
getManual() {
|
this.$router.push({
|
path: "/manual",
|
});
|
},
|
//合作院校
|
getPartnersList() {
|
this.partnersLoading = true;
|
this.MG.resource
|
.getItem({
|
path: "tourism_digitalTextbook\\tourism_digitalPartners",
|
fields: {},
|
})
|
.then((res) => {
|
const data = res.datas;
|
if (this.isOpen) {
|
this.partnersList = data.slice(0, 4);
|
} else {
|
this.partnersList = data;
|
}
|
|
this.partnersLoading = false;
|
});
|
},
|
openBtn(state) {
|
if (state === "true") {
|
this.isOpen = true;
|
} else {
|
this.isOpen = false;
|
}
|
this.getPartnersList();
|
},
|
},
|
components: {
|
Footer,
|
},
|
};
|
</script>
|
<style scoped>
|
.home {
|
padding-bottom: 52px;
|
}
|
|
.home-header {
|
background: url("../../assets/images/home/home-bg.png");
|
background-size: 100% 100%;
|
}
|
|
.selcet {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 15px;
|
}
|
.selectImg {
|
display: inline-block;
|
right: 14px;
|
width: 35%;
|
}
|
|
.banner {
|
box-sizing: border-box;
|
width: 100%;
|
height: 150px;
|
background-size: cover !important;
|
border-radius: 4px;
|
}
|
|
/* 轮播图下方 */
|
.circle {
|
display: flex;
|
margin-top: 20px;
|
justify-content: space-between;
|
padding: 0 15px;
|
background: none;
|
}
|
|
.circleName {
|
/* font-size: 12px; */
|
font-weight: bold;
|
margin-left: 5px;
|
}
|
|
.circle img {
|
width: 32px;
|
height: 32px;
|
display: inline-block;
|
}
|
|
.circles_one {
|
margin-bottom: 20px;
|
display: flex;
|
/* flex-flow: column; */
|
align-items: center;
|
justify-content: center;
|
border-radius: 5px;
|
padding: 8px 0;
|
width: calc(100% / 3 - 10px);
|
}
|
.circle-one {
|
background: #ffefe6;
|
border: 1px solid #ffefe6;
|
}
|
.circle-two {
|
background: #e0f5ff;
|
border: 1px solid #e0f5ff;
|
}
|
.circle-three {
|
background: #eee3ff;
|
border: 1px solid #eee3ff;
|
}
|
|
.line {
|
height: 5px;
|
background-color: rgb(240, 240, 240);
|
}
|
|
/* 公共 */
|
.padding {
|
padding: 0 15px;
|
font-size: 14px;
|
color: #333;
|
}
|
|
.more {
|
color: #999;
|
}
|
|
.more:active {
|
color: #3586ff;
|
}
|
.rowSpan {
|
display: flex;
|
justify-content: space-between;
|
}
|
.rowSpan .title {
|
font-size: 18px;
|
font-weight: bold;
|
color: #000;
|
margin: 10px 0;
|
font-family: "黑体";
|
}
|
.rowSpan .more {
|
display: flex;
|
align-items: center;
|
}
|
|
.flexWrap {
|
display: flex;
|
flex-wrap: wrap;
|
min-height: 147px;
|
margin-top: 23px;
|
}
|
|
.displayColumn {
|
width: calc(100% / 3 - 15px);
|
margin: 7px;
|
}
|
|
.displayColumn .imgBox {
|
width: 100%;
|
height: 140px;
|
margin: 0 auto;
|
border-radius: 5px;
|
transition: transform 0.3s ease;
|
transform: scale(1);
|
overflow: hidden;
|
box-shadow: 0 3px 6px 1px #00000029;
|
}
|
|
.displayColumn .bookInfo {
|
margin: 0;
|
overflow: hidden;
|
}
|
|
.displayColumn .bookInfo .title {
|
color: #333;
|
font-weight: 600;
|
margin-top: 10px;
|
margin-bottom: 8px;
|
font-size: 14px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
.displayColumn .bookInfo .author {
|
font-size: 14px;
|
color: #999;
|
margin: 5px 0;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
.price {
|
color: #ef1b3a;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
.freePrice {
|
color: #0bc266;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
.oldPrice {
|
text-decoration: line-through;
|
color: #999 !important;
|
margin-left: 5px;
|
font-size: 13px;
|
}
|
|
.noData {
|
font-size: 16px;
|
font-weight: bold;
|
color: #999;
|
min-height: 147px;
|
line-height: 147px;
|
/* margin: 0 auto; */
|
text-align: center;
|
}
|
|
.textBookDescription {
|
padding: 15px;
|
}
|
.textBookDescription .titleBox {
|
display: flex;
|
justify-content: space-between;
|
}
|
.titleBox .operate {
|
height: 34px;
|
width: 105px;
|
background: url("../../assets/images/home/shouce.png");
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #fff;
|
}
|
.titleBox .operate img {
|
margin-right: 6px;
|
width: 24px;
|
height: 24px;
|
}
|
|
.descriptionBox {
|
justify-content: space-between;
|
margin-top: 20px;
|
}
|
.videoBox {
|
width: 45%;
|
}
|
.videoPlayer {
|
width: 100%;
|
border-radius: 10px;
|
}
|
.descriptionCon {
|
width: 55%;
|
padding-left: 10px;
|
}
|
|
.partnerList {
|
margin-top: 10px;
|
overflow: hidden;
|
min-height: 150px;
|
flex-wrap: wrap;
|
}
|
.list {
|
min-height: 110px;
|
overflow: hidden;
|
}
|
/* .list1 {
|
line-height: 1.5;
|
min-height: 160px;
|
} */
|
.partnerItem {
|
width: 25%;
|
display: block;
|
box-sizing: border-box;
|
float: left;
|
padding: 5px 20px;
|
}
|
.partnerItem .imgBox {
|
position: relative;
|
width: 100%;
|
min-height: 60px;
|
}
|
.partnerItem .bookInfo {
|
margin: 0;
|
overflow: hidden;
|
text-align: center;
|
}
|
.partnerItem .bookInfo .title {
|
color: #333;
|
margin: 15px 0;
|
/* white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden; */
|
}
|
</style>
|
<style>
|
/* 搜索 */
|
.van-search {
|
background: none !important;
|
padding: 10px 0;
|
width: 60%;
|
}
|
.selcet .van-search__content {
|
background-color: #fff;
|
border-radius: 4px;
|
}
|
|
/* 轮播 */
|
.my-swipe .van-swipe-item {
|
color: #fff;
|
font-size: 20px;
|
text-align: center;
|
}
|
</style>
|
