192 lines
6.9 KiB
TypeScript
192 lines
6.9 KiB
TypeScript
import { Button, Canvas, Image } from '@tarojs/components';
|
||
import Taro, { useShareAppMessage } from '@tarojs/taro';
|
||
|
||
import { PageUrl } from '@/constants/app';
|
||
import useInviteCode from '@/hooks/use-invite-code';
|
||
import { generateMembershipCoupon, getCouponQrCode } from '@/utils/coupon';
|
||
import { getCommonShareMessage } from '@/utils/share';
|
||
|
||
import './index.less';
|
||
|
||
const PREFIX = 'share-vip';
|
||
|
||
export default function PartnerShareVip() {
|
||
const inviteCode = useInviteCode();
|
||
|
||
Taro.showShareMenu({
|
||
withShareTicket: true,
|
||
});
|
||
|
||
useShareAppMessage(async () => {
|
||
console.log('Partner inviteCode', inviteCode);
|
||
const { code } = await generateMembershipCoupon();
|
||
return getCommonShareMessage({
|
||
useCapture: false,
|
||
inviteCode,
|
||
title: '宝子，送你个播络会员，免费找主播工作',
|
||
path: PageUrl.GiveVip,
|
||
params: { d: code },
|
||
imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-coupon1.png',
|
||
});
|
||
});
|
||
|
||
const getQrcode = async () => {
|
||
try {
|
||
const { code } = await generateMembershipCoupon();
|
||
const data = await getCouponQrCode(code);
|
||
const base64 = Taro.arrayBufferToBase64(data);
|
||
return `data:image/png;base64,${base64}`;
|
||
} catch (error) {
|
||
console.error('获取二维码失败', error);
|
||
Taro.showToast({ title: '获取二维码失败', icon: 'none' });
|
||
throw error;
|
||
}
|
||
};
|
||
const saveCanvasToTempFile = (): Promise<string> => {
|
||
return new Promise((resolve, reject) => {
|
||
try {
|
||
const query = Taro.createSelectorQuery().select('#posterCanvas');
|
||
query.fields({ node: true }).exec(async res => {
|
||
const canvas = res[0].node;
|
||
const tempFilePath = await Taro.canvasToTempFilePath({
|
||
canvas,
|
||
x: 0,
|
||
y: 0,
|
||
width: 1500, // 实际绘制宽度
|
||
height: 2668, // 实际绘制高度
|
||
destWidth: 750, // 目标显示宽度
|
||
destHeight: 1334, // 目标显示高度
|
||
fileType: 'png',
|
||
});
|
||
|
||
resolve(tempFilePath.tempFilePath);
|
||
});
|
||
} catch (error) {
|
||
console.error('保存 Canvas 到临时文件失败', error);
|
||
Taro.showToast({ title: '保存 Canvas 失败', icon: 'none' });
|
||
reject(error);
|
||
}
|
||
});
|
||
};
|
||
const drawCanvas = (qrCode: string): Promise<string> => {
|
||
const query = Taro.createSelectorQuery().select('#posterCanvas');
|
||
return new Promise(resolve => {
|
||
query.fields({ node: true, size: true }).exec(async res => {
|
||
const canvas = res[0].node;
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
canvas.width = 550 * 2;
|
||
canvas.height = 918 * 2;
|
||
ctx.scale(2, 2);
|
||
|
||
// 绘制背景图片
|
||
const bgImage = canvas.createImage();
|
||
const poster = 'https://publiccdn.neighbourhood.com.cn/img/share-coupon-poster2.png';
|
||
bgImage.src = poster;
|
||
bgImage.onload = () => {
|
||
ctx.drawImage(bgImage, 0, 0, 550, 918);
|
||
|
||
const qrCodeImage = canvas.createImage();
|
||
qrCodeImage.src = qrCode; // 假设 getQrcode() 返回的是二维码图片的路径
|
||
qrCodeImage.onload = () => {
|
||
ctx.drawImage(qrCodeImage, 196, 600, 180, 160); // 绘制二维码，位置和大小
|
||
saveCanvasToTempFile().then(tempPath => {
|
||
resolve(tempPath);
|
||
});
|
||
};
|
||
};
|
||
bgImage.onerror = err => {
|
||
console.error(err);
|
||
};
|
||
});
|
||
});
|
||
};
|
||
const savePoster = async () => {
|
||
Taro.showLoading({ title: '正在生成海报' });
|
||
const qrCode = await getQrcode();
|
||
const filePath = await drawCanvas(qrCode);
|
||
Taro.hideLoading();
|
||
|
||
const res = await Taro.getSetting();
|
||
const hasPermission = res.authSetting['scope.writePhotosAlbum'];
|
||
if (hasPermission === false) {
|
||
Taro.showModal({
|
||
title: '提示',
|
||
content: '需要访问相册权限才能保存图片，请前往设置开启权限',
|
||
showCancel: false,
|
||
success() {
|
||
Taro.openSetting();
|
||
},
|
||
});
|
||
} else {
|
||
try {
|
||
await Taro.authorize({ scope: 'scope.writePhotosAlbum' });
|
||
await Taro.saveImageToPhotosAlbum({ filePath });
|
||
Taro.showToast({ title: '保存成功', icon: 'success' });
|
||
} catch (error) {
|
||
console.error(error);
|
||
Taro.showToast({ title: '保存失败', icon: 'none' });
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={PREFIX}>
|
||
<Image
|
||
src="https://publiccdn.neighbourhood.com.cn/img/partner-share-vip-bg.png"
|
||
className={`${PREFIX}__bg`}
|
||
mode="aspectFill"
|
||
/>
|
||
<div className={`${PREFIX}__slogan`}>
|
||
<div>
|
||
会员可每日<div className={`${PREFIX}__slogan-highlight`}>免费查看</div>
|
||
</div>
|
||
<div>通告联系方式</div>
|
||
</div>
|
||
<div className={`${PREFIX}__main`}>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>赠送会员</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__h1`}>方法一：</div>
|
||
<div className={`${PREFIX}__body`}>点击下方"立即赠送"即可分享赠送卡片，对方点击卡片即可领取</div>
|
||
<div className={`${PREFIX}__h1`}>方法二：</div>
|
||
<div className={`${PREFIX}__body`}>点击"朋友圈海报"获得图片，分享到朋友圈，对方扫码即可领取</div>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>赠送规则</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div className={`${PREFIX}__h1`}>规则一：</div>
|
||
<div>每次分享的赠送链接或者图片在7天内有效</div>
|
||
<div className={`${PREFIX}__h1`}>规则二：</div>
|
||
<div>每个用户一周最多只能领取一次会员</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className={`${PREFIX}__block`}>
|
||
<div className={`${PREFIX}__title`}>分享建议</div>
|
||
<div className={`${PREFIX}__card`}>
|
||
<div className={`${PREFIX}__body`}>
|
||
<div className={`${PREFIX}__h1`}>建议一：</div>
|
||
<div>每周在朋友圈或者群中分享一次，效果最佳 可以写明：新会员来啦</div>
|
||
<div className={`${PREFIX}__h1`}>建议二：</div>
|
||
<div>分享得越多，邀请的人会越多，也会更活跃，更容易获得分成</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Canvas id="posterCanvas" canvas-id="posterCanvas" type="2d" style="width: 750px; height: 1334px;" />
|
||
|
||
<div className={`${PREFIX}__footer`}>
|
||
<Button className={`${PREFIX}__download-button`} onClick={savePoster}>
|
||
朋友圈海报
|
||
</Button>
|
||
<Button className={`${PREFIX}__share-button`} openType="share">
|
||
立即赠送
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|