Files
signuptool-ui-xcx/pages/find/ActivityList.vue
2024-02-07 10:57:53 +08:00

255 lines
7.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<RefreshView id="mescrollRef" ref="mescrollRef" :pageBg="F1F2F5" @refresh="refresh" text="活动列表" :useDownScroll="true" :useUpScroll="true">
<sl-filter id="header" ref="slLilter" v-if="menuList.length!=0" :color="fd6d2a" themeColor="#000000" :menuList.sync="menuList" @result="result"></sl-filter>
<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/img/public/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.enrollNumbers+'人'}}/{{info.enrollNumbersLimit==0?"不限":info.enrollNumbersLimit+'人'}}</text>
<text class="date">{{info.startTime}}</text>
</view>
</view>
<view v-if="item.listActivityItemsArea.length>pos+1" class="line-thin margin-top20"></view>
</view>
</view>
</view>
</RefreshView>
</template>
<script>
// 必须
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
// 使用mixin (在main.js注册全局组件) 必须
mixins: [MescrollMixin],
data() {
return {
index: 0,
list: [],
page: {
'sort': 0,
'city': this.ReadPreference("find_city"),
'adCode': this.ReadPreference("find_city_code").slice(0, -2),
state: "",
listActivity:[]
},
menuList: [{
'title': '当前定位城市',
'key': 'type',
'reflexTitle': true,
'defaultSelectedIndex': 0,
detailList: [{
'title': this.ReadPreference("find_city"),
'value': this.ReadPreference("find_city_code").slice(0, -2)
},
{
'title': '选择其他城市',
'value': '0'
}
]
}, {
'title': '默认活动类型',
'key': 'state',
'reflexTitle': true,
'defaultSelectedIndex': 0,
detailList: [{
'title': '全部活动',
'value': ""
}]
}, {
'title': '默认排序',
'key': 'sort',
'reflexTitle': true,
'defaultSelectedIndex': 0,
'detailList': [{
'title': '按发布',
'value': 0
},
{
'title': '按报名',
'value': 1
},
{
'title': '按人气',
'value': 2
}
]
}
]
}
},
onLoad() {
let that = this
that.HTTP({
url: 'aos/v1/activity/getActivityCreatePageParameter',
method: 'GET',
data: {
"adcode": that.page.adCode
},
paramsType: "FORM",
loading: true
}).then((res) => {
console.log("that.menuList[1].detailList", that.menuList[1].detailList);
if (200 == res.code) {
// 为活动类型块查询条件赋值(直接获取活动类别接口)
let listSportCategoryArea = [];
for (var i = 0; i < res.data.listSportCategoryArea.length; i++) {
listSportCategoryArea.push({
title: res.data.listSportCategoryArea[i].sportCategoryName,
value: res.data.listSportCategoryArea[i].sid
})
}
// 必须用变量去接受
that.menuList[1].detailList = that.menuList[1].detailList.concat(listSportCategoryArea)
this.$refs.slLilter.setTitle(this.menuList)
}
});
},
onShow() {
let backResult = this.OnActivityResult();
if (backResult != undefined) {
if (!this.IsEmpty(backResult.code)) {
console.log("结果2>" + backResult.code)
this.page.adCode = backResult.code
this.page.city = backResult.city
this.menuList[0].detailList[0].title = backResult.city
this.menuList[0].detailList[0].value = backResult.code
console.log("qqq", this.menuList[0].detailList);
this.$refs.slLilter.setTitle(this.menuList)
this.$refs.mescrollRef.resetPageOne();
}
}
},
methods: {
result(val) {
if (!this.IsEmpty(val.sort)) {
this.page.sort = val.sort;
this.list = []
console.log("this.page.sort", this.page.sort);
}
if (!this.IsEmpty(val.type)) {
if (val.type != 0) {
this.page.game = val.type;
this.list = []
} else {
console.log("===>1" + JSON.stringify(this.page))
uni.navigateTo({
url: "../../pages/city/CitySelectActivity?city=" + this.page.city +
"&code=" + this.page.adCode
})
}
}
if (!this.IsEmpty(val.state)) {
this.page.state = val.state;
this.list = []
console.log("this.page.state", this.page.state);
}
this.$refs.mescrollRef.resetPageOne();
},
refresh(page) {
let _this = this
this.HTTP({
url: 'aos/v1/activity/getActivityAreaPagerList',
paramsType: "JSON",
method: "POST",
data: {
current: page.num,
size: 10,
params: {
name: "",
adCode: _this.menuList[0].detailList[0].value,
orderBy: _this.page.sort,
sportCategorySid: _this.page.state
}
},
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()
});
},
clickItem(index) {
let activitySid = this.page.listActivity[index].sid
console.log(activitySid)
uni.navigateTo({
url: '../find/ActivityDetail?activitySid=' + activitySid
});
},
}
}
</script>
<style lang="scss">
@import url("../../static/columns.css");
// .top {
// display: flex;
// flex-direction: row;
// height: 100rpx;
// background: #FFFFFF;
// opacity: 0.8;
// align-items: center;
// border-radius: 20rpx;
// margin-top: 20rpx;
// margin-left: 30rpx;
// margin-right: 30rpx;
// .unselected {
// text-align: center;
// font-size: 28rpx;
// font-family: Adobe Heiti Std;
// font-weight: normal;
// color: #191919;
// line-height: 40rpx;
// }
// .selected {
// text-align: center;
// font-size: 28rpx;
// font-family: Adobe Heiti Std;
// font-weight: normal;
// color: #2CAB69;
// line-height: 40rpx;
// border-bottom: 2rpx #2CAB69 solid;
// padding-bottom: 10rpx;
// }
// }
</style>