magic-csb/boluo-app-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update

Browse Source
This commit is contained in:
chashaobao
2025-10-20 07:58:50 +08:00
parent bc141fcf1b
commit a179654898
32 changed files with 648 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/partner-intro/index.tsx
View File

@ -1,5 +1,4 @@
import { Button, Canvas, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { Swiper } from '@taroify/core';
import { GoodJob } from '@taroify/icons';
@ -8,114 +7,14 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { PageUrl } from '@/constants/app';
import { EarnType, UserProfitListItem } from '@/types/partner';
import { openCustomerServiceChat } from '@/utils/common';
import { generateMembershipCoupon, getCouponQrCode } from '@/utils/coupon';
import { formatMoney, formatTimestamp, getLastProfitList } from '@/utils/partner';
import { formatMoney, formatTimestamp, formatUserId, getLastProfitList } from '@/utils/partner';
import { navigateTo } from '@/utils/route';
import './index.less';
const PREFIX = 'partner-intro';
export default function PartnerIntro() {
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' });
}
}
};
const handleConfirm = useCallback(() => {
navigateTo(PageUrl.GroupOwnerCertificate);
}, []);
@ -124,6 +23,10 @@ export default function PartnerIntro() {
openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
}, []);
const handleJump = useCallback(() => {
navigateTo(PageUrl.PartnerShareVip);
}, []);
const timerRef = useRef<NodeJS.Timeout | null>(null);
const [bannerList, setBannerList] = useState<UserProfitListItem[]>([]);
@ -134,7 +37,7 @@ export default function PartnerIntro() {
}
const list = await getLastProfitList();
setBannerList(s => [...s, ...list]);
setBannerList(list);
timerRef.current = setTimeout(
() => {
@ -156,8 +59,16 @@ export default function PartnerIntro() {
}, [getBannerList]);
return (
<div className={PREFIX}>
<div className={`${PREFIX}__banner`}>
邀请朋友加入播络，高达<span className={`${PREFIX}__highlight`}>75%</span>分成
<Image
src="https://publiccdn.neighbourhood.com.cn/img/partner-intro-bg.png"
className={`${PREFIX}__bg`}
mode="aspectFill"
/>
<div className={`${PREFIX}__slogan`}>
<div>邀请朋友加入播络</div>
<div>
高达<div className={`${PREFIX}__slogan-highlight`}>75%</div>分成
</div>
</div>
<div className={`${PREFIX}__main`}>
<div className={`${PREFIX}__swiper-wrapper`}>
@ -168,10 +79,10 @@ export default function PartnerIntro() {
/>
<Swiper className={`${PREFIX}__swiper`} autoplay={3000} touchable={false}>
{bannerList.map((item, index) => (
<Swiper.Item className={`${PREFIX}__swiper-item`} key={index}>
<Swiper.Item className={`${PREFIX}__swiper-item`} key={`${item.userId}-${index}`}>
<div className={`${PREFIX}__swiper-item-time`}>{formatTimestamp(item.updatedAt)}</div>
<div className={`${PREFIX}__swiper-item-details`}>
<div className={`${PREFIX}__swiper-item-id`}>{item.userId}</div>
<div className={`${PREFIX}__swiper-item-id`}>{formatUserId(item.userId)}</div>
<div className={`${PREFIX}__swiper-item-info`}>
{[EarnType.CHAT_ACTIVITY_SHARE_L1, EarnType.CHAT_ACTIVITY_SHARE_L2].includes(item.earnType)
? '主播被开聊'
@ -187,6 +98,25 @@ export default function PartnerIntro() {
</Swiper>
</div>
<div className={`${PREFIX}__block`}>
<div className={`${PREFIX}__title`}>
群主认证
<div className={`${PREFIX}__recommend`}>
<GoodJob />
强烈推荐
</div>
</div>
<div className={`${PREFIX}__card ${PREFIX}__special`}>
<div className={`${PREFIX}__body`}>
<div className="center">
完成群主认证后，群成员通过该群访问任何人分享的播络小程序进行注册，你都能获得分成
</div>
</div>
<Button className={`${PREFIX}__service`} onClick={handleConfirm}>
立即认证
</Button>
</div>
</div>
<div className={`${PREFIX}__block`}>
<div className={`${PREFIX}__title`}>3重收益</div>
<div className={`${PREFIX}__card`}>
@ -209,34 +139,17 @@ export default function PartnerIntro() {
<div className={`${PREFIX}__title`}>邀请方法</div>
<div className={`${PREFIX}__card`}>
<div className={`${PREFIX}__body`}>
<div>1.点击下方“赠送会员给好友”，给群员、好友送会员，每周可以送一次</div>
<div>2.分享通告列表页、通告详情页等页面至群、好友</div>
<div className={`${PREFIX}__h1`}>方法一：</div>
<div>点击下方“赠送会员给好友”，给群员、好友送会员，每周可以送一次</div>
<div className={`${PREFIX}__h1`}>方法二：</div>
<div>分享通告列表页、通告详情页等页面至群、好友</div>
</div>
</div>
</div>
<div className={`${PREFIX}__block`}>
<div className={`${PREFIX}__title`}>
群主认证
<div className={`${PREFIX}__recommend`}>
<GoodJob />
强烈认证
</div>
</div>
<div className={`${PREFIX}__card ${PREFIX}__special`}>
<div className={`${PREFIX}__body`}>
<div className="center">
完成群主认证后，群成员通过该群访问任何人分享的播络小程序进行注册，你都能获得分成
</div>
</div>
<Button className={`${PREFIX}__service`} onClick={handleConfirm}>
立即认证
</Button>
</div>
</div>
<div className={`${PREFIX}__block`}>
<div className={`${PREFIX}__title`}>交流群</div>
<div className={`${PREFIX}__card ${PREFIX}__special`}>
<div className={`${PREFIX}__h1`}>加入播络合伙人交流群，分享经验</div>
<div className={`${PREFIX}__h1 no-dot`}>加入播络合伙人交流群，分享经验</div>
<Button className={`${PREFIX}__service`} onClick={handleOpenService}>
点击加入
</Button>
@ -246,10 +159,7 @@ export default function PartnerIntro() {
<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 className={`${PREFIX}__share-button`} onClick={handleJump}>
赠送会员给好友
</Button>
</div>