H5_module/wallet/detailed/detailed.vue

<template>
<view>
<!--wallet/detailed/detailed.wxml-->
<!-- <view class="ssbox bgfff dflex">
  <view class="search dflex">
    <image src="/pages/images/ssico.png"></image>
    <input placeholder="流水查询" class="flex" value="{{searchTitle}}" bindinput="search" bindconfirm="confirm"
      confirm-type="search"></input>
    <image src="/pages/images/clear.png" bindtap="clearInput" wx:if="{{searchTitle!=''}}"></image>
  </view>
</view> -->


<view v-for="(item, index) in pageList" :key="index" class="pintuan">
  <view class="li">
    <view class="dflex item">
      <view class="pinimgs">
        <image src="/wallet/static/wallet/images/purchase.png" mode="aspectFit" class="pinimg" v-if="item.logType==3||item.logType==31">
        </image>
        <image src="/wallet/static/wallet/images/recharge.png" mode="aspectFit" class="pinimg" v-else-if="item.logType==6||item.logType==5||item.logType==32||item.logType==7">
        </image>
        <image src="/wallet/static/wallet/images/commission.png" mode="aspectFit" class="pinimg" v-else-if="item.logType==1"></image>
        <image src="/wallet/static/wallet/images/service.png" mode="aspectFit" class="pinimg" v-else-if="item.logType==2"></image>
        <image src="/wallet/static/wallet/images/etc.png" mode="aspectFit" class="pinimg" v-else></image>
      </view>
      <view class="pininfo ">
        <view class="proname">
          <!-- {{item.source==1?item.note:item.sourceStr}} -->
          <!-- <text>充值赠送-{{item.changeMoney}}</text> -->
          <text>{{item.logTypeName}}  </text>
          <text class="orderId">NO：{{item.orderId}}</text>
        </view>
        <view class="operate">
          <view class="introduce">
            {{item.createDate}}
          </view>
        </view>
      </view>
      <view class="price">
        <view class="give" v-if="item.logType==5">赠送：{{item.giveMenoy}}</view>
        <view>
          <text v-if="item.logType!=5" :class="item.changeMoney>0?'prc':'prc1'">{{item.changeMoney>0?'+':''}}{{item.changeMoney}}</text>
          <text v-if="item.logType==5" :class="item.actuallyMenoy>0?'prc':'prc1'">{{item.actuallyMenoy>0?'+':''}}{{item.actuallyMenoy}}</text>
        </view>
        <view><text class="num">余额：{{item.currentMoney?item.currentMoney:'0'}}</text></view>
        <!-- <view class="btn file" >积分不足</view> -->
      </view>
    </view>
  </view>
</view>
<view class="nodata" v-if="ishow">
    <image :src="picUrlss+'empty_dd.png'"></image>
    <text>暂无明细</text>
  </view>
</view>
</template>

<script>
// wallet/detailed/detailed.js
const route = require("../../utils/route.js");
const req = require("../../utils/request");

export default {
  data() {
    return {
		picUrlss: req.public.picUrls,
      searchTitle: '',
      isLoad: true,
      page: 1,
      pageList: "",
      ishow: false
    };
  },

  components: {},
  props: {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.balanceLogs();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.page++;
    this.balanceLogs();
  },
  methods: {
    //搜索
    search(e) {
      console.log(e.detail.value);
      this.searchTitle = e.detail.value;
      this.setData({
        searchTitle: e.detail.value
      }); // return e.detail.value.replace(/\s+/g, '').replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, '');
    },

    //清除输入框
    clearInput() {
      this.setData({
        searchTitle: ''
      });
    },

    confirm() {
      let value = this.searchTitle;
      this.toSearch(value, true);
    },

    // 查询余额明细
    balanceLogs() {
      let that = this;
      let from = {
        logType: -1,
        page: that.page,
        limit: 10
      };
      let isShowLoading = false;

      if (that.page == 1 && !isShowLoading) {
        console.log('一直在加载');
        req.loadIng('加载中');
        isShowLoading = true;
      }

      if (!that.isLoad) return false;
      that.isLoad = false;
      route.balanceLogs(from, res => {
        if (res && res.length >= 10) that.isLoad = true;
        if (that.page > 1) res = that.pageList.concat(res);
        console.log(res);
        res.map(it => {
			if(it.orderId&&it.orderId.length > 6){
				it.orderId = it.orderId.substring(it.orderId.length - 6);
			}
        });
        that.setData({
          pageList: res
        });

        if (that.pageList && that.pageList.length <= 0) {
          that.setData({
            ishow: true
          });
        } else {
          that.setData({
            ishow: false
          });
        }

        if (isShowLoading) {
          uni.hideLoading();
          isShowLoading = false;
        }
      });
    }

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