feat:hhhh

2025-10-06 11:49:41 +08:00
parent 7f866c51be
commit 7ba04b27ff
8 changed files with 975 additions and 106 deletions
--- a/src/components/partner-intro/index.less
+++ b/src/components/partner-intro/index.less
@ -7,7 +7,7 @@
  padding-bottom: calc(112px + env(safe-area-inset-bottom));

  &__banner {
-    background: fade(@blHighlightBg, 8);
+    background: rgb(229, 225, 248);
    height: 88px;
    line-height: 88px;
    text-align: center;
@ -37,6 +37,63 @@
    margin-bottom: 40px;
  }

+  &__swiper {
+    margin-bottom: 48px;
+    &-wrapper {
+      background: #fff;
+      border-radius: 24px;
+      position: relative;
+    }
+
+    &-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  &__swiper-item {
+    box-sizing: border-box;
+    height: 130px;
+    padding: 24px 32px;
+    &-item {
+      font-style: normal;
+      font-size: 28px;
+      line-height: 40px;
+      color: #333333;
+      font-weight: 400;
+      position: relative;
+    }
+    &-details {
+      margin-top: 5px;
+    }
+    &-id {
+      font-size: 24px;
+      line-height: 36px;
+      color: #999999;
+      padding-right: 22px;
+      display: inline-block;
+    }
+    &-info {
+      font-size: 28px;
+      line-height: 40px;
+      color: #333333;
+      margin-right: 16px;
+      display: inline-block;
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .money {
+        color: #ff5051;
+        display: inline-block;
+        padding-left: 8px;
+      }
+    }
+  }

  &__card {
    background: #fff;
@ -61,9 +118,14 @@
    font-weight: 400;
    font-size: 28px;
    line-height: 40px;
+    color: @blColor;

    &.grey {
-      color: @blColorG2
+      color: @blColorG2;
+    }
+
+    &.center {
+      text-align: center;
    }
  }

@ -76,6 +138,20 @@
    color: #1d2129;
  }

+  &__recommend {
+    display: inline-flex;
+    line-height: 36px;
+    padding: 0 8px;
+    height: 36px;
+    margin-left: 16px;
+    background: rgba(255, 80, 81, 0.12);
+    border-radius: 4px;
+    font-size: 24px;
+    color: #ff5051;
+    align-items: center;
+    gap: 6px;
+  }
+
  &__special {
    padding: 32px;
    .flex-column();
--- a/src/components/partner-intro/index.tsx
+++ b/src/components/partner-intro/index.tsx
@ -1,6 +1,8 @@
-import { Button, Canvas } from '@tarojs/components';
+import { Button, Canvas, Image } from '@tarojs/components';
 import Taro from '@tarojs/taro';

+import { Swiper } from '@taroify/core';
+import { GoodJob } from '@taroify/icons';
 import { useCallback } from 'react';

 import { openCustomerServiceChat } from '@/utils/common';
@ -110,6 +112,8 @@ export default function PartnerIntro() {
    }
  };

+  const handleConfirm = useCallback(() => {}, []);
+
  const handleOpenService = useCallback(() => {
    openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfc4fcf6b109b3771d7');
  }, []);
@ -119,41 +123,82 @@ export default function PartnerIntro() {
        邀请朋友加入播络，高达<span className={`${PREFIX}__highlight`}>75%</span>分成
      </div>
      <div className={`${PREFIX}__main`}>
+        <div className={`${PREFIX}__swiper-wrapper`}>
+          <Image
+            className={`${PREFIX}__swiper-bg`}
+            src="https://publiccdn.neighbourhood.com.cn/img/partner-swipe-item.png"
+            mode="aspectFill"
+          />
+          <Swiper className={`${PREFIX}__swiper`} autoplay={3000} touchable={false}>
+            <Swiper.Item className={`${PREFIX}__swiper-item`}>
+              <div className={`${PREFIX}__swiper-item-time`}>2024.02.02 12:23:23</div>
+              <div className={`${PREFIX}__swiper-item-details`}>
+                <div className={`${PREFIX}__swiper-item-id`}>zbldakjdjsksada</div>
+                <div className={`${PREFIX}__swiper-item-info`}>
+                  主播被开聊<div className="money">+2.15</div>
+                </div>
+                <div className={`${PREFIX}__swiper-item-info`}>
+                  累计<div className="money">1200.15</div>
+                </div>
+              </div>
+            </Swiper.Item>
+          </Swiper>
+        </div>
+
        <div className={`${PREFIX}__block`}>
+          <div className={`${PREFIX}__title`}>3重收益</div>
          <div className={`${PREFIX}__card`}>
-            <div className={`${PREFIX}__h1`}>收益一</div>
+            <div className={`${PREFIX}__h1`}>直接分成：</div>
            <div className={`${PREFIX}__body`}>
              直接获得被邀请人付款金额的<span className={`${PREFIX}__highlight`}>20%</span>
            </div>
-            <div className={`${PREFIX}__h1`}>收益二</div>
+            <div className={`${PREFIX}__h1`}>主播分成：</div>
            <div className={`${PREFIX}__body`}>
              邀请的主播创建模卡，被企业开聊，每日可获得收益，分成比例高达
              <span className={`${PREFIX}__highlight`}>50%</span>
            </div>
-            <div className={`${PREFIX}__h1`}>收益三</div>
+            <div className={`${PREFIX}__h1`}>邀请合伙人：</div>
            <div className={`${PREFIX}__body`}>
-              邀请朋友加入合伙人，可额外获得所邀合伙人收益的<span className={`${PREFIX}__highlight`}>5%</span>
+              你邀请的人也加入合伙人，你可获得所邀合伙人收益的<span className={`${PREFIX}__highlight`}>5%</span>
            </div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
-          <div className={`${PREFIX}__title`}>分享方法</div>
+          <div className={`${PREFIX}__title`}>邀请方法</div>
          <div className={`${PREFIX}__card`}>
            <div className={`${PREFIX}__body`}>
-              点击底部按钮向好友群友赠送会员，或者分享通告列表、通告详情等页面给朋友即可
+              <div>1.点击下方“赠送会员给好友”，给群员、好友送会员，每周可以送一次</div>
+              <div>2.分享通告列表页、通告详情页等页面至群、好友</div>
            </div>
          </div>
        </div>
        <div className={`${PREFIX}__block`}>
-          <div className={`${PREFIX}__title`}>合伙人交流群</div>
+          <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}__body grey`}>学习分享邀请经验，一起赚钱</div>
+            <div className={`${PREFIX}__h1`}>加入播络合伙人交流群，分享经验</div>
            <Button className={`${PREFIX}__service`} onClick={handleOpenService}>
              点击加入
            </Button>
          </div>
-          <div className={`${PREFIX}__tip`}>注：收益不设时限，可重复享有，播络保留活动最终解释权</div>
        </div>
      </div>
      <Canvas id="posterCanvas" canvas-id="posterCanvas" type="2d" style="width: 750px; height: 1334px;" />