feat: ui

src/components/partner-intro/index.tsx

@@ -57,21 +57,21 @@ export default function PartnerIntro() {
         const canvas = res[0].node;
         const ctx = canvas.getContext('2d');
 
-        canvas.width = 1500;
-        canvas.height = 2668;
+        canvas.width = 550*2;
+        canvas.height = 918*2;
         ctx.scale(2, 2);
 
         // 绘制背景图片
         const bgImage = canvas.createImage();
-        const poster = 'https://publiccdn.neighbourhood.com.cn/img/poster.png'
+        const poster = 'https://publiccdn.neighbourhood.com.cn/img/share-coupon-poster.png';
         bgImage.src = poster;
         bgImage.onload = () => {
-          ctx.drawImage(bgImage, 0, 0, 750, 1334);
+          ctx.drawImage(bgImage, 0, 0, 550, 918);
 
           const qrCodeImage = canvas.createImage();
           qrCodeImage.src = qrCode; // 假设 getQrcode() 返回的是二维码图片的路径
           qrCodeImage.onload = () => {
-            ctx.drawImage(qrCodeImage, 235, 894, 280, 280); // 绘制二维码，位置和大小
+            ctx.drawImage(qrCodeImage, 196, 600, 160, 160); // 绘制二维码，位置和大小
             saveCanvasToTempFile().then(tempPath => {
               resolve(tempPath);
             });
@@ -163,10 +163,10 @@ export default function PartnerIntro() {
 
       <div className={`${PREFIX}__footer`}>
         <Button className={`${PREFIX}__download-button`} onClick={savePoster}>
-          下载海报
+          朋友圈海报
         </Button>
         <Button className={`${PREFIX}__share-button`} openType="share">
-          分享邀请
+          赠送会员给好友
         </Button>
       </div>
     </div>

src/pages/give-vip/index.less

@@ -1 +1,130 @@
-.give-vip {}
+@import '@/styles/variables.less';
+@import '@/styles/common.less';
+
+.give-vip {
+  padding: 40px 24px 200px 24px;
+  &__hint {
+    font-size: 28px;
+    line-height: 48px;
+    color: @blColorG2;
+    gap: 12px;
+    .flex-row();
+    justify-content: center;
+  }
+  &__icon {
+    width: 65px;
+    height: 65px;
+  }
+  &__title {
+    margin-top: 24px;
+    font-weight: 500;
+    font-size: 40px;
+    line-height: 48px;
+    color: @blColor;
+    text-align: center;
+    flex: 0 1 auto;
+    gap: 12px;
+    .flex-row();
+    justify-content: center;
+    .highlight {
+      margin-left: -12px;
+      display: inline-block;
+      color: @blHighlightColor;
+    }
+  }
+  &__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+  &__info {
+    &-block {
+      margin-top: 48px;
+    }
+    &-title {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 32px;
+      color: #1d2129;
+      margin-bottom: 24px;
+    }
+    &-card {
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 24px;
+      padding: 32px;
+    }
+    &-body {
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 40px;
+      color: #333333;
+      margin-bottom: 32px;
+    }
+    &-img {
+      width: 100%;
+      height: 614px;
+    }
+  }
+  &__footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 12px 32px;
+    box-shadow: 0px -4px 20px 0px #00000014;
+    box-sizing: border-box;
+    background: #ffffff;
+  }
+
+  &__footer-body {
+    .flex-row();
+    justify-content: center;
+  }
+  &__button {
+    .button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
+    width: 400px;
+  }
+  &__coupon {
+    &-info {
+      position: relative;
+      margin-top: 32px;
+      padding: 24px;
+      box-sizing: border-box;
+      border-radius: 24px;
+
+      .flex-column();
+      justify-content: center;
+    }
+
+    &-title {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 48px;
+      color: @blHighlightColor;
+      margin-bottom: 8px;
+    }
+    &-intro {
+      font-size: 28px;
+      line-height: 40px;
+      margin-bottom: 12px;
+      color: @blColor;
+      gap: 4px;
+      .flex-row();
+      .highlight {
+        font-weight: 600;
+        font-size: 32px;
+        line-height: 56px;
+        color: @blHighlightColor;
+      }
+    }
+    &-valid {
+      font-size: 28px;
+      line-height: 40px;
+
+      color: @blColorG2;
+    }
+  }
+}

src/pages/give-vip/index.tsx

@@ -1,6 +1,11 @@
-import { Button } from '@taroify/core';
+import { Image, Button } from '@tarojs/components';
 
+import { Fragment, useCallback } from 'react';
+
+import SafeBottomPadding from '@/components/safe-bottom-padding';
+import { PageUrl } from '@/constants/app';
 import { logWithPrefix } from '@/utils/common';
+import { switchTab } from '@/utils/route';
 
 import './index.less';
 
@@ -8,5 +13,59 @@ const PREFIX = 'give-vip';
 const log = logWithPrefix(PREFIX);
 
 export default function GiveVip() {
-  return <div className={PREFIX}></div>;
+  const handleNavigate = useCallback(() => {
+    switchTab(PageUrl.Job);
+  }, []);
+  return (
+    <div className={PREFIX}>
+      <Fragment>
+        <div className={`${PREFIX}__title`}>
+          <Image src="https://publiccdn.neighbourhood.com.cn/img/partner-yes.svg" className={`${PREFIX}__icon`} />
+          <div>宝子，播络会员领取成功</div>
+        </div>
+        <div className={`${PREFIX}__coupon-info`}>
+          <Image src="https://publiccdn.neighbourhood.com.cn/img/parnet-share-bg.png" className={`${PREFIX}__bg`} />
+          <div className={`${PREFIX}__coupon-title`}>播络日会员</div>
+          <div className={`${PREFIX}__coupon-intro`}>
+            会员有效期内可增加<div className="highlight">10次</div>报单机会
+          </div>
+          <div className={`${PREFIX}__coupon-valid`}>有效期至：2025年/8/26 22:23:56</div>
+        </div>
+      </Fragment>
+      <Fragment>
+        <div className={`${PREFIX}__hint`}>
+          <Image
+            src="https://publiccdn.neighbourhood.com.cn/img/link-invalid.svg"
+            mode="aspectFit"
+            className={`${PREFIX}__icon`}
+          />
+          <div className={`${PREFIX}__hint-title`}>宝子，链接已失效</div>
+        </div>
+        <div className={`${PREFIX}__title`}>
+          请联系分享人<div className="highlight">再次分享</div>
+        </div>
+      </Fragment>
+      <div className={`${PREFIX}__info-block`}>
+        <div className={`${PREFIX}__info-title`}>播络简介</div>
+        <div className={`${PREFIX}__info-card`}>
+          <div className={`${PREFIX}__info-body`}>
+            播络通告整理汇集了本地每日新增带货主播通告，方便大家及时找到高薪工作
+          </div>
+          <Image
+            className={`${PREFIX}__info-img`}
+            src="https://publiccdn.neighbourhood.com.cn/img/partner-share-coupon-img.png"
+            mode="heightFix"
+          />
+        </div>
+      </div>
+      <div className={`${PREFIX}__footer`}>
+        <div className={`${PREFIX}__footer-body`}>
+          <Button className={`${PREFIX}__button`} onClick={handleNavigate}>
+            立即使用
+          </Button>
+        </div>
+        <SafeBottomPadding />
+      </div>
+    </div>
+  );
 }

src/pages/partner/index.tsx

@@ -20,7 +20,12 @@ export default function Partner() {
   };
   useShareAppMessage(() => {
     console.log('Partner inviteCode', inviteCode);
-    return getCommonShareMessage({ useCapture: false, inviteCode });
+    return getCommonShareMessage({
+      useCapture: false,
+      inviteCode,
+      title: '宝子，送你个播络会员，找工作更方便',
+      imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-coupon.png',
+    });
   });
 
   return (

src/utils/share.ts

@@ -20,6 +20,7 @@ interface ShareAppProps {
   inviteCode?: string;
   title?: string;
   path?: PageUrl;
+  imageUrl?: string;
   params?: Record<string, BL.Anything>;
 }
 
@@ -28,6 +29,7 @@ export const getCommonShareMessage = ({
   inviteCode,
   title,
   path,
+  imageUrl: _imageUrl,
   params = {},
 }: ShareAppProps = {}): ShareAppMessageReturn => {
   const inviteParams = inviteCode ? { c: inviteCode } : undefined;
@@ -36,6 +38,6 @@ export const getCommonShareMessage = ({
   return {
     title: title || `昨天新增了${getRandomCount()}条主播通告，宝子快来看看`,
     path: sharePath,
-    imageUrl: useCapture ? undefined : imageUrl,
+    imageUrl: useCapture ? undefined : _imageUrl || imageUrl,
   };
 };