58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { Image, Text, View } from '@tarojs/components'
|
|
import Taro from '@tarojs/taro'
|
|
import { useEffect, useState } from 'react'
|
|
import { buildPublicQrImageUrl } from '@/lib/qrImage'
|
|
|
|
export default function WeixinQrImage ({ url }: { url: string }) {
|
|
const [src, setSrc] = useState('')
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
setSrc('')
|
|
const remote = buildPublicQrImageUrl(url)
|
|
if (!remote) return
|
|
|
|
if (Taro.getEnv() !== Taro.ENV_TYPE.WEAPP) {
|
|
setSrc(remote)
|
|
return
|
|
}
|
|
|
|
Taro.downloadFile({
|
|
url: remote,
|
|
success (res) {
|
|
if (cancelled) return
|
|
if (res.statusCode === 200 && res.tempFilePath) {
|
|
setSrc(res.tempFilePath)
|
|
return
|
|
}
|
|
Taro.showToast({ title: '二维码加载失败', icon: 'none' })
|
|
},
|
|
fail () {
|
|
if (!cancelled) {
|
|
Taro.showToast({ title: '二维码加载失败', icon: 'none' })
|
|
}
|
|
},
|
|
})
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [url])
|
|
|
|
return (
|
|
<View className='contact-qrcode'>
|
|
{src ? (
|
|
<Image
|
|
className='contact-qrcode__image'
|
|
src={src}
|
|
showMenuByLongpress
|
|
onLongPress={() => Taro.previewImage({ current: src, urls: [src] })}
|
|
/>
|
|
) : (
|
|
<View className='contact-qrcode__image' />
|
|
)}
|
|
<Text className='contact-qrcode__hint'>截图并使用微信扫码识别添加客服微信</Text>
|
|
</View>
|
|
)
|
|
}
|