源文件

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

@@ -0,0 +1,197 @@
+<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>