update pay ui
This commit is contained in:
@@ -47,6 +47,7 @@ const generatePlainUrlScheme = (path, query) => {
|
|||||||
* @param {Function} [props.onSuccess] - 跳转成功回调
|
* @param {Function} [props.onSuccess] - 跳转成功回调
|
||||||
* @param {Function} [props.onError] - 跳转失败回调
|
* @param {Function} [props.onError] - 跳转失败回调
|
||||||
* @param {Object} [props.buttonProps] - 按钮属性
|
* @param {Object} [props.buttonProps] - 按钮属性
|
||||||
|
* @param {Object} [props.buttonStyle] - 按钮内联样式
|
||||||
*/
|
*/
|
||||||
const UrlSchemeLauncher = ({
|
const UrlSchemeLauncher = ({
|
||||||
path = '',
|
path = '',
|
||||||
@@ -55,6 +56,7 @@ const UrlSchemeLauncher = ({
|
|||||||
onSuccess,
|
onSuccess,
|
||||||
onError,
|
onError,
|
||||||
buttonProps = {},
|
buttonProps = {},
|
||||||
|
buttonStyle = {},
|
||||||
}) => {
|
}) => {
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [openlink, setOpenlink] = useState(null);
|
const [openlink, setOpenlink] = useState(null);
|
||||||
@@ -132,7 +134,7 @@ const UrlSchemeLauncher = ({
|
|||||||
// 再次尝试跳转
|
// 再次尝试跳转
|
||||||
const handleRetry = useCallback(() => {
|
const handleRetry = useCallback(() => {
|
||||||
if (openlink) {
|
if (openlink) {
|
||||||
openUrlScheme(openlink);
|
window.location.href = openlink;
|
||||||
}
|
}
|
||||||
}, [openlink]);
|
}, [openlink]);
|
||||||
|
|
||||||
@@ -144,6 +146,7 @@ const UrlSchemeLauncher = ({
|
|||||||
loadingText="正在跳转..."
|
loadingText="正在跳转..."
|
||||||
colorScheme="green"
|
colorScheme="green"
|
||||||
leftIcon={<Icon as={FiExternalLink} />}
|
leftIcon={<Icon as={FiExternalLink} />}
|
||||||
|
style={buttonStyle}
|
||||||
{...buttonProps}
|
{...buttonProps}
|
||||||
>
|
>
|
||||||
{children || '打开小程序'}
|
{children || '打开小程序'}
|
||||||
|
|||||||
@@ -24,11 +24,35 @@ export const isWeChatBrowser = () => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 检测是否为移动端设备
|
* 检测是否为移动端设备
|
||||||
|
* 使用多种检测方式,确保 Safari 兼容性
|
||||||
*/
|
*/
|
||||||
export const isMobileDevice = () => {
|
export const isMobileDevice = () => {
|
||||||
if (typeof window === 'undefined') return false;
|
if (typeof window === 'undefined') return false;
|
||||||
|
|
||||||
const ua = navigator.userAgent;
|
const ua = navigator.userAgent;
|
||||||
return /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua);
|
|
||||||
|
// 方式1:User Agent 检测
|
||||||
|
const uaCheck = /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua);
|
||||||
|
|
||||||
|
// 方式2:触摸屏检测(Safari 兼容)
|
||||||
|
const touchCheck = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||||
|
|
||||||
|
// 方式3:屏幕宽度检测(作为备用)
|
||||||
|
const screenCheck = window.innerWidth <= 768;
|
||||||
|
|
||||||
|
// 方式4:Safari 特定检测(iOS Safari 不会在 UA 中包含 "Mobile" 但会有 "Safari")
|
||||||
|
const isSafariMobile = /Safari/i.test(ua) && /Apple/i.test(navigator.vendor) && touchCheck;
|
||||||
|
|
||||||
|
const result = uaCheck || (touchCheck && screenCheck) || isSafariMobile;
|
||||||
|
|
||||||
|
// 调试日志(仅在开发环境)
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.log('[isMobileDevice] UA:', ua);
|
||||||
|
console.log('[isMobileDevice] uaCheck:', uaCheck, 'touchCheck:', touchCheck, 'screenCheck:', screenCheck, 'isSafariMobile:', isSafariMobile);
|
||||||
|
console.log('[isMobileDevice] result:', result);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -82,6 +82,7 @@ const MiniProgramLauncher = ({
|
|||||||
onSuccess={onSuccess}
|
onSuccess={onSuccess}
|
||||||
onError={onError}
|
onError={onError}
|
||||||
buttonProps={buttonProps}
|
buttonProps={buttonProps}
|
||||||
|
buttonStyle={buttonStyle}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</UrlSchemeLauncher>
|
</UrlSchemeLauncher>
|
||||||
|
|||||||
Reference in New Issue
Block a user