171 lines
4.4 KiB
Vue
171 lines
4.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar :title="pageTitle ? pageTitle : '课程中心'"></z-nav-bar>
|
||
<view class="containerBg1">
|
||
<!-- <view class="containerBg"> -->
|
||
<view class="coursePart flexbox" v-if="tabList.length > 1">
|
||
<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in tabList"
|
||
:key="index" @click="clicklib(item,index)">
|
||
<!-- <u-icon v-if="item.isBuy == 0 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon> -->
|
||
<!-- <u-icon v-if="item.isBuy == 0 && curId != item.id" name="lock" color="#fff" size="28"></u-icon> -->
|
||
<view class="">{{item.title}}</view>
|
||
</view>
|
||
</view>
|
||
<view :class="['courseList',fold ? 'fold' : '']" v-if="courseList.length > 0">
|
||
<!-- 目录是否已经购买 -->
|
||
<!-- 0:普通 1超级 2医学 3国学 -->
|
||
<view class="endBox" v-if="tabList[curIndex].isBuy == 1 && userMsg.vip == '0'">
|
||
<view class="" >
|
||
<view class="flexbox" v-if="tabList[curIndex].startTime == null">
|
||
<text >当前目录还未开始学习</text><uni-tag type="warning" text="去学习" @click="goToLearn()"></uni-tag>
|
||
</view>
|
||
<view class="flexbox" v-else>
|
||
<text >课程观看有效期截止到：{{tabList[curIndex].endTime}} </text><uni-tag type="primary" @click="goToLearn()" text="继续学习"></uni-tag>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
|
||
<text>{{item.title}}</text>
|
||
<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
|
||
size="mini" type="primary" />
|
||
</view>
|
||
</view>
|
||
<u-divider v-else text="暂无数据"></u-divider>
|
||
|
||
<view>
|
||
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
|
||
:iconStyle="iconStyle"></u-back-top>
|
||
</view>
|
||
<!-- </view> -->
|
||
<!-- 评论弹出 -->
|
||
<public-module></public-module>
|
||
<z-navigation></z-navigation>
|
||
<!-- <music-play :playData="playData"></music-play> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import musicPlay from '@/components/music.vue'
|
||
import commentsList from '@/components/commentsList.vue'
|
||
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
|
||
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
|
||
import $http from '@/config/requestConfig.js';
|
||
var clear;
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
playData: {},
|
||
// fixed: false,
|
||
bgiStyle: {
|
||
background: '#fff'
|
||
},
|
||
iconStyle: {
|
||
fontSize: '40rpx',
|
||
fontWeight: 'bold',
|
||
color: '#258feb',
|
||
},
|
||
userMsg: {}, // 用户信息
|
||
scrollTop: 0,
|
||
activeStyle: {
|
||
color: '#333',
|
||
fontWeight: 'bold',
|
||
transform: 'scale(1.2)',
|
||
// backgroundColor: '#258feb'
|
||
|
||
},
|
||
scrollable: false,
|
||
pageTitle: null,
|
||
courseList: [],
|
||
|
||
tabList: [{id:1, name:'我的课程'},{id:2, name:'在学习'},{id:3, name:'已过期'}], // 目录列表
|
||
curId: null,
|
||
curIndex: 0,
|
||
|
||
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||
// this.pageTitle = e.title
|
||
console.log(e, '传入分类id')
|
||
this.getUserInfo()
|
||
// this.courseId = e.id
|
||
// this.getCateList(this.courseId)
|
||
// this.getData(e.id)
|
||
// this.getSayList()
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
if (this.scrollTop > 500) {
|
||
this.fixed = true
|
||
} else {
|
||
this.fixed = false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
|
||
},
|
||
onReachBottom() {
|
||
console.log('触底');
|
||
if (this.status != 2) {
|
||
this.pPage++
|
||
this.getSayList()
|
||
}
|
||
},
|
||
components: {
|
||
// musicPlay
|
||
emotion,
|
||
// commentsList
|
||
|
||
},
|
||
//方法
|
||
methods: {
|
||
getUserInfo() {
|
||
// 用户详情
|
||
// if (this.userInfo.id != undefined) {
|
||
this.$http
|
||
.post('book/user/info/' + this.userInfo.id)
|
||
.then(res => {
|
||
this.userMsg = res.user
|
||
});
|
||
// }
|
||
},
|
||
|
||
// 跳转
|
||
onPageJump(url,id) {
|
||
uni.navigateTo({
|
||
url: `${url}?id=${id}`
|
||
});
|
||
},
|
||
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
|
||
.imgcontainer {
|
||
background-color: $imgBg;
|
||
}
|
||
</style> |