uniapp-im-shop/pages/my-index/wallet/record.vue

<script setup>
  import { ref, reactive, computed } from 'vue'
  import {
    getUserWithdrawList,
    getUserTradeRecordList
  } from '@/api/my-index'

  const props = defineProps({
    // 0 积分记录 1 提现记录
    type: {
      type: String,
      default: '0'
    }
  })

  const topNav = computed(() => {
    const list =
      props.type === '0'
        ? [
            { name: '全部', id: '' },
            { name: '拼单获得', id: '1', state: '+', color: '#2ecc71' },
            { name: '消费', id: '2', state: '-', color: '#e74c3c' },
            { name: '退款', id: '3', state: '-', color: '#f39c12' },
            { name: '推荐奖励', id: '4', state: '+', color: '#2ecc71' },
            { name: '系统扣除', id: '5', state: '-', color: '#e74c3c' },
            { name: '签到', id: '6', state: '+', color: '#2ecc71' },
            { name: '提现', id: '7', state: '-', color: '#e74c3c' },
            { name: '提现冻结', id: '8', state: '-', color: '#f39c12' },
            {
              name: '提现拒绝释放',
              id: '9',
              state: '-',
              color: '#e74c3c'
            },
            {
              name: '提现成功扣除',
              id: '10',
              state: '-',
              color: '#e74c3c'
            },
            {
              name: '发红包支出',
              id: '11',
              state: '',
              color: '#e74c3c'
            },
            {
              name: '抢红包收入',
              id: '12',
              state: '+',
              color: '#2ecc71'
            },
            {
              name: '红包退回收入',
              id: '13',
              state: '+',
              color: '#2ecc71'
            },
            {
              name: '直播活动冻结',
              id: '14',
              state: '-',
              color: '#f39c12'
            },
            {
              name: '直播活动成功扣除',
              id: '15',
              state: '-',
              color: '#e74c3c'
            },
            {
              name: '直播活动冻结退回',
              id: '16',
              state: '+',
              color: '#2ecc71'
            },
            {
              name: '参与直播活动',
              id: '17',
              state: '-',
              color: '#e74c3c'
            },
            {
              name: '充值',
              id: '18',
              state: '+',
              color: '#2ecc71'
            }
          ]
        : [
            { name: '全部', id: '' },
            { name: '待处理', id: '0', state: '', color: '#95a5a6' },
            { name: '处理中', id: '1', state: '', color: '#3498db' },
            { name: '提现成功', id: '2', state: '-', color: '#2ecc71' },
            { name: '提现失败', id: '3', state: '', color: '#e74c3c' },
            { name: '已取消', id: '4', state: '', color: '#95a5a6' }
          ]
    return list
  })

  const paging = ref(null)
  const dataList = ref([])
  const formData = reactive({
    type: '',
    pageSize: 15
  })

  const getData = async (pageNum, pageSize) => {
    try {
      const isShow = props.type === '0'
      const api = isShow ? getUserTradeRecordList : getUserWithdrawList
      const res = await api({
        pageNum,
        pageSize,
        [isShow ? 'changeType' : 'status']: formData.type
      })
      paging.value.complete(res.rows)
    } catch (error) {
      paging.value.complete(false)
    }
  }

  const onTop = id => {
    formData.type = id
    dataList.value = []
    getData(1, formData.pageSize)
  }

  // onLoad(() => {
  //   getData()
  // })
</script>

<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    :default-page-size="formData.pageSize"
    safe-area-inset-bottom
    use-safe-area-placeholder
    :show-loading-more-no-more-view="false"
    @query="getData"
  >
    <template #top>
      <view class="top-options">
        <view
          v-for="(item, index) in topNav"
          :key="index"
          :class="{ active: item.id === formData.type }"
          class="text"
          @click="onTop(item.id)"
        >
          {{ item.name }}
        </view>
      </view>
    </template>

    <view class="card-box">
      <view
        v-for="item in dataList"
        :key="item.withdrawalId"
        class="item-row"
      >
        <image
          v-if="props.type === '0'"
          src="/static/images/my-index/shangjia.png"
          mode="heightFix"
          class="left-icon"
        ></image>
        <image
          v-else
          src="/static/images/my-index/shangjia1.png"
          mode="heightFix"
          class="left-icon"
        ></image>
        <view class="right-box">
          <view class="name-box">
            <text>
              {{
                props.type === '0'
                  ? topNav[
                      props.type === '0'
                        ? item.changeType
                        : item.status + 1
                    ].name
                  : item.withdrawalNo
              }}
            </text>
            <text>
              {{ props.type === '0' ? item.createTime : item.updateTime }}
            </text>
          </view>
          <view class="state-box">
            <text
              :style="{
                color:
                  topNav[
                    props.type === '0' ? item.changeType : item.status + 1
                  ].color
              }"
            >
              <!-- {{
                topNav[
                  props.type === '0' ? item.changeType : item.status + 1
                ].name
              }} -->
            </text>
            <text>
              {{
                topNav[
                  props.type === '0' ? item.changeType : item.status + 1
                ].state
              }}{{
                props.type === '0' ? item.changeAmount : item.actualAmount
              }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
  @import '@/styles/top-selector.scss';
  // 全屏背景色
  page {
    background: #f9f9f9;
  }

  .top-options {
    margin: 0;
    background: #ffffff;
    padding: 32rpx 24rpx;
    overflow-x: auto;
  }

  .card-box {
    padding: 32rpx 24rpx;

    .item-row + .item-row {
      margin-top: 16rpx;
    }

    .item-row {
      display: flex;
      align-items: center;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 16rpx 32rpx;
      .left-icon {
        height: 96rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      .right-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        font-style: normal;
        text-transform: none;
        .name-box,
        .state-box {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .name-box {
          text {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            &:last-child {
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
        .state-box {
          margin-left: 16rpx;
          flex-shrink: 0;
          text-align: right;
          text {
            font-weight: 400;
            font-size: 24rpx;
            &:last-child {
              font-weight: 500;
              font-size: 32rpx;
              color: #333333;
            }
          }
        }
      }
    }
  }
</style>