pj_h5_cloud/src/pages/pay/transferMoney.vue

<template>
	<crud-layout mainIsScroll bg="/static/page/blue-bg.png">
		<view class="h-20rpx"></view>
		<view class="p-4 card flex items-center justify-between">
			<view class="flex items-center">
				<image class="w-64 h-64 mr-2" :src="$fileUrl(filePath(payStore.sourceWalletData.walletTypeIcon))"  @error="$fileRetry(filePath(payStore.sourceWalletData.walletTypeIcon))" />
				<view>{{ payStore.sourceWalletData.walletTypeName }}</view>
			</view>
			<view class="flex items-center c-#0094ff! font-bold">
				<view class="text-30">余额：</view>
				<view class="text-30 mr-1">{{ hooks.useMoney(payStore.sourceWalletData.balance) + "元" }}</view>
			</view>
		</view>

		<view class="p-4 card mt-2 flex items-center justify-between active:bg-[#f0f0f0]" @click="show = true">
			<view class="flex items-center">
				<image class="w-64 h-64 rounded-full mr-2" src="@/static/page/money-cny-circle-fill.svg" />
				<view>转入到</view>
			</view>
			<view class="flex items-center">
				<view class="second-text-28 mr-1">{{ targetWalletType.name }}</view>
				<image class="w-38 h-38 rounded-full c-blueGray" src="@/static/page/arrow-right.svg" />
			</view>
		</view>

		<view class="p-4 mt-2 card">
			<text class="text-gray-700 font-bold text-lg">转账金额</text>
			<view class="flex-row items-center">
				<text class="text-3xl text-[#333] mr-2">¥</text>
				<text v-if="!amount" class="text-xl text-gray-300">转账金额</text>
				<text v-else class="text-3xl">{{ formattedAmount }}</text>
			</view>
		</view>
		<!-- 金额限制提示 -->
		<view class="h-30rpx">
			<view v-if="storePrice(amount) > payStore.sourceWalletData?.balance" class="text-xs c-red px-4">
				注：转账金额不能超过钱包余额</view>
		</view>

		<view class="font-bold mt-6">
			<tm-button block @click="confirmTransfer" v-if="payStore.sourceWalletData.walletTypeId">确定转账</tm-button>
		</view>

		<number-keyboard v-model="amount" />
	</crud-layout>

	<!-- 选择转入方式 -->
	<tm-drawer v-model:show="show" title="选择钱包" size="auto" bg-color="#efefef" :show-footer="false" :showClose="true">
		<view v-for="(v, index) in wallet.walletList" :key="index"
			class="card m-2 overflow-hidden relative border-4 border-solid border-white duration-200 flex justify-between items-center p-4"
			:class="{ 'border-4 border-solid  border-blue!': targetWalletType.id == v.walletTypeId }"
			@click="selectTargetWalletType(v)">
			<view class="flex items-center">
				<image class="w-70 h-70 mr-2" :src="$fileUrl(filePath(v.walletTypeIcon))"  @error="$fileRetry(filePath(v.walletTypeIcon))" />
				<view class="flex flex-col">
					<view class="main-text-32">{{ v.walletTypeName }}</view>
					<view class="text-gray-500 text-sm">{{ v.cardNumber }}</view>
				</view>
			</view>
			<view class="text-32 c-#0094ff font-bold">余额：{{ hooks.useMoney(v.balance) + "元" }}</view>
		</view>
	</tm-drawer>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import NumberKeyboard from "@/sheep/components/number-keyboard.vue"
import { payApi, walletApi } from "@/sheep/api"
import { hooks, router } from "@@/index"
import { filePath } from "@/sheep/utils/file"
import { storePrice } from "@/sheep/utils/formatMoney"
import { usePayStore } from "@/sheep/stores/pay"

const payStore = usePayStore()

const amount = ref("")
const show = ref(false)
const sourceWalletType = reactive({
	id: "",
	name: "",
})
const targetWalletType = reactive({
	id: "",
	name: "",
})
const wallet = reactive<any>({
	walletList: [],
})

onLoad(async () => {
	if (!payStore.sourceWalletData.walletTypeId) return uni.showToast({ title: "钱包类型id不存在", icon: "none" })
	sourceWalletType.id = payStore.sourceWalletData.walletTypeId
	sourceWalletType.name = payStore.sourceWalletData.walletTypeName
	uni.setNavigationBarTitle({ title: sourceWalletType.name || "源钱包" })

	const res = await walletApi.all()
	if (res.code == 0) {
		wallet.walletList = res.data.records.filter((item: any) => item.walletTypeId != sourceWalletType.id)
	}
	if (wallet.walletList.length) {
		targetWalletType.id = wallet.walletList[0]?.walletTypeId
		targetWalletType.name = wallet.walletList[0]?.walletTypeName
	}
})

// 选择目标钱包
const selectTargetWalletType = (v: any) => {
	targetWalletType.id = v.walletTypeId
	targetWalletType.name = v.walletTypeName
	show.value = false
}

// 格式化金额显示
const formattedAmount = computed(() => {
	if (!amount.value) return ""

	// 处理小数点情况
	if (amount.value.endsWith(".")) {
		return amount.value
	}

	const parts = amount.value.split(".")
	// 添加千位分隔符
	parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")

	// 处理小数部分
	if (parts.length > 1) {
		// 如果小数部分不足两位，不自动补零
		return `${parts[0]}.${parts[1]}`
	}

	return parts[0]
})

const numAmount = computed(() => storePrice(parseFloat(amount.value.endsWith(".") ? amount.value.slice(0, -1) : amount.value)))

// 确认转账
const confirmTransfer = async () => {
	if (!amount.value || amount.value === "0" || amount.value === "0." || parseFloat(amount.value) === 0) {
		return uni.showToast({ title: "金额不能为零", icon: "none" })
	}
	if (numAmount.value > payStore.sourceWalletData.balance) {
		return uni.showToast({ title: "转账金额不能超过钱包余额", icon: "none" })
	}

	uni.showModal({
		title: "确定转入吗？",
		success: async (res) => {
			if (res.confirm) {
				await confirmTransferAgain()
			}
		},
	})
}

// 二次确认转账
const confirmTransferAgain = async () => {
	try {
		uni.showLoading({ title: "正在转入...", mask: true })
		const res = await payApi.transferMoney({
			sourceWalletTypeId: sourceWalletType.id,
			targetWalletTypeId: targetWalletType.id,
			balance: numAmount.value,
		})
		if (res.code == 0) {
			uni.showToast({ title: "转账成功", icon: "success" })
			payStore.setSourceWalletData({})
			router.back()
		} else {
			uni.showToast({ title: res.msg, icon: "none" })
		}
	} catch (error: any) {
		uni.showToast({ title: error.message, icon: "none" })
	} finally {
		uni.hideLoading()
	}
}
</script>