51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { Button, Text, View } from '@tarojs/components';
|
|
import { handleShareButtonClick, type PageSharePayload } from '../lib/wechat-share';
|
|
import './ShareGuide.css';
|
|
|
|
type ShareNavButtonProps = {
|
|
payload?: PageSharePayload;
|
|
};
|
|
|
|
/**
|
|
* 顶栏分享：
|
|
* - 小程序：open-type=share 弹出微信分享面板
|
|
* - H5 微信：JSSDK share / 右上角引导蒙层
|
|
*/
|
|
export default function ShareNavButton({ payload }: ShareNavButtonProps) {
|
|
const [guideVisible, setGuideVisible] = useState(false);
|
|
|
|
if (process.env.TARO_ENV === 'weapp') {
|
|
return (
|
|
<Button className="page-nav-bar__btn page-nav-bar__share-btn" openType="share" hoverClass="none">
|
|
<Text className="page-nav-bar__icon page-nav-bar__icon--share">⤴</Text>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<View
|
|
className="page-nav-bar__btn"
|
|
onClick={() => {
|
|
void handleShareButtonClick(payload).then((res) => {
|
|
if (res.showGuide) setGuideVisible(true);
|
|
});
|
|
}}
|
|
>
|
|
<Text className="page-nav-bar__icon page-nav-bar__icon--share">⤴</Text>
|
|
</View>
|
|
{guideVisible ? (
|
|
<View className="share-guide" onClick={() => setGuideVisible(false)}>
|
|
<View className="share-guide__arrow" />
|
|
<View className="share-guide__card">
|
|
<Text className="share-guide__title">分享给好友</Text>
|
|
<Text className="share-guide__desc">请点击右上角 ··· 选择「发送给朋友」或「分享到朋友圈」</Text>
|
|
<Text className="share-guide__ok">我知道了</Text>
|
|
</View>
|
|
</View>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|