98 lines
2.8 KiB
Vue
98 lines
2.8 KiB
Vue
<template>
|
|
<crud-layout bg="/static/page/blue-bg.png">
|
|
<view class="h-screen flex flex-col position-relative">
|
|
<view class="mx-auto text-34 py-2 h-80rpx">{{ scanData.name }}</view>
|
|
|
|
<tm-sheet 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-button class="mt-40" :block="true" @click="disabled ? '' : handlePay()" :disabled="disabled">支付</tm-button>
|
|
|
|
<numberKeyboard v-model="amount" />
|
|
</view>
|
|
</crud-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from "vue"
|
|
import { onShow } from "@dcloudio/uni-app"
|
|
import { usePayStore } from "@/sheep/stores/pay"
|
|
import payApi from "@@/api/pay"
|
|
import { storePrice } from "@/sheep/utils/formatMoney"
|
|
import { router } from "@/sheep"
|
|
import { merchantApi } from "@/sheep/api"
|
|
import numberKeyboard from "@/sheep/components/numberKeyboard.vue"
|
|
|
|
const amount = ref("")
|
|
const scanData = ref<{ id?: string; name?: string }>({})
|
|
const disabled = ref(false)
|
|
|
|
onShow(async () => {
|
|
uni.showLoading({ title: "加载中...", mask: true })
|
|
scanData.value.id = usePayStore().payData.id
|
|
if (scanData.value.id) {
|
|
const { data } = await merchantApi.detail({ id: scanData.value.id })
|
|
scanData.value.name = data.name
|
|
usePayStore().setPayData(scanData.value)
|
|
disabled.value = false
|
|
} else {
|
|
uni.showToast({ title: "扫码信息不存在", icon: "none" })
|
|
disabled.value = true
|
|
}
|
|
uni.hideLoading()
|
|
})
|
|
|
|
const displayAmount = computed(() => {
|
|
if (!amount.value) return "0"
|
|
return (
|
|
amount.value
|
|
// .toString()
|
|
// .toFixed(2)
|
|
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
|
)
|
|
})
|
|
|
|
// 点击支付
|
|
const handlePay = () => {
|
|
if (!scanData.value.id || !scanData.value.name) return uni.showToast({ title: "扫码信息不存在", icon: "none" })
|
|
if (!amount.value) {
|
|
uni.showToast({ title: "请输入金额", icon: "none" })
|
|
return
|
|
}
|
|
if (Number(amount.value) === 0) {
|
|
uni.showToast({ title: "金额不能为0", icon: "none" })
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: "确定支付吗？",
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
await pay()
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
// 支付
|
|
const pay = async () => {
|
|
try {
|
|
uni.showLoading({ title: "支付中...", mask: true })
|
|
const res = await payApi.createQrCodeOrder({
|
|
merchantId: scanData.value.id,
|
|
customPrice: storePrice(Number(amount.value)),
|
|
})
|
|
if (res.code != 0) {
|
|
uni.showToast({ title: res.msg || "支付失败", icon: "error" })
|
|
} else {
|
|
uni.hideLoading()
|
|
usePayStore().setPayData({ ...scanData.value, customPrice: Number(amount.value).toFixed(2) })
|
|
router.jump("/pages/pay/payComplete", {}, 2)
|
|
}
|
|
} catch (error: any) {
|
|
uni.showToast({ title: "错误", icon: "error" })
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
</script>
|