转账页面优化

src/pages/pay/transferMoney.vue

@@ -2,22 +2,22 @@
 	<view class="bg-gray-100 flex-col min-h-screen">
 		<view class="bg-white p-4 card mx-3 my-1 mt-2 flex items-center justify-between">
 			<view class="flex items-center">
-				<image class="w-64 h-64 mr-2" :src="filePath(transferMoney.sourceWalletType.walletTypeIcon)" />
-				<view>{{ transferMoney.sourceWalletType.walletTypeName }}</view>
+				<image class="w-64 h-64 mr-2" :src="filePath(payStore.sourceWalletData.walletTypeIcon)" />
+				<view>{{ payStore.sourceWalletData.walletTypeName }}</view>
 			</view>
 			<view class="flex items-center">
 				<view class="main-text-28">余额：</view>
-				<view class="main-text-28 mr-1">{{ hooks.useMoney(transferMoney.sourceWalletType.balance) + "元" }}</view>
+				<view class="main-text-28 mr-1">{{ hooks.useMoney(payStore.sourceWalletData.balance) + "元" }}</view>
 			</view>
 		</view>
 
-		<view class="bg-white p-4 card mx-3 my-1 flex items-center justify-between active:bg-[#f0f0f0]" @click="targetWalletSelect">
+		<view class="bg-white p-4 card mx-3 my-1 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">{{ state.targetWalletTypeName }}</view>
+				<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>
@@ -32,26 +32,24 @@
 		</view>
 		<!-- 金额限制提示 -->
 		<view class="h-30rpx">
-			<view v-if="storePrice(amount) > transferMoney.sourceWalletType?.balance" class="text-xs c-red px-8">
-				注：转账金额不能超过钱包余额
-			</view>
+			<view v-if="storePrice(amount) > payStore.sourceWalletData?.balance" class="text-xs c-red px-8">注：转账金额不能超过钱包余额</view>
 		</view>
 
 		<view class="p-4 font-bold mt-1">
-			<tm-button block @click="confirmTransfer" v-if="transferMoney.sourceWalletType.walletTypeId">确定转账</tm-button>
+			<tm-button block @click="confirmTransfer" v-if="payStore.sourceWalletData.walletTypeId">确定转账</tm-button>
 		</view>
 
 		<number-keyboard v-model="amount" />
 
 		<!-- 选择转入方式 -->
-		<tm-drawer v-model:show="show" title="选择钱包" size="50%" bg-color="#efefef" position="bottom" :show-footer="true" :showClose="true">
+		<tm-drawer v-model:show="show" title="选择钱包" size="30%" bg-color="#efefef" position="bottom" :show-footer="false" :showClose="true">
 			<view class="m-4">
 				<view
-					v-for="(v, index) in state.walletList"
+					v-for="(v, index) in wallet.walletList"
 					:key="index"
 					class="card mb-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!': state.targetWalletTypeId == v.walletTypeId }"
-					@click="state.targetWalletTypeId = v.walletTypeId"
+					: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="filePath(v.walletTypeIcon)" />
@@ -63,12 +61,6 @@
 					<view class="main-text-32">余额：{{ hooks.useMoney(v.balance) + "元" }}</view>
 				</view>
 			</view>
-
-			<template #footer>
-				<view class="font-bold px-5">
-					<tm-button block @click="confirmTargetWallet">确 定</tm-button>
-				</view>
-			</template>
 		</tm-drawer>
 	</view>
 </template>
@@ -81,46 +73,44 @@ import { payApi, walletApi } from "@/sheep/api"
 import { hooks, router } from "@@/index"
 import { filePath } from "@/sheep/utils/file"
 import { storePrice } from "@/sheep/utils/formatMoney"
-import { useTransferMoney } from "@/sheep/stores/transferMoney"
+import { usePayStore } from "@/sheep/stores/pay"
+
+const payStore = usePayStore()
 
-const transferMoney = useTransferMoney()
 const amount = ref("")
 const show = ref(false)
