pj_h5_cloud/src/pages/pay/scanPay.vue

<template>
	<crud-layout bg="/static/page/blue-bg.png">
		<view class="h-screen flex flex-col">
			<view class="mx-auto text-34 py-2 h-80rpx">{{ scanPayState.mchName }}</view>

			<tm-sheet :margin="[0, 10]" class="flex flex-row">
				<span class="text-2xl text-[#333] mr-1 line-height-normal">¥</span>
				<span class="text-3xl font-medium text-[#333]">{{ displayAmount }}</span>
			</tm-sheet>

			<tm-sheet v-if="walletList.length > 0" :margin="[0, 10]" class="flex flex-col">
				<view class="text-gray-700 font-bold text-28 mb-1">选择支付钱包：</view>
				<view
					v-for="(v, index) in walletList"
					:key="index"
					class="border-6 border-solid border-#efefef my-2 duration-200 flex justify-between items-center p-3 rounded-2"
					:class="{ 'border-6 border-solid  border-blue!': selectWallet.id == v.id }"
					@click="selectWallet = v"
				>
					<view class="flex items-center">
						<image class="w-70 h-70 mr-2" :src="filePath(v.walletTypeIcon)" />
						<view class="text-32">{{ v.walletTypeName }}</view>
					</view>
					<view class="text-28 flex items-center">
						<view>余额：</view>
						<text class="main-text-28">{{ hooks.useMoney(v.balance) }} 元</text>
					</view>
				</view>
			</tm-sheet>

			<tm-button class="mt-1" :block="true" @click="handlePay()" :disabled="loading">支 付</tm-button>

			<number-keyboard v-if="numberKeyboardShow" v-model="amount" />
		</view>
	</crud-layout>
</template>

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

const loading = ref(false)
const scanPayState = reactive({
	mchId: "", // 商户id
	mchName: "", // 商户名
	orderId: "", // 订单id
	action: "", // action === "harQrCodeScanPay"：扫收款机上生成的码支付
})
const walletList = ref<any>([]) // 钱包列表
const selectWallet = ref<any>({}) // 当前选中的钱包
const orderInfo = ref<any>({}) // 订单信息
const amount = ref("") // 键盘输入的金额
const numberKeyboardShow = ref(true)

onLoad(async (options: any) => {
	uni.showLoading({ title: "加载中..." })
	const { mchId, orderId, action } = options
	if (action === "harQrCodeScanPay") {
		if (!options.mchId || !options.orderId) return uni.showToast({ title: "扫码参数错误", icon: "none" })
		scanPayState.mchId = mchId
		scanPayState.orderId = orderId
		scanPayState.action = action
		numberKeyboardShow.value = false
		await getMchDetail(mchId)
		await getOrderInfo()
		const order = orderInfo.value
		amount.value = displayPrice(order.totalPrice || 0 + order.extraPrice || 0, "")
		return
	}

	const { id } = options
	if (!isEmpty(id)) {
		scanPayState.mchId = id
		await getMchDetail(id)
		return
	}

	return uni.showToast({ title: "扫码参数错误", icon: "none" })
})

onShow(async () => {
	try {
		await getWalletList()
	} finally {
		uni.hideLoading()
	}
})

// 获取商户名
const getMchDetail = async (mchId: string) => {
	if (!mchId) return uni.showToast({ title: "商户id错误", icon: "none" })
	const { data } = await merchantApi.detail({ id: mchId })
	scanPayState.mchName = data.name
}

// 获取钱包列表
const getWalletList = async () => {
	const { code, data } = await walletApi.all()
	if (code !== 0) return uni.showToast({ title: "获取钱包列表失败", icon: "none" })
	walletList.value = data.records
	if (walletList.value.length > 0) {
		selectWallet.value = walletList.value.find((v: any) => v.walletTypeUniqueCode == "1")
	}
}

// 获取订单信息
const getOrderInfo = async () => {
	const { code, data }: any = await orderApi.detail({ id: scanPayState.orderId })
	if (code !== 0) return uni.showToast({ title: "获取订单信息失败", icon: "none" })
	orderInfo.value = data
}

// 格式化金额显示
const displayAmount = computed(() => {
	if (!amount.value) return "0"
	return amount.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
})

// 点击支付
const handlePay = () => {
	if (!scanPayState.mchId) return uni.showToast({ title: "扫码参数不存在", icon: "none" })
	if (!amount.value) return uni.showToast({ title: "请输入金额", icon: "none" })
	if (Number(amount.value) === 0) return uni.showToast({ title: "金额不能为0", icon: "none" })

	uni.showModal({
		title: "确定支付吗？",
		success: async (res) => {
			if (res.confirm) {
				await pay()
			}
		},
	})
}

// 支付
const pay = async () => {
	try {
		uni.showLoading({ title: "支付中...", mask: true })
		if (scanPayState.action === "harQrCodeScanPay") {
			const { code, msg }: any = await orderApi.doneHardQrCodeScanOrder({
				orderId: scanPayState.orderId,
				walletTypeId: selectWallet.value.walletTypeId,
			})
			if (code != 0) return uni.showToast({ title: msg || "支付失败", icon: "error" })
		} else {
			const { code, msg } = await payApi.createQrCodeOrder({
				merchantId: scanPayState.mchId,
				customPrice: storePrice(Number(amount.value)),
				walletId: selectWallet.value.id,
			})
			if (code != 0) return uni.showToast({ title: msg || "支付失败", icon: "error" })
		}

		uni.hideLoading()
		usePayStore().setScanPayData({
			mchId: scanPayState.mchId,
			mchName: scanPayState.mchName,
			payPrice: Number(amount.value).toFixed(2),
		})
		router.jump("/pages/pay/payComplete", {}, 2)
	} catch (error: any) {
		uni.showToast({ title: "请求错误", icon: "error" })
		uni.hideLoading()
	}
}
</script>