feat: ui

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>
+  );
 }