VAVABUY/components/paymentModal/dropInPay.vue

<template>
  <view class="drop-in-payment__container">
    <view id="dropIn"></view>
  </view>
</template>


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


// props
const props = defineProps({
  oid: { type: String, default: '' }
})
// emits
const emit = defineEmits(['open', 'close', 'success', 'error']);

const {
		dropInElement,
		handleInit,
		handleUnmount,
		fetchPaymentInitData } = useDropInPayInfo();
		

const onMount = () => {
	nextTick(() => {
		// testDemo()
	})
  fetchPaymentInitData({ oid: props.oid }, bindEventListener);
}


const onDestroy = () => {
  handleUnmount()
}


// 事件绑定
function bindEventListener() {
	if (!dropInElement.value) return;
	dropInElement.value.on('success', onSuccess);
	dropInElement.value.on('error', onError);
	dropInElement.value.on('ready', onReady);
}


const onReady = (event) => {
	console.log('----- drop-in payment ready -----', event)
}

// 成功回调
const onSuccess = (event) => {
	console.log('----- drop-in payment success -----', event)
}

// 失败回调
const onError = (event) => {
	console.log('----- drop-in payment error -----', event)
	Toast(event.detail.error.message || event.detail.error || t("pay_fail_msg", {}) || "fail！");
}



defineExpose({
  onMount,
  onDestroy
})

</script>


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

/* #dropIn {
  width: 100%,
  margin: 10rpx auto,
} */
</style>