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.
 
 
 
 
 

249 lines
6.2 KiB

<template>
<view class="index">
<view class="tabs-box acea-row row-around row-middle">
<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>
</view>
<view class="course-list-box" v-if="active == 1 || active == 2">
<view class="no-content" v-if="courseList.length == 0">暂无内容...</view>
<view class="course-item acea-row row-between" v-for="(item,index) in courseList" :key="index">
<view class="course-item-l">
<view class="course-info">
<view class="course-name line1">{{item.courseName}}</view>
<view class="info-box">
<view class="">时间{{item.courseStartTime.split(' ')[0]}}{{item.courseEndTime.split(' ')[0]}}</view>
<view class="">地点{{item.coursePlace}}</view>
<view class="">座位号{{item.seat || '暂未安排座位'}}</view>
<!-- <view class="">酒店安排江汉区江汉路22号武汉大酒店0801号房</view> -->
</view>
</view>
</view>
<view class="course-item-r acea-row" v-if="active == 1" @click="startQr()">
<view class="saoyisao" v-if="item.signState == 2"><image src="../../../static/saoyisao-icon.png"></image></view>
<text>{{item.signState == 1 ? '已签到' : '扫一扫'}}</text>
</view>
<view class="course-item-r colG acea-row" v-else>
<!-- <view class="saoyisao"><image src="../../../static/saoyisao-icon.png"></image></view> -->
<text>已结束</text>
</view>
</view>
</view>
<view class="knowledge-list" v-else>
<view class="no-content" v-if="courseList.length == 0">暂无内容...</view>
<view class="knowledge-item acea-row" v-for="item in courseList" @click="toDetail(item.id)">
<view class="img-box">
<image :src="item.imageArr[0]" mode="aspectFill"></image>
</view>
<view class="knowledge-info-box">
<view class="title line1">{{item.courseName}}</view>
<view class="time">{{item.courseStartTime.split(' ')[0]}}至{{item.courseEndTime.split(' ')[0]}}</view>
<view class="address">{{item.coursePlace}}</view>
<view class="type-box acea-row row-between row-middle">
<view class="price">{{item.levelName}}</view>
<!-- <view class="price colG" v-if="item.chargeType == 0">免费</view> -->
<view class="signin-btn red">去报名</view>
</view>
</view>
</view>
<!-- <view class="knowledge-item acea-row">
<view class="img-box">
<image src="../../static/img1.png" mode=""></image>
</view>
<view class="knowledge-info-box">
<view class="title line1">《阴阳五行》一个人的阴阳五的阴阳五行…</view>
<view class="time">2021-5-31-6.3 8:30-18:30</view>
<view class="address">中国 武汉</view>
<view class="type-box acea-row row-between row-middle">
<view class="price">¥3000</view>
<view class="signin-btn red">去报名</view>
</view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import { getMyCourseList } from "@/api/user"
export default{
data(){
return {
active : 1,
courseList:[]
}
},
onLoad(){
this.getList()
},
methods:{
getList(){
uni.showLoading({
title: '正在加载中...'
})
getMyCourseList(this.active).then((res)=>{
uni.hideLoading()
if(res.success){
this.courseList = res.data
}
})
},
tabClick(idx){
this.active = idx;
this.getList()
},
toDetail(id){
this.$yrouter.push({
path:'/pages/course/detail',
query:{id:id}
})
},
startQr: function() {
uni.scanCode({
success: res => {
},
})
},
}
}
</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{
font-weight: 600;
border-bottom: 4rpx solid #EB5744;
}
}
.no-content{
font-size: 28rpx;
color: #666666;
text-align: center;
padding: 30rpx 0;
}
.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;
color: #EB5744;
border-left: 1px solid #d8d8d8;
image{
width: 50rpx;
height: 50rpx;
margin-bottom: 6rpx;
}
}
}
}
.colG{
color: #8FB85B !important;
}
.knowledge-list {
width: 100%;
// margin-top: 50rpx;
.knowledge-item {
background: #fff;
padding: 32rpx;
margin-top: 28rpx;
.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: 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{
font-size: 28rpx;
color: #EA533E;
font-weight: 500;
}
.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>