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:28:20 +08:00
parent 7edbcfa743
commit 43fbfb9674
3 changed files with 155 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
components/course-list/course-list.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<view class="course-re-list">
<view class="course-re-index" v-for="course in items" :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>
<!-- <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">
{{course.teacher || 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>
</template>
<script>
import { mapGetters,mapActions} from 'vuex';
import {toScore} from '@/utils/tools.js'
export default {
props:{
items:{
type:Array,
},
},
computed: {
...mapGetters(['userInfo','sysTypeMap'])
},
data() {
return {
converToScore:toScore,
}
},
methods: {
sysTypeName(code){
if(code=='' || code==0){return '';}
return this.sysTypeMap.get(code);
},
//课程跳转详情
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
});
}
}
},
}
}
</script>
<style scoped lang="scss">
.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;
}
.course-img{
width: 335upx;
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: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);
border-radius: 24upx 0px 0px 0px;
backdrop-filter: blur(20px);
}
}
.course-title{
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;
font-size: 28upx;
color: #6E7B84;
}
.course-type{
margin-top: 20upx;
.type-index{
font-size: 22upx;
color: #6E7B84;
background: rgba($color: #387DF7, $alpha: 0.1);
border-radius: 16upx;
margin-right: 12upx;
padding: 2upx 12upx;
}
.type-tow{
font-size: 22upx;
color: #D98135;
background: rgba($color: #FF7900, $alpha: 0.1);
border-radius: 16upx;
margin-right: 12upx;
padding: 4upx 12upx;
}
}
}
}
</style>

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

@@ -4,19 +4,19 @@
<image style="width: 100%;height:301upx" src="../../static/images/banner-index.png" mode=""></image>
</view>
<view class="course-re">
<view class="recommend-index-title">
<view class="recommend-index-title" style="margin-bottom: 20upx;">
<text class="title-line"></text>
热门课程推荐
<!-- <text class="tetle-text">查看更多</text> -->
</view>
<view class="course-re-list">
<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>
<!-- <image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image> -->
</view>
<view class="course-title">
{{course.name}}
@@ -25,13 +25,11 @@
{{course.sysCreateBy}} | {{course.studys}}人已学
</view>
<view class="course-type">
<!-- <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>
</view> -->
</view>
<view style="margin:30upx 0 60upx 0">
<image style="width: 100%;height:220upx" src="../../static/images/banner-tow.png" mode=""></image>
@@ -131,7 +129,6 @@
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 {
@@ -142,11 +139,10 @@
qaRankingList:[],
arlRankingList:[],
courseRankingList:[],
converToScore:toScore,
}
},
computed: {
...mapGetters(['userInfo','sysTypeMap'])
...mapGetters(['userInfo'])
},
mounted(){
this.getCourseData();
@@ -195,10 +191,6 @@
getSysTypeTree:'sysType/getSysTypeTree',
loadSysTypes:'sysType/loadSysTypes'
}),
sysTypeName(code){
if(code=='' || code==0){return '';}
return this.sysTypeMap.get(code);
},
//问答排行榜
getQaRanking(){
apiIndex.qaAnswers(3).then(res=>{
@@ -253,7 +245,6 @@
})
this.qaDataList = res.result;
this.loadAuthorInfo(res.result,ids);
console.log(this.qaDataList,'this.qaDataList')
}
})
},
@@ -326,84 +317,6 @@
font-weight: 400;
}
}
.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;
}
.course-img{
width: 335upx;
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: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);
border-radius: 24upx 0px 0px 0px;
backdrop-filter: blur(20px);
}
}
.course-title{
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;
font-size: 28upx;
color: #6E7B84;
}
.course-type{
margin-top: 20upx;
.type-index{
font-size: 22upx;
color: #6E7B84;
background: rgba($color: #387DF7, $alpha: 0.1);
border-radius: 8upx;
margin-right: 12upx;
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;
}
}
}
}
.ranking-list{
.list-box{
// width: 1720upx;

134
pages/index/index.vue
View File

@@ -46,7 +46,7 @@
</view>
<!--内容列表区域,采用同一个列表，只是根据不同的选项来查询内容的结果不一样-->
<view v-if="conType == 1" style="background-color: #fff;">
<view v-if="conType == 1" style="background-color: #fff;padding: 0 30upx;">
<!-- <view class="tags" v-if="dataFilter.courseTags.length>0">
<u-scroll-list :indicator="false">
<view v-for="(tag, tagIdx) in dataFilter.courseTags" :key="tagIdx" >
@@ -69,30 +69,7 @@
</view>
</view> -->
<!-- 课程列表 -->
<view class="course-re-list">
<view v-for="(c,cidx) in courseList" :key="cidx" class="course-re-index" @click="toCourseDetail(c)">
<!-- <view @click="toCourseDetail(c)"> -->
<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(c.score)}}分</text>
<course-image :course="c" width="332upx" height="192upx"></course-image>
</view>
<view class="course-title">
<view v-html="c.name">
</view>
</view>
<view class="course-text">
{{c.teacher}} | {{c.studies}}人已学
</view>
<view class="course-type">
<text class="type-index" v-if="sysTypeName(c.sysType1) != ''">{{sysTypeName(c.sysType1)}}</text>
<text class="type-tow" v-if="sysTypeName(c.sysType2) != ''">{{sysTypeName(c.sysType2)}}</text>
</view>
<!-- </view> -->
</view>
</view>
<course-list :items="courseList"></course-list>
</view>
<!-- 文章 -->
<view>
@@ -558,24 +535,6 @@
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
});
}
}
},
toMessage() {
uni.navigateTo({
url: '/pages/my/message'
@@ -774,95 +733,6 @@
font-size: 32rpx;
text-align: center;
padding: 5upx 10upx 0upx 0upx;
}
.course-re-list{
padding: 30upx;
display: flex;
flex-wrap: wrap;
.course-re-index{
width: 335upx;
min-width: 335upx;
padding: 15upx 0;
&:nth-child(2n-1){
margin-right: 20upx;
}
.course-img{
width: 335upx;
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:2upx;
bottom: -2px;
color: #FFFFFF;
font-size: 28upx;
z-index: 99;
width: 136upx;
height: 44upx;
background: #1767FF;
// background: rgba($color: #1767FF, $alpha: 0.2);
border-radius: 24upx 0px 4upx 0px;
backdrop-filter: blur(20px);
}
}
.course-title{
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;
font-size: 28upx;
color: #6E7B84;
}
.course-type{
margin-top: 20upx;
.type-index{
font-size: 22upx;
color: #6E7B84;
background: rgba($color: #387DF7, $alpha: 0.1);
border-radius: 16upx;
margin-right: 12upx;
padding: 4upx 12upx;
}
.type-tow{
font-size: 22upx;
color: #D98135;
background: rgba($color: #FF7900, $alpha: 0.1);
border-radius: 16upx;
margin-right: 12upx;
padding: 4upx 12upx;
}
}
}
}
// .con_box {
// margin-bottom: 10px;
// background-color: #FFFFFF;
// padding: 10px 15px;
// // margin-top: 10px;
// .tit {
// font-size: 32rpx;
// color: #4c4c4c;
// font-weight: 35upx;
// margin-bottom: 10upx;
// }
}
.tab-article{
padding: 30upx;