mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
448 lines
14 KiB
Vue
448 lines
14 KiB
Vue
<template>
|
|
<view class="recommend-index">
|
|
<view class="index-banner">
|
|
<image style="width: 100%;height:301upx" src="../../static/images/banner-index.png" mode=""></image>
|
|
</view>
|
|
<view class="course-re">
|
|
<view class="recommend-index-title" style="margin-bottom: 20upx;">
|
|
<text class="title-line"></text>
|
|
热门课程推荐
|
|
<!-- <text class="tetle-text">查看更多</text> -->
|
|
</view>
|
|
<course-list :items="courseDataList"></course-list>
|
|
<!-- <view class="course-re-list">
|
|
<view class="course-re-index" v-for="course in courseDataList" :key="course.id" @click="toCourseDetail(course)">
|
|
<view class="course-img">
|
|
<text class="img-score">
|
|
<image style="width:28upx;height:28upx;margin-right: 6upx;" src="../../static/images/icon/index-start.png" mode=""></image>
|
|
{{converToScore(course.score)}}分</text>
|
|
<course-image :course="course" width="332upx" height="192upx"></course-image>
|
|
</view>
|
|
<view class="course-title">
|
|
{{course.name}}
|
|
</view>
|
|
<view class="course-text">
|
|
{{course.sysCreateBy}} | {{course.studys}}人已学
|
|
</view>
|
|
<view class="course-type">
|
|
<text class="type-index" v-if="sysTypeName(course.sysType1) != ''">{{sysTypeName(course.sysType1)}}</text>
|
|
<text class="type-tow" v-if="sysTypeName(course.sysType2) != ''">{{sysTypeName(course.sysType2)}}</text>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view style="margin:30upx 0 60upx 0">
|
|
<image style="width: 100%;height:220upx" src="../../static/images/banner-tow.png" mode=""></image>
|
|
</view>
|
|
<view class="ranking-list">
|
|
<view class="recommend-index-title">
|
|
<text class="title-line"></text>
|
|
排行榜
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="list-box-index">
|
|
<view class="list-box-title course-bg-info">
|
|
课程排行榜
|
|
</view>
|
|
<view class="list-box-text" v-for="(cou,index) in courseRankingList" @click="toCourseDetail(cou)">
|
|
<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
|
|
<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
|
|
<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
|
|
<text>{{cou.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="list-box-index">
|
|
<view class="list-box-title art-bg-info">
|
|
热门文章排行榜
|
|
</view>
|
|
<view class="list-box-text" v-for="(arl,index) in arlRankingList" @click="toArticleDetail(arl)">
|
|
<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred01.png" mode=""></image>
|
|
<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred02.png" mode=""></image>
|
|
<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred03.png" mode=""></image>
|
|
<text>{{arl.title}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="list-box-index">
|
|
<view class="list-box-title qa-bg-info">
|
|
热门问答排行榜
|
|
</view>
|
|
<view class="list-box-text" v-for="(qa,index) in qaRankingList" @click="toQaDetail(qa)">
|
|
<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list-01.png" mode=""></image>
|
|
<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list02.png" mode=""></image>
|
|
<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list03.png" mode=""></image>
|
|
<text>{{qa.title}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="articl-recommend">
|
|
<view class="recommend-index-title">
|
|
<text class="title-line"></text>
|
|
热门文章推荐
|
|
<!-- <text class="tetle-text">查看更多</text> -->
|
|
</view>
|
|
<view class="articl-box">
|
|
<view class="articl-box-index" v-for="ar in arlDataList" @click="toArticleDetail(ar)">
|
|
<image v-if="ar.coverurl == ''" style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" src="../../static/images/course.png" mode=""></image>
|
|
<image v-else style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" :src="fileUrl+ar.coverurl" mode=""></image>
|
|
<view class="box-index">
|
|
<view class="box-index-title" style="height:90upx">
|
|
{{ar.title}}
|
|
</view>
|
|
<view class="box-index-authr">
|
|
<author-info width="32px" height="32px" :avatar="ar.authorInfo.avatar" :name="ar.authorInfo.name" :sex="ar.authorInfo.sex"></author-info>
|
|
<!-- <image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
|
|
学习小助手 -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="qa-recommend">
|
|
<view class="recommend-index-title">
|
|
<text class="title-line"></text>
|
|
热门问答推荐
|
|
<!-- <text class="tetle-text">查看更多</text> -->
|
|
</view>
|
|
<view class="qa-box" style="display: flex;overflow-x: auto;">
|
|
<view class="qa-box-index" v-for="qa in qaDataList" @click="toQaDetail(qa)">
|
|
<view class="box-index-title">
|
|
{{qa.title}}
|
|
</view>
|
|
<view class="box-index-authr" style="display: flex;">
|
|
<author-info width="26px" height="26px" :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author-info>
|
|
<!-- <image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
|
|
<text style="font-size: 28upx;color: #39424C;">学习小助手</text> -->
|
|
<text style="font-size: 28upx;color: #6E7B84;margin-top: 10upx;display: inline-block;margin-left: 20upx;">「最热答案」</text>
|
|
</view>
|
|
<view class="box-index-text">
|
|
{{qa.content}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-divider text="没有更多了"></u-divider>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiIndex from '@/api/phase2/index.js';
|
|
import { mapGetters,mapActions} from 'vuex';
|
|
import apiUser from '@/api/system/user.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
fileUrl:this.$config.fileUrl,
|
|
arlDataList:[],
|
|
qaDataList:[],
|
|
courseDataList:[],
|
|
qaRankingList:[],
|
|
arlRankingList:[],
|
|
courseRankingList:[],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo'])
|
|
},
|
|
mounted(){
|
|
this.getCourseData();
|
|
// this.getSysTypeTree();
|
|
// this.findCourseData();
|
|
this.loadSysTypes();
|
|
this.getQaRanking();
|
|
this.getArtRanking();
|
|
this.getArtData();
|
|
this.getQaData();
|
|
this.getCourseRanking();
|
|
},
|
|
methods: {
|
|
//文章跳转详情
|
|
toArticleDetail(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/resource/articeDetail?id=' + item.id
|
|
});
|
|
},
|
|
toQaDetail(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/resource/qaDetail?id=' + item.id
|
|
});
|
|
},
|
|
//课程跳转详情
|
|
toCourseDetail(citem) {
|
|
if(citem.source == 1){
|
|
uni.navigateTo({
|
|
url: '/pages/study/studydetail?id='+citem.id+'&type='+citem.type
|
|
});
|
|
} else {
|
|
if (citem.type == 10) {
|
|
uni.navigateTo({
|
|
url: '/pages/resource/microDetail?id=' + citem.id
|
|
});
|
|
} else if (citem.type == 20) {
|
|
uni.navigateTo({
|
|
url: '/pages/resource/courseDetail?id=' +citem.id
|
|
});
|
|
}
|
|
}
|
|
},
|
|
...mapActions({
|
|
// getResOwnerTree:'resOwner/getResOwnerTree',
|
|
// loadResOwners:'resOwner/loadResOwners',
|
|
getSysTypeTree:'sysType/getSysTypeTree',
|
|
loadSysTypes:'sysType/loadSysTypes'
|
|
}),
|
|
//问答排行榜
|
|
getQaRanking(){
|
|
apiIndex.qaAnswers(3).then(res=>{
|
|
if(res.status == 200) {
|
|
this.qaRankingList = res.result;
|
|
}
|
|
})
|
|
},
|
|
//文章排行榜
|
|
getArtRanking(){
|
|
apiIndex.articleViews(3).then(res=>{
|
|
if(res.status == 200){
|
|
this.arlRankingList = res.result;
|
|
}
|
|
})
|
|
},
|
|
//课程排行榜
|
|
getCourseRanking(){
|
|
apiIndex.scorelist(3,1).then(res=>{
|
|
if(res.status == 200){
|
|
this.courseRankingList = res.result;
|
|
}
|
|
})
|
|
},
|
|
//推荐文章
|
|
getArtData() {
|
|
apiIndex.mobieArticle(2).then(res=>{
|
|
if(res.status == 200) {
|
|
let ids = [];
|
|
res.result.forEach(item=>{
|
|
ids.push(item.sysCreateAid);
|
|
item.authorInfo={avatar:'',name:'',code:'',sex:null};
|
|
})
|
|
this.arlDataList = res.result;
|
|
this.loadAuthorInfo(res.result,ids);
|
|
}
|
|
})
|
|
},
|
|
// 推荐问答
|
|
getQaData(){
|
|
let params = {
|
|
pageSize: 4,
|
|
orderAsc: false,
|
|
orderField: 'views'
|
|
};
|
|
apiIndex.indexList(params).then(res=>{
|
|
if(res.status == 200){
|
|
let ids = [];
|
|
res.result.forEach(item=>{
|
|
ids.push(item.sysCreateAid);
|
|
item.authorInfo={avatar:'',name:'',code:'',sex:null};
|
|
})
|
|
this.qaDataList = res.result;
|
|
this.loadAuthorInfo(res.result,ids);
|
|
}
|
|
})
|
|
},
|
|
// 推荐课程
|
|
getCourseData(){
|
|
let course = {
|
|
num:6,
|
|
device: 1,
|
|
orderField: 'studys',
|
|
orderAsc: false,
|
|
topOrder: true,
|
|
};
|
|
apiIndex.mobileIndex(course).then(res=>{
|
|
if(res.status == 200) {
|
|
this.courseDataList = res.result;
|
|
}
|
|
})
|
|
},
|
|
loadAuthorInfo(list, ids) {
|
|
//加载作者信息，头像，机构信息
|
|
if (ids.length == 0) {
|
|
return;
|
|
}
|
|
const noReapetIds = [...new Set(ids)];
|
|
apiUser.getByIds(ids).then(res => {
|
|
if (res.status == 200) {
|
|
list.forEach((item, index) => {
|
|
res.result.some(author => {
|
|
if (author.aid == item.sysCreateAid) {
|
|
item.authorInfo = author;
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
console.log('加载用户信息失败:' + res.error);
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.recommend-index{
|
|
background-color: #fff;
|
|
padding:8upx 30upx;
|
|
padding-bottom: 100upx;
|
|
.recommend-index-title{
|
|
font-size: 36upx;
|
|
font-weight: 600;
|
|
height: 40upx;
|
|
line-height: 40upx;
|
|
color: #04243C;
|
|
margin-top: 50upx;
|
|
.title-line{
|
|
display: inline-block;
|
|
width: 8upx;
|
|
height: 28upx;
|
|
background: #387DF7;
|
|
border-radius: 8upx;
|
|
margin-right: 12upx;
|
|
}
|
|
.tetle-text{
|
|
float: right;
|
|
font-size: 24upx;
|
|
color: #6E7B84;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.ranking-list{
|
|
.list-box{
|
|
// width: 1720upx;
|
|
margin-top: 30upx;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
}
|
|
.list-box-index:nth-child(1){
|
|
background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
|
|
background-position: 0 0;
|
|
}
|
|
.list-box-index:nth-child(2){
|
|
background: url(../../static/images/ranking/list-or.png) no-repeat 100% / 100%;
|
|
background-position: 0 -1px;
|
|
}
|
|
.list-box-index:nth-child(3){
|
|
background: url(../../static/images/ranking/list-pink.png) no-repeat 100% / 100%;
|
|
background-position: 0 0;
|
|
}
|
|
.list-box-index{
|
|
width: 560upx;
|
|
min-width: 560upx;
|
|
height: 332upx;
|
|
box-sizing: border-box;
|
|
border-radius: 24upx;
|
|
border: 2upx solid #E4EAEF;
|
|
padding: 34upx 30upx;
|
|
// background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
|
|
// background-position: 0 0;
|
|
margin-right: 20upx;
|
|
|
|
.list-box-title{
|
|
font-size: 32upx;
|
|
font-weight: 600;
|
|
color: #04243C;
|
|
margin-bottom: 4upx;
|
|
}
|
|
.list-box-text{
|
|
margin-top: 26upx;
|
|
font-size: 28upx;
|
|
color: #39424C;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;-webkit-line-clamp: 1;
|
|
word-break:break-all;
|
|
}
|
|
}
|
|
}
|
|
.articl-recommend{
|
|
.articl-box{
|
|
margin-top: 28upx;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
.articl-box-index{
|
|
width: 560upx;
|
|
border-radius: 24upx;
|
|
border: 2upx solid #E4EAEF;
|
|
margin-right: 20upx;
|
|
.box-index{
|
|
padding: 30upx;
|
|
.box-index-title{
|
|
font-size: 32upx;
|
|
font-weight: 600;
|
|
color: #39424C;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;-webkit-line-clamp: 2;
|
|
word-break:break-all;
|
|
}
|
|
.box-index-authr{
|
|
margin-top: 30upx;
|
|
font-size: 28upx;
|
|
color: #6E7B84;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.qa-recommend{
|
|
.qa-box{
|
|
margin-top: 32upx;
|
|
margin-bottom: 60upx;
|
|
|
|
.qa-box-index{
|
|
background: url(../../static/images/ranking/qa-bg.png) no-repeat 100% / 100%;
|
|
background-position: 0 0;
|
|
margin-right: 20upx;
|
|
width: 560upx;
|
|
min-width: 560upx;
|
|
border: 2upx solid #E4EAEF;
|
|
border-radius: 24upx;
|
|
padding: 30upx;
|
|
box-sizing: border-box;
|
|
.box-index-title{
|
|
font-size: 32upx;
|
|
font-weight: 600;
|
|
color: #02233C;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;-webkit-line-clamp: 2;
|
|
word-break:break-all;
|
|
}
|
|
.box-index-authr{
|
|
margin-top: 30upx;
|
|
margin-bottom: 20upx;
|
|
/deep/.author-name{
|
|
color: #39424C !important;
|
|
}
|
|
}
|
|
.box-index-text{
|
|
font-size: 28upx;
|
|
color: #6E7B84;
|
|
margin-bottom: 10upx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
display: -webkit-box;-webkit-line-clamp: 2;
|
|
word-break:break-all;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|