166 lines
3.5 KiB
Vue
166 lines
3.5 KiB
Vue
<!--
|
||
@name: 付款弹窗
|
||
@author: kahu
|
||
@date: 2023-11-08 10:53
|
||
@description：index
|
||
@update: 2023-11-08 10:53
|
||
-->
|
||
<script setup>
|
||
import Popup from '@/components/Popup/index.vue';
|
||
import { ref, unref } from "vue";
|
||
import { payRows } from "./index.data";
|
||
import UvRadioGroup from "@/uni_modules/uv-radio/components/uv-radio-group/uv-radio-group.vue";
|
||
import UvRadio from "@/uni_modules/uv-radio/components/uv-radio/uv-radio.vue";
|
||
import { doPayment, PayType } from "@/utils/paymentUtils";
|
||
import { orderInfo as orderInfoRequest } from "@/api/order";
|
||
import { useInterface } from "@/hooks/useInterface";
|
||
import { useRouter } from "@/hooks/useRouter";
|
||
|
||
const {toast} = useInterface()
|
||
const {push} = useRouter()
|
||
const emits = defineEmits(['confirm', 'close']);
|
||
|
||
const popupRef = ref()
|
||
|
||
async function show(orderId) {
|
||
await doGetOrderDetail(orderId)
|
||
unref(popupRef).show()
|
||
}
|
||
|
||
function close() {
|
||
emits('close')
|
||
}
|
||
|
||
defineExpose({show})
|
||
|
||
const payType = ref(PayType["0"]) // 支付方式
|
||
|
||
const orderInfo = ref({}) // 订单信息
|
||
|
||
async function doGetOrderDetail(orderId) {
|
||
orderInfo.value = await orderInfoRequest({key: orderId});
|
||
}
|
||
|
||
const subLoading = ref(false)
|
||
|
||
async function handleSubmit() {
|
||
try {
|
||
subLoading.value = true
|
||
await doPayment({type: payType.value, payInfo: orderInfo.value})
|
||
subLoading.value = false
|
||
emits('confirm')
|
||
close()
|
||
} catch (e) {
|
||
console.error(e)
|
||
push({url: '/pages/payStatus/index'},{data:{type:2}})
|
||
toast({title: '支付失败了'})
|
||
close()
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<Popup
|
||
ref="popupRef"
|
||
title="支付"
|
||
@close="close"
|
||
>
|
||
<view class="pay-container">
|
||
<uv-radio-group
|
||
placement="column"
|
||
iconPlacement="right"
|
||
v-model="payType"
|
||
class="pay-box__inner flex flex-ai__center flex-jc__center flex-wrap"
|
||
shape="circle"
|
||
activeColor="#ec6e47"
|
||
>
|
||
<template
|
||
v-for="pay in payRows"
|
||
:key="pay.type"
|
||
>
|
||
<uv-radio
|
||
:name="pay.type"
|
||
:disabled="pay.disabled"
|
||
>
|
||
<view class="pay-row flex flex-ai__center">
|
||
<image
|
||
class="icon"
|
||
:src="pay.icon"
|
||
/>
|
||
<view class="info">
|
||
<view class="label">
|
||
{{ pay.label }}
|
||
</view>
|
||
<view>
|
||
{{ pay.eLabel }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uv-radio>
|
||
</template>
|
||
</uv-radio-group>
|
||
<view
|
||
class="animation-button sub-button"
|
||
:class="{active:subLoading}"
|
||
@click="handleSubmit"
|
||
>
|
||
立即支付
|
||
</view>
|
||
</view>
|
||
</Popup>
|
||
</template>
|
||
|
||
<style
|
||
scoped
|
||
lang="scss"
|
||
>
|
||
.pay-container {
|
||
@include usePadding(35, 0);
|
||
width: 100%;
|
||
|
||
.pay-row {
|
||
|
||
@include usePadding(0, 20);
|
||
font-size: 20rpx;
|
||
color: $tips-color;
|
||
border-bottom: 1rpx solid #e5e5e5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.info {
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.uv-radio) {
|
||
width: 100%;
|
||
transition: all .3s;
|
||
|
||
&:active {
|
||
scale: 1.1;
|
||
}
|
||
}
|
||
|
||
.sub-button {
|
||
$button-height: 80rpx;
|
||
margin: 20rpx auto;
|
||
height: $button-height;
|
||
line-height: $button-height;
|
||
border-radius: $button-height;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|