zhaoyongnian
5 years ago
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