VAVABUY/components/paymentModal/splitCardPay.vue

<template>
	<Popup isClose ref="popRef">
		<template #content>
			<view class="split-card__box">
				<view class="card_item">
					<view class="card_item_label">
						<trans _t="银行卡号" />
					</view>
					<view class="card_item_input" id="split_card_number"></view>
				</view>
				<view class="card_item">
					<view class="card_item_label">
						<trans _t="有效期" />
					</view>
					<view class="card_item_input" id="split_card_expiry"></view>
				</view>
				<view class="card_item">
					<view class="card_item_label">
						<trans _t="安全码" />
					</view>
					<view class="card_item_input" id="split_card_cvc"></view>
				</view>
			</view>
		</template>

		<!-- footer -->
		<template #footer>
			<view class="submit_btn" @click="onConfirm">
				<trans _t="确认" />
			</view>
		</template>
	</Popup>
	<GlobalLoading :msg="loadingStatus"></GlobalLoading>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import Popup from '@/components/popup.vue';
import GlobalLoading from '@/components/GlobalLoading.vue'
import { Toast } from "@/utils"
import { t } from "@/locale"
import { useSplitCardInfo } from './hooks'


const props = defineProps({
	paramsObj: { type: Object }
})
const emit = defineEmits(['on-confirm', 'on-open', 'on-close', 'on-success', 'on-error']);


const {
	elementTypeList,
	intent_id,
	client_secret,
	onInit,
	onUnmountElement,
	fetchPaymentInfo } = useSplitCardInfo()

const popRef = ref(null);
const loadingStatus = reactive({ show: false })


// 打开回调
const open = (data) => {
	onUnmountElement()
	emit('on-open')
	popRef.value && popRef.value.open()
	nextTick(() => {
		fetchPaymentInfo(props.paramsObj)
		onInit()
	})
}

// 关闭回调
const close = () => {
	emit('on-close')
	popRef.value && popRef.value.close()
	onUnmountElement()
}

// “确认按钮” 回调
const onConfirm = () => {
	submitPayment()
}


// 提交支付
function submitPayment() {
	const cardNumber = elementTypeList.cardNumber
	if (!cardNumber.instance) return
	loadingStatus.show = true
	const options = {
		intent_id: intent_id.value,
		client_secret: client_secret.value,
		payment_method_options: {
			card: {
				auto_capture: true,
			},
		},
	}
	cardNumber.instance.confirm(options).then((response) => {
		console.log('--- response ----', response)
		const { status } = response
		if (status == "SUCCEEDED" || status == "succeeded") {
			emit('on-success', response)
		}
		else {
			Toast(status)
		}
	}).catch((error) => {
		console.log('--- error ----', error)
		Toast(error.message)
	}).finally(() => {
		loadingStatus.show = false
	});
}


defineExpose({
	open,
	close
})
</script>


<style lang="less" scoped>
@import url('@/style.less');

.split-card__box {
	width: 100%;
	height: 40vh;

	.card_item {
		margin-top: 16px;
		width: 100%;
	}

	.card_item:first-child {
		margin-top: 0;
	}

	.card_item .card_item_label {
		font-size: 28rpx;
		color: #333;
	}

	.card_item .card_item_input {
		min-height: 40px;
		padding: 8rpx 0rpx 8rpx 16rpx;
		margin-top: 10px;
		border: 1px solid #ccc;
		border-radius: 14rpx;

	}
}

.submit_btn {
	height: 38px;
	padding: 16rpx 30rpx;
	background-color: var(--black);
	color: var(--light);
	.flex_center();
	border-radius: 16rpx;
	.size(24rpx);
}
</style>