114 lines
2.5 KiB
Vue
114 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<unitv-page
|
||
|
|
id="mineCurriculumPage"
|
||
|
|
ref="mineCurriculumPage"
|
||
|
|
class="mineCurriculumPage"
|
||
|
|
:show="true"
|
||
|
|
>
|
||
|
|
<app-header />
|
||
|
|
<view class="content">
|
||
|
|
<view class="tabs">
|
||
|
|
<unitv-zone
|
||
|
|
id="tabs_zone"
|
||
|
|
class="tabs_zone"
|
||
|
|
:auto-fous="true"
|
||
|
|
:right="tabsZoneRight"
|
||
|
|
:item="currentTab"
|
||
|
|
:values="tabs"
|
||
|
|
:column="1"
|
||
|
|
:row="tabs.length"
|
||
|
|
>
|
||
|
|
<unitv-item
|
||
|
|
v-for="(item, index) in tabs"
|
||
|
|
:key="index"
|
||
|
|
:item="index"
|
||
|
|
class="item"
|
||
|
|
@hover="fnHoverTabs"
|
||
|
|
>
|
||
|
|
<view class="title">{{ item.name }}</view>
|
||
|
|
</unitv-item>
|
||
|
|
</unitv-zone>
|
||
|
|
</view>
|
||
|
|
<view style="flex: 1; margin-left: 33rpx">
|
||
|
|
<all v-if="currentTab === 0" />
|
||
|
|
<learning v-if="currentTab === 1" />
|
||
|
|
<completed-learning v-if="currentTab === 2" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</unitv-page>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import All from "./all.vue";
|
||
|
|
import Learning from "./learning.vue";
|
||
|
|
import CompletedLearning from "./completed_learning.vue";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
All,
|
||
|
|
Learning,
|
||
|
|
CompletedLearning,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabs: [{ name: "全部" }, { name: "学习中" }, { name: "已学完" }],
|
||
|
|
currentTab: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(query) {
|
||
|
|
this.currentTab = query.tabIndex ? +query.tabIndex : 0;
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
if (this.$refs.mineCurriculumPage) {
|
||
|
|
this.$refs.mineCurriculumPage.showPage();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
tabsZoneRight() {
|
||
|
|
if (this.currentTab === 0) return "mine_curriculum_all_first_zone";
|
||
|
|
if (this.currentTab === 1) return "mine_curriculum_learning_first_zone";
|
||
|
|
if (this.currentTab === 2)
|
||
|
|
return "mine_curriculum_completed_learning_first_zone";
|
||
|
|
return "";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fnHoverTabs(item) {
|
||
|
|
this.currentTab = item;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.content {
|
||
|
|
margin-top: 19rpx;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.tabs {
|
||
|
|
width: 94rpx;
|
||
|
|
|
||
|
|
.tabs_zone {
|
||
|
|
font-size: 14rpx;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-top: 5rpx;
|
||
|
|
background-color: transparent;
|
||
|
|
border-radius: 34rpx;
|
||
|
|
padding: 6rpx 18rpx;
|
||
|
|
|
||
|
|
&.hover {
|
||
|
|
background-color: #254eff;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
background-color: rgba(37, 78, 255, 0.39);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|