zhaoyongnian
6 years ago
9 changed files with 496 additions and 8 deletions
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,146 @@ |
|||||
|
// subpages/integralCentre/pages/index/index.js
|
||||
|
import { pointsRecordlist } from '../../../../utils/api' |
||||
|
import { getTimestamp } from '../../../../utils/common' |
||||
|
Page({ |
||||
|
|
||||
|
/** |
||||
|
* 页面的初始数据 |
||||
|
*/ |
||||
|
data: { |
||||
|
pageIndex: 1, |
||||
|
pageSize: 10, |
||||
|
pointsRecordlist:[],//积分记录列表
|
||||
|
selectTab: 'tab1', |
||||
|
typeList: [{ //排名方式：0-周，1-月
|
||||
|
type: '0', |
||||
|
name: '本周排名', |
||||
|
select: true |
||||
|
}, |
||||
|
{ |
||||
|
type: '1', |
||||
|
name: '本月排名', |
||||
|
select: false |
||||
|
} |
||||
|
], |
||||
|
timestamp: getTimestamp(), |
||||
|
loadMoreType: 'none', |
||||
|
loadMoreVisible: false, |
||||
|
}, |
||||
|
// tab 切换
|
||||
|
onTabChange(e) { |
||||
|
this.setData({ |
||||
|
loadMoreType: 'none', |
||||
|
loadMoreVisible: false, |
||||
|
pointsRecordlist:[], |
||||
|
selectTab: e.currentTarget.dataset.tab, |
||||
|
}) |
||||
|
if (this.data.selectTab == 'tab1'){ |
||||
|
this.pointsRecordlist();//初始化加载积分记录列表
|
||||
|
}else{ |
||||
|
console.log('积分排行') |
||||
|
} |
||||
|
}, |
||||
|
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) { |
||||
|
this.pointsRecordlist();//初始化加载积分记录列表
|
||||
|
}, |
||||
|
|
||||
|
// 获取事件详情
|
||||
|
pointsRecordlist() { |
||||
|
let that = this |
||||
|
const para = { |
||||
|
pageIndex: this.data.pageIndex, |
||||
|
pageSize: this.data.pageSize, |
||||
|
timestamp: this.data.timestamp |
||||
|
} |
||||
|
pointsRecordlist(para).then(res => { |
||||
|
console.log('积分记录列表', res) |
||||
|
that.setData({ |
||||
|
pointsRecordlist: that.data.pointsRecordlist.concat(res.data), |
||||
|
loadMoreType: res.data.length === that.data.pageSize ? 'loading' : 'none', |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
that.setData({ |
||||
|
loadMoreType: 'none', |
||||
|
pointsRecordlist: [] |
||||
|
}) |
||||
|
console.log(err) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面初次渲染完成 |
||||
|
*/ |
||||
|
onReady: function() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面显示 |
||||
|
*/ |
||||
|
onShow: function() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面隐藏 |
||||
|
*/ |
||||
|
onHide: function() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 生命周期函数--监听页面卸载 |
||||
|
*/ |
||||
|
onUnload: function() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面相关事件处理函数--监听用户下拉动作 |
||||
|
*/ |
||||
|
onPullDownRefresh: function() { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面上拉触底事件的处理函数 |
||||
|
*/ |
||||
|
onReachBottom: function() { |
||||
|
this.setData({ |
||||
|
loadMoreVisible: true |
||||
|
}) |
||||
|
if (this.data.loadMoreType === 'loading') { |
||||
|
console.log('加载翻页') |
||||
|
this.setData({ |
||||
|
pageNo: this.data.pageNo + 1, |
||||
|
pageSize: this.data.pageSize, |
||||
|
pageIndex: getTimestamp() |
||||
|
}) |
||||
|
this.pointsRecordlist() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 用户点击右上角分享 |
||||
|
*/ |
||||
|
onShareAppMessage: function() { |
||||
|
|
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,8 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "积分中心", |
||||
|
"navigationBarTextStyle": "white", |
||||
|
"navigationBarBackgroundColor": "#DD5245", |
||||
|
"usingComponents": { |
||||
|
"load-more": "../../../../components/loadMore/loadMore" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,48 @@ |
|||||
|
<view class="home"> |
||||
|
<view class='title'> |
||||
|
<text class="number">888</text> |
||||
|
<text class="name">积分</text> |
||||
|
</view> |
||||
|
<!-- 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'}}"> |
||||
|
<!-- 积分记录 --> |
||||
|
<view class="jf-title"> |
||||
|
<view class="jf-title-item">事件名称</view> |
||||
|
<view class="jf-title-item">积分</view> |
||||
|
<view class="jf-title-item">时间</view> |
||||
|
</view> |
||||
|
<!-- 积分记录列表 --> |
||||
|
<view class="jf-list" wx:for-index="index" wx:for-item="item" wx:key="index" wx:for="{{pointsRecordlist}}" data-id="{{item.id}}"> |
||||
|
<view class="jf-list-li color1">{{item.ruleDesc}}</view> |
||||
|
<view class="jf-list-li color2"> |
||||
|
<text wx:if="{{item.operationType == 0}}">-</text> |
||||
|
<text wx:else>+</text>{{item.points}}</view> |
||||
|
<view class="jf-list-li color1">{{item.operationTime}}</view> |
||||
|
</view> |
||||
|
</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> |
||||
|
<view class="ph-list"> |
||||
|
<view class="left"> |
||||
|
<!-- 左边图片 --> |
||||
|
<view class="left-img"> |
||||
|
<image class="img-bg" src="../../images/first.png"></image> |
||||
|
<view class="list-number">1</view> |
||||
|
</view> |
||||
|
<!-- 名字 --> |
||||
|
<view class="list-name">马大哈</view> |
||||
|
</view> |
||||
|
<view class="right">890</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
@ -0,0 +1,233 @@ |
|||||
|
.home { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
width: 100%; |
||||
|
height: 300rpx; |
||||
|
background: linear-gradient(0deg, rgba(212, 45, 48, 1) 0%, rgba(221, 83, 70, 1) 100%); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.title .number { |
||||
|
height: 100rpx; |
||||
|
font-size: 100rpx; |
||||
|
line-height: 100rpx; |
||||
|
font-weight: bold; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
margin-top: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.title .name { |
||||
|
height: 34rpx; |
||||
|
font-size: 34rpx; |
||||
|
line-height: 34rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
margin-top: 29rpx; |
||||
|
} |
||||
|
|
||||
|
.tab-bar { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tab-bar .tab { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
text-align: center; |
||||
|
width: 50%; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(153, 153, 153, 1); |
||||
|
} |
||||
|
|
||||
|
.tab-bar .select-tab { |
||||
|
color: #b20004; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.tab-bar .select-bar { |
||||
|
width: 40rpx; |
||||
|
height: 8rpx; |
||||
|
border-radius: 5rpx; |
||||
|
background: #b20004; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
/* 积分记录 */ |
||||
|
|
||||
|
.jf-title { |
||||
|
margin-top: 20rpx; |
||||
|
background: #fff; |
||||
|
height: 80rpx; |
||||
|
width: calc(100% - 40rpx); |
||||
|
padding: 0 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.jf-title .jf-title-item { |
||||
|
width: 33.3333%; |
||||
|
height: 80rpx; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
color: rgba(51, 51, 51, 1); |
||||
|
line-height: 80rpx; |
||||
|
} |
||||
|
|
||||
|
.jf-list { |
||||
|
background: #fff; |
||||
|
height: 80rpx; |
||||
|
width: calc(100% - 40rpx); |
||||
|
padding: 0 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.jf-list .jf-list-li { |
||||
|
width: 33.3333%; |
||||
|
height: 80rpx; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 80rpx; |
||||
|
} |
||||
|
|
||||
|
.jf-list .jf-list-li.color1 { |
||||
|
color: rgba(51, 51, 51, 1); |
||||
|
} |
||||
|
|
||||
|
.jf-list .jf-list-li.color2 { |
||||
|
color: rgba(178, 0, 4, 1); |
||||
|
} |
||||
|
|
||||
|
/* 积分排行 */ |
||||
|
|
||||
|
.tab-item { |
||||
|
margin-top: 20rpx; |
||||
|
background: #fff; |
||||
|
height: 80rpx; |
||||
|
width: calc(100% - 40rpx); |
||||
|
padding: 0 20rpx; |
||||
|
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: 208rpx; |
||||
|
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); |
||||
|
} |
||||
|
|
||||
|
/* 积分排行列表 */ |
||||
|
|
||||
|
.ph-list { |
||||
|
background: #fff; |
||||
|
height: 80rpx; |
||||
|
width: calc(100% - 140rpx); |
||||
|
padding: 0 70rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.ph-list .left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.left .left-img { |
||||
|
position: fixed; |
||||
|
width: 41rpx; |
||||
|
height: 38rpx; |
||||
|
} |
||||
|
|
||||
|
.left .left-img .img-bg { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
z-index: 10; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
} |
||||
|
|
||||
|
.left .left-img .list-number { |
||||
|
position: relative; |
||||
|
z-index: 100; |
||||
|
width: 100%; |
||||
|
height: 20rpx; |
||||
|
line-height: 20rpx; |
||||
|
text-align: center; |
||||
|
font-size: 20rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
margin-top: 3rpx; |
||||
|
} |
||||
|
|
||||
|
.left .list-name { |
||||
|
font-size: 32rpx; |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(51, 51, 51, 1); |
||||
|
margin-left: 90rpx; |
||||
|
} |
||||
|
|
||||
|
.ph-list .right { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
color: rgba(178, 0, 4, 1); |
||||
|
} |
||||
Loading…
Reference in new issue