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.
 
 
 
 
 

153 lines
3.6 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>
<view class="dabang-list-box">
<view class="no-content" v-if="studyList.length == 0">
<image class="noContent" src="https://qiniu.upload.gznl.top/704d5b2c-730f-4a95-b9a0-1b0c8aa8b74f.png"></image>
<text>暂无学习榜打卡哦~</text>
<view class="btn" @click="toStudy()">去参加</view>
</view>
<view class="dabang-item" v-for="(item,index) in studyList" :key="index" @click="toDabang(item.id)">
<view class="dabang-info">
<view class="bangdan-name line1">{{item.listName}}</view>
<view class="time">{{item.listStartTime.split(' ')[0]}}-{{item.listEndTime.split(' ')[0]}}</view>
<view class="time">{{item.integral}}积分</view>
</view>
<view class="dabang-btm acea-row row-between-wrapper" :class="item.signState == 2 ? '' : 'colR'" v-if="active == 2">
<view>{{item.signState == 2 ? '+' : '-'}} {{item.integral}}积分</view>
<view v-if="item.signState == 2">打榜成功 {{item.signTimes}}/{{item.clockTimes}}</view>
<view v-if="item.signState == 3">打榜失败 {{item.signTimes}}/{{item.clockTimes}}</view>
</view>
<view class="dabang-btm acea-row row-between-wrapper" v-else>
<view>{{item.listState == 1 ? '进行中' : '已结束'}} {{item.signTimes}}/{{item.clockTimes}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { getStudyList } from "@/api/user"
export default{
data(){
return {
active : 1,
studyList:[]
}
},
onLoad(){
this.getList()
},
methods:{
getList(){
uni.showLoading({
title: '正在加载中...'
})
getStudyList(this.active).then((res)=>{
uni.hideLoading()
if(res.success){
this.studyList = res.data
}
})
},
toDabang(id){
this.$yrouter.push({
path: '/pages/study/dabang',
query: {
id:id,
},
})
},
toStudy(){
uni.switchTab({
url:"/pages/course/index"
})
},
tabClick(idx){
this.active = idx;
this.getList()
}
}
}
</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;
}
.btn{
width: 437rpx;
height: 78rpx;
background: rgba(248, 163, 45, 0.61);
border-radius: 44rpx;
line-height: 78rpx;
text-align: center;
color: #fff;
font-size: 32rpx;
margin: 0 auto;
}
}
.dabang-list-box{
width: 100%;
padding: 0 32rpx;
.dabang-item{
width: 100%;
background: #fff;
color: #fff;
margin-top: 28rpx;
font-size: 28rpx;
border-radius: 10rpx;
overflow: hidden;
.dabang-info{
height: 200rpx;
padding-left: 24rpx;
padding-top: 24rpx;
background: linear-gradient(148deg, #B4B6C4 0%, #C5CAD6 100%);
.bangdan-name{
font-size: 50rpx;
line-height: 80rpx;
}
}
.dabang-btm{
padding: 0 56rpx 0 24rpx;
height: 80rpx;
color: #8FB85B;
}
.colR{
color:#F99C10;
}
}
}
</style>