284 lines
12 KiB
HTML
284 lines
12 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.list-card {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.activity_card {
|
|
padding: 15px;
|
|
background: #fff;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.activity_card .van-image, .activity_card .van-image img {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.activity_card .activity_content {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.activity_card .activity_content .activity_name {
|
|
line-height: 25px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.activity_card .activity_content .activity_bottom {
|
|
line-height: 25px;
|
|
display: flex;
|
|
}
|
|
|
|
.activity_card .activity_content .activity_bottom .left {
|
|
line-height: 25px;
|
|
overflow: hidden;
|
|
width: calc(100% - 80px);
|
|
font-size: 12px;
|
|
color: #c4bebe;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.activity_card .activity_content .activity_bottom .right {
|
|
line-height: 25px;
|
|
overflow: hidden;
|
|
width: 80px;
|
|
max-width: 80px;
|
|
text-align: right;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<van-nav-bar title="活动列表" left-arrow placeholder fixed
|
|
@click-left="history.go(-1)"></van-nav-bar>
|
|
|
|
<div class="search-fixed">
|
|
<van-dropdown-menu active-color="#1989fa">
|
|
<van-dropdown-item v-model="pageForm.year" :options="yearList"
|
|
@change="formChange"></van-dropdown-item>
|
|
<van-dropdown-item v-model="pageForm.activityStatus" :options="activityStatusList"
|
|
@change="formChange"></van-dropdown-item>
|
|
<van-dropdown-item v-model="pageForm.activityLevel" :options="activityLevelList"
|
|
@change="formChange"></van-dropdown-item>
|
|
</van-dropdown-menu>
|
|
</div>
|
|
|
|
<div style="margin: 60px auto 80px auto">
|
|
<van-list v-model="loading" :finished="finished"
|
|
:finished-text="tableData.length>0?'没有更多了':''"
|
|
@load="pageData">
|
|
<div v-for="o in tableData" class="list-card" @click="openReg(o)">
|
|
|
|
<div class="activity_card">
|
|
<van-image
|
|
fit="cover"
|
|
width="100%"
|
|
height="200"
|
|
:src="FILE_DOMAIN + '/fileStreamPreview?id=' + o.cover"
|
|
></van-image>
|
|
<div class="activity_content">
|
|
<div class="activity_name van-ellipsis">
|
|
<van-icon name="fire" color="red"></van-icon>
|
|
<div style="margin-left: 10px;width: calc(100% - 26px);text-overflow: ellipsis;overflow: hidden;white-space: nowrap">
|
|
{{o.name}}
|
|
</div>
|
|
</div>
|
|
<div class="activity_bottom">
|
|
<div class="left" style="width: 100%">
|
|
<van-icon name="clock" size="1em"></van-icon>
|
|
<span style="margin-left: 10px;">
|
|
报名时间:{{o.applyStartTime}}至{{o.applyEndTime}}
|
|
<!-- {{moment(o.activityStartTime).format('YYYY/MM/DD HH:mm')}} 至-->
|
|
<!-- {{moment(o.activityEndTime).format('YYYY/MM/DD HH:mm')}}-->
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<!-- <div class="right">-->
|
|
<!-- <span v-if="moment(o.applyEndTime).valueOf() > moment().valueOf() && moment().valueOf() > moment(o.applyStartTime).valueOf()"-->
|
|
<!-- style="color: forestgreen">-->
|
|
<!-- 报名中-->
|
|
<!-- </span>-->
|
|
<!-- <span v-else-if="moment(o.applyEndTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.startTime).valueOf()"-->
|
|
<!-- style="color: #ee1919">-->
|
|
<!-- 报名结束-->
|
|
<!-- </span>-->
|
|
<!-- <span v-else-if="moment(o.startTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.endTime).valueOf()"-->
|
|
<!-- style="color: forestgreen">-->
|
|
<!-- 活动进行中-->
|
|
<!-- </span>-->
|
|
<!-- <span v-else-if="moment().valueOf() > moment(o.endTime).valueOf()"-->
|
|
<!-- style="color: #ee1919">-->
|
|
<!-- 活动结束-->
|
|
<!-- </span>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
|
|
<div class="activity_bottom">
|
|
<div class="left">
|
|
<van-icon name="clock" size="1em"></van-icon>
|
|
<span style="margin-left: 10px;">
|
|
活动时间:{{o.startTime}}
|
|
<!-- {{moment(o.activityStartTime).format('YYYY/MM/DD HH:mm')}} 至-->
|
|
<!-- {{moment(o.activityEndTime).format('YYYY/MM/DD HH:mm')}}-->
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="right">
|
|
<span v-if="moment(o.applyStartTime).valueOf() > moment().valueOf()"
|
|
style="color: forestgreen">
|
|
未开始报名
|
|
</span>
|
|
<span v-else-if="moment(o.applyEndTime).valueOf() > moment().valueOf() && moment().valueOf() > moment(o.applyStartTime).valueOf()"
|
|
style="color: forestgreen">
|
|
报名中
|
|
</span>
|
|
<span v-else-if="moment(o.applyEndTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.startTime).valueOf()"
|
|
style="color: #ee1919">
|
|
报名结束
|
|
</span>
|
|
<span v-else-if="moment(o.startTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(o.endTime).valueOf()"
|
|
style="color: forestgreen">
|
|
活动进行中
|
|
</span>
|
|
<span v-else-if="moment().valueOf() > moment(o.endTime).valueOf()"
|
|
style="color: #ee1919">
|
|
活动结束
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- <div class="activity_content" style="font-size: 12px; color: #c4bebe;">-->
|
|
<!-- <div class="left">-->
|
|
<!-- <van-icon name="clock" size="1em"></van-icon>-->
|
|
<!-- <span style="margin-left: 5px;">-->
|
|
<!-- {{moment(o.startTime).format('YYYY/MM/DD HH:mm')}} 至-->
|
|
<!-- {{moment(o.endTime).format('YYYY/MM/DD HH:mm')}}-->
|
|
<!-- </span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-list>
|
|
</div>
|
|
|
|
<van-empty v-if="mLoading==false&&tableData.length==0" class="custom-image" image="/none.svg"
|
|
description="暂无数据">
|
|
</van-empty>
|
|
|
|
<div>
|
|
<van-tabbar v-model="tabBarIndex" :active-color="themeColor">
|
|
<van-tabbar-item icon="home-o" url="/mobile/activity/unionActivity">全部活动
|
|
</van-tabbar-item>
|
|
<van-tabbar-item icon="friends-o" url="/mobile/activity/myActivity">我的活动
|
|
</van-tabbar-item>
|
|
</van-tabbar>
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
pageDataUrl: '/mobile/activity/unionActivity/pageData',
|
|
pageForm: {
|
|
year: '',
|
|
activityStatus: null
|
|
},
|
|
tabBarIndex: 0,
|
|
activityLevelList: [],
|
|
activityStatusList: [
|
|
{text: '全部', value: 1},
|
|
{text: '未开始', value: 5},
|
|
{text: '报名中', value: 2},
|
|
{text: '进行中', value: 3},
|
|
{text: '已结束', value: 4}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
formChange() {
|
|
this.pageForm.pageNumber = 1
|
|
this.tableData = []
|
|
this.pageData()
|
|
},
|
|
async pageData() {
|
|
this.mLoading = true
|
|
const resp = await $.post('/mobile/activity/unionActivity/pageData', this.pageForm)
|
|
if (resp.code === 0) {
|
|
if (resp.data.list.length === 0) {
|
|
this.tableData = []
|
|
} else {
|
|
this.tableData = this.tableData.concat(resp.data.list)
|
|
/* this.tableData.forEach(v => {
|
|
if (v.cover) {
|
|
const cover = JSON.parse(v.cover)
|
|
v.cover = cover[0].filepath
|
|
}
|
|
|
|
})*/
|
|
}
|
|
if (this.tableData.length === resp.data.totalCount) {
|
|
this.finished = true
|
|
} else {
|
|
this.pageForm.pageNumber++
|
|
}
|
|
}
|
|
this.loading = false;
|
|
this.mLoading = false
|
|
},
|
|
//跳转页面
|
|
openReg(o) {
|
|
console.log(o)
|
|
if (moment(o.applyStartTime).valueOf() > moment().valueOf()) {
|
|
this.$toast('活动未开始报名')
|
|
return;
|
|
}
|
|
if (o.projectTypeCode === '50004') {
|
|
window.location.href = '/mobile/activity/Sports/list/activityEventList?id=' + o.id
|
|
} else {
|
|
window.location.href = '/mobile/activity/unionActivity/goReg?id=' + o.id + '&signUpMethod=' + o.signUpMethod
|
|
}
|
|
},
|
|
async init() {
|
|
this.$set(this.pageForm, "activityStatus", 1)
|
|
this.$set(this.pageForm, "year", new Date().getFullYear())
|
|
const {data} = await $.get("/platform/activity/basic/basic/settings/getActivityTwoLevelType", {code: 40000})
|
|
this.activityLevelList = []
|
|
this.activityLevelList.push({value: null, text: "全部类别"})
|
|
data.forEach(v => {
|
|
this.activityLevelList.push({value: v.code, text: v.name})
|
|
})
|
|
|
|
this.$set(this.pageForm, "activityLevel", this.activityLevelList[0].value)
|
|
}
|
|
},
|
|
async created() {
|
|
this.init()
|
|
}
|
|
})
|
|
window.addEventListener('pageshow', e => {
|
|
if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
|
|
vue.init()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|