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.
199 lines
4.7 KiB
199 lines
4.7 KiB
<template> |
|
<view class="member-box"> |
|
<view class="search-box"> |
|
<view class="search-input-box acea-row row-middle"> |
|
<text class="iconfont icon-xiazai5"></text> |
|
<input type="text" placeholder="请输入课程名称"> |
|
</view> |
|
</view> |
|
<view class="tabs-box acea-row row-middle row-between"> |
|
<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> |
|
<view class="course-list-box"> |
|
<view class="course-item acea-row-nowrap row-between" |
|
v-for="(item,index) in courseList" |
|
:key="index" |
|
@click="toCourdeDetail(item.id)" |
|
> |
|
<view class="item-l"> |
|
<view class="name line1">{{item.courseName}}</view> |
|
<view class="desc line2">{{item.shortIntroduce}}</view> |
|
<view class="time">时间：{{(item.courseStartTime.split(' ')[0]).replace(/\-/g, '.')}} 至 {{(item.courseEndTime.split(' ')[0]).replace(/\-/g,'.')}}</view> |
|
<view class="time">地点：{{item.coursePlace}}</view> |
|
<view class="time">报名总人数：{{item.courseEnterPerson}}</view> |
|
</view> |
|
<view class="item-r acea-row row-column row-between"> |
|
<view class="img-box"> |
|
<image :src="item.imageArr[0]" mode="aspectFill"></image> |
|
</view> |
|
<view class="state-box"> |
|
<view class="tip">{{item.signedNum}}/{{item.realEnterPerson}}</view> |
|
<view class="handle-btn default" v-if="item.courseStateSeller == 0">未开始</view> |
|
<view class="handle-btn" v-if="item.courseStateSeller == 1">报名中</view> |
|
<view class="handle-btn" v-if="item.courseStateSeller == 2">签到中</view> |
|
<view class="handle-btn default" v-if="item.courseStateSeller == 3">已结束</view> |
|
<view class="handle-btn default" v-if="item.courseStateSeller == 4">已取消</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { sellerCourses } from "@/api/serverTeacher" |
|
export default{ |
|
data(){ |
|
return { |
|
active: 1, |
|
courseList:[], |
|
} |
|
}, |
|
onLoad() { |
|
this.getList(); |
|
}, |
|
methods:{ |
|
getList(){ |
|
uni.showLoading({ |
|
title: '正在加载中...' |
|
}) |
|
sellerCourses({type:this.active}).then((res)=>{ |
|
this.courseList = res.data |
|
uni.hideLoading() |
|
}) |
|
}, |
|
tabClick(idx){ |
|
this.active = idx; |
|
this.getList(); |
|
}, |
|
toCourdeDetail(id){ |
|
this.$yrouter.push({ |
|
path: '/pages/serviceTeacher/courseDetail', |
|
query:{ |
|
id: id |
|
} |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less" scoped> |
|
.member-box{ |
|
width: 100%; |
|
.search-box{ |
|
background: #fff; |
|
width: 100%; |
|
padding: 20rpx 30rpx; |
|
.search-input-box{ |
|
width: 100%; |
|
height: 70rpx; |
|
background: #F2F2F2; |
|
font-size: 28rpx; |
|
color: #999999; |
|
border-radius: 25px; |
|
padding-left: 26rpx; |
|
.iconfont{ |
|
margin-right: 12rpx; |
|
} |
|
input{ |
|
height: 100%; |
|
} |
|
} |
|
} |
|
.tabs-box{ |
|
border-top: 1px solid #d8d8d8; |
|
width: 100%; |
|
height: 90rpx; |
|
padding: 0 122rpx; |
|
background-color: #fff; |
|
color: #999; |
|
font-size: 32rpx; |
|
.tab-item{ |
|
height: 100%; |
|
line-height: 90rpx; |
|
border-bottom: 6rpx solid #fff; |
|
text-align: center; |
|
} |
|
.tab-item-active{ |
|
color: #222; |
|
height: 100%; |
|
line-height: 90rpx; |
|
border-bottom: 4rpx solid #f4c076; |
|
font-weight: bold; |
|
} |
|
// .tab-item-active::after{ |
|
// content: ''; |
|
// display: block; |
|
// width: 124rpx; |
|
// height: 6rpx; |
|
// background: #F4C076; |
|
// border-radius: 3rpx; |
|
// position: absolute; |
|
// bottom: 0; |
|
// } |
|
} |
|
.course-list-box{ |
|
width: 100%; |
|
padding: 20rpx; |
|
.course-item{ |
|
width: 100%; |
|
padding: 24rpx; |
|
background: #fff; |
|
border-radius: 10rpx; |
|
margin-bottom: 22rpx; |
|
.item-l{ |
|
width: 70%; |
|
font-size: 28rpx; |
|
color: #222; |
|
.name{ |
|
font-size: 32rpx; |
|
color: #333; |
|
line-height: 44rpx; |
|
font-weight: bold; |
|
} |
|
.desc{ |
|
color: #999; |
|
line-height: 36rpx; |
|
margin-top: 20rpx; |
|
margin-bottom: 60rpx; |
|
} |
|
.time{ |
|
line-height: 34rpx; |
|
margin-bottom: 4rpx; |
|
} |
|
} |
|
.item-r{ |
|
image{ |
|
width: 180rpx; |
|
height: 180rpx; |
|
border-radius: 12rpx; |
|
} |
|
.tip{ |
|
width: 156rpx; |
|
font-size: 24rpx; |
|
color: #786133; |
|
text-align: center; |
|
margin: 20rpx 0 0; |
|
} |
|
.handle-btn{ |
|
width: 156rpx; |
|
height: 60rpx; |
|
background: #FEF2D9; |
|
border-radius: 12rpx; |
|
text-align: center; |
|
line-height: 60rpx; |
|
color: #786133; |
|
font-size: 32rpx; |
|
margin: 0rpx auto; |
|
} |
|
.default{ |
|
background: #F6F6F6; |
|
color: #666; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|