-const state = reactive<any>({
-	sourceWalletTypeId: "",
-	sourceWalletTypeName: "",
-	walletList: [],
-	targetWalletTypeId: "",
-	targetWalletTypeName: "",
+const sourceWalletType = reactive({
+	id: "",
+	name: "",
+})
+const targetWalletType = reactive({
+	id: "",
+	name: "",
+})
+const wallet = reactive<any>({
+	walletList: [],
 })
-const curTargetWallet = ref()
 
 onLoad(async () => {
-	if (!transferMoney.sourceWalletType.walletTypeId) return uni.showToast({ title: "钱包类型id不存在", icon: "none" })
-	state.sourceWalletTypeId = transferMoney.sourceWalletType.walletTypeId
-	state.sourceWalletTypeName = transferMoney.sourceWalletType.walletTypeName
-	uni.setNavigationBarTitle({ title: state.sourceWalletTypeName || "源钱包" })
+	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) {
-		state.walletList = res.data.records.filter((item: any) => item.walletTypeId != state.sourceWalletTypeId)
+		wallet.walletList = res.data.records.filter((item: any) => item.walletTypeId != sourceWalletType.id)
 	}
-	if (!curTargetWallet.value) {
-		curTargetWallet.value = state.walletList[0]
-		state.targetWalletTypeId = state.walletList[0]?.walletTypeId
-		state.targetWalletTypeName = state.walletList[0]?.walletTypeName
+	if (wallet.walletList.length) {
+		targetWalletType.id = wallet.walletList[0]?.walletTypeId
+		targetWalletType.name = wallet.walletList[0]?.walletTypeName
 	}
 })
 
-// 目标钱包选择
-const targetWalletSelect = () => {
-	// state.sourceWalletTypeId = ""
-	show.value = true
-}
-
-// 确认目标钱包
-const confirmTargetWallet = () => {
-	// state.sourceWalletTypeName = state.walletList.find((item: any) => item.walletTypeId != state.sourceWalletTypeId).walletTypeName
+// 选择目标钱包
+const selectTargetWalletType = (v: any) => {
+	targetWalletType.id = v.walletTypeId
+	targetWalletType.name = v.walletTypeName
 	show.value = false
 }
 
@@ -153,14 +143,10 @@ 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 > transferMoney.sourceWalletType.balance) {
+	if (numAmount.value > payStore.sourceWalletData.balance) {
 		return uni.showToast({ title: "转账金额不能超过钱包余额", icon: "none" })
 	}
 
-	// console.log("state.sourceWalletTypeId", state.sourceWalletTypeId)
-	// console.log("state.targetWalletTypeId", state.targetWalletTypeId)
-	// console.log("金额", numAmount.value)
-
 	uni.showModal({
 		title: "确定转入吗？",
 		success: async (res) => {
@@ -170,28 +156,25 @@ const confirmTransfer = async () => {
 		},
 	})
 }
+
 // 二次确认转账
 const confirmTransferAgain = async () => {
 	try {
 		uni.showLoading({ title: "正在转入...", mask: true })
 		const res = await payApi.transferMoney({
-			sourceWalletTypeId: state.sourceWalletTypeId,
-			targetWalletTypeId: state.targetWalletTypeId,
+			sourceWalletTypeId: sourceWalletType.id,
+			targetWalletTypeId: targetWalletType.id,
 			balance: numAmount.value,
 		})
 		if (res.code == 0) {
 			uni.showToast({ title: "转账成功", icon: "success" })
-			transferMoney.setSourceWalletType({})
-			// router.jump("/pages/wallet/list", {}, 2)
+			payStore.setSourceWalletData({})
 			router.back()
 		} else {
 			uni.showToast({ title: res.msg, icon: "none" })
 		}
 	} catch (error: any) {
-		uni.showToast({
-			title: error.message,
-			icon: "none",
-		})
+		uni.showToast({ title: error.message, icon: "none" })
 	} finally {
 		uni.hideLoading()
 	}

src/sheep/stores/transferMoney.ts

@@ -1,14 +0,0 @@
-import { defineStore } from "pinia"
-
-export const useTransferMoney = defineStore("transferMoney", {
-	state: (): any => {
-		return {
-			sourceWalletType: {},
-		}
-	},
-	actions: {
-		setSourceWalletType(data: any) {
-			this.sourceWalletType = data
-		},
-	},
-})