109 lines
3.7 KiB
JavaScript
109 lines
3.7 KiB
JavaScript
import { View, Image, Text } from "@tarojs/components"
|
||
import backNav from '@/images/backNav.png'
|
||
import inviteBg from '@/images/inviteBg.png'
|
||
import share from '@/images/share.png'
|
||
import wechat from '@/images/wechat.png'
|
||
import qrcode from '@/images/qrcode.png'
|
||
import './index.scss'
|
||
import { backTo, errorNotice, successNotice } from "../../utils/utils"
|
||
import { userDetail } from "../../utils/api"
|
||
import { useState } from "react"
|
||
import jrQrcode from 'jr-qrcode'
|
||
import { useEffect } from "react"
|
||
import { Button } from "@nutui/nutui-react-taro"
|
||
import config from "../../config/config"
|
||
import Taro from "@tarojs/taro"
|
||
import html2canvas from 'html2canvas';
|
||
|
||
|
||
const Index = () => {
|
||
|
||
const [user, setUser] = useState({})
|
||
const [code, setCode] = useState('')
|
||
|
||
useEffect(() => {
|
||
userDetail().then(rs => {
|
||
if (!rs) return
|
||
setUser(rs)
|
||
const img = jrQrcode.getQrBase64(window.location.origin + '/#/pages/index/index?code=' + rs.invite_code)
|
||
setCode(img)
|
||
})
|
||
|
||
}, [])
|
||
|
||
const backFn = () => {
|
||
backTo()
|
||
}
|
||
|
||
const genImage = () => {
|
||
const canvas = document.createElement("canvas")
|
||
let canvasBox = document.getElementById('imageWrapper')
|
||
const width = canvasBox.offsetWidth
|
||
const height = canvasBox.offsetHeight
|
||
canvas.width = width * 3
|
||
canvas.height = height * 3
|
||
|
||
const options = {
|
||
backgroundColor: '#F67952',
|
||
canvas: canvas,
|
||
useCORS: true,
|
||
y: 66,
|
||
allowTaint: true,
|
||
onrendered: (x) => {
|
||
console.log(x, "CCC")
|
||
}
|
||
};
|
||
|
||
html2canvas(canvasBox, options).then((canvas) => {
|
||
let dataURL = canvas.toDataURL("image/png");
|
||
//下载
|
||
downloadImage(dataURL);
|
||
//显示
|
||
})
|
||
}
|
||
|
||
const downloadImage = (url) => {
|
||
let link = document.createElement("a");
|
||
link.href = url;
|
||
link.setAttribute("download", "邀请码.png");
|
||
link.click();
|
||
}
|
||
|
||
const shareFn = async () => {
|
||
genImage()
|
||
}
|
||
|
||
return <View className="invite-container" id="imageWrapper">
|
||
<View className='addr-detail-title invite-header '>
|
||
<Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
|
||
邀请好友
|
||
</View>
|
||
<View className="invite-body relative flex-center" >
|
||
|
||
<View className="flex-col items-center invite-content">
|
||
<Text className="invite-body-title">邀请好友，福利多多</Text>
|
||
<Image src={code} className="invite-code-img mt18" />
|
||
<View className="invite-code-help">邀请码：{user.invite_code}</View>
|
||
<Button className="invite-btn" onClick={shareFn}>立即邀请</Button>
|
||
</View>
|
||
<Image src={inviteBg} className="invite-body-bg" id='invite-body-bg' />
|
||
</View>
|
||
<View className="invite-footer flex-between items-start ">
|
||
<View className="invite-action flex-col items-center">
|
||
<Image src={share} className="invite-action-icon" />
|
||
<View>点击分享二维码</View>
|
||
</View>
|
||
<View className="invite-action flex-col items-center">
|
||
<Image src={wechat} className="invite-action-icon" />
|
||
<View className="mt6">分享至微信</View>
|
||
</View>
|
||
<View className="invite-action flex-col items-center">
|
||
<Image src={qrcode} className="invite-action-icon" />
|
||
<View>好友扫码加入</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
}
|
||
|
||
|
||
export default Index |