feat: 邀请运营
This commit is contained in:
chashaobao
3
src/pages/invite-operations/index.config.ts
Normal file
3
src/pages/invite-operations/index.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '邀请运营',
|
||||
});
|
||||
156
src/pages/invite-operations/index.less
Normal file
156
src/pages/invite-operations/index.less
Normal file
@ -0,0 +1,156 @@
|
||||
@import '@/styles/variables.less';
|
||||
@import '@/styles/common.less';
|
||||
|
||||
.invite-operations {
|
||||
&__main {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__block {
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__card {
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
padding: 32px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__edging {
|
||||
position: absolute;
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 28px;
|
||||
color: #946724;
|
||||
padding: 18px 24px;
|
||||
background: #FFF4F0;
|
||||
border-radius:0 0 24px 24px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__lined-wrapper {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
&__lined-title {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: #333333;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -68px;
|
||||
width: 56px;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -68px;
|
||||
width: 56px;
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__h1 {
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
color: #1d2129;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: @blHighlightColor;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
color: @blColor;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 24px;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
color: #1d2129;
|
||||
|
||||
&:before {
|
||||
left: -138px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -138px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&__copy {
|
||||
.button(@height: 72px; @width: 384px; @fontSize: 28px; @fontWeight: 400; @borderRadius: 44px; @highlight: 0);
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
&__city-select {
|
||||
background: #F7F7F7;
|
||||
border-radius: 16px;
|
||||
padding: 34px 32px;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
margin-top: 24px;
|
||||
line-height: 32px;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&__qrcode {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
background: #6F7686;
|
||||
display: block;
|
||||
margin: auto auto 24px;
|
||||
}
|
||||
|
||||
&__action-block {
|
||||
background: #F7F7F7;
|
||||
border-radius: 16px;
|
||||
padding: 32px 0;
|
||||
.flex-column();
|
||||
text-align: center;
|
||||
color: @blHighlightColor;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
117
src/pages/invite-operations/index.tsx
Normal file
117
src/pages/invite-operations/index.tsx
Normal file
@ -0,0 +1,117 @@
|
||||
import { Button, Image } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import { Arrow } from '@taroify/icons';
|
||||
import { Fragment, useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { EventName, OpenSource, PageUrl } from '@/constants/app';
|
||||
import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
|
||||
import useLocation from '@/hooks/use-location';
|
||||
import useUserInfo from '@/hooks/use-user-info';
|
||||
import { StaffInfo } from '@/types/partner';
|
||||
import { copy } from '@/utils/common';
|
||||
import { getStaffInfo } from '@/utils/partner';
|
||||
import { navigateTo } from '@/utils/route';
|
||||
import './index.less';
|
||||
|
||||
const PREFIX = 'invite-operations';
|
||||
|
||||
export default function InviteOperations() {
|
||||
const location = useLocation();
|
||||
const userInfo = useUserInfo();
|
||||
const [cityCode, setCityCode] = useState<string>(location.cityCode);
|
||||
const [staffInfo, setStaffInfo] = useState<StaffInfo | null>(null);
|
||||
|
||||
const handleClickCityMenu = useCallback(() => {
|
||||
navigateTo(PageUrl.CitySearch, { city: cityCode || location.cityCode, source: OpenSource.InviteOperations });
|
||||
}, [cityCode, location.cityCode]);
|
||||
|
||||
const handleCityChange = useCallback(data => {
|
||||
console.log('handleCityChange', data);
|
||||
const { openSource, cityCode: cCode } = data;
|
||||
if (openSource !== OpenSource.InviteOperations) {
|
||||
return;
|
||||
}
|
||||
setCityCode(cCode);
|
||||
}, []);
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
copy(`我的ID是：${userInfo.userId}，邀你进主播群`);
|
||||
}, [userInfo.userId]);
|
||||
|
||||
useEffect(() => {
|
||||
Taro.eventCenter.on(EventName.SELECT_CITY, handleCityChange);
|
||||
return () => {
|
||||
Taro.eventCenter.off(EventName.SELECT_CITY, handleCityChange);
|
||||
};
|
||||
}, [handleCityChange]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cityCode) return;
|
||||
|
||||
getStaffInfo(cityCode)
|
||||
.then(data => {
|
||||
setStaffInfo(data);
|
||||
})
|
||||
.catch(() => {
|
||||
setStaffInfo(null);
|
||||
});
|
||||
}, [cityCode]);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__main`}>
|
||||
<div className={`${PREFIX}__block`}>
|
||||
<div className={`${PREFIX}__lined-wrapper`}>
|
||||
<div className={`${PREFIX}__lined-title ${PREFIX}__title`}>活动说明</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__card`}>
|
||||
<div className={`${PREFIX}__h1 center`}>邀请播络运营进带货主播群</div>
|
||||
<div className={`${PREFIX}__h1 center`} style={{ paddingBottom: `48rpx` }}>
|
||||
每邀请进一个群送一个日会员
|
||||
</div>
|
||||
<div className={`${PREFIX}__edging`}>注：只能邀请带货主播群，请勿邀请其他群</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__block`}>
|
||||
<div className={`${PREFIX}__lined-wrapper`}>
|
||||
<div className={`${PREFIX}__lined-title ${PREFIX}__title`}>邀请方法</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__card`}>
|
||||
<div className={`${PREFIX}__body`}>
|
||||
<div className={`${PREFIX}__h1`}>
|
||||
加运营为好友并将以下信息 <div className="highlight">粘贴发送给运营</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__action-block`}>
|
||||
<div>我的ID是：{userInfo.userId}，邀你进主播群</div>
|
||||
<Button className={`${PREFIX}__copy`} onClick={handleCopy}>
|
||||
复制
|
||||
</Button>
|
||||
</div>
|
||||
<div className={`${PREFIX}__lined-wrapper`}>
|
||||
<div className={`${PREFIX}__lined-title`}>选择城市，添加运营</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__city-select`} onClick={handleClickCityMenu}>
|
||||
{cityCode ? CITY_CODE_TO_NAME_MAP.get(cityCode) : '请选择城市'}
|
||||
<Arrow size={16} />
|
||||
</div>
|
||||
{staffInfo && (
|
||||
<Fragment>
|
||||
<div className={`${PREFIX}__lined-wrapper`}>
|
||||
<div className={`${PREFIX}__lined-title`}>长按并识别二维码添加运营</div>
|
||||
</div>
|
||||
<Image
|
||||
className={`${PREFIX}__qrcode`}
|
||||
src={staffInfo.staffQrCode}
|
||||
showMenuByLongpress
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user