积分中心

subpages/integralCentre/pages/index/index.js

@@ -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() {
+
+  }
+})

subpages/integralCentre/pages/index/index.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "积分中心",
+  "navigationBarTextStyle": "white",
+  "navigationBarBackgroundColor": "#DD5245",
+  "usingComponents": {
+    "load-more": "../../../../components/loadMore/loadMore"
+  }
+}

subpages/integralCentre/pages/index/index.wxml

@@ -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>

subpages/integralCentre/pages/index/index.wxss

@@ -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);
+}

utils/api.js

@@ -24,7 +24,9 @@ module.exports = {
   noticelist: noticelist,
   newsList: newsList,
   getIssueList: getIssueList,
-  getProjectList: getProjectList
+  getProjectList: getProjectList,
+  pointsRankinglist: pointsRankinglist,
+  pointsRecordlist: pointsRecordlist
 }
 
 function getToken(wxCode) {
@@ -78,7 +80,11 @@ function saveWxFormid(wxCode, wxFormId) {
   })
 }
 
-function getTokenV2({wxCode, gridId, inviteUserId}) {
+function getTokenV2({
+  wxCode,
+  gridId,
+  inviteUserId
+}) {
   return fly.get('app-user/user/ma/v2/getToken', {
     wxCode,
     gridId,
@@ -137,14 +143,14 @@ function changeGrid(gridId) {
 /**
  * 获取 议题列表
  */
-function getIssueList (params) {
+function getIssueList(params) {
   return fly.get('events/issue/list', params)
 }
 
 /**
  * 获取项目列表
  */
-function getProjectList (params) {
+function getProjectList(params) {
   return fly.get('events/item/list', params)
 }
 // ---------------------------------党群议事 end ---------------------
@@ -179,7 +185,10 @@ function getCommandAssociation() {
 /**
  * 我的话题列表
  */
-function getMyTopicList ({pageIndex, pageSize}) {
+function getMyTopicList({
+  pageIndex,
+  pageSize
+}) {
   return fly.get('group/topic/listOfMine', {
     pageIndex,
     pageSize
@@ -189,14 +198,18 @@ function getMyTopicList ({pageIndex, pageSize}) {
 /**
  * 我的议题列表
  */
-function getMyIssueList () {
+function getMyIssueList() {
   return fly.get('events/issue/listByUserId')
 }
 
 /**
  * 我的项目列表
  */
-function getMyProjectList ({ pageIndex, pageSize, timestamp }) {
+function getMyProjectList({
+  pageIndex,
+  pageSize,
+  timestamp
+}) {
   return fly.get('events/item/listByUserId', {
     pageIndex,
     pageSize,
@@ -207,8 +220,48 @@ function getMyProjectList ({ pageIndex, pageSize, timestamp }) {
 /**
  * 查看用户是否已保存unionId
  */
-function checkWxUnionId () {
+function checkWxUnionId() {
   return fly.get('app-user/user/checkWxUnionId')
 }
 // ---------------------------------个人中心接口 end-------------------
 
+/**
+ * 积分记录-积分记录接口
+ * timestamp    String 第一页查询发起时的时间
+ * pageIndex    Number 页码
+ * pageSize     Number 页容量
+ */
+function pointsRecordlist({
+  timestamp,
+  pageIndex,
+  pageSize
+}) {
+  return fly.get('points/pointsRecord/list', {
+    timestamp,
+    pageIndex,
+    pageSize
+  })
+}
+
+/**
+ * 积分记录-积分排行接口
+ * timestamp    String 第一页查询发起时的时间
+ * pageIndex    Number 页码
+ * pageSize     Number 页容量
+ * rankingType  Number 排名方式：0-周，1-月
+ */
+
+function pointsRankinglist({
+  timestamp,
+  pageIndex,
+  pageSize,
+  rankingType
+}) {
+  return fly.get('points/pointsRanking/list', {
+    timestamp,
+    pageIndex,
+    pageSize,
+    rankingType
+  })
+}
+