2023-10-10 16:57:12 +08:00

63 lines
2.3 KiB
Vue

<template>
<u-loading-page :loading="loading" loadingText=""></u-loading-page>
<view class="account-info-wrap overflow-hidden" v-show="!loading">
<view class="mx-[24rpx] mt-[30rpx] px-3 pb-4 pt-7 box-border bg-[#fff] rounded-lg">
<u--input :placeholder="t('rechargeAmountPlaceholder')" v-model="rechargeAmount" border="bottom" type="number" clearable>
</u--input>
<view class="top-up-wrap flex flex-wrap justify-around mt-3">
<view v-for="(item,index) in rechargePackage" :key="index"
:class="['top-up-item w-22 box-border border-1 text-center rounded mt-2 py-3 px-4 border-gray-400 border-solid',{'border-primary text-primary':rechargeAmount == item}]"
@click="rechargeAmount = item">
<text>{{item}}{{t('yuan')}}</text>
</view>
</view>
<view class="mt-5 px-2">
<u-button type="primary" shape="circle" :loading="rechargeLoading" :text="t('clickRecharge')" @click="recharge"></u-button>
</view>
<view class="mt-[20rpx] text-center text-sm" @click="redirect({ url: '/recharge/pages/recharge_record' })">{{t('rechargeRecord')}}</view>
</view>
<pay ref="payRef" @close="rechargeLoading = false"></pay>
</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { t } from '@/locale'
import { moneyFormat, redirect, img } from '@/utils/common';
import { createRecharge } from '@/recharge/api/recharge';
const rechargePackage = ref([20, 30, 50, 100, 200, 300])
const rechargeAmount = ref<string | number>("");
const rechargeLoading = ref(false)
const payRef = ref(null)
const loading = ref(false);
/**
* 发起充值
*/
const recharge = () => {
if (uni.$u.test.isEmpty(rechargeAmount.value)) {
uni.showToast({ title: t('rechargeAmountPlaceholder'), icon: 'none' })
return
}
if (!uni.$u.test.amount(rechargeAmount.value) || rechargeAmount.value <= 0) {
uni.showToast({ title: t('rechargeAmountError'), icon: 'none' })
return
}
if (rechargeLoading.value) return
rechargeLoading.value = true
createRecharge({ recharge_money: rechargeAmount.value }).then(res => {
payRef.value?.open(res.data.trade_type, res.data.trade_id)
loading.value = false
rechargeLoading.value = false
}).catch(() => {
rechargeLoading.value = false
loading.value = false
})
}
</script>
<style lang="scss" scoped>
@import '@/app/styles/account_info.scss';
</style>