16 changed files with 636 additions and 0 deletions
@ -0,0 +1,39 @@ |
|||||
|
const app = getApp() |
||||
|
|
||||
|
Component({ |
||||
|
data: { |
||||
|
imageUrl: '../../../../images/uploadImg3.png' |
||||
|
}, |
||||
|
properties: { |
||||
|
activityItemObj: { |
||||
|
type: Object, |
||||
|
value: {} |
||||
|
}, |
||||
|
actType: { |
||||
|
type: String, |
||||
|
value: 'tab0' |
||||
|
} |
||||
|
}, |
||||
|
lifetimes: { |
||||
|
attached () { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
pageLifetimes: { |
||||
|
show () { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 预览图片
|
||||
|
previewImage (e) { |
||||
|
app.globalData.previewImage = true |
||||
|
wx.previewImage({ |
||||
|
urls: [e.currentTarget.dataset.src] |
||||
|
}) |
||||
|
}, |
||||
|
toDetail (e) { |
||||
|
this.triggerEvent('toDetail', {detailId: e.currentTarget.dataset.detailid, actCurrentState: e.currentTarget.dataset.state}) |
||||
|
} |
||||
|
} |
||||
|
}) |
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
@ -0,0 +1,31 @@ |
|||||
|
<view class="activity-item" data-detailid="{{activityItemObj.id}}" data-state="{{activityItemObj.actCurrentState}}" bindtap="toDetail"> |
||||
|
<view class="left"> |
||||
|
<image mode="aspectFill" catchtap="previewImage" data-src="{{activityItemObj.headPic}}" class="activity-image" src="{{activityItemObj.headPic}}" /> |
||||
|
<view wx:if="{{actType == 'tab1' || actType == 'tab5'}}" class="user-state">{{activityItemObj.actCurrentState == 0 ? '报名中' : activityItemObj.actCurrentState == 1 ? '已报满' : activityItemObj.actCurrentState == 2 ? '未开始' : activityItemObj.actCurrentState == 3 ? '进行中' : activityItemObj.actCurrentState == 4 ? '已结束' : activityItemObj.actCurrentState == 5 ? '已取消' : ''}}</view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<view class="title">{{activityItemObj.title}}</view> |
||||
|
<view class="activity-time"> |
||||
|
<view class="activity-time-title"> |
||||
|
<image src="../../../../images/shijian.png" /> |
||||
|
<view>活动时间:</view> |
||||
|
</view> |
||||
|
<view class="activity-time-content"> |
||||
|
<view>{{activityItemObj.actStartTime}}至</view> |
||||
|
<view>{{activityItemObj.actEndTime}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="activity-address"> |
||||
|
<view class="activity-address-title"> |
||||
|
<image src="../../../../images/didian.png" /> |
||||
|
<view>活动地点:</view> |
||||
|
</view> |
||||
|
<view class="activity-address-content">{{activityItemObj.actAddress}}</view> |
||||
|
</view> |
||||
|
<view class="activity-info"> |
||||
|
<view class="num">活动名额 {{activityItemObj.actQuotaCategory == 0 ? '不限' : activityItemObj.actQuota + '人'}}</view> |
||||
|
<view class="already">已报名 {{activityItemObj.signupNum}}人</view> |
||||
|
</view> |
||||
|
<!-- <image class="signed-logo" src="../../../../images/signed.png" /> --> |
||||
|
</view> |
||||
|
</view> |
@ -0,0 +1,148 @@ |
|||||
|
.activity-item { |
||||
|
width: 100%; |
||||
|
height: 290rpx; |
||||
|
border-radius: 16rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.activity-item .left { |
||||
|
width: 220rpx; |
||||
|
height: 246rpx; |
||||
|
border-radius: 16rpx; |
||||
|
overflow: hidden; |
||||
|
margin-right: 20rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.activity-item .left .activity-image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.activity-item .left .user-state { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
width: 92rpx; |
||||
|
height: 36rpx; |
||||
|
line-height: 36rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 16rpx 0; |
||||
|
background: #d1d1d1; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right { |
||||
|
width: calc(100% - 240rpx); |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .signed-logo { |
||||
|
width: 174rpx; |
||||
|
height: 118rpx; |
||||
|
object-fit: cover; |
||||
|
right: 0; |
||||
|
top: 20rpx; |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .title { |
||||
|
font-size: 36rpx; |
||||
|
color: #333; |
||||
|
line-height: 44rpx; |
||||
|
display: -webkit-box; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
word-wrap: break-word; |
||||
|
white-space: normal !important; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-time { |
||||
|
font-size: 24rpx; |
||||
|
color: #a8a8a8; |
||||
|
line-height: 34rpx; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-time .activity-time-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 150rpx; |
||||
|
height: 34rpx; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-time .activity-time-title image { |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
object-fit: cover; |
||||
|
margin-right: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-time .activity-time-content { |
||||
|
width: calc(100% - 150rpx); |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-address { |
||||
|
font-size: 24rpx; |
||||
|
color: #a8a8a8; |
||||
|
line-height: 34rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-address .activity-address-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 150rpx; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-address .activity-address-title image { |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
object-fit: cover; |
||||
|
margin-right: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-address .activity-address-content { |
||||
|
width: calc(100% - 150rpx); |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-info .num { |
||||
|
height: 42rpx; |
||||
|
line-height: 42rpx; |
||||
|
background: rgba(217, 217, 217, 0.4); |
||||
|
text-align: center; |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
border-radius: 21rpx; |
||||
|
margin-right: 10rpx; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
.activity-item .right .activity-info .already { |
||||
|
height: 42rpx; |
||||
|
line-height: 42rpx; |
||||
|
text-align: center; |
||||
|
background: rgba(252, 85, 85, 0.1); |
||||
|
color: #fc5555; |
||||
|
font-size: 26rpx; |
||||
|
border-radius: 21rpx; |
||||
|
padding: 0 20rpx; |
||||
|
} |
@ -0,0 +1,5 @@ |
|||||
|
Component({ |
||||
|
data: { |
||||
|
|
||||
|
} |
||||
|
}) |
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
@ -0,0 +1,9 @@ |
|||||
|
<view class="preload-activity-item"> |
||||
|
<view class="left"></view> |
||||
|
<view class="right"> |
||||
|
<view class="title"></view> |
||||
|
<view class="activity-time"></view> |
||||
|
<view class="activity-address"></view> |
||||
|
<view class="activity-info"></view> |
||||
|
</view> |
||||
|
</view> |
@ -0,0 +1,61 @@ |
|||||
|
.preload-activity-item { |
||||
|
width: 100%; |
||||
|
height: 290rpx; |
||||
|
border-radius: 16rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20rpx; |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.preload-activity-item .left { |
||||
|
width: 220rpx; |
||||
|
height: 246rpx; |
||||
|
border-radius: 16rpx; |
||||
|
overflow: hidden; |
||||
|
margin-right: 20rpx; |
||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
||||
|
animation: loading 1.4s ease infinite; |
||||
|
background-size: 400% 100%; |
||||
|
} |
||||
|
.preload-activity-item .right { |
||||
|
width: calc(100% - 240rpx); |
||||
|
} |
||||
|
.preload-activity-item .right .title { |
||||
|
height: 44rpx; |
||||
|
margin-top: 20rpx; |
||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
||||
|
animation: loading 1.4s ease infinite; |
||||
|
background-size: 400% 100%; |
||||
|
} |
||||
|
.preload-activity-item .right .activity-time { |
||||
|
height: 34rpx; |
||||
|
margin-top: 20rpx; |
||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
||||
|
animation: loading 1.4s ease infinite; |
||||
|
background-size: 400% 100%; |
||||
|
} |
||||
|
.preload-activity-item .right .activity-address { |
||||
|
height: 34rpx; |
||||
|
margin-top: 20rpx; |
||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
||||
|
animation: loading 1.4s ease infinite; |
||||
|
background-size: 400% 100%; |
||||
|
} |
||||
|
.preload-activity-item .right .activity-info { |
||||
|
margin-top: 20rpx; |
||||
|
height: 44rpx; |
||||
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); |
||||
|
animation: loading 1.4s ease infinite; |
||||
|
background-size: 400% 100%; |
||||
|
} |
||||
|
|
||||
|
@keyframes loading { |
||||
|
0% { |
||||
|
background-position: 100% 50% |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
background-position: 0 50% |
||||
|
} |
||||
|
} |
@ -0,0 +1,106 @@ |
|||||
|
// subpages/heart/pages/leaderboardNew/leaderboardNew.js
|
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
selectTab: 'tab1', |
||||
|
typeList: [{ //排名方式:0-周,1-月
|
||||
|
type: '0', |
||||
|
name: '审核中', |
||||
|
select: true |
||||
|
}, |
||||
|
{ |
||||
|
type: '1', |
||||
|
name: '已通过', |
||||
|
select: false |
||||
|
}, |
||||
|
{ |
||||
|
type: '2', |
||||
|
name: '未通过', |
||||
|
select: false |
||||
|
},{ |
||||
|
type: '3', |
||||
|
name: '已结束', |
||||
|
select: false |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
// tab 切换
|
||||
|
onTabChange(e) { |
||||
|
this.setData({ |
||||
|
selectTab: e.currentTarget.dataset.tab, |
||||
|
}) |
||||
|
}, |
||||
|
// 参与记录切换
|
||||
|
onButtonChange: function (e) { |
||||
|
const list = this.data.typeList |
||||
|
let that = this; |
||||
|
list.forEach(item => { |
||||
|
if (item.type === e.currentTarget.dataset.type) { |
||||
|
item.select = true |
||||
|
} else { |
||||
|
item.select = false |
||||
|
} |
||||
|
}) |
||||
|
that.setData({ |
||||
|
typeList: list, |
||||
|
}) |
||||
|
}, |
||||
|
/** |
||||
|
* 生命周期函数--监听页面加载 |
||||
|
*/ |
||||
|
onLoad: function (options) { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function () { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function () { |
||||
|
|
||||
|
} |
||||
|
}) |
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "志愿积分" |
||||
|
} |
@ -0,0 +1,21 @@ |
|||||
|
<!-- tabbar --> |
||||
|
<view class="tab-bar"> |
||||
|
<view class="tab tab1 {{selectTab === 'tab1' ? 'select-tab' : ''}}" data-tab="tab1" bindtap="onTabChange">积分排行 |
||||
|
</view> |
||||
|
<view class="tab tab2 {{selectTab === 'tab2' ? 'select-tab' : ''}}" data-tab="tab2" bindtap="onTabChange">参与纪录 |
||||
|
</view> |
||||
|
<view class="select-bar {{selectTab === 'tab1' ? 'tab1' : 'tab2'}}"></view> |
||||
|
</view> |
||||
|
<!-- 积分排行 --> |
||||
|
<block wx:if="{{selectTab === 'tab1'}}"> |
||||
|
|
||||
|
</block> |
||||
|
|
||||
|
<!-- 参与记录 --> |
||||
|
<block wx:else> |
||||
|
<view class="tab-item"> |
||||
|
<button wx:for="{{typeList}}" wx:key="index" wx:for-index="index" bindtap="onButtonChange" hover-class="hover-btn" data-type="{{item.type}}" id="item-{{ item.type }}" class="{{item.select ? 'font-w' : 'font-b'}}"> |
||||
|
{{item.name}} |
||||
|
</button> |
||||
|
</view> |
||||
|
</block> |
@ -0,0 +1,95 @@ |
|||||
|
page { |
||||
|
background: #f7f7f7; |
||||
|
} |
||||
|
|
||||
|
.tab-bar { |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tab-bar .tab { |
||||
|
flex: 1; |
||||
|
height: 90rpx; |
||||
|
line-height: 90rpx; |
||||
|
text-align: center; |
||||
|
width: 50%; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(153, 153, 153, 1); |
||||
|
} |
||||
|
|
||||
|
.tab-bar .select-tab { |
||||
|
color: #E50F00; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.tab-bar .select-bar { |
||||
|
width: 40rpx; |
||||
|
height: 8rpx; |
||||
|
border-radius: 5rpx; |
||||
|
background: #E50F00; |
||||
|
position: absolute; |
||||
|
bottom: 0rpx; |
||||
|
} |
||||
|
|
||||
|
.tab-bar .select-bar.tab1 { |
||||
|
left: calc(25% - 15rpx); |
||||
|
transition: left linear 0.4s; |
||||
|
} |
||||
|
|
||||
|
.tab-bar .select-bar.tab2 { |
||||
|
left: calc(75% - 15rpx); |
||||
|
transition: left linear 0.4s; |
||||
|
} |
||||
|
|
||||
|
/* 参与记录 */ |
||||
|
.tab-item { |
||||
|
background: #fff; |
||||
|
height: 80rpx; |
||||
|
width: calc(100% - 60rpx); |
||||
|
padding: 0 30rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.tab-item button { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
/* margin: 0 42rpx 0 0; */ |
||||
|
flex-shrink: 0; |
||||
|
/* width: auto !important; */ |
||||
|
width: 164rpx; |
||||
|
height: 52rpx; |
||||
|
min-height: 52rpx !important; |
||||
|
line-height: 52rpx; |
||||
|
border-radius: 30rpx; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
|
||||
|
button::after { |
||||
|
border: 0rpx; |
||||
|
} |
||||
|
|
||||
|
.tab-item .font-w { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
background: linear-gradient(to right, #e95027, #db1a1f); |
||||
|
} |
||||
|
|
||||
|
.tab-item .font-b { |
||||
|
background: #fff; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
border: 1rpx solid #dbdbdb; |
||||
|
} |
||||
|
|
||||
|
.tab-item .hover-btn { |
||||
|
box-shadow: 0px 0px 10px 0px rgba(188, 0, 5, 0.22); |
||||
|
} |
Loading…
Reference in new issue