<template>
|
<view class="noviceCourse-wrapper wrapperLayer">
|
<titleBar :titleText="'新手教程'" :pageForm='"noviceCourse"'></titleBar>
|
<view class="pagebottom-container colCen borderBox">
|
<view class="swiper-container borderBox">
|
<swiper class="swiper" :indicator-dots="false" :autoplay="true" :duration="1000" @change="changeCurrent">
|
<swiper-item v-for="(items,index) in bannerList" :key="index">
|
<view class="swiper-item defIcon" @tap="gourl(items)">
|
<image :src="items.image" mode="aspectFill"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
<view class="subscript-container rowCenCen">
|
<view>{{swiperCurrent+1}}/{{bannerList.length}}</view>
|
</view>
|
</view>
|
|
<view class="screenbar-container rowCen borderBox">
|
<scroll-view class="screen-bar-bac" scroll-x scroll-with-animation>
|
<block v-for="(items,index) in screenList" :key="index">
|
<view class="items-content">
|
<view class="screen-items colCenCen" @tap="scrFans(items.id)">
|
<view :style="screenCurrent==items.id?'color:#FF2851;':''">{{items.title}}</view>
|
<view class="bdr" :style="'background-color:'+(screenCurrent==items.id?'#FF2851':'')"></view>
|
</view>
|
</view>
|
</block>
|
</scroll-view>
|
</view>
|
|
<view class="courseList-container colCen">
|
<block v-for="(items,index) in courseList" :key="index">
|
<view class="course-items rowCen" @tap="goDetails(items.id)">
|
<view class="imageContent defIcon">
|
<image :src="items.image" mode="aspectFill"></image>
|
</view>
|
<view class="infoContent colCenBet">
|
<view class="title-box">
|
{{items.title}}
|
</view>
|
<view class="time-num rowCenBet">
|
<view class="numbox">
|
{{items.view_num}}人已学
|
</view>
|
<view class="timebox">
|
{{items.create_time}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
<view class ="empty">
|
<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' :invite='true' color="#999999"></aLoadMore>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import util from '../../utils/utils.js'
|
import titleBar from '../../components/backTitlebar.vue'
|
export default {
|
components: {
|
titleBar
|
},
|
data() {
|
return {
|
swiperCurrent: 0,
|
screenCurrent: 0,
|
bannerList: [],
|
|
screenList: [],
|
|
courseList: [],
|
loadstate: 'nomore',
|
page: 1,
|
canload: false
|
}
|
},
|
onLoad() {
|
this.getbanner()
|
this.getclassfiy()
|
},
|
methods: {
|
getclassfiy(){
|
var that = this;
|
this.$u.api.getHelpType({}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
that.screenList = res;
|
that.screenCurrent = res[0].id
|
that.getList()
|
}).catch(function (err) {
|
})
|
},
|
getList(){
|
var that = this;
|
this.$u.api.getHelpList({
|
type:this.screenCurrent,
|
page:this.page,
|
pageSize:10
|
}).then(e => {
|
if(e.code != 0) return that.$alert(e.msg)
|
var res = e.data.list;
|
uni.stopPullDownRefresh()
|
if(res.length<10){
|
that.loadstate = 'nomore'
|
that.canload = false
|
}else{
|
that.loadstate = 'loading'
|
that.canload = true
|
that.page++
|
}
|
that.courseList = that.courseList.concat(res)
|
}).catch(function (err) {
|
})
|
},
|
getbanner(){
|
var that = this;
|
this.$u.api.getBanner({type:'9'}).then(e => {
|
if(e.code == 1)return that.$alert(e.msg);
|
that.bannerList = e.data.info;
|
}).catch(function (err) {
|
})
|
},
|
goDetails(id){
|
uni.navigateTo({
|
url:'./tools/problemExplain?id='+id
|
})
|
},
|
gourl(info){
|
util.goUrl(info)
|
},
|
changeCurrent(e) {
|
this.swiperCurrent = e.detail.current
|
this.courseList = [];
|
this.page = 1;
|
this.loadstate = 'loading'
|
this.canload = true
|
|
},
|
scrFans(id) {
|
this.screenCurrent = id
|
this.getList()
|
}
|
},
|
onPullDownRefresh() {
|
this.getList()
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.noviceCourse-wrapper {
|
width: 100%;
|
|
.pagebottom-container {
|
width: 100%;
|
margin-top: 20rpx;
|
padding: 0 30rpx;
|
|
.swiper-container {
|
width: 100%;
|
height: 346rpx;
|
margin-bottom: 20rpx;
|
overflow: hidden;
|
position: relative;
|
|
.swiper {
|
width: 100%;
|
height: 100%;
|
|
.swiper-item {
|
width: 100%;
|
height: 100%;
|
|
image {
|
border-radius: 16rpx;
|
}
|
}
|
}
|
|
.subscript-container {
|
width: 58rpx;
|
height: 36rpx;
|
background: rgba(191, 191, 191, 0.5);
|
border-radius: 8rpx;
|
position: absolute;
|
bottom: 20rpx;
|
right: 20rpx;
|
font-size: 24rpx;
|
font-weight: bold;
|
color: #FFFFFF;
|
}
|
}
|
|
.screenbar-container {
|
width: 100%;
|
margin-bottom: 20rpx;
|
|
.screen-bar-bac {
|
width: 100%;
|
height: 86rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
white-space: nowrap;
|
.items-content{
|
display: inline-block;
|
height: 100%;
|
.screen-items {
|
height: 86rpx;
|
margin:0rpx 30rpx;
|
|
.bdr {
|
width: 108rpx;
|
height: 4rpx;
|
border-radius: 2rpx;
|
border-radius: 2rpx;
|
margin-top: 5rpx;
|
}
|
}
|
}
|
}
|
}
|
|
.courseList-container {
|
width: 100%;
|
|
.course-items {
|
width: 100%;
|
background-color: #FFFFFF;
|
height: 234rpx;
|
border-radius: 16px;
|
padding: 0 20rpx;
|
margin-bottom: 20rpx;
|
|
.imageContent {
|
width: 254rpx;
|
height: 194rpx;
|
overflow: hidden;
|
border-radius: 16rpx;
|
position: relative;
|
.abs-box{
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
z-index: 10;
|
.playbtn{
|
width: 50rpx;
|
height: 50rpx;
|
}
|
}
|
}
|
|
.infoContent {
|
width: 370rpx;
|
height: 194rpx;
|
margin-left: 20rpx;
|
|
.title-box {
|
width: 100%;
|
font-size: 26rpx;
|
font-weight: 500;
|
color: #FF2851;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.time-num{
|
width: 100%;
|
font-size: 22rpx;
|
font-weight: 500;
|
color: #666666;
|
}
|
}
|
}
|
}
|
}
|
}
|
.empty{
|
padding-top: 60rpx;
|
}
|
</style>
|
