142 lines
4.1 KiB
Vue
142 lines
4.1 KiB
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">{{ scanCodeData.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-sheet v-if="walletList.length > 0" class="flex flex-col">
|
||
<view class="text-gray-700 font-bold text-sm mb-1">选择支付钱包：</view>
|
||
<view
|
||
v-for="(v, index) in walletList"
|
||
:key="index"
|
||
class="card relative border-4 border-solid my-1 duration-200 border-#efefef flex justify-between items-center p-3"
|
||
:class="{ 'border-4 border-solid border-blue!': curWalletId == v.id }"
|
||
@click="curWalletId = v.id"
|
||
>
|
||
<view class="flex items-center">
|
||
<image class="w-70 h-70 mr-2" :src="filePath(v.walletTypeIcon)" />
|
||
<view class="main-text-32">{{ v.walletTypeName }}</view>
|
||
</view>
|
||
<view class="main-text-28 flex items-center">
|
||
<view>余额：{{ hooks.useMoney(v.balance) }}</view>
|
||
<text>元</text>
|
||
</view>
|
||
</view>
|
||
</tm-sheet>
|
||
|
||
<tm-button class="mt-1" :block="true" @click="disabled ? '' : handlePay()" :disabled="disabled">支付</tm-button>
|
||
|
||
<numberKeyboard 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 { usePayStore } from "@/sheep/stores/pay"
|
||
import payApi from "@@/api/pay"
|
||
import { storePrice } from "@/sheep/utils/formatMoney"
|
||
import { router } from "@/sheep"
|
||
import { merchantApi, walletApi } from "@/sheep/api"
|
||
import numberKeyboard from "@/sheep/components/numberKeyboard.vue"
|
||
import { filePath } from "@/sheep/utils/file"
|
||
import { hooks } from "@@/index"
|
||
import { isEmpty } from "radash"
|
||
|
||
const scanCodeData = reactive({
|
||
id: "",
|
||
name: "",
|
||
})
|
||
const walletList = ref<any>([])
|
||
const curWalletId = ref("")
|
||
const disabled = ref(false)
|
||
const amount = ref("")
|
||
|
||
onLoad((options: any) => {
|
||
if (!isEmpty(options.id)) {
|
||
scanCodeData.id = options.id
|
||
} else {
|
||
uni.showToast({ title: "参数不存在", icon: "none" })
|
||
}
|
||
})
|
||
|
||
onShow(async () => {
|
||
uni.showLoading({ title: "加载中...", mask: true })
|
||
if (scanCodeData.id) {
|
||
const { data } = await merchantApi.detail({ id: scanCodeData.id })
|
||
scanCodeData.name = data.name
|
||
disabled.value = false
|
||
} else {
|
||
uni.showToast({ title: "参数不存在", icon: "none" })
|
||
disabled.value = true
|
||
}
|
||
|
||
const res = await walletApi.all()
|
||
if (res.code == 0) {
|
||
walletList.value = res.data.records
|
||
if (walletList.value.length > 0) {
|
||
curWalletId.value = walletList.value.find((v: any) => v.walletTypeUniqueCode == "1").id
|
||
}
|
||
}
|
||
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 (!scanCodeData.id || !scanCodeData.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: scanCodeData.id,
|
||
customPrice: storePrice(Number(amount.value)),
|
||
walletId: curWalletId.value,
|
||
})
|
||
if (res.code != 0) {
|
||
uni.showToast({ title: res.msg || "支付失败", icon: "error" })
|
||
} else {
|
||
uni.hideLoading()
|
||
usePayStore().setPayData({ id: scanCodeData.id, name: scanCodeData.name, customPrice: Number(amount.value).toFixed(2) })
|
||
router.jump("/pages/pay/payComplete", {}, 2)
|
||
}
|
||
} catch (error: any) {
|
||
uni.showToast({ title: "请求错误", icon: "error" })
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
</script>
|