From 70b14ab53a2352959772d1b2332abb80833c1e95 Mon Sep 17 00:00:00 2001
From: zhaofang <752743406@qq.com>
Date: Tue, 8 Nov 2022 18:13:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=AF=BE=E7=A8=8B=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/course-image/course-image.vue | 58 +++--
components/data-filter/data-filter.vue | 6 +-
pages/index/index.vue | 302 ++++++++++-------------
static/images/filter.png | Bin 820 -> 249 bytes
store/getters.js | 1 +
store/index.js | 4 +-
store/modules/sysType.js | 94 +++++++
7 files changed, 256 insertions(+), 209 deletions(-)
create mode 100644 store/modules/sysType.js
diff --git a/components/course-image/course-image.vue b/components/course-image/course-image.vue
index daae040..9008200 100644
--- a/components/course-image/course-image.vue
+++ b/components/course-image/course-image.vue
@@ -7,10 +7,10 @@
mode="aspectFit "
:src="imageUrl"
@error="imageError">
-
+
+ -->
+
@@ -118,31 +118,35 @@
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
+ font-size: 1em;
+ top: 36%;
+ left: 7%;
+ -webkit-line-clamp: 2;
}
- .mid{
- font-size: 16upx;
- top: 36%;
- left: 7%;
- -webkit-line-clamp: 1;
- }
- .mini{
- font-size: 12upx;
- top: 36%;
- left: 7%;
- -webkit-line-clamp: 2;
- }
- .max{
- font-size: 38upx;
- top: 36%;
- left: 7%;
- -webkit-line-clamp: 3;
- }
- .end{
- font-size: 12upx;
- top: 36%;
- left: 7%;
- -webkit-line-clamp: 2;
- }
+ // .mid{
+ // font-size: 3em;
+ // top: 36%;
+ // left: 7%;
+ // -webkit-line-clamp: 1;
+ // }
+ // .mini{
+ // font-size: 3em;
+ // top: 36%;
+ // left: 7%;
+ // -webkit-line-clamp: 2;
+ // }
+ // .max{
+ // font-size: 3em;
+ // top: 36%;
+ // left: 7%;
+ // -webkit-line-clamp: 3;
+ // }
+ // .end{
+ // font-size: 3em;
+ // top: 36%;
+ // left: 7%;
+ // -webkit-line-clamp: 2;
+ // }
}
diff --git a/components/data-filter/data-filter.vue b/components/data-filter/data-filter.vue
index 9dd40be..b6a2d2d 100644
--- a/components/data-filter/data-filter.vue
+++ b/components/data-filter/data-filter.vue
@@ -1,8 +1,8 @@
-
- 筛选
-
+
+
+
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8de46be..b412c96 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,5 @@
-
+
@@ -37,9 +37,9 @@
-
+
+
+
@@ -47,15 +47,15 @@
-
+
-
+
-
-
-
-
- 录播
- 录播
- 录播
- 线下课
- 学习项目
-
+
+
+
+
+
+
+ {{converToScore(c.score)}}分
+
-
-
-
+
+
-
-
- {{c.teacher}}
-
-
-
-
-
-
-
- {{c.studies}}
-
- 人学习
-
-
- {{converToScore(c.score)}}分
-
-
-
-
-
-
-
+
+
+ {{c.teacher}} | {{c.studies}}人已学
+
+
+ {{sysTypeName(c.sysType1)}}
+ {{sysTypeName(c.sysType2)}}
+
+
+
+
+
@@ -215,6 +201,7 @@
import apiMessage from '@/api/system/message.js'
import {toScore} from '@/utils/tools.js'
import apiBoeCourse from '@/api/boe/course.js'
+ import { mapGetters,mapActions} from 'vuex';
export default {
data(){
return {
@@ -258,6 +245,9 @@
totalPages:1,
}
},
+ computed: {
+ ...mapGetters(['userInfo','sysTypeMap'])
+ },
onPullDownRefresh() {
this.onReachBottom();
},
@@ -340,9 +330,21 @@
}
}
- this.findCourseData();
+ this.getSysTypeTree();
+ this.findCourseData();
+ this.loadSysTypes();
},
methods: {
+ ...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);
+ },
closeSignDlg(){
this.signInShow=false;
},
@@ -774,6 +776,83 @@
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: 8upx;
+ margin-right: 12upx;
+ padding: 4upx 12upx;
+ }
+ .type-tow{
+ font-size: 22upx;
+ color: #D98135;
+ background: rgba($color: #FF7900, $alpha: 0.1);
+ border-radius: 8upx;
+ margin-right: 12upx;
+ padding: 4upx 12upx;
+ }
+ }
+ }
+
+ }
.con_box {
margin-bottom: 10px;
background-color: #FFFFFF;
@@ -786,125 +865,6 @@
margin-bottom: 10upx;
}
}
- .course {
- .course-img {
- display: flex;
- align-items: center;
- /deep/ .course-left{
- width: 262upx;
- height: 147upx;
- margin-top: 4upx;
- position: relative;
- margin-right: 10rpx;
- uni-image {
- // width: 152upx;
- // height: 88upx;
- border-radius: 16upx;
- }
- }
- .con-con {
- // display: flex;
- flex-direction: column;
- font-size: 14px;
- color: #444444;
- padding-left: 10upx;
- margin-top: 3px;
- margin-bottom: 6px;
- display: -webkit-box;
- // white-space:pre-wrap;
- overflow: hidden;
- // text-overflow:ellipsis;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- box-sizing: border-box;
-
- }
- .con-au {
- display: flex;
- justify-content: space-between;
- // padding-top: 20upx;
-
- image {
- border-radius: 50%;
- }
- /deep/ .item-author{
- >view:nth-of-type(1){
- display:none
- }
- >view:nth-of-type(2){
- padding-left:0!important;
- }
- }
- }
- .im {
- width: 50upx;
- height: 50upx;
- margin-right: 8upx;
- }
- .tet {
- font-size: 12px;
- color: #666666;
- padding-top: 10upx;
- }
- .coures-conent{
- margin-left: 10px;
- // padding: 10upx 10upx 0 15upx;
- display: flex;
- flex-direction:column;
- justify-content: space-between;
- flex: 1;
- // overflow: hidden;
- height: 147upx;
- .conent-title{
- width: 199px;
- font-size: 32upx;
- color: #333;
- font-weight: bold;
- white-space:nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .stu-f {
- font-size: 28upx;
- color: #FFB30F;
- font-weight: 500;
- // margin-top: 5upx;
- }
- .statuy-ren{
- font-size: 24upx;
- color: #999999;
- display: flex;
- justify-content: space-between;
- align-items: center;
- // font-size: 25upx;
- .statuy-score{
- color: #FFB30F;
- font-weight: 500;
- }
- }
- // height: 100%;
- }
-
- }
- .stu_c {
- display:flex;
- justify-content: space-between;
- .stu_e {
- margin-top: 10upx;
- display: flex;
- font-size: 12px;
- color: #666666;
- }
- .stu_e :nth-child(2) {
- margin-left: 40upx;
- }
- .stu-f {
- font-size: 20upx;
- color: #FFB30F;
- font-weight: 500;
- }
- }
- }
.article {
// height: 264upx;
margin-bottom: 10px;
@@ -1181,20 +1141,6 @@
}
}
}
- .course-type{
- position:absolute;
- bottom: 8px;
- right: -1px;
- text-align: center;
- line-height: 15px;
- background-color: #7f7f7f;
- font-size: 10px;
- opacity: 0.7;
- color: #FFFFFF;
- z-index: 88;
- padding: 1px 5px;
- border-radius: 10px 0px 0px 10px;
- }
.empty{
text-align: center;
padding-top: 100px;
diff --git a/static/images/filter.png b/static/images/filter.png
index 248201499dda19d648435c071b28171a1b4d6f4d..15f66b8eb27f195e6bdb3d1345eb149504f1126a 100644
GIT binary patch
literal 249
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbB7>k44ofy`glX(f`Z1!|<42f`0
zPLW7yD4ejfz479ad)Gg||Nnop#6RN`JS!ecNX|1bHdD_IVLR}EeA5D2zn_kR&+6F$%r;E`j?!NVsZ4$0g3rF-S?^Q_r(4x3$+O>DoT^P)+?+cCI0Poi`#L-8x3I-tb?l$_
wIwQB=df}vt4$4zrz0|dj;uGZh=qT>Q5R({LEW*0J8R&clPgg&ebxsLQ0BZ_j7ytkO
literal 820
zcmV-41Izr0P)Px%?ny*JRA@u(m%nQiQ4q(!vqdWZ0PQT)LhWo+QYhG}82p7Xs3cfuii7N%caYdf
zQoQ%>A^}r~iDEF~4~(ETHd;kNYy=er(OUliyStG+-oX`jxwp5QTmpOT&dhf{?>lq*
zmaxTtw8i^J0nl#;3kNo>1C>f;Z@peu0FD6I*^fp=JKAXw`=iDI?d7mVS$fDMIY$GA8wRZtDG>Pc2QtCr0fF#&CcR@s!ec~K5
zmo@^z7;}q=8d^j&tdx4xNw@2Jz!)=1L<_#aG&A2=PYCDSO%Z8mh{%}MdT}kit^i50
zwe~uI+x|q#N-47*5Y}1-(5yYq%=6uJf&h{t#+V5rs`!FI#k+~OJ~zf(BcevbA`)w@
zt0DQp0DdPXMP%BGT-I7Y2odQPV~iOgq9yO}lu~M@TTb(NDgf`qG!aeu0;iezd8k;s
zIOp6c5n1tvGNZMgN>eX2fZvH^lqN*vpNI^V%jGv|M4PeBxnuQu{RI(i15jn=IBlJt
z06avp)X8%H1u(?St7*iIF$be4S`m>Q0Opx_JWYPjBh)J5oLdl)Q4#s&o%kHmgmZ4c
zADi7ow5XKo`6b!21IVEHNv-wEtopeCRIAlJwOZ{5
zfR6X}mXZ6Nd>{=B3~VozN`E#5fOjGJen6*tdka8NTqsyB4io^P$K58ba3Jk$TWgCQ
zXq}{Dgo+W$@DG&RRibzgWN@Ka;$n$2j8DIo_?^GC9?jT$BYnenAdjZ|`X=7Y0J)Av
yC}?gY6e^f^Tmg{xiKeYrIFR state.study.studyTab,
userMsg:state => state.user.msg,
isOneStady:state => state.user.isOneStady,
+ sysTypeMap:state => state.sysType.sysTypeMap,
}
export default getters
diff --git a/store/index.js b/store/index.js
index 3c1809d..aaf33cb 100644
--- a/store/index.js
+++ b/store/index.js
@@ -4,6 +4,7 @@ import user from './modules/user'
import resource from './modules/resource'
import study from './modules/study'
import getters from './getters'
+import sysType from './modules/sysType'
Vue.use(Vuex)
@@ -12,7 +13,8 @@ const store = new Vuex.Store({
modules: {
user,
resource,
- study
+ study,
+ sysType
},
getters
})
diff --git a/store/modules/sysType.js b/store/modules/sysType.js
new file mode 100644
index 0000000..3b52588
--- /dev/null
+++ b/store/modules/sysType.js
@@ -0,0 +1,94 @@
+import {getToken} from '@/utils/token'
+import apiType from '../../api/modules/type.js'
+
+const state={
+ sysTypeTree: [], //内容类型
+ sysTypeMap:null
+ }
+
+const mutations={
+ setSysTypeTree: (state, tree) => {
+ state.sysTypeTree = tree
+ },
+ setSysTypeMap: (state, map) => {
+ state.sysTypeMap = map
+ },
+ }
+ const actions={
+ getSysTypeTree({commit}) {
+ return new Promise((resolve,reject)=>{
+ if(state.sysTypeTree.length>0){
+ resolve(state.sysTypeTree);
+ }else{
+ let hasData = sessionStorage.getItem('sysTypeTree');
+ if(hasData){
+ let treeData = JSON.parse(hasData);
+ commit('setSysTypeTree', treeData);
+ resolve(treeData);
+ }else{
+ apiType.tree(1).then(res=>{
+ if(res.status === 200) {
+ sessionStorage.setItem('sysTypeTree',JSON.stringify(res.result));
+ commit('setSysTypeTree', res.result);
+ //转化为map放到状态中
+ let map=new Map();
+ res.result.forEach(item=>{
+ map.set(item.id, item.name);
+ if(item.children && item.children!=''){
+ item.children.forEach(child=>{
+ map.set(child.id, child.name);
+ if(child.children && child.children!=''){
+ child.children.forEach(last=>{
+ map.set(last.id, last.name);
+ })
+ }
+ })
+ }
+ });
+ commit('setSysTypeMap', map);
+ resolve(res.result)
+ } else {
+ reject('资源归属获取失败！');
+ }
+ })
+ }
+ }
+ });
+ },
+ loadSysTypes(context){
+ if(state.sysTypeMap==null){
+ let hasData = sessionStorage.getItem('sysTypeMap');
+ if(hasData){
+ hasData=JSON.parse(hasData);
+ }
+ if(hasData && hasData.length>10){
+ let map=new Map();
+ hasData.forEach(item=>{
+ map.set(item.id, item.name);
+ });
+ context.commit('setSysTypeMap',map);
+ }else{
+ apiType.list(1,'').then(res=>{
+ if(res.status === 200) {
+ let map=new Map();
+ res.result.forEach(item=>{
+ map.set(item.id, item.name);
+ });
+ //console.log(map,map);
+ sessionStorage.setItem('sysTypeMap',JSON.stringify(res.result));
+ context.commit('setSysTypeMap', map);
+ } else {
+ console.log('内容分类获取失败！');
+ }
+ });
+ }
+ }
+ }
+}
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions
+}