recharge.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <route lang="json5" type="page">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationBarTitleText: '%wallet.recharge.title%',
  6. navigationBarBackgroundColor: '#fff',
  7. "app-plus": {
  8. "titleNView": {
  9. "buttons": [
  10. {
  11. "text": "Record",
  12. "fontSize": "28rpx",
  13. "width": "85px"
  14. }
  15. ]
  16. }
  17. }
  18. },
  19. }
  20. </route>
  21. <script lang="ts" setup>
  22. import { rechargeAdd, rechargeCallback, rechargeGoodsList } from '@/api/wallet'
  23. import { t } from '@/locale'
  24. import { formatNumber } from '@/utils'
  25. import { toPage } from '@/utils/page'
  26. defineOptions({
  27. name: 'Recharge', // 充值
  28. })
  29. const selectData = ref<any>({
  30. id: '',
  31. })
  32. // 触发确定按钮
  33. onNavigationBarButtonTap((event: any) => {
  34. if (event.text === 'Record') {
  35. toPage('/pages/wallet/rechargeRecord')
  36. }
  37. })
  38. const dataList = ref<any[]>([])
  39. async function getRechargeGoodsList() {
  40. const res = await rechargeGoodsList()
  41. dataList.value = res.data
  42. }
  43. async function submit() {
  44. const addRes = await rechargeAdd({ goodsId: selectData.value.id })
  45. console.log(addRes)
  46. if (addRes.code === '200') {
  47. const callbackRes = await rechargeCallback({ data: JSON.stringify({ orderNo: addRes.data.orderNo, status: addRes.data.status }) })
  48. console.log(callbackRes)
  49. }
  50. }
  51. onShow(() => {
  52. getRechargeGoodsList()
  53. })
  54. </script>
  55. <template>
  56. <z-paging>
  57. <view class="px-24rpx">
  58. <view class="py-30rpx text-center text-28rpx text-#595959">
  59. {{ t('wallet.recharge.highestDiscount', [Math.max(...(dataList.map(i => i.discountRate)))]) }}
  60. </view>
  61. <view class="grid grid-cols-2 gap-20rpx">
  62. <view
  63. v-for="i in dataList"
  64. :key="i.id"
  65. class="border-1 border-transparent rounded-12rpx border-dashed bg-[rgba(var(--wot-color-theme-rgb),0.1)] py-24rpx text-center"
  66. :style="{
  67. borderColor: i.id === selectData.id ? 'var(--wot-color-theme)' : '',
  68. backgroundColor: i.id === selectData.id ? 'rgba(var(--wot-color-theme-rgb),0.25)' : '',
  69. }"
  70. @click="selectData = i"
  71. >
  72. <view class="mb-8rpx text-40rpx text-[var(--wot-color-theme)] font-bold">
  73. {{ formatNumber(i.amount) }}
  74. </view>
  75. <view class="text-20rpx">
  76. {{ t('wallet.recharge.get') }} <text class="text-[var(--wot-color-theme)]">
  77. ৳{{ formatNumber(i.amount + i.discount) }}, {{ i.discountRate }}%
  78. </text> {{ t('wallet.recharge.discount') }}
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. <template #bottom>
  84. <view class="bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
  85. <wd-button block :disabled="!selectData.id" @click="submit">
  86. {{ t('wallet.recharge.submit') }}
  87. </wd-button>
  88. </view>
  89. </template>
  90. </z-paging>
  91. </template>
  92. <style lang="scss" scoped>
  93. .space-y-24rpx > * + * {
  94. margin-top: 24rpx;
  95. }
  96. </style>