recharge.vue 2.8 KB

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