aslan-h5/src/views/BDCenter/incomeDetails.vue

<template>
  <div class="fullPage">
    <GeneralHeader
      style="width: 100%"
      :title="t('salary_details')"
      :showLanguageList="true"
      color="black"
    />

    <!-- 内容 -->
    <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px">
      <div
        v-for="record in Records"
        :key="record.id"
        style="
          padding: 12px;
          border-radius: 12px;
          background: #fff;
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
        "
      >
        <!-- 提现记录 -->
        <div
          v-if="record.type === 'CASH_OUT'"
          style="display: flex; flex-direction: column; gap: 4px"
        >
          <div style="display: flex; justify-content: space-between; align-items: center">
            <div style="font-weight: 600">{{ t('cash_out') }}</div>
            <div style="font-weight: 600">{{ record.amountText }}</div>
          </div>
          <div style="display: flex; justify-content: space-between; align-items: center">
            <div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
              {{ record.timeText }}
            </div>
            <div
              style="
                font-weight: 510;
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              "
              :style="{
                backgroundImage:
                  record.status === 'Under review'
                    ? 'linear-gradient(248deg, #FFE675 5.66%, #FFC53D 42.49%)'
                    : record.status === 'Approved'
                    ? 'linear-gradient(248deg, #75FF98 5.66%, #3DFF54 42.49%)'
                    : 'linear-gradient(248deg, #FF7578 5.66%, #FF3D40 42.49%)',
              }"
            >
              {{ getStatusText(record.status) }}
            </div>
          </div>
        </div>

        <!-- 转账记录 -->
        <div
          v-if="record.type === 'TRANSFER'"
          style="display: flex; flex-direction: column; gap: 4px"
        >
          <!-- 标题 -->
          <div style="font-weight: 700">{{ t('transfer') }}</div>
          <!-- 信息部分 -->
          <div style="display: flex; justify-content: space-between; align-items: center; gap: 4px">
            <div style="flex: 1; min-width: 0; display: flex">
              <div style="display: flex; justify-content: center; align-items: center">
                <img
                  :src="record.userInfo?.avatar || ''"
                  alt=""
                  @error="defaultAvatarUrl"
                  style="
                    width: 10vw;
                    border-radius: 50%;
                    display: block;
                    aspect-ratio: 1/1;
                    object-fit: cover;
                  "
                />
              </div>
              <div
                style="
                  min-width: 0;
                  width: calc(100% - 10vw);
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                "
              >
                <div
                  style="
                    font-weight: 600;
                    font-size: 0.9em;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ record.userInfo?.userNickname }}
                </div>
                <div style="color: rgba(0, 0, 0, 0.4); font-weight: 500; font-size: 0.9em">
                  ID:{{ record.userInfo?.account }}
                </div>
              </div>
            </div>

            <!-- 金额 -->
            <div style="font-weight: 600; font-size: 0.9em">
              {{ t('plus_coins', { amount: record.amount }) }}
            </div>
          </div>

          <!-- 时间 -->
          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 500; font-size: 0.9em">
            {{ record.timeText }}
          </div>
        </div>

        <!-- 充值和收入 -->
        <div
          v-if="
            record.type === 'EXCHANGE' ||
            record.type === 'BD_INCOME' ||
            record.type === 'BD_LEADER_INCOME'
          "
          style="display: flex; justify-content: space-between; align-items: center; gap: 4px"
        >
          <div style="display: flex; flex-direction: column">
            <div style="font-weight: 600">{{ record.typeText }}</div>
            <div style="color: rgba(0, 0, 0, 0.4); font-weight: 500">
              {{ record.timeText }}
            </div>
          </div>
          <div style="font-weight: 600">{{ record.amountText }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import GeneralHeader from '@/components/GeneralHeader.vue'
import { ref, onMounted } from 'vue'
import { setDocumentDirection } from '@/locales/i18n'
import { apiGetWithdrawRecords } from '@/api/wallet'

const { t, locale } = useI18n()

// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)

//  记录数据
const Records = ref([])

// 获取状态文本翻译
const getStatusText = (status) => {
  switch (status) {
    case 'Under review':
      return t('pending')
    case 'Approved':
      return t('success')
    case 'Rejection':
      return t('rejection')
    default:
      return status
  }
}

const defaultAvatarUrl = (e) => {
  console.log('头像资源出错')
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}

// 获取提现记录
const getCashOutRecords = async () => {
  const resCashOutRecords = await apiGetWithdrawRecords()
  console.log('已邀请列表:', resCashOutRecords)
  if (resCashOutRecords.status && resCashOutRecords.body) {
    Records.value = resCashOutRecords.body
  }
}

onMounted(() => {
  getCashOutRecords() // 获取提现记录
})
</script>

<style lang="scss" scoped>
* {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'SF Pro Text';
}

.fullPage {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  background-image: url(/src/assets/images/secondBg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}

/* RTL支持 */
[dir='rtl'] .avatar {
  margin-right: 0;
  margin-left: 12px;
}

[dir='rtl'] .user-info {
  text-align: right;
}
</style>