<template>
|
<view class="flex-col group">
|
<view class="flex-col">
|
<view class="section_1">
|
<view class="left_tab_bar">
|
<u-tabs name="name" ref="uTabs" height="50" active-color="#FF960C" inactive-color="#666666"
|
duration="0.2" :list="treeDataF" :current="currentF" @change="currentFChange" :is-scroll="true">
|
</u-tabs>
|
</view>
|
<view class="flex-col group_1">
|
<view class="flex-row section_2" @tap="show = true">
|
<image src="/static/remote/583cec43cd3b95db50eda7f0b7ba6adf.png" class="image_1" />
|
<text>筛选</text>
|
</view>
|
</view>
|
<u-popup v-model="show" mode="bottom" height="70%" :closeable="true">
|
<view class="pop_bg">
|
<view class="title">分类筛选</view>
|
<view class="main">
|
<scroll-view scroll-y scroll-with-animation class="left_scroll">
|
<view v-for="(item,index) in treeDataF" :key="index" class="u-tab-item"
|
:class="index == leftSelect ? 'u-tab-item-active' : ''" @click="leftSelect = index">
|
<text class="u-line-1">{{item.name}}</text>
|
</view>
|
</scroll-view>
|
<block v-for="(item,index) in treeDataF" :key="index">
|
<scroll-view scroll-y class="right_scroll" v-if="leftSelect==index">
|
<view class="page-view">
|
<view class="thumb-box" @tap="screen(index,'')">全部</view>
|
<view class="thumb-box" v-for="son in item.children" :key="son.id"
|
@tap="screen(index,son._id)">
|
{{son.name}}
|
</view>
|
</view>
|
</scroll-view>
|
</block>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
<view class="flex-col group_2">
|
<view class="second_tabs">
|
<view class="second_tabs_item" v-for="item in treeDataS" :key="item.name"
|
:class="{select_item:currentS == item._id}" @tap="currentSChange(item._id)">
|
{{item.name}}
|
</view>
|
</view>
|
<view class="flex-col group_14">
|
<z-paging ref="paging" v-model="reCourses" @query="getCourses" :empty-view-fixed="false"
|
v-if="treeDataS.length > 0" :fixed="false" :hide-loading-more-when-no-more-by-limit="5">
|
<view class="list-item flex-row" :key="item._id" v-for="item in reCourses"
|
@click="openCourse(item._id)">
|
<u-image :src="item.thumb" :lazy-load="true" class="image_11" mode="aspectFill">
|
</u-image>
|
<view class="right-group flex-col">
|
<text class="text_11">{{ item.title }}</text>
|
<view class="center-group flex-row">
|
<view class="left-text-wrapper" :key="dynamicTag"
|
v-for="dynamicTag in item.dynamicTags">{{dynamicTag}}</view>
|
</view>
|
<view class="justify-between">
|
<text class="text_17">{{item.user_count}}人已购</text>
|
<text class="text_19">{{rightText(item)}}</text>
|
</view>
|
<text class="text_17">直播时间：{{item.published_at}}</text>
|
</view>
|
</view>
|
</z-paging>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
flag: false, // 进入页面第一次旗帜
|
|
reCourses: [], // 数据列表
|
treeDataF: [{ name: '全部', _id: '' }], // 一级分类数据
|
treeDataS: [], // 二级分类数据
|
currentF: 0, // 一级选中项
|
currentS: 0, // 二级选中项
|
|
show: false, // 筛选弹框显隐
|
leftSelect: 0, // 左侧分类选中项
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
computed: {
|
rightText() {
|
return (item) => {
|
if (vk.pubfn.isNotNull(item.isBuy)) return '已购买'
|
return '￥' + item.charge / 100
|
}
|
}
|
},
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
that.getCategories()
|
|
uni.$on('courseReload', () => {
|
that.getCourses(1, 10)
|
})
|
},
|
// 请求分类数据
|
getCategories() {
|
vk.callFunction({
|
url: 'client/course/pub/categories',
|
title: '获取分类中...',
|
success(data) {
|
let all_data = [{
|
is_show: true,
|
name: "全部",
|
sort: 0,
|
_id: ''
|
}].concat(data.rows)
|
let tree = vk.pubfn.arrayToTree(all_data, {
|
id: "_id",
|
parent_id: "parent_id",
|
children: "children"
|
});
|
that.treeDataF = tree;
|
that.setTreeDataS(0)
|
}
|
});
|
},
|
// 切换一级分类
|
currentFChange(index) {
|
this.currentF = index;
|
that.setTreeDataS(index)
|
},
|
// 一级切换时更换二级列表
|
setTreeDataS(index, sId) {
|
that.treeDataS = [{ name: '全部', _id: '' }]
|
that.currentS = sId ? sId : ''
|
if (that.treeDataF[index] && that.treeDataF[index].children) {
|
that.treeDataS = [{ name: '全部', _id: '' }, ...that.treeDataF[index].children]
|
}
|
that.currentSChange(that.currentS)
|
},
|
// 切换二级分类
|
currentSChange(id) {
|
this.currentS = id;
|
if (!that.flag) return that.flag = true
|
that.getCourses(1, 10)
|
},
|
// 获取当前分类所有课程
|
getCourses(pageNo, pageSize) {
|
// 下拉刷新时获取首页所有数据
|
let data = { pageIndex: pageNo, pageSize: pageSize }
|
if (that.currentS == '') {
|
// 为空获取一级全部
|
data.type = 1
|
if (that.treeDataF[this.currentF]._id)
|
data.category_id = that.treeDataF[this.currentF]._id
|
} else {
|
// 不为空获取对应二级
|
data.type = 2
|
data.category_id = this.currentS
|
}
|
if (uni.vk.callFunctionUtil.checkToken()) data['need_user_info'] = true
|
if (pageNo == 1) this.reCourses = []
|
vk.callFunction({
|
url: 'client/liveCourse/pub/recommend_course',
|
title: '获取课程中...',
|
data: data,
|
success(data) {
|
that.$refs.paging.complete(data.rows);
|
}
|
});
|
},
|
// 推荐课程详情
|
openCourse(id) {
|
uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/live-class-detail?_id=' + id, false);
|
},
|
// 筛选完成
|
screen(fIndex, sId) {
|
that.show = false
|
this.$nextTick(() => {
|
that.currentF = fIndex
|
that.setTreeDataS(fIndex, sId)
|
})
|
}
|
},
|
onUnload() {
|
uni.$off('courseReload')
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.group {
|
flex: 1 1 auto;
|
overflow-y: auto;
|
|
.section_1 {
|
padding-bottom: 7rpx;
|
background-color: rgb(255, 255, 255);
|
box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.1);
|
position: relative;
|
|
.left_tab_bar {
|
width: 88%;
|
height: 56rpx;
|
}
|
|
.text_1 {
|
margin: 7rpx 0 6rpx;
|
color: rgb(51, 51, 51);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.text_2 {
|
margin: 7rpx 0 6rpx 50rpx;
|
color: rgb(102, 102, 102);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.text_3 {
|
margin: 7rpx 0 6rpx 50rpx;
|
color: rgb(102, 102, 102);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
}
|
|
.group_1 {
|
margin-left: 50rpx;
|
padding: 7rpx 0 6rpx;
|
width: 100rpx;
|
position: absolute;
|
right: 20rpx;
|
top: 0;
|
background-image: linear-gradient(90deg,
|
rgba(255, 255, 255, 0) 0%,
|
rgba(255, 255, 255, 0) 3.05%,
|
rgba(255, 255, 255, 0.98) 15.1%,
|
rgb(255, 255, 255) 100%,
|
rgb(255, 255, 255) 100%);
|
z-index: 999;
|
|
.image_1 {
|
margin-left: 20rpx;
|
width: 36rpx;
|
height: 36rpx;
|
}
|
}
|
}
|
|
.group_2 {
|
padding-top: 20rpx;
|
|
.second_tabs {
|
display: flex;
|
padding: 0 20rpx;
|
|
.second_tabs_item {
|
color: #999999;
|
font-size: 24rpx;
|
line-height: 42rpx;
|
white-space: nowrap;
|
border-radius: 21rpx;
|
width: 118rpx;
|
height: 42rpx;
|
text-align: center;
|
}
|
|
.select_item {
|
background-color: rgb(255, 150, 12);
|
color: rgb(255, 255, 255);
|
}
|
}
|
|
.group_14 {
|
margin-top: 25rpx;
|
padding: 0 20rpx;
|
/* #ifdef H5 */
|
height: calc(100vh - 336rpx);
|
/* #endif */
|
/* #ifdef APP */
|
height: calc(100vh - 146rpx);
|
/* #endif */
|
overflow: hidden;
|
|
.list-item {
|
padding-bottom: 40rpx;
|
border-bottom: 1px solid #F0F0F0;
|
|
&:not(:first-of-type) {
|
margin-top: 40rpx;
|
}
|
|
.image_11 {
|
border-radius: 8rpx;
|
width: 284rpx !important;
|
height: 182rpx !important;
|
}
|
|
.right-group {
|
margin-left: 26rpx;
|
flex: 1 1 auto;
|
|
.text_11 {
|
color: rgb(51, 51, 51);
|
font-size: 30rpx;
|
line-height: 35rpx;
|
text-align: left;
|
}
|
|
.center-group {
|
margin-top: 33rpx;
|
color: rgb(255, 150, 12);
|
font-size: 20rpx;
|
line-height: 28rpx;
|
white-space: nowrap;
|
|
.left-text-wrapper {
|
background-repeat: no-repeat;
|
padding: 4rpx 14rpx;
|
margin-right: 20rpx;
|
background: rgba(255, 150, 12, 0.12);
|
border: 1rpx solid #FF960C;
|
border-radius: 16rpx;
|
}
|
}
|
|
.text_17 {
|
margin-top: 19rpx;
|
color: rgb(153, 153, 153);
|
font-size: 20rpx;
|
line-height: 24rpx;
|
white-space: nowrap;
|
}
|
|
.text_19 {
|
color: rgb(246, 21, 21);
|
font-size: 30rpx;
|
margin-top: 4rpx;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.pop_bg {
|
padding: 30rpx;
|
box-sizing: border-box;
|
height: 100%;
|
|
.title {
|
text-align: center;
|
font-size: 30rpx;
|
font-weight: bold;
|
}
|
|
.main {
|
height: calc(100% - 50rpx);
|
margin-top: 10rpx;
|
overflow: hidden;
|
display: flex;
|
|
.left_scroll {
|
height: 100%;
|
width: 30%;
|
|
.u-tab-item {
|
height: 110rpx;
|
background: #f6f6f6;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24rpx;
|
color: #444;
|
font-weight: 400;
|
line-height: 1;
|
}
|
|
.u-tab-item-active {
|
position: relative;
|
color: #000;
|
font-size: 26rpx;
|
font-weight: 600;
|
background-color: #FFFFFF;
|
}
|
|
.u-tab-item-active::before {
|
content: "";
|
position: absolute;
|
border-left: 4px solid #FF960C;
|
height: 32rpx;
|
left: 0;
|
top: 39rpx;
|
}
|
}
|
|
.right_scroll {
|
width: 70%;
|
padding: 30rpx 0 0 20rpx;
|
|
.page-view {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
|
.thumb-box {
|
background: #F5F5F5;
|
border-radius: 6px;
|
width: 47%;
|
padding: 21rpx 0;
|
text-align: center;
|
margin-bottom: 30rpx;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
