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
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>
|
|
|