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.

255 lines
5.9 KiB

3 years ago
<template>
<view class="index">
<view class="tabs-box acea-row row-around row-middle">
3 years ago
<view class="tab-item" :class="active == 1 ? 'tab-item-active' : ''" @click="tabClick(1)">已报名</view>
<view class="tab-item" :class="active == 2 ? 'tab-item-active' : ''" @click="tabClick(2)">已完成</view>
<view class="tab-item" :class="active == 3 ? 'tab-item-active' : ''" @click="tabClick(3)">可报名</view>
3 years ago
</view>
3 years ago
<view class="course-list-box" v-if="active == 1 || active == 2">
3 years ago
<view class="no-content" v-if="courseList.length == 0">
<image class="noContent" src="https://qiniu.upload.gznl.top/6cefe3b3-d5ae-41b4-9d52-3e35986d7e5c.png"></image>
<text>暂无课程</text>
</view>
3 years ago
<view class="course-item acea-row row-between" v-for="(item,index) in courseList" :key="index">
3 years ago
<view class="course-item-l">
<view class="course-info">
3 years ago
<view class="course-name line1">{{item.courseName}}</view>
3 years ago
<view class="info-box">
3 years ago
<view class="">时间{{item.courseStartTime.split(' ')[0]}}{{item.courseEndTime.split(' ')[0]}}</view>
<view class="">地点{{item.coursePlace}}</view>
3 years ago
</view>
</view>
</view>
3 years ago
<view class="course-item-r acea-row" v-if="active == 1">
<!-- <view class="saoyisao" v-if="item.signState == 2"><image src="../../../static/saoyisao-icon.png"></image></view>
<text>{{item.signState == 1 ? '已签到' : '扫一扫'}}</text> -->
<text>已签到</text>
3 years ago
</view>
<view class="course-item-r colG acea-row" v-else>
<text>已结束</text>
3 years ago
</view>
</view>
</view>
<view class="knowledge-list" v-else>
3 years ago
<view class="no-content" v-if="courseList.length == 0">
<image class="noContent" src="https://qiniu.upload.gznl.top/6cefe3b3-d5ae-41b4-9d52-3e35986d7e5c.png"></image>
<text>暂无课程</text>
</view>
3 years ago
<view class="knowledge-item acea-row" v-for="item in courseList" @click="toDetail(item.id)">
<view class="img-box">
3 years ago
<image :src="item.coverImg" mode="aspectFill"></image>
3 years ago
</view>
<view class="knowledge-info-box">
<view class="title line1">{{item.courseName}}</view>
3 years ago
<view class="time">{{item.courseStartTime.split(' ')[0]}}{{item.courseEndTime.split(' ')[0]}}</view>
3 years ago
<view class="address">{{item.coursePlace}}</view>
<view class="type-box acea-row row-between row-middle">
3 years ago
<view class="price">{{item.levelName}}</view>
<!-- <view class="price colG" v-if="item.chargeType == 0">免费</view> -->
3 years ago
<view class="signin-btn red">去报名</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
3 years ago
import { getMyCourseList } from "@/api/user"
3 years ago
export default{
data(){
return {
3 years ago
active : 1,
courseList:[]
3 years ago
}
},
3 years ago
onLoad(){
this.getList()
},
3 years ago
onPullDownRefresh() {
this.getList()
},
3 years ago
methods:{
3 years ago
getList(){
uni.showLoading({
title: '正在加载中...'
})
getMyCourseList(this.active).then((res)=>{
uni.hideLoading()
if(res.success){
this.courseList = res.data
}
3 years ago
uni.stopPullDownRefresh()
3 years ago
})
},
3 years ago
tabClick(idx){
3 years ago
this.active = idx;
this.getList()
},
toDetail(id){
this.$yrouter.push({
path:'/pages/course/detail',
query:{id:id}
})
},
startQr: function() {
uni.scanCode({
success: res => {
},
})
},
3 years ago
}
}
</script>
<style lang="less" scoped>
.tabs-box{
width: 100%;
height:98rpx;
font-size: 32rpx;
color: #222;
background: #fff;
border-top: 1px solid #f2f2f2;
.tab-item{
height: 100%;
line-height: 98rpx;
}
.tab-item-active{
3 years ago
font-weight: 600;
3 years ago
border-bottom: 4rpx solid #F99C10;
3 years ago
}
}
3 years ago
.no-content{
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
3 years ago
image{
width: 100%;
height: 740rpx;
transform: scale(0.8);
}
text{
font-size: 36rpx;
color: #d8d8d8;
position: relative;
top: -110rpx;
}
3 years ago
}
3 years ago
.course-list-box{
width: 100%;
.course-item{
width: 100%;
background: #fff;
padding: 24rpx 0 26rpx 30rpx;
margin-top: 28rpx;
.course-item-l{
width: 526rpx;
.info-box{
font-size: 26rpx;
color: #666666;
view{
line-height: 34rpx;
}
}
.course-name{
color: #333;
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;
margin-bottom: 22rpx;
}
}
.course-item-r{
width: 182rpx;
flex-direction: column;
justify-content: center;
align-items: center;
3 years ago
color: #F99C10;
3 years ago
border-left: 1px solid #d8d8d8;
image{
width: 50rpx;
height: 50rpx;
margin-bottom: 6rpx;
}
}
3 years ago
3 years ago
}
}
3 years ago
.colG{
color: #8FB85B !important;
}
3 years ago
.knowledge-list {
width: 100%;
3 years ago
// margin-top: 50rpx;
3 years ago
.knowledge-item {
background: #fff;
padding: 32rpx;
margin-top: 28rpx;
.img-box {
width: 204rpx;
height: 200rpx;
margin-right: 30rpx;
image {
width: 100%;
height: 100%;
3 years ago
border-radius: 10rpx;
3 years ago
}
}
.knowledge-info-box {
width: calc(100% - 234rpx);
.title {
font-size: 28rpx;
color: #333;
font-size: 500;
line-height: 40rpx;
}
.time,.address{
color: #999;
font-size: 24rpx;
margin-top: 5rpx;
line-height: 34rpx;
}
.intro {
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
margin: 8rpx 0 36rpx;
}
.type-box {
font-size: 24rpx;
color: #999;
margin-top: 28rpx;
.price{
3 years ago
font-size: 28rpx;
3 years ago
color: #EA533E;
3 years ago
font-weight: 500;
3 years ago
}
.signin-btn{
width: 156rpx;
height: 60rpx;
text-align: center;
line-height: 60rpx;
background: #FFEAE7;
border-radius: 12rpx;
font-size: 32rpx;
}
.red{
background: #FFEAE7;
color: #EE7060;
}
.blue {
color: #6E85EB;
background: #ECEFFD;
}
.yellow {
color: #F99C10;
background: #FFEDCC;
}
}
}
}
}
</style>