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.

175 lines
4.1 KiB

3 years ago
<template>
<!--pages/activity/index.wxml-->
<view class="activity-page">
<view class="tab-box">
<view class="tab-box acea-row row-around" style="position:fixed;">
<view :class="'tab-item ' + (active == 0 ? 'tab-item-active' : '')" data-i="0" @tap="tabClick">报名中</view>
<view :class="'tab-item ' + (active == 10 ? 'tab-item-active' : '')" data-i="10" @tap="tabClick">已完成</view>
</view>
</view>
<view class="activity-list-box">
<view v-for="(item, index) in activityList" :key="index" class="activity-item acea-row row-between" @tap="toDetail" :data-id="item.id">
<view class="activity-img">
<view class="img-box">
<!-- <image src="{{item.images}}" mode="widthFix"></image> -->
<image :src="item.images" mode="widthFix"></image>
</view>
</view>
<view class="activity-info-box">
<view class="activity-info-title acea-row">
<view class="line2"><text class="sm-card">{{item.cateName}}</text>{{item.name}}</view>
</view>
<view class="activity-info-time acea-row row-middle">
<text>{{item.activityStartTime}}</text>
<text class="address line1">{{item.address}}</text>
</view>
<view class="signUp-box acea-row row-between">
<text>已报名人数{{item.users.length}}</text>
<view class="status-box" v-if="item.status == 0">筹备中</view>
<view class="status-box" v-if="item.status == 1">报名中</view>
<view class="status-box" v-if="item.status == 2">待举办</view>
<view class="status-box" v-if="item.status == 3">已结束</view>
</view>
</view>
</view>
</view>
<view class="under-line">已显示全部活动</view>
</view>
</template>
<script>
// pages/activity/index.js
const app = getApp();
import util from '../../utils/util';
export default {
data() {
return {
active: 0,
activityList: []
};
},
components: {},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getActivityList();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
getActivityList() {
app.http('POST', 'activity/activityList', {
status: this.active
}).then(res => {
if (res.data.success) {
res.data.data.content.forEach(item => {
item.activityStartTime = util.getWeek(item.activityStartTime);
item.activityEndTime = util.getWeek(item.activityEndTime);
});
this.setData({
activityList: res.data.data.content
});
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
});
}
});
},
toDetail(e) {
let id = e.currentTarget.dataset.id;
uni.navigateTo({
url: './detail/index?id=' + id
});
},
tabClick(e) {
var i = Number(e.currentTarget.dataset.i);
this.setData({
active: i
});
this.getActivityList();
}
}
};
</script>
<style>
/* pages/activity/index.wxss */
page{
height: 100%;
}
.activity-page{
background: #f2f2f2;
min-height: 100%;
padding-top: 150rpx;
}
.tab-box{
width: 100%;
height: 82rpx;
background: #fff;
margin-bottom: 50rpx;
}
.tab-item{
height: 100%;
line-height: 82rpx;
font-size: 34rpx;
color: #A5A5A5;
padding-bottom: 12rpx;
box-sizing: border-box;
font-weight: 600;
position: relative;
}
.tab-item::after{
display: block;
content: '';
width: 100%;
height: 6rpx;
background: #EBB672;
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
transform:scaleX(0);
transition: all .2s ease,opacity .15s ease;
}
.tab-item-active{
color: #333;
}
.tab-item-active::after{
opacity: 1;
transform: scaleX(1);
}
.activity-item{
margin-bottom: 24rpx;
background: #fff;
padding: 16rpx 32rpx;
}
.address{
width:70%;
display:inline-block;
margin-left:10rpx;
}
</style>