62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
Vue
<template>
|
|
<view class="shell">
|
|
<web-view ref="webview" :src="h5Url" @message="onH5Message" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useUserStore } from '@/store/user'
|
|
import { buildH5Url, parseH5Message, postToH5 } from '@/utils/bridge'
|
|
import { requestAppPayment } from '@/utils/payment'
|
|
|
|
const userStore = useUserStore()
|
|
const webview = ref(null)
|
|
const H5_BASE_URL = import.meta.env.VITE_AVATAR_H5_URL || 'https://digital.99hui.com/'
|
|
|
|
// Restore the native shell session before constructing the H5 URL. Without
|
|
// this, the web-view opens as an anonymous H5 page and cannot enter the
|
|
// authenticated avatar-management route.
|
|
userStore.init()
|
|
|
|
const h5Url = computed(() => buildH5Url(H5_BASE_URL, userStore.$state))
|
|
|
|
function runtimeSurface() {
|
|
let value = 'h5'
|
|
// #ifdef APP-PLUS
|
|
value = 'app'
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
value = 'mp-weixin'
|
|
// #endif
|
|
return value
|
|
}
|
|
|
|
async function handlePayment(payment) {
|
|
try {
|
|
await requestAppPayment(payment)
|
|
postToH5(webview.value, { type: 'paymentResult', orderId: payment.orderId, status: 'success' })
|
|
} catch (error) {
|
|
const message = error?.message || '支付未完成'
|
|
const status = /cancel/i.test(message) || /取消/.test(message) ? 'cancelled' : 'failed'
|
|
postToH5(webview.value, { type: 'paymentResult', orderId: payment.orderId, status, message })
|
|
}
|
|
}
|
|
|
|
function onH5Message(event) {
|
|
const message = parseH5Message(event)
|
|
if (!message?.type) return
|
|
if (message.type === 'ready') {
|
|
postToH5(webview.value, { type: 'context', surface: runtimeSurface(), version: '1.1.0' })
|
|
} else if (message.type === 'payment') {
|
|
void handlePayment(message.payment)
|
|
} else if (message.type === 'setTitle' && message.title) {
|
|
uni.setNavigationBarTitle({ title: message.title })
|
|
} else if (message.type === 'back') {
|
|
uni.navigateBack({ delta: 1 })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>.shell{width:100%;height:100vh}</style>
|