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

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '%wallet.recharge.title%',
    navigationBarBackgroundColor: '#fff',
    "app-plus": {
      "titleNView": {
        "buttons": [
          {
            "text": "Record",
            "fontSize": "28rpx",
            "width": "85px"
          }
        ]
      }
    }
  },
}
</route>

<script lang="ts" setup>
import { rechargeAdd, rechargeCallback, rechargeGoodsList } from '@/api/wallet'
import { t } from '@/locale'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'Recharge', // 充值
})
const selectData = ref<any>({
  id: '',
})
// 触发确定按钮
onNavigationBarButtonTap((event: any) => {
  if (event.text === 'Record') {
    toPage('/pages/wallet/rechargeRecord')
  }
})
const dataList = ref<any[]>([])
async function getRechargeGoodsList() {
  const res = await rechargeGoodsList()
  dataList.value = res.data
}

async function submit() {
  const addRes = await rechargeAdd({ goodsId: selectData.value.id })
  console.log(addRes)
  if (addRes.code === '200') {
    const callbackRes = await rechargeCallback({ data: JSON.stringify({ orderNo: addRes.data.orderNo, status: addRes.data.status }) })
    console.log(callbackRes)
  }
}

onShow(() => {
  getRechargeGoodsList()
})
</script>

<template>
  <z-paging>
    <view class="px-24rpx">
      <view class="py-30rpx text-center text-28rpx text-#595959">
        {{ t('wallet.recharge.highestDiscount', [Math.max(...(dataList.map(i => i.discountRate)))]) }}
      </view>
      <view class="grid grid-cols-2 gap-20rpx">
        <view
          v-for="i in dataList"
          :key="i.id"
          class="border-1 border-transparent rounded-12rpx border-dashed bg-[rgba(var(--wot-color-theme-rgb),0.1)] py-24rpx text-center"
          :style="{
            borderColor: i.id === selectData.id ? 'var(--wot-color-theme)' : '',
            backgroundColor: i.id === selectData.id ? 'rgba(var(--wot-color-theme-rgb),0.25)' : '',
          }"
          @click="selectData = i"
        >
          <view class="mb-8rpx text-40rpx text-[var(--wot-color-theme)] font-bold">
            {{ formatNumber(i.amount) }}
          </view>
          <view class="text-20rpx">
            {{ t('wallet.recharge.get') }} <text class="text-[var(--wot-color-theme)]">
              ৳{{ formatNumber(i.amount + i.discount) }}, {{ i.discountRate }}%
            </text> {{ t('wallet.recharge.discount') }}
          </view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
        <wd-button block :disabled="!selectData.id" @click="submit">
          {{ t('wallet.recharge.submit') }}
        </wd-button>
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped>
.space-y-24rpx > * + * {
  margin-top: 24rpx;
}
</style>