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.
97 lines
2.1 KiB
97 lines
2.1 KiB
<template>
|
|
<view >
|
|
<view class="item-box" v-for="(item,index) in list" :key="index" @click="jump(item)">
|
|
<view class="item-num">{{ index + 1 }}</view>
|
|
<text class="item-content">{{ item.name }}</text>
|
|
<view class="item-infor">
|
|
<text style="color:#F0AD4E" v-if="item.competeStatus === 0">未开始</text>
|
|
<text style="color:#39B54A" v-else-if="item.competeStatus === 1">
|
|
正在报名中
|
|
</text>
|
|
<text style="color:#C0C0C0" v-else>已结束</text>
|
|
</view>
|
|
<view class="item-time">
|
|
<text :style="{color:item.competeStatus === 1?'#39B54A':'#C0C0C0'}" >
|
|
({{$moment(+item.signUpStartTime).format('MM-DD HH:mm:ss')}} - {{$moment(+item.signUpEndTime).format('MM-DD HH:mm:ss')}})
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations } from 'vuex';
|
|
import { competeTimeList } from 'api/competeTimeList'
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
}
|
|
},
|
|
created() {
|
|
this.getMatchList()
|
|
},
|
|
methods: {
|
|
...mapMutations('project',['setCompanyId','setType']),
|
|
async getMatchList() {
|
|
const res = await competeTimeList()
|
|
this.list = res
|
|
},
|
|
jump(item) {
|
|
console.log(item.competeStatus)
|
|
if(item.competeStatus === 1) {
|
|
this.setCompanyId(item.id)
|
|
this.setType(item.type)
|
|
uni.navigateTo({
|
|
url:`../First/First`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.item-box {
|
|
margin-top: 24px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
font-size: 18px;
|
|
width: 670rpx;
|
|
margin-left: 40rpx;
|
|
padding-left: 56rpx;
|
|
position: relative;
|
|
box-shadow: 0px 2px 5px $grey;
|
|
border-radius: 10px;
|
|
}
|
|
.item-num {
|
|
position: relative;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
top: 20px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
background-color: #709AFC;
|
|
color: #fff;
|
|
}
|
|
.item-infor {
|
|
position: absolute;
|
|
left: 180rpx;
|
|
font-size: 30rpx;
|
|
color: $gray;
|
|
top: 6px;
|
|
}
|
|
.item-content {
|
|
position: absolute;
|
|
left: 180rpx;
|
|
top: -16px;
|
|
font-size: 16px;
|
|
}
|
|
.item-time {
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
left: 180rpx;
|
|
top: 26px;
|
|
}
|
|
</style>
|
|
|