382 lines
12 KiB
Vue
382 lines
12 KiB
Vue
<template>
|
||
<TabLayout ref='tabLayout' text="我的活动" :tabTitleData="page.tabTitle" @tabClickItem='clickTab' @downRefresh="down" :isShareIn="page.isShareIn">
|
||
<view class="margin-top250"></view>
|
||
<view v-for="(item,index) in page.listActivity " :key="index">
|
||
<view class="activity-area" @click="clickItem(index)">
|
||
<view class="summary">
|
||
<view class="name-category">
|
||
<text class="name">{{item.name}}</text>
|
||
<text class="category">{{item.sportCategoryName}}</text>
|
||
</view>
|
||
<text class="enroll">报名截止：{{item.enrollEndTime}}</text>
|
||
</view>
|
||
|
||
<view class="image-area">
|
||
<image class="image" mode="aspectFill" :src="item.firstCoverImage"></image>
|
||
<view class="tips">
|
||
<image class="icon" src="../../static/renqi.png"></image>
|
||
<text class="popularity">{{item.popularity}}</text>
|
||
<text :class="{'enroll-state enroll-no':item.enrollState ==1||item.enrollState ==3,'enroll-state enroll-yes':item.enrollState==2}" >{{item.enrollStateName}}</text>
|
||
</view>
|
||
</view>
|
||
<view v-for="(info,pos) in item.listActivityItemsArea " :key="pos">
|
||
<view class="item-area">
|
||
<view class="item-name-mold-money">
|
||
<text class="item-name">{{info.name}}</text>
|
||
<text class="mold-money">{{info.enrollMoldName}}/{{info.enrollMoney==0?"免费":info.enrollMoney}}</text>
|
||
</view>
|
||
<view class="enroll-amount-date">
|
||
<text class="amount">报名数：{{info.enrollNumbers==0?"暂无":info.enrollNumbersLimit+'人'}}{{info.enrollNumbersLimit==0?"不限":info.enrollNumbersLimit+'人'}}</text>
|
||
<text class="date">{{info.startTime}}</text>
|
||
</view>
|
||
<view v-if="item.listActivityItemsArea.length>pos+1" class="line-wide"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</TabLayout>
|
||
|
||
<!-- <TabLayout ref='tabLayout' text="我的赛事" :tabTitleData="page.tabTitle" @tabClickItem='clickTab' @downRefresh="down" :isShareIn="page.isShareIn">
|
||
<swiper style="min-height: 100vh;" :current="page.currentTab" @change="swiperTab">
|
||
<swiper-item v-for="(listItem,listIndex) in data.tabList" :key="listIndex" style="box-sizing: border-box;">
|
||
|
||
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1">
|
||
<view :style="{'width': '100%','padding-top': page.paddingTop}">
|
||
<loading v-if="page.showLoading[listIndex]" :key='listIndex'></loading>
|
||
<view v-for="(item,index) in listItem">
|
||
<view v-if="index!=0"
|
||
style="width: 100%; height: 10rpx;background-color: #ccc; margin-top: 10rpx;">
|
||
</view>
|
||
<view>
|
||
<view style="display: flex; flex-direction: row; margin-left: 30rpx;margin-top: 30rpx;">
|
||
<text
|
||
style="color: #101010; font-size: 32rpx;font-weight: 530; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex: 1;">{{item.name}}</text>
|
||
<text
|
||
style="display: flex;align-items: center; margin-right: 30rpx; color: #fff; font-size: 20rpx; background-color: #F2BF5C; padding: 0rpx 15rpx;border-radius: 5rpx;">{{item.sportCategoryName}}</text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
style="display: flex;flex-direction: row;margin-top: 15rpx;align-items: center;margin-left: 30rpx;margin-right: 30rpx;">
|
||
<text style="font-size: 26rpx;color: #666666;">报名截止：</text>
|
||
<text style="color: #666666;font-size: 26rpx;">{{item.enrollEndTime}}</text>
|
||
</view>
|
||
<view style="background-color: #F1F1F1; height: 5rpx; width: 100%; margin-top: 20rpx;">
|
||
</view>
|
||
<view v-for="(info,pos) in item.listMyActivityItemsArea " :key="pos">
|
||
<view
|
||
style="display: flex;flex-direction: column;margin-left: 30rpx;margin-right: 30rpx;">
|
||
<view style="display: flex;flex-direction: row; align-items: center; margin-top: 10rpx;
|
||
padding-top: 10rpx;padding-bottom: 10rpx;">
|
||
<text style="color: #101010; font-size: 28rpx; ">{{info.name}}</text>
|
||
<text
|
||
style="color: #919191 ; font-size: 24rpx;margin-left: 25rpx;">{{info.enrollMoldName}}</text>
|
||
<text
|
||
style="color: #919191 ; font-size: 24rpx;margin-left: 15rpx;">{{info.enrollNumbers==0?"暂无":info.enrollNumbersLimit+'人'}}</text>
|
||
<image v-if="info.isJoin!=0"
|
||
style="width: 20rpx;height: 20rpx;margin-left: 15rpx;"
|
||
src="../../static/custom-icon/click.png" mode="aspectFill"></image>
|
||
<text
|
||
style="color: #919191 ; font-size: 24rpx;flex: 1;text-align: right;">{{info.startTime}}</text>
|
||
</view>
|
||
<view v-if="item.listMyActivityItemsArea.length>pos+1"
|
||
style="width: 100%; height: 2rpx;background-color: #efefef; margin-top: 10rpx;">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<loading v-if="page.showBottomLoading[listIndex]" :key="'bottom'+listIndex"></loading>
|
||
|
||
<noData v-if="page.showNoData[listIndex]" :key="'nodata'+listIndex"></noData>
|
||
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</swiper-item>
|
||
|
||
</swiper>
|
||
|
||
|
||
</TabLayout> -->
|
||
|
||
</template>
|
||
|
||
<script>
|
||
const util = require('../../util/util.js');
|
||
export default {
|
||
data() {
|
||
return {
|
||
page: {
|
||
listActivity:[],
|
||
tabTitle: ['全部', '我创建的', '我加入的'],
|
||
tabType: [0, 1, 2],
|
||
currentTab: 0,
|
||
pages: [1, 1, 1, 1], //第几个swiper的第几页
|
||
nowLoadingPages: [false, false, false, false], //是否正在加载
|
||
paddingTop: '0px',
|
||
showLoading: [false, false, false, false],
|
||
showBottomLoading: [false, false, false, false],
|
||
showNoData: [false, false, false, false],
|
||
isShareIn: false,
|
||
show: false
|
||
},
|
||
data: {
|
||
tabList: [
|
||
[],
|
||
[],
|
||
[],
|
||
[]
|
||
]
|
||
}
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
if (getApp().globalData.isLogin) {
|
||
this.page.show = false
|
||
} else {
|
||
this.page.show = true
|
||
}
|
||
let _this = this
|
||
this.$nextTick()
|
||
.then(function() {
|
||
_this.page.paddingTop = _this.$refs.tabLayout.getViewPagerTop()
|
||
})
|
||
|
||
let index = options.index
|
||
if (this.IsEmpty(index)) {
|
||
index = 0;
|
||
}
|
||
|
||
// 加载第一页数据
|
||
this.down(index)
|
||
this.page.currentTab = index
|
||
|
||
this.page.isShareIn = ("true" == options.isShareIn ? true : false)
|
||
},
|
||
onShow() {
|
||
// 加载第一页数据
|
||
//this.down(this.page.currentTab)
|
||
},
|
||
methods: {
|
||
refresh(page) {
|
||
let _this = this
|
||
this.HTTP({
|
||
url: "aos/v1/aosUser/getMyActivityAreaPagerList",
|
||
data: {
|
||
current: 1,
|
||
size: 10,
|
||
params: {
|
||
"sysUserSid": getApp().globalData.sysUserSid,
|
||
"type": 1,
|
||
}
|
||
},
|
||
paramsType: "JSON",
|
||
method: "POST",
|
||
loading: true
|
||
}).then((res) => {
|
||
// 成功关闭刷新状态
|
||
_this.$refs.mescrollRef.refreshFinished(res.data.records.length)
|
||
if (page.num == 1) {
|
||
// 第一页 先清空集合数据
|
||
_this.page.listActivity = []
|
||
}
|
||
// 追加数据
|
||
_this.page.listActivity = _this.page.listActivity.concat(res.data.records)
|
||
|
||
}).catch(function(err) {
|
||
_this.$refs.mescrollRef.refreshError()
|
||
});
|
||
|
||
console.log("中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国")
|
||
},
|
||
clickItem(index) {
|
||
let activitySid = this.page.listActivity[index].sid
|
||
console.log(activitySid)
|
||
uni.navigateTo({
|
||
url: '../find/ActivityDetail?activitySid=' + activitySid
|
||
});
|
||
|
||
},
|
||
gamesClick(gameSid, type, messageSid, page) {
|
||
|
||
if (page == 3) {
|
||
uni.navigateTo({
|
||
url: './WarActivity?linkSid=' + gameSid + '&messageSid=' + messageSid
|
||
})
|
||
} else {
|
||
|
||
if (type == 2) {
|
||
uni.navigateTo({
|
||
url: './PkGameDetailsActivity?gameSid=' + gameSid
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: './HappyGameDetailsActivity?gameSid=' + gameSid
|
||
})
|
||
}
|
||
|
||
}
|
||
},
|
||
// swiper 滑动
|
||
swiperTab: function(e) {
|
||
// 模拟tab点击
|
||
this.$refs.tabLayout.changeTab(e);
|
||
},
|
||
getGameType(isGroups) {
|
||
if (isGroups) {
|
||
return "赛事类型：团体赛";
|
||
} else {
|
||
return "赛事类型：单打赛";
|
||
}
|
||
},
|
||
getState(startTime, endTime) {
|
||
|
||
let l = this.CurrentMillions()
|
||
|
||
let state = ''
|
||
|
||
if (startTime > l) {
|
||
state = "比赛状态：比赛未开始";
|
||
} else if (startTime < l && endTime > l) {
|
||
state = "比赛状态：比赛进行中";
|
||
} else if (endTime < l) {
|
||
state = "比赛状态：比赛结束";
|
||
}
|
||
|
||
return state;
|
||
},
|
||
getTime(time) {
|
||
return '比赛时间：' + this.TimeFormat(time, "yyyy-MM-dd HH:mm");
|
||
},
|
||
clickTab(index) {
|
||
this.page.currentTab = index
|
||
// 每次切换时都重新加载页面
|
||
this.down(index)
|
||
},
|
||
down(index) {
|
||
// 下拉刷新请求 并更改数据
|
||
let _this = this
|
||
this.data.tabList[index] = []
|
||
//二维数组，开启强制渲染
|
||
_this.$forceUpdate()
|
||
// 初始化当前的页数
|
||
this.page.pages[index] = 1
|
||
// 当前页数的加载状态
|
||
this.page.nowLoadingPages[index] = true
|
||
// 只要切换页面就显示
|
||
this.page.showLoading[index] = true
|
||
this.page.showNoData[index] = false
|
||
|
||
this.HTTP({
|
||
url: "aos/v1/aosUser/getMyActivityAreaPagerList",
|
||
data: {
|
||
current: this.page.pages[index],
|
||
size: 10,
|
||
params: {
|
||
"sysUserSid": getApp().globalData.sysUserSid,
|
||
"type": _this.page.tabType[index],
|
||
}
|
||
},
|
||
paramsType: "JSON",
|
||
method: "POST",
|
||
}).then((res) => {
|
||
// 当前页数的加载状态
|
||
_this.page.nowLoadingPages[index] = false
|
||
// 填充数据
|
||
_this.data.tabList[index] = res.data.records
|
||
_this.page.listActivity = res.data.records
|
||
_this.$refs.tabLayout.downRefresh()
|
||
//二维数组，开启强制渲染
|
||
_this.$forceUpdate()
|
||
// 关闭loading
|
||
_this.page.showLoading[index] = false
|
||
_this.page.showNoData[index] = res.data.records.length == 0
|
||
}, (err) => {
|
||
// 当前页数的加载状态
|
||
_this.page.nowLoadingPages[index] = false
|
||
_this.$refs.tabLayout.downRefresh()
|
||
//二维数组，开启强制渲染
|
||
_this.$forceUpdate()
|
||
// 关闭loading
|
||
_this.page.showLoading[index] = false
|
||
_this.page.showNoData[index] = false
|
||
|
||
})
|
||
},
|
||
request(index, pagerStart) {
|
||
|
||
let _this = this
|
||
|
||
this.HTTP({
|
||
url: "aos/v1/activityManagement/getMyActivityAreaPagerList",
|
||
data: {
|
||
current: pagerStart,
|
||
size: 10,
|
||
params: {
|
||
"sysUserSid": getApp().globalData.memberSid,
|
||
"type": _this.page.tabType[index],
|
||
}
|
||
|
||
},
|
||
paramsType: "JSON",
|
||
method: "POST",
|
||
}).then((res) => {
|
||
|
||
// 重置加载状态
|
||
_this.page.nowLoadingPages[index] = false
|
||
_this.$refs.tabLayout.downRefresh()
|
||
_this.page.showBottomLoading[this.page.currentTab] = false
|
||
|
||
if (res.data.records.length == 0) {
|
||
_this.Toast('没有更多数据了')
|
||
//二维数组，开启强制渲染
|
||
_this.$forceUpdate()
|
||
return
|
||
}
|
||
|
||
_this.data.tabList[index] = _this.data.tabList[index].concat(res.data.records)
|
||
//二维数组，开启强制渲染
|
||
_this.$forceUpdate()
|
||
|
||
}, (err) => {
|
||
// 重置加载状态
|
||
_this.page.nowLoadingPages[index] = false
|
||
_this.$refs.tabLayout.downRefresh()
|
||
//二维数组，开启强制渲染
|
||
_this.$forceUpdate()
|
||
})
|
||
},
|
||
// 加载更多 util.throttle为防抖函数
|
||
lower1: util.throttle(function(e) {
|
||
|
||
if (this.page.nowLoadingPages[this.page.currentTab]) {
|
||
// 正在加载 拦截请求
|
||
return
|
||
}
|
||
|
||
this.page.showBottomLoading[this.page.currentTab] = true
|
||
//二维数组，开启强制渲染
|
||
this.$forceUpdate()
|
||
|
||
// 更改请求的页数
|
||
this.page.pages[this.page.currentTab]++
|
||
// 正在加载
|
||
this.page.nowLoadingPages[this.page.currentTab] = true
|
||
|
||
// 请求数据
|
||
this.request(this.page.currentTab, this.page.pages[this.page.currentTab])
|
||
|
||
}, 300)
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import url("../../static/columns.css");
|
||
.margin-top250{
|
||
margin-top:250rpx;
|
||
}
|
||
</style>
|