H5_module/integralshop/integralDetailed/index.vue

<template>
<view>
<!--pages/integralshop/integralDetailed/index.wxml-->
<view class="banner">
  <!-- <image src="/integralshop/static/integralshop/images/integralDetailed_bg.png" role="img"></image> -->
</view>
<view class="nav">
  <view class="item dflex">
    <view class="li flex">
      <view class="num">{{userIntegral}}</view>
      <view class="dflex"><!-- <image src="../static/integralshop/images/jfico1.png"></image> --><text class="count">积分余额</text></view>
    </view>
	<view class="ir">
		<view class="duihuan" @tap="goHome">积分兑换</view>
		<view class="leiji">累计积分：<text>{{cumulativeIntegral}}</text></view>
	</view>
    <!-- <view class="li">
      <view class="num1">{{cumulativeIntegral}}</view>
      <view class="dflex"><image src="../static/integralshop/images/jfico2.png"></image><text class="count">累计积分</text></view>
    </view>
	<view class="li" @tap="goHome">
	  <view class="num1">{{userIntegral}}</view>
	  <view class="dflex"><image src="../static/integralshop/images/jfico2.png"></image><text class="count">积分兑换</text></view>
	</view> -->
  </view>
</view>

<view class="cont">
  <!-- <view class="pop">
    <view class="filter dflex bgfff">
      <view class="li {{sort==''?'active':''}}" bindtap="ss" data-v="">默认</view>
      <view class="li {{sort=='stock'?'active':''}}" bindtap="ss" data-v="stock">时间<image
          src="/pages/images/integral_down.png" class="updown"></image>
      </view>
      <view class="li active" bindtap="ss" data-v="gtPrice">分数<image src="/pages/images/integral_up.png" class="updown">
        </image>
      </view>
    </view>
    <view class="item">
      <view class="brbtm dflex active">积分降序<image src="/pages/images/integral_gou.png"></image>
      </view>
      <view class="dflex">积分升序<image src="/pages/images/integral_gou.png"></image>
      </view>
    </view>
  </view> -->
  <!-- <view class="mask"></view> -->
  <block v-if="pageList.length>0">
    <view class="top" v-if="pageList.length>0">展示一个月内明细</view>
  <view class="pintuan">
    <view v-for="(item, index) in pageList" :key="index" class="li">
      <view class="dflex item">
        <view class="pinimgs">
          <image src="/integralshop/static/integralshop/images/integralOrder.png" mode="aspectFit" class="pinimg" v-if="item.source==2||item.source==21">
          </image>
          <image src="/integralshop/static/integralshop/images/integralSign.png" mode="aspectFit" class="pinimg" v-if="item.source==1">
          </image>
          <image src="/integralshop/static/integralshop/images/integralDetailed_yhq.png" mode="aspectFit" class="pinimg" v-if="item.source==4||item.source==20"></image>
            <image src="/integralshop/static/integralshop/images/extension.png" mode="aspectFit" class="pinimg" v-if="item.source==7||item.source==8">
          </image>
        </view>
        <view class="pininfo ">
          <view class="proname">
            {{item.source==1?item.note:item.sourceStr}}
          </view>
          <view class="operate">
            <view class="introduce">
              {{item.createDate}}</view>
          </view>
        </view>
        <view class="price">
          <view><text :class="item.integralChange>=0?'prc':'prc1'">{{item.integralChange>=0?'+':''}}{{item.integralChange}}</text>
          </view>
          <view><text class="num">当前总分{{item.integralAfter}}</text></view>
          <!-- <view class="btn file" >积分不足</view> -->
        </view>
      </view>
    </view>
  </view>
  </block>
  <block v-if="lastpageList.length>0">
    <view class="top">展示上个月内明细</view>
    <view class="pintuan pdlr20">
      <view v-for="(item, index) in lastpageList" :key="index" class="li">
        <view class="dflex item">
          <view class="pinimgs">
            <image src="/integralshop/static/integralshop/images/integralOrder.png" mode="aspectFit" class="pinimg" v-if="item.source==2||item.source==21">
          </image>
          <image src="/integralshop/static/integralshop/images/integralSign.png" mode="aspectFit" class="pinimg" v-if="item.source==1">
          </image>
          <image src="/integralshop/static/integralshop/images/integralDetailed_yhq.png" mode="aspectFit" class="pinimg" v-if="item.source==4||item.source==20"></image>
            <image src="/integralshop/static/integralshop/images/extension.png" mode="aspectFit" class="pinimg" v-if="item.source==7||item.source==8">
          </image>
          </view>
          <view class="pininfo ">
            <view class="proname">
              {{item.source==1?item.note:item.sourceStr}}
            </view>
            <view class="operate">
              <view class="introduce">
                {{item.createDate}}</view>
            </view>
          </view>
          <view class="price">
            <view><text class="prc">{{item.integralChange>0?'+':''}}{{item.integralChange}}</text></view>
            <view><text class="num">当前总分{{item.integralAfter}}</text></view>
          </view>
        </view>
      </view>
    </view>
  </block>
  <view class="nodata" v-if="lastpageList.length<1&&pageList.length<1">
    <image :src="picUrlss+'empty_dd.png'"></image>
    <text>暂无明细</text>
  </view>
  <!-- <view class="pintuan pdlr20">
    <view class="li">
      <view class="dflex item">
        <view class="">
          <image src="{{item.pic}}" mode="aspectFit" class="pinimg"></image>
          <image src="/pages/images/integralDetailed_yhq.png" class="yhq"></image>
        </view>
        <view class="coupon flex ">
          <view class="proname">
            兑换优惠劵
          </view>
          <view class="operate">
            <view class="introduce">
              活动扣积分 2020-02-25 12:25:36</view>
          </view>
        </view>
        <view class="price dflex">
          <view><text class="jian">-80</text></view>
        </view>
      </view>
    </view>
  </view> -->
