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