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.
256 lines
6.1 KiB
256 lines
6.1 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"> |
|
<image class="noContent" src="https://qiniu.upload.gznl.top/6cefe3b3-d5ae-41b4-9d52-3e35986d7e5c.png"></image> |
|
<text>暂无课程</text> |
|
</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"> |
|
<image class="noContent" src="https://qiniu.upload.gznl.top/6cefe3b3-d5ae-41b4-9d52-3e35986d7e5c.png"></image> |
|
<text>暂无课程</text> |
|
</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> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getMyCourseList } from "@/api/user" |
|
export default{ |
|
data(){ |
|
return { |
|
active : 1, |
|
courseList:[] |
|
} |
|
}, |
|
onLoad(){ |
|
this.getList() |
|
}, |
|
onPullDownRefresh() { |
|
this.getList() |
|
}, |
|
methods:{ |
|
getList(){ |
|
uni.showLoading({ |
|
title: '正在加载中...' |
|
}) |
|
getMyCourseList(this.active).then((res)=>{ |
|
uni.hideLoading() |
|
if(res.success){ |
|
this.courseList = res.data |
|
} |
|
uni.stopPullDownRefresh() |
|
}) |
|
}, |
|
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 #F99C10; |
|
} |
|
} |
|
.no-content{ |
|
font-size: 28rpx; |
|
color: #666666; |
|
text-align: center; |
|
padding: 30rpx 0; |
|
image{ |
|
width: 100%; |
|
height: 740rpx; |
|
transform: scale(0.8); |
|
} |
|
text{ |
|
font-size: 36rpx; |
|
color: #d8d8d8; |
|
position: relative; |
|
top: -110rpx; |
|
} |
|
} |
|
.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: #F99C10; |
|
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>
|
|
|