You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

466 lines
11 KiB

<template>
<view class="konwledge-index index">
<view class="content-box">
<view class="tab-box" :class="isFixedTop ? 'fixed' : ''">
<view class="tabs">
<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation :scroll-left='scrollLeft'>
<view class="tab-item scroll-item" :class="index == tabSelect ? 'tab-item-active' : ''" v-for="(item,index) in tabList"
:key="item.id" @click="tabChange(item,index)">{{item.categoryName}}</view>
</scroll-view>
</view>
<SecondMenu :menuList="secondMenu" :active.sync="active" @secondMenuClick="secondMenuClick" v-if="secondMenu.length > 0">
</SecondMenu>
</view>
<view class="bangdan-box" v-if="studyList.length > 0">
<view class="active-word"><image src="../../static/tit5.png" mode=""></image></view>
<view class="bangdan-list">
<scroll-view class="scroll-view_H" scroll-x="true" v-if="studyList.length > 0">
<view class="bangdan-item" v-for="(item,index) in studyList" :key="index"
@click="toStudyDetail(item.id)">
<view>
<view class="name">{{item.listName}}</view>
<view class="time">{{item.listStartTime.split(' ')[0]}} {{item.listEndTime.split(' ')[0]}}</view>
</view>
<view class="acea-row row-between-wrapper" style="width: 100%;margin-top: 30rpx;">
<view class="jifen">
<text class="fz44">{{item.integral}}</text>
积分
</view>
<view class="signin-btn">报名参加</view>
</view>
</view>
</scroll-view>
<!-- <view class="no-content" v-if="studyList.length == 0">暂无内容...</view> -->
</view>
</view>
<view class="knowledge-list">
<view class="active-word2"><image src="../../static/tit6.png"></image></view>
<view class="no-content" v-if="courseList.length == 0">暂无内容...</view>
<view class="knowledge-item acea-row" v-for="(item,index) in courseList" :key="index" @click="toDetail(item.id)">
<view class="img-box">
<image :src="item.coverImg" mode="aspectFill"></image>
</view>
<view class="knowledge-info-box">
<view class="title line1">{{item.courseName}}</view>
<view class="time">{{utils.spl(item.courseStartTime)[0]}}{{utils.spl(item.courseEndTime)[0]}}</view>
<view class="address">{{item.coursePlace}}</view>
<view class="type-box acea-row row-between row-middle">
<!-- <view class="price">{{item.courseCharge}}</view> -->
<!-- <view class="price">{{item.levelName}}</view> -->
<view></view>
<!-- <view class="price colG" v-if="item.chargeType == 0">免费</view> -->
<view class="signin-btn yellow">去报名</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script module="utils" lang="wxs" src="../../utils/subutil.wxs"></script>
<script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import SecondMenu from '../knowledge/components/secondMenu.vue';
import {
mapState,
mapGetters,
mapMutations,
mapActions
} from 'vuex'
import {
getCategory,
getArticle,
getStudyList,
getCourses
} from '@/api/knowledge';
export default {
computed: mapGetters(['userInfo']),
data() {
return {
windowWidth: '',
isFixedTop: false,
currentTab: null,
tabSelect: 0,
scrollLeft: 200,
tabList: [],
secondMenu: [],
active: null,
courseList: [],
studyList: [],
categoryTitle: '',
}
},
components: {
WucTab,
SecondMenu
},
onLoad() {
//获取节点距离顶部的距离
uni.createSelectorQuery().select('.tab-box').boundingClientRect((res) => {
if (res && res.top > 0) {
this.tabInitTop = res.top;
}
}).exec();
getCategory().then((res) => {
this.tabList = res.data
this.$set(this, 'secondMenu', res.data[0].categoryList)
this.$set(this, 'currentTab', res.data[0])
this.categoryTitle = res.data[0].categoryName;
if (res.data[0].categoryList.length > 0) {
this.$set(this, 'active', res.data[0].categoryList[0].id)
this.categoryTitle = this.categoryTitle + '·' + res.data[0].categoryList[0].categoryName
} else {
// this.$set(this, 'tabSelect', 0)
// this.scrollLeft = 0
}
}).then(() => {
this.getStudyList()
this.getCourses()
})
},
onShow() {
},
mounted() {
uni.getSystemInfo({
success: (res) => {
this.windowWidth = res.windowWidth;
}
})
},
methods: {
onPageScroll(res) {
let scrollTop = res.scrollTop;
var isSatisfy = scrollTop >= this.tabInitTop ? true : false;
//只有处于吸顶的临界值才会不相等
if (this.isFixedTop === isSatisfy) {
return false;
}
this.isFixedTop = isSatisfy
},
toStudyDetail(id) {
this.$yrouter.push({
path: '/pages/study/detail',
query: {
id: id,
},
})
},
toDetail(id) {
this.$yrouter.push({
path: '/pages/course/detail',
query: {
id: id,
},
})
},
getStudyList() {
uni.showLoading({
title: '正在加载中...'
})
var cid = null;
this.active == null ? cid = this.currentTab.id : cid = this.active
getStudyList({
categoryId: cid,
listState: 0
}).then((res) => {
if (res.success) {
this.studyList = res.data
}
uni.hideLoading()
})
},
getCourses() {
uni.showLoading({
title: '正在加载中...'
})
var cid = null;
this.active == null ? cid = this.currentTab.id : cid = this.active
getCourses({
categoryId: cid,
listState: 0
}).then((res) => {
if (res.success) {
this.courseList = res.data
}
uni.hideLoading()
uni.stopPullDownRefresh()
})
},
tabChange(item, index) {
this.tabSelect = index
this.currentTab = item
this.moveTo(index)
this.categoryTitle = item.categoryName;
if (item.categoryList.length > 0) {
this.$set(this, 'active', item.categoryList[0].id)
this.categoryTitle = item.categoryList[0].categoryName;
}
this.secondMenu = item.categoryList;
this.getStudyList()
this.getCourses()
},
// 将点击元素移动到中间
moveTo(index) {
const query = uni.createSelectorQuery().in(this)
query.selectAll(`.scroll-item`).boundingClientRect(rect => {
const windowWidth = this.windowWidth // 屏幕宽度
let width = 0
// 循环获取计算当前点击的标签项距离左侧的距离
for (let i = 0; i < index; i++) {
width += rect[i].width
}
// 当大于屏幕一半的宽度则滚动,否则就设置位置为0
if (width > windowWidth / 2) {
this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2
} else {
this.scrollLeft = 0
}
}).exec()
},
secondMenuClick(item) {
this.active = item.id;
this.categoryTitle = item.categoryName;
this.getStudyList()
this.getCourses()
},
onPullDownRefresh() {
this.getStudyList()
this.getCourses()
}
}
}
</script>
<style scoped lang="less">
page{
background: #fff;
}
.content-box {
width: 100%;
box-sizing: border-box;
.tab-box {
height: 96rpx;
box-shadow: 0px 6px 12px 0px rgba(227, 227, 227, 0.29);
.tabs{
width:100%;
3 years ago
height: 96rpx;
padding-left: 20rpx;
position: fixed;
top: 0;
background: #fff;
z-index: 10;
.scroll-view_H{
white-space: nowrap;
3 years ago
width: 100%;
height: 96rpx;
3 years ago
}
.tab-item{
height: 96rpx;
line-height: 96rpx;
display: inline-block;
margin-right: 40rpx;
3 years ago
font-size: 32rpx;
3 years ago
color: #999999;
}
.tab-item-active{
color: #F99C10;
border-bottom: 2px solid #F99C10;
font-weight: bold;
3 years ago
}
}
}
/deep/.second-menu-box {
padding: 30rpx 32rpx;
}
.fixed {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
}
.active-word {
image {
width: 136rpx;
height: 46rpx;
}
3 years ago
}
.active-word2{
image{
width: 108rpx;
height: 46rpx;
}
}
.no-content {
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
}
.bangdan-box {
width: 100%;
box-sizing: border-box;
padding-left: 30rpx;
margin: 80rpx 0;
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.bangdan-list {
padding: 16rpx 0 0;
}
.bangdan-item {
width: 412rpx;
height: 224rpx;
box-sizing: border-box;
padding: 34rpx;
color: #191919;
display: inline-block;
background: url('https://download.cyjyyjy.com/bangdanbg.png');
background-size: 100% 100%;
font-size: 28rpx;
margin-right: 20rpx;
display: inline-block;
.name{
font-weight: bold;
}
.time {
font-size: 24rpx;
line-height: 34rpx;
margin: 8rpx 0 10rpx;
}
.jifen {
font-size: 24rpx;
font-weight: 500;
color: #FCB047;
.fz44{
font-size: 44rpx;
}
}
.signin-btn {
width: 122rpx;
height: 48rpx;
background: linear-gradient(180deg, #FEECCB 0%, #FCAB3B 100%);
border-radius: 8rpx;
text-align: center;
line-height: 48rpx;
font-size: 24rpx;
color: #fff;
}
}
}
.konwledge-index {
min-height: 100%;
width: 100%;
background: #fff;
.knowledge-list {
width: 100%;
padding: 0 32rpx;
margin-top: 80rpx;
.knowledge-item {
width: 100%;
height: 208rpx;
margin-top: 20rpx;
background: #fff;
border-bottom: 1rpx solid #ECECEC;
position: relative;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
.knowledge-info-box {
width: calc(100% - 234rpx);
.title {
font-size: 38rpx;
color: #333;
font-size: 500;
line-height: 52rpx;
}
.time,
.address {
color: #999;
font-size: 28rpx;
margin: 10rpx 0;
line-height: 38rpx;
}
.intro {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
}
.type-box {
font-size: 24rpx;
color: #999;
margin-top: 20rpx;
.price {
font-size: 28rpx;
color: #EA533E;
}
.signin-btn {
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
position: absolute;
right: 4rpx;
bottom: 4rpx;
}
.red {
background: #FFEAE7;
color: #EE7060;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
}
}
}
}
.knowledge-item:nth-last-child(1) {
border: none;
}
}
}
3 years ago
</style>