bandhuBuy-uniapp/src/pages/wallet/myWallet.vue

<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '%wallet.myWallet.title%',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app' // 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { getEnum as _getEnum } from '@/api/common'
import { getWalletAccountInfo, unpaidOrder, walletFlowList } from '@/api/wallet'
import DialogBox from '@/components/DialogBox/DialogBox.vue'
import { DialogUtils } from '@/components/DialogBox/utils'
import { t } from '@/locale'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'
// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

// DialogBox 函数式调用配置
const dialogConfig = ref<any>({})

const dayType = ref(1)
const walletInfo = ref<any>({})
async function getWalletInfo() {
  // 获取钱包信息-查询余额
  const res = await getWalletAccountInfo()
  console.log(res)
  walletInfo.value = res?.data
}
const dataList = ref<any[]>([])
async function getWalletFlowList(pageNo: number, pageSize: number) {
  const data = {
    page: pageNo,
    size: pageSize,
    type: dayType.value,
  }
  try {
    const res = await walletFlowList(data)
    console.log(res)
    paging.value.complete(res.data.list)
  }
  catch (error) {
    paging.value.complete(false)
  }
}

// 显示取消订单确认对话框
function showUnpaidOrderDialog() {
  Object.assign(dialogConfig.value, DialogUtils.info(
    t('wallet.unpaidOrderDialog.title'),
    {
      showCancel: true,
      confirmText: t('wallet.unpaidOrderDialog.confirm'),
      cancelText: t('wallet.unpaidOrderDialog.cancel'),
    },
  ))
}

// 处理对话框关闭事件
function handleDialogClose() {
  dialogConfig.value.show = false
}

// 处理对话框确认事件
function handleDialogConfirm() {
  //  继续充值
  handleDialogClose()
  toPage({ url: '/pages/wallet/rechargeRecord' })
  // 关闭对话框
}
function handleDialogCancel() {
  //  新充值
  handleDialogClose()
  toPage({ url: '/pages/wallet/recharge' })
}
// 查询未完成的充值订单
async function getUnpaidOrder() {
  try {
    const res = await unpaidOrder()
    console.log(res)
    if (res.code === '200' && res.data) {
      showUnpaidOrderDialog()
    }
  }
  catch (error) {
    console.log(error)
  }
}
const typeEnum = ref<any[]>([])
async function getEnum() {
  const res = await _getEnum({ id: 1 })
  typeEnum.value = res.data
}
onShow(() => {
  getEnum()
  getWalletInfo()
  getUnpaidOrder()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @on-refresh="getWalletInfo" @query="getWalletFlowList">
    <view class="px-24rpx pt-20rpx">
      <view
        class="mb-20rpx flex items-center justify-around rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-22rpx"
      >
        <view class="text-center">
          <view class="text-22rpx text-#595959">
            {{ $t('wallet.balance') }}
          </view>
          <view class="mb-22rpx text-44rpx text-[var(--wot-color-theme)] font-bold">
            {{ formatNumber(walletInfo.balance) }}
          </view>
          <view class="flex items-center text-22rpx text-#595959">
            <text class="mr-1px">
              {{ $t('wallet.frozenBalance') }}
            </text>
            <wd-icon name="help-circle" size="20rpx" />
          </view>
          <view class="text-26rpx font-bold">
            {{ formatNumber(walletInfo.freezeAmount) }}
          </view>
        </view>
        <view class="flex flex-col items-end">
          <wd-button size="small" @click="toPage({ url: '/pages/wallet/recharge' })">
            {{ $t('wallet.recharge') }}
          </wd-button>
        </view>
      </view>
      <view class="mb-20rpx flex justify-center">
        <view class="flex items-center justify-center" @click="toPage({ url: '/pages/wallet/withdraw', params: { balance: walletInfo.balance, type: 1 } })">
          <text class="mr-8rpx">
            {{ $t('wallet.withdrawNow') }}
          </text>
          <wd-icon name="arrow-right" size="28rpx" />
        </view>
      </view>
      <view>
        <view class="mb-20rpx text-32rpx">
          {{ $t('wallet.record') }}
        </view>
        <view class="mb-20rpx">
          <wd-radio-group v-model="dayType" shape="button" @change="() => getWalletFlowList(1, 20)">
            <wd-radio :value="1">
              {{ $t('wallet.record.type.DT') }}
            </wd-radio>
            <wd-radio :value="2">
              {{ $t('wallet.record.type.YT') }}
            </wd-radio>
            <wd-radio :value="3">
              {{ $t('wallet.record.type.L7D') }}
            </wd-radio>
            <wd-radio :value="4">
              {{ $t('wallet.record.type.MTD') }}
            </wd-radio>
            <wd-radio :value="5">
              {{ $t('wallet.record.type.YTD') }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="rounded-16rpx bg-white px-20rpx">
          <view
            v-for="(item, index) in dataList" :key="item.id" class="py-20rpx"
            :class="{ 'border-b-1 border-b-solid border-b-#e8e8e8': index !== dataList.length - 1 }"
          >
            <view class="mb-8rpx flex items-center justify-between text-24rpx">
              <text class="truncate">
                Order ID：{{ item.bizNo }}
              </text>
              <text class="flex-shrink-0 pl-16rpx">
                {{ item.type === 1 ? '-' : '+' }}৳{{ formatNumber(item.amount) }}
              </text>
            </view>
            <view class="flex items-center justify-between text-22rpx">
              <text class="text-#5B5B5B">
                {{ item.createTime }}
              </text>
              <wd-text :type="item.bizType === 8001 || item.bizType === 9001 ? 'primary' : 'success'" :text="item.bizType === 8001 || item.bizType === 9001 ? typeEnum.find(i => i.code === item.bizType)?.name : 'Completed'" />
            </view>
          </view>
        </view>
      </view>
      <DialogBox
        v-bind="dialogConfig"
        @confirm="handleDialogConfirm"
        @cancel="handleDialogCancel"
        @close="handleDialogClose"
      />
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
:deep(.wd-radio-group) {
  background: transparent;

  .wd-radio.is-button.is-checked {
    .wd-radio__label {
      background: #ff334a !important;
      border-color: #ff334a !important;
      color: #fff !important;
    }
  }

  .wd-radio__label {
    width: 100rpx !important;
    min-width: 100rpx !important;
    max-width: 100rpx !important;
    height: 36rpx !important;
    line-height: 36rpx !important;
    padding: 0 !important;
    font-size: 22rpx !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(151, 151, 151, 0.2) !important;
  }
}
</style>