shangfutong-ui/jeepay-ui-uapp-cashier/pageMember/memberRecord/memberRecord.vue

<template>
  <view class="header-selected">
    <view :class="{ 'selected-style': pageData.rechargeOrConsume == 'recharge' }" @tap="headerChange('recharge')">充值记录
    </view>
    <view :class="{ 'selected-style': pageData.rechargeOrConsume == 'consume' }" @tap="headerChange('consume')">消费记录
    </view>
  </view>
  <view style="height: 110rpx;"></view>
  <!-- 充值记录 -->
  <block v-if="pageData.rechargeOrConsume == 'recharge'" v-for="(v, i) in pageData.pageDataList" :key="i">
    <view class="re-card">
      <view class="re-amount">
        <text class="unit">￥</text>
        {{ (v.entryAmount / 100).toFixed(2) }}
      </view>
      <view class="item">
        <view class="title">实付金额</view>
        <view class="desc">{{ (v.payAmount / 100).toFixed(2) }}元</view>
      </view>
      <view class="item">
        <view class="title">赠送金额</view>
        <view class="desc">{{ (v.giveAmount / 100).toFixed(2) }}元</view>
      </view>
      <view class="item">
        <view class="title">充值时间</view>
        <view class="desc">{{ v.createdAt }}</view>
      </view>
    </view>
  </block>
  <!-- 消费记录 -->
  <block v-if="pageData.rechargeOrConsume == 'consume'" v-for="(v, i) in pageData.pageDataList" :key="i">
    <view class="re-card">
      <view class="re-amount">
        <text class="unit">￥</text>
        {{ (Math.abs(v.changeAmount) / 100).toFixed(2) }}
      </view>
      <view class="item">
        <view class="title">消费商户</view>
        <view class="desc">{{ v.mchName }}</view>
      </view>
      <view class="item">
        <view class="title">消费时间</view>
        <view class="desc">{{ v.createdAt }}</view>
      </view>
    </view>
  </block>
  <view class="list-null" v-if="!pageData.hasNext">暂无更多数据</view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onReachBottom } from '@dcloudio/uni-app'
import { $getMemberRechargeRecord, $getConsumeRecod } from "@/http/apiMember"
const pageData = reactive({
  rechargeOrConsume: 'recharge',
  pageDataList: [],
  hasNext: true
})
const params = {
  pageNumber: 1,
  pageSize: 10
}
function getMemberRechargeRecord () {
  $getMemberRechargeRecord(params).then(({ bizData }) => {
    pageData.hasNext = bizData.hasNext
    pageData.pageDataList.push(...bizData.records)
  })
}
getMemberRechargeRecord()
function getConsumeRecod () {
  params.bizType = 3
  $getConsumeRecod(params).then(({ bizData }) => {
    pageData.hasNext = bizData.hasNext
    pageData.pageDataList.push(...bizData.records)
  })
}
function headerChange (val) {
  pageData.rechargeOrConsume = val
  pageData.pageDataList = []
  params.pageNumber = 1
  pageData.hasNext = true
  val == 'recharge' ? getMemberRechargeRecord() : getConsumeRecod()
}
// 触底加载
onReachBottom(() => {
  if (!pageData.hasNext) return
  params.pageNumber++
  pageData.rechargeOrConsume == 'recharge' ? getMemberRechargeRecord() : getConsumeRecod()
})
</script>

<style lang="scss" scoped>
.header-selected {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 110rpx;
  background-color: #fff;

  view {
    position: relative;
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(128, 128, 128);
    font-size: 30rpx;
    font-weight: 500;
    transition: .3s ease-out;
  }

  .selected-style {
    color: rgb(255, 95, 77);
    transition: .3s ease-out;

    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 36rpx;
      height: 6rpx;
      background: rgb(255, 95, 77);
    }
  }
}

.re-card {
  margin: 20rpx auto;
  padding: 0 30rpx;
  padding-bottom: 30rpx;
  box-sizing: border-box;
  width: 710rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .re-amount {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    height: 100rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
    font-size: 30rpx;
    font-weight: 500;

    .unit {
      font-size: 20rpx;
      font-weight: 600;
    }
  }

  .item {
    display: flex;
    margin: 15rpx 0;
    font-size: 26rpx;

    .title {
      margin-right: 30rpx;
      color: rgb(128, 128, 128);
    }
  }
}

.list-null {
  position: relative;

  line-height: 110rpx;
  text-align: center;
  font-size: 26rpx;
  color: #a6a6a6;

  &::after,
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;

    width: 30%;
    height: 2rpx;
    background-color: #ededed;
    transform: translateY(-50%);
  }

  &::after {
    left: 40rpx;
  }

  &::before {
    right: 40rpx;
  }
}
</style>