hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-06 17:36:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

首页推荐接口对接

Browse Source
This commit is contained in:
zhaofang
2022-11-09 14:06:13 +08:00
parent 5559d0a227
commit 7edbcfa743
7 changed files with 290 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
components/recommend-index/recommend-index.vue
View File

@@ -7,25 +7,28 @@
<view class="recommend-index-title">
<text class="title-line"></text>
热门课程推荐
<text class="tetle-text">查看更多</text>
<!-- <text class="tetle-text">查看更多</text> -->
</view>
<view class="course-re-list">
<view class="course-re-index" v-for="course in 6">
<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>
4.9分</text>
<image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image>
{{converToScore(course.score)}}分</text>
<course-image :course="course" width="332upx" height="192upx"></course-image>
<!-- <image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image> -->
</view>
<view class="course-title">
零基础后期课程
{{course.name}}
</view>
<view class="course-text">
京小方 | 800+人已学
{{course.sysCreateBy}} | {{course.studys}}人已学
</view>
<view class="course-type">
<text class="type-index">通用力</text>
<text class="type-index">产品经理</text>
<!-- <text class="type-index">通用力</text>
<text class="type-index">产品经理</text> -->
<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>
@@ -40,36 +43,36 @@
</view>
<view class="list-box">
<view class="list-box-index">
<view class="list-box-title">
<view class="list-box-title course-bg-info">
课程排行榜
</view>
<view class="list-box-text" v-for="(list,index) in 3">
<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>BOE京东方位列世界知识产权组织202…</text>
<text>{{cou.name}}</text>
</view>
</view>
<view class="list-box-index">
<view class="list-box-title">
<view class="list-box-title art-bg-info">
热门文章排行榜
</view>
<view class="list-box-text" v-for="(list,index) in 3">
<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>BOE京东方位列世界知识产权组织202…</text>
<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">
<view class="list-box-title qa-bg-info">
热门问答排行榜
</view>
<view class="list-box-text" v-for="(list,index) in 3">
<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>BOE京东方位列世界知识产权组织202…</text>
<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>
@@ -78,18 +81,20 @@
<view class="recommend-index-title">
<text class="title-line"></text>
热门文章推荐
<text class="tetle-text">查看更多</text>
<!-- <text class="tetle-text">查看更多</text> -->
</view>
<view class="articl-box">
<view class="articl-box-index" v-for="ar in 4">
<image style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" src="../../static/images/course.png" mode=""></image>
<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">
这里是标题字节显示效果图片放大至120，卡片浮影加深展示最多字…
<view class="box-index-title" style="height:90upx">
{{ar.title}}
</view>
<view class="box-index-authr">
<image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
学习小助手
<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>
@@ -99,20 +104,21 @@
<view class="recommend-index-title">
<text class="title-line"></text>
热门问答推荐
<text class="tetle-text">查看更多</text>
<!-- <text class="tetle-text">查看更多</text> -->
</view>
<view class="qa-box" style="display: flex;overflow-x: auto;">
<view class="qa-box-index" v-for="ar in 4">
<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">
<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;">「最热答案」</text>
<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">
智慧物联是利用互联网进行的运营方式,还是其他用互联网进行的运，2021年…
{{qa.content}}
</view>
</view>
</view>
@@ -122,14 +128,173 @@
</template>
<script>
import apiIndex from '@/api/phase2/index.js';
import { mapGetters,mapActions} from 'vuex';
import apiUser from '@/api/system/user.js';
import {toScore} from '@/utils/tools.js'
export default {
data() {
return {
fileUrl:this.$config.fileUrl,
arlDataList:[],
qaDataList:[],
courseDataList:[],
qaRankingList:[],
arlRankingList:[],
courseRankingList:[],
converToScore:toScore,
}
},
computed: {
...mapGetters(['userInfo','sysTypeMap'])
},
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'
}),
sysTypeName(code){
if(code=='' || code==0){return '';}
return this.sysTypeMap.get(code);
},
//问答排行榜
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.articlelist(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);
console.log(this.qaDataList,'this.qaDataList')
}
})
},
// 推荐课程
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>
@@ -164,8 +329,11 @@
.course-re-list{
display: flex;
flex-wrap: wrap;
margin-top: 20upx;
.course-re-index{
padding: 15upx 0;
width: 335upx;
min-width: 335upx;
&:nth-child(2n-1){
margin-right: 20upx;
}
@@ -174,20 +342,24 @@
height: 188upx;
border-radius: 16upx;
position: relative;
/deep/ uni-image {
border-radius: 8upx;
}
.img-score{
display: inline-block;
padding: 7upx 15upx;
box-sizing: border-box;
position: absolute;
right:0;
bottom: 0;
right:2upx;
bottom: -2upx;
color: #FFFFFF;
font-size: 28upx;
z-index: 99999;
width: 136upx;
height: 44upx;
background: #1767FF;
// background: ;
background: rgba($color: #1767FF, $alpha: 0.2);
// background: rgba($color: #1767FF, $alpha: 0.2);
border-radius: 24upx 0px 0px 0px;
backdrop-filter: blur(20px);
}
@@ -196,6 +368,14 @@
margin-top: 20upx;
font-size: 28upx;
color: #39424C;
display: -webkit-box;
word-break:break-all;
// white-space:pre-wrap;
overflow: hidden;
// text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
}
.course-text{
margin-top: 20upx;
@@ -210,7 +390,15 @@
background: rgba($color: #387DF7, $alpha: 0.1);
border-radius: 8upx;
margin-right: 12upx;
padding: 2upx 6upx;
padding: 2upx 12upx;
}
.type-tow{
font-size: 22upx;
color: #D98135;
background: rgba($color: #FF7900, $alpha: 0.1);
border-radius: 8upx;
margin-right: 12upx;
padding: 4upx 12upx;
}
}
}
@@ -223,6 +411,18 @@
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;
@@ -231,8 +431,8 @@
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;
// background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
// background-position: 0 0;
margin-right: 20upx;
.list-box-title{
@@ -312,6 +512,9 @@
.box-index-authr{
margin-top: 30upx;
margin-bottom: 20upx;
/deep/.author-name{
color: #39424C !important;
}
}
.box-index-text{
font-size: 28upx;