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.
465 lines
11 KiB
465 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%; |
|
height: 96rpx; |
|
padding-left: 20rpx; |
|
position: fixed; |
|
top: 0; |
|
background: #fff; |
|
z-index: 10; |
|
.scroll-view_H{ |
|
white-space: nowrap; |
|
width: 100%; |
|
height: 96rpx; |
|
} |
|
.tab-item{ |
|
height: 96rpx; |
|
line-height: 96rpx; |
|
display: inline-block; |
|
margin-right: 40rpx; |
|
font-size: 32rpx; |
|
color: #999999; |
|
} |
|
.tab-item-active{ |
|
color: #F99C10; |
|
border-bottom: 2px solid #F99C10; |
|
font-weight: bold; |
|
} |
|
} |
|
} |
|
|
|
/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; |
|
} |
|
} |
|
.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; |
|
} |
|
} |
|
} |
|
</style>
|
|
|