feat:hhhh
This commit is contained in:
chashaobao
@ -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();
|
||||
|
||||
@ -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;" />
|
||||
|
||||
@ -77,6 +77,7 @@ export enum PageUrl {
|
||||
WithdrawRecord = 'pages/withdraw-record/index',
|
||||
GroupDelegatePublish = 'pages/group-delegate-publish/index',
|
||||
GiveVip = 'pages/give-vip/index',
|
||||
GroupOwnerCertificate = 'pages/group-owner-certificate/index',
|
||||
}
|
||||
|
||||
export enum PluginUrl {
|
||||
|
||||
@ -99,6 +99,7 @@ export const APP_CONFIG: AppConfigType = {
|
||||
PageUrl.WithdrawRecord,
|
||||
PageUrl.GroupDelegatePublish,
|
||||
PageUrl.GiveVip,
|
||||
PageUrl.GroupOwnerCertificate,
|
||||
// PageUrl.DevDebug,
|
||||
],
|
||||
window: {
|
||||
|
||||
5
src/pages/group-owner-certification/index.config.ts
Normal file
5
src/pages/group-owner-certification/index.config.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '群主认证',
|
||||
enableShareAppMessage: true,
|
||||
usingComponents: {},
|
||||
});
|
||||
1
src/pages/group-owner-certification/index.less
Normal file
1
src/pages/group-owner-certification/index.less
Normal file
@ -0,0 +1 @@
|
||||
.group-owner-certification {}
|
||||
26
src/pages/group-owner-certification/index.tsx
Normal file
26
src/pages/group-owner-certification/index.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { Tabs } from '@taroify/core';
|
||||
import './index.less';
|
||||
|
||||
const PREFIX = 'group-owner-certification';
|
||||
|
||||
export default function GroupOwnerCertification() {
|
||||
return;
|
||||
<div className={PREFIX}>
|
||||
<Tabs className={`${PREFIX}__tabs`}>
|
||||
<Tabs.TabPane value={0} title="认证方法">
|
||||
<div className={`${PREFIX}__main`}>
|
||||
<div className={`${PREFIX}__block`}>
|
||||
<div className={`${PREFIX}__title`}>第一步：拉运营入群</div>
|
||||
<div className={`${PREFIX}__card`}>
|
||||
<div className={`${PREFIX}__body`}>
|
||||
<div>拉播络城市运营进入你的带货主播群，</div>
|
||||
<div>请确认你是群主且是带货主播群，不然不要拉</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane value={1} title="已认证的群"></Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>;
|
||||
}
|
||||
Reference in New Issue
Block a user