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
175 lines
4.1 KiB
<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> |