</view>
</view>
</template>

<script>
// const { time } = require('console');
// pages/integralshop/integralDetailed/index.js
const req = require("../../utils/request.js");
const util = require("../../utils/util.js");

export default {
  data() {
    return {
		picUrlss: req.public.picUrls,
      isLoad: true,
      page: 1,
      time: "",
      pageList: "",
      lastpageList: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getMounth();
    this.getIntegralList(1);
    this.getIntegralList(2);
    this.getIntegral(); // console.log(util.getPreMonth(util.formatTime(new Date()).t2))
    // console.log(util.formatTime(new Date()))
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {// this.data.page++;
    // this.getIntegralList(1)
  }
  /**
   * 用户点击右上角分享
   */
  // onShareAppMessage: function () {
  // }
  ,
  methods: {
    // 获取当前月和上个月
    getMounth() {
      this.setData({
        time: util.getPreMonth(util.formatTime(new Date()).t2)
      });
      // console.log(this.time);
    },
	goHome(){
		uni.navigateTo({
		  url: '/integralshop/index/index'
		});
	},

    // 获取用户积分
    getIntegral() {
      req.getRequest('/api/integral/totalIntegral', {}, res => {
        // console.log(res);
        this.setData(res);
      });
    },

    // 积分记录 展示当前月的积分
    getIntegralList(type) {
      let from = {
        page: 1,
        dataTime: '',
        limit: 1000
      };

      if (type == 1) {
        from.dataTime = this.time.t1;
      } else {
        from.dataTime = this.time.t2;
      }

      req.getRequest('/api/integral/list', from, data => {
        // console.log(data);

        if (type == 1) {
          this.setData({
            pageList: data
          });
        } else {
          this.setData({
            lastpageList: data
          });
        }

        // console.log(data);
      });
    }

  }
};
</script>
<style>
@import "./index.css";
</style>