<template>
|
<view class="box pb-100">
|
<!-- #ifdef APP-PLUS -->
|
<view class="status_bar">
|
<view class="top_view"></view>
|
</view>
|
<!-- #endif -->
|
<view class="flex-col page">
|
<view class="flex-col group">
|
<view class="flex-col section_1">
|
<view class="flex-col group_1">
|
<view class="flex-row group_2">
|
<text @click="navigateTo('/pages/classification/index?from=home', false)">
|
{{cateName}}
|
</text>
|
<image src="/static/local/40372ad8302b0901727bcae31debb4dd.png" class="image_1" />
|
</view>
|
<view class="justify-center search" @click="navigateTo('/pages/search/search-page', false)">
|
<image src="/static/remote/b27908d2b8262ac59bf51e00104f0fd5.png" class="image_2" />
|
<text class="text_1">输入关键词搜索课程</text>
|
</view>
|
</view>
|
</view>
|
<z-paging ref="paging" class="z-paging" v-model="reCourses" @query="getReCourses"
|
:empty-view-fixed="false" @scroll="changeBgColor" :hide-loading-more-when-no-more-by-limit="5"
|
:style="'background-color: rgba(255,255,255,'+opacityNum+')' ">
|
<view class="flex-col group_3">
|
<!-- <view class="flex-col items-center group_4" :class="{swiper_bg:sliders && sliders.length > 1}">
|
<u-swiper :list="sliders" name="thumb" height="41vw" bg-color="transparent"
|
:interval="duraTime"></u-swiper>
|
</view> -->
|
<view class="flex-row equal-division" id="list_work">
|
<view class="equal-division-item flex-col items-center" v-for="item in home_nav"
|
:key="item.id" @click="navClick(item)">
|
<u-image :src="item.thumb" :lazy-load="true" class="image_5" mode="aspectFill">
|
</u-image>
|
<text class="text_2">{{item.title}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="flex-row section_3">
|
<view class="flex-col group_11">公告:</view>
|
<u-notice-bar class="text_9" mode="vertical" :list="noticeList" name="title" type="none"
|
:volume-icon="false" :duration="duraTime">
|
</u-notice-bar>
|
</view>
|
<view class="flex-col group_12">
|
<view class="flex-row group_13">
|
<view class="section_5"> </view>
|
<text class="text_10">推荐课程</text>
|
</view>
|
<view class="flex-col group_14">
|
<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>
|
</view>
|
</view>
|
</view>
|
</view>
|
</z-paging>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
// 当前分类名称
|
cateName: '请选择分类',
|
// 轮播图列表
|
sliders: [],
|
// 金刚区列表
|
home_nav: [],
|
// 列表背景颜色深度
|
opacityNum: 0,
|
course_rec: [],
|
article_rec: [],
|
pay_article_rec: [],
|
free_live_course: [],
|
nav_column: 4,
|
nav_row: 2,
|
nav_current: 0,
|
ajax_loading: true,
|
// 推荐课程列表
|
reCourses: [],
|
// 通知完整数据列表
|
noticesDataList: [],
|
// 通知展示列表
|
noticeList: [],
|
// 轮播间隔
|
duraTime: 2500
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
that.init(options)
|
},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
computed: {
|
rightText() {
|
return (item) => {
|
if (vk.pubfn.isNotNull(item.isBuy)) return '已购买'
|
return '￥' + item.charge / 100
|
}
|
}
|
},
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
// 从其他页面返回时刷新
|
uni.$on('update', function(data) {
|
that.getReCourses(1, 1)
|
})
|
},
|
// 轮播及金刚区数据
|
getSwiperAndNav() {
|
vk.callFunction({
|
url: 'client/index/pub/index',
|
success(res) {
|
|
that.sliders = res.data.sliders
|
that.home_nav = [res.data.home_nav[0],res.data.home_nav[1],res.data.home_nav[2]]
|
that.duraTime = res.data.duraTime
|
that.ajax_loading = false
|
}
|
});
|
},
|
// 公告数据
|
getNotices() {
|
vk.callFunction({
|
url: 'client/notices/pub/getNoticesList',
|
success(data) {
|
// 整体数据
|
that.noticesDataList = data.rows
|
// 展示列表
|
that.noticesDataList.map(v => {
|
that.noticeList.push(v.title)
|
})
|
}
|
});
|
},
|
// 推荐课程数据
|
getReCourses(pageNo, pageSize) {
|
let record = false
|
// 下拉刷新时获取首页所有数据
|
if (pageNo == 1) {
|
that.noticesDataList = []
|
that.noticeList = []
|
that.getSwiperAndNav()
|
that.getNotices()
|
if (uni.vk.callFunctionUtil.checkToken()) record = true
|
}
|
// 获取分类
|
let category_info = vk.getStorageSync('bank_cate')
|
let data = {
|
pageIndex: pageNo,
|
pageSize: pageSize,
|
is_rec: 1
|
}
|
if (record) data['need_user_info'] = true
|
if (category_info) {
|
that.cateName = category_info.name ? category_info.name : '请选择分类'
|
data.type = category_info.type
|
data.category_id = category_info.id
|
} else {
|
that.cateName = '请选择分类'
|
}
|
if (uni.vk.callFunctionUtil.checkToken()) data['need_user_info'] = true
|
vk.callFunction({
|
url: 'client/course/pub/recommend_course',
|
title: '获取中...',
|
data: data,
|
success(data) {
|
console.log(data,"ddddddddddddd")
|
that.$refs.paging.complete(data.rows);
|
}
|
});
|
},
|
navClick(e) {
|
vk.navigateTo(e.url);
|
},
|
navChange(e) {
|
this.nav_current = e.detail.current;
|
},
|
sliderTap(index) {
|
let slider = this.sliders[index];
|
if (!slider.url)
|
return
|
if (slider.url.substr(0, 4) === "http") {
|
this.goWebview(slider.url);
|
} else {
|
uni.navigateTo({
|
url: slider.url,
|
});
|
}
|
},
|
// 列表滚动时隐藏背景
|
changeBgColor(e) {
|
if (e.detail.scrollTop >= 0) {
|
if (e.detail.scrollTop <= 30) {
|
this.opacityNum = 0
|
} else if (30 < e.detail.scrollTop && e.detail.scrollTop <= 120) {
|
this.opacityNum = e.detail.scrollTop / 120
|
} else if (e.detail.scrollTop > 120) {
|
this.opacityNum = 1
|
}
|
}
|
},
|
// 推荐课程详情
|
openCourse(id) {
|
// uni.navigateTo({
|
// url:'/pages/yinpin/yinpin?title='+'1'
|
// })
|
uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/class-detail?_id=' + id, false);
|
}
|
},
|
onUnload() {
|
uni.$off('update')
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
#list_work{
|
justify-content: space-around;
|
margin-top: 50px;
|
}
|
.status_bar,
|
.top_view {
|
background-color: #FDCF03;
|
}
|
|
.page {
|
background-color: #ffffff;
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
|
.group {
|
height: 100%;
|
flex: 1 1 auto;
|
overflow-y: auto;
|
|
.section_1 {
|
padding-bottom: 176rpx;
|
background-image: url('/static/local/16403090250739726597.png');
|
background-position: 0px 0px;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
|
.group_1 {
|
margin-top: 24rpx;
|
padding: 0 20rpx;
|
|
.group_2 {
|
color: rgb(51, 51, 51);
|
font-size: 34rpx;
|
line-height: 41rpx;
|
white-space: nowrap;
|
|
.image_1 {
|
margin: 24rpx 0 0 6rpx;
|
width: 12rpx;
|
height: 12rpx;
|
}
|
}
|
|
.search {
|
margin-top: 44rpx;
|
padding: 14rpx;
|
color: rgb(153, 153, 153);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
white-space: nowrap;
|
background-color: rgb(255, 255, 255);
|
border-radius: 34rpx;
|
|
.image_2 {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
|
.text_1 {
|
margin-left: 10rpx;
|
margin-top: 4rpx;
|
}
|
}
|
}
|
}
|
|
.z-paging {
|
/* #ifdef APP-PLUS */
|
top: 20%;
|
/* #endif */
|
/* #ifdef H5 */
|
top: 15%;
|
/* #endif */
|
height: calc(100vh - 280rpx);
|
}
|
|
.group_3 {
|
color: rgb(91, 91, 91);
|
font-size: 24rpx;
|
line-height: 29rpx;
|
white-space: nowrap;
|
|
.group_4 {
|
margin: 0 20rpx;
|
border-radius: 16rpx;
|
position: relative;
|
border-radius: 16rpx;
|
width: 94.5vw;
|
|
.u-swiper-wrap {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.swiper_bg {
|
box-shadow: 0px 6rpx 16rpx 0px rgba(255, 150, 12, 0.22);
|
}
|
|
.equal-division {
|
margin-top: 43rpx;
|
flex-wrap: wrap;
|
|
.equal-division-item {
|
width: 20%;
|
padding: 10rpx 0;
|
|
.image_5 {
|
width: 92rpx !important;
|
height: 92rpx !important;
|
border-radius: 50% !important;
|
overflow: hidden !important;
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
|
}
|
|
.text_2 {
|
margin-top: 21rpx;
|
}
|
}
|
}
|
}
|
|
.section_3 {
|
margin-top: 35rpx;
|
padding: 9rpx 20rpx;
|
background-color: rgb(245, 245, 245);
|
|
.group_11 {
|
color: rgb(132, 75, 0);
|
font-size: 36rpx;
|
line-height: 52rpx;
|
white-space: nowrap;
|
width: 116rpx;
|
font-family: YouSheBiaoTiHei;
|
background-image: linear-gradient(180deg,
|
rgb(253, 211, 3) 0%,
|
rgb(253, 211, 3) 0%,
|
rgb(255, 150, 12) 100%,
|
rgb(255, 150, 12) 100%);
|
border-radius: 20rpx 0px 20rpx 0px;
|
height: 52rpx;
|
text-align: center;
|
margin-top: 9rpx;
|
}
|
|
.text_9 {
|
color: rgb(51, 51, 51);
|
font-size: 28rpx;
|
line-height: 34rpx;
|
flex: 1;
|
}
|
}
|
|
.group_12 {
|
margin: 35rpx 0 0;
|
padding-left: 20rpx;
|
padding-right: 4rpx;
|
|
.group_13 {
|
color: rgb(0, 0, 0);
|
font-size: 34rpx;
|
line-height: 41rpx;
|
white-space: nowrap;
|
|
.section_5 {
|
background-color: rgb(253, 211, 3);
|
border-radius: 5rpx;
|
width: 10rpx;
|
height: 46rpx;
|
}
|
|
.text_10 {
|
margin: 3rpx 0 3rpx 14rpx;
|
}
|
}
|
|
.group_14 {
|
margin-top: 25rpx;
|
// height: 968rpx;
|
|
.list-item {
|
margin-right: 20rpx;
|
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;
|
flex-wrap: wrap;
|
|
.left-text-wrapper {
|
background-repeat: no-repeat;
|
padding: 4rpx 14rpx;
|
margin: 10rpx 20rpx 10rpx 0;
|
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: 8rpx;
|
white-space: nowrap;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
