feat: 充值接口调整

src/api/wallet.ts

@@ -48,8 +48,15 @@ export function withdrawRecordList(data: any) {
  * 充值选项组
  * @returns
  */
-export function rechargeGoodsList() {
-  return http.get<any>(`${pre}/api/recharge/record/goodsList`)
+export function rechargeGoodsList(data: any) {
+  return http.get<any>(`${pre}/api/recharge/record/goodsList/${data.id}`)
+}
+/**
+ * 充值方式
+ * @returns
+ */
+export function paymentMethod() {
+  return http.get<any>(`${pre}/app/payment/method/list`)
 }
 /**
  * 创建充值订单

src/pages/wallet/recharge.vue

@@ -20,7 +20,7 @@
 </route>
 
 <script lang="ts" setup>
-import { rechargeAdd, rechargeCallback, rechargeGoodsList } from '@/api/wallet'
+import { paymentMethod, rechargeAdd, rechargeCallback, rechargeGoodsList } from '@/api/wallet'
 import { formatNumber } from '@/utils'
 import { toPage } from '@/utils/page'
 
@@ -28,23 +28,61 @@ defineOptions({
   name: 'Recharge', // 充值
 })
 const selectData = ref<any>({
+  methodId: '',
   id: '',
+  amount: '',
+  customAmount: '',
 })
+const methodIconMap = {
+  BKASH: '/static/icons/bkash.png',
+  NAGAD: '/static/icons/nagad.png',
+  ROCKET: '/static/icons/rocket.png',
+}
 // 触发确定按钮
 onNavigationBarButtonTap((event: any) => {
   if (event.text === 'Record') {
     toPage('/pages/wallet/rechargeRecord')
   }
 })
+const methodList = ref<any[]>([])
+
+async function getMethodList() {
+  const res = await paymentMethod()
+  methodList.value = res.data
+  await getRechargeGoodsList()
+}
+
 const dataList = ref<any[]>([])
-async function getRechargeGoodsList() {
-  const res = await rechargeGoodsList()
-  dataList.value = res.data
+const interval = ref<any>({
+  maxPrice: 0,
+  miniPrice: 0,
+})
+async function getRechargeGoodsList(id?: string) {
+  selectData.value.methodId = id || methodList.value[0].id
+  const res = await rechargeGoodsList({ id: selectData.value.methodId })
+  if (res.code === '200') {
+    dataList.value = res.data.list
+    interval.value = {
+      maxPrice: res.data.maxPrice,
+      miniPrice: res.data.miniPrice,
+    }
+  }
+}
+
+function handleSelectAmount(item: any) {
+  selectData.value.id = item.id
+  selectData.value.amount = item.amount
+  selectData.value.customAmount = ''
+}
+
+function focusAmount() {
+  selectData.value.id = ''
+  selectData.value.amount = ''
 }
 
 async function submit() {
-  const addRes = await rechargeAdd({ goodsId: selectData.value.id })
-  console.log(addRes)
+  const amount = selectData.value.customAmount || selectData.value.amount
+  const addRes = await rechargeAdd({ amount, methodId: selectData.value.methodId })
   if (addRes.code === '200') {
     const callbackRes = await rechargeCallback({ data: JSON.stringify({ orderNo: addRes.data.orderNo, status: addRes.data.status }) })
     console.log(callbackRes)
@@ -52,7 +90,7 @@ async function submit() {
 }
 
 onShow(() => {
-  getRechargeGoodsList()
+  getMethodList()
 })
 </script>
 
@@ -63,13 +101,20 @@ onShow(() => {
         Select Your Wallet Provider
       </view>
       <view class="grid grid-cols-3 mb-30rpx gap-20rpx">
-        <view class="border-1 border-transparent rounded-16rpx border-solid bg-white py-30rpx text-center shadow-[0rpx_2rpx_8rpx_0rpx_rgba(184,184,184,0.5)]">
+        <view
+          v-for="item in methodList" :key="item.id"
+          :style="{
+            borderColor: item.id === selectData.methodId ? 'var(--wot-color-theme)' : '',
+          }"
+          class="border-1 border-transparent rounded-16rpx border-solid bg-white py-30rpx text-center shadow-[0rpx_2rpx_8rpx_0rpx_rgba(184,184,184,0.5)]"
+          @click="getRechargeGoodsList(item.id)"
+        >
           <image
-            src="/static/icons/icon-success.png"
+            :src="methodIconMap[item.methodName]"
             class="mb-20rpx h-120rpx w-120rpx"
           />
           <view class="text-28rpx">
-            BKASH
+            {{ item.methodName }}
           </view>
         </view>
       </view>
@@ -84,7 +129,7 @@ onShow(() => {
           :style="{
             borderColor: i.id === selectData.id ? 'var(--wot-color-theme)' : '',
           }"
-          @click="selectData = i"
+          @click="handleSelectAmount(i)"
         >
           <view>
             <text class="text-24rpx">
@@ -97,10 +142,11 @@ onShow(() => {
         </view>
       </view>
       <wd-input
-        prop="name"
+        v-model="selectData.customAmount"
         no-border
-        placeholder="৳ Min 1,000 ~ 20,000"
+        :placeholder="`৳ Min ${formatNumber(interval.miniPrice)} ~ ৳ ${formatNumber(interval.maxPrice)}`"
         custom-class="bandhu-auth-input-field"
+        @focus="focusAmount"
       />
     </view>