From f8598d34f7b110b3df28f5df41e6958ee514dffe Mon Sep 17 00:00:00 2001 From: saplf Date: Fri, 6 Sep 2019 14:08:11 +0800 Subject: [PATCH] =?UTF-8?q?=E9=82=80=E8=AF=B7=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/locales/en-US.ts | 8 ++ src/locales/zh-CN.ts | 8 ++ src/pages/draw/model.ts | 5 +- src/pages/home/market/index.tsx | 1 + src/pages/invite/index.tsx | 74 ++++++++++++++++ src/pages/invite/model.ts | 28 ++++++ src/pages/invite/service.ts | 18 ++++ src/pages/invite/style.less | 147 ++++++++++++++++++++++++++++++++ src/types/common.ts | 1 + 9 files changed, 289 insertions(+), 1 deletion(-) create mode 100644 src/pages/invite/index.tsx create mode 100644 src/pages/invite/model.ts create mode 100644 src/pages/invite/service.ts create mode 100644 src/pages/invite/style.less diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index 5e325ca..0bb8ecb 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -116,6 +116,14 @@ export default { 'draw.pwdPrompt': '请输入资金密码', 'draw.success': '您的提币请求正在处理中！经过区块链网络确认后即可到账，请注意查收。', + 'invite.title': '邀请新人', + 'invite.title2': '推荐新人领奖励', + 'invite.title3': '我的专属邀请码和链接', + 'invite.btn': '转发邀请到其他应用', + 'invite.step1': '分享好友', + 'invite.step2': '注册', + 'invite.step3': '领取奖金', + 'profile.account': 'Account Settings', 'profile.system': 'System Settings', 'profile.identity': '实名认证', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index ec7d080..dc06f17 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -116,6 +116,14 @@ export default { 'draw.pwdPrompt': '请输入资金密码', 'draw.success': '您的提币请求正在处理中！经过区块链网络确认后即可到账，请注意查收。', + 'invite.title': '邀请新人', + 'invite.title2': '推荐新人领奖励', + 'invite.title3': '我的专属邀请码和链接', + 'invite.btn': '转发邀请到其他应用', + 'invite.step1': '分享好友', + 'invite.step2': '注册', + 'invite.step3': '领取奖金', + 'profile.account': '账户管理', 'profile.system': '系统设置', 'profile.identity': '实名认证', diff --git a/src/pages/draw/model.ts b/src/pages/draw/model.ts index 52beaa9..06ed216 100644 --- a/src/pages/draw/model.ts +++ b/src/pages/draw/model.ts @@ -63,6 +63,9 @@ const model: Model = { coin, basic, balance: retrieveBalance(basic, coin), + address: '', + amount: '', + password: '', }); } catch (e) { yield put({ @@ -140,7 +143,7 @@ const model: Model = { type: 'onUpdateState', confirmVisible: false, }); - Modal.info({ + Modal.success({ title: formatMessage({ id: 'common.prompt' }), content: formatMessage({ id: 'draw.success' }), okText: formatMessage({ id: 'common.ok' }), diff --git a/src/pages/home/market/index.tsx b/src/pages/home/market/index.tsx index cd15b22..18be6c1 100644 --- a/src/pages/home/market/index.tsx +++ b/src/pages/home/market/index.tsx @@ -65,6 +65,7 @@ const CommunityPage: React.FC = ({
dispatch(routerRedux.push('/invite'))} > {formatMessage({ id: 'home.community.invite' })}
diff --git a/src/pages/invite/index.tsx b/src/pages/invite/index.tsx new file mode 100644 index 0000000..04e5da7 --- /dev/null +++ b/src/pages/invite/index.tsx @@ -0,0 +1,74 @@ +/** + * Title: 邀请新人 + * Routes: + * - ./src/pages/routes + */ +import React, { useEffect, useState } from 'react'; +import { connect, DispatchProp } from 'dva'; +import { Icon, Button, message } from 'antd'; +import { formatMessage } from 'umi-plugin-locale'; +import { QRCanvas } from 'qrcanvas-react'; +import Clipboard from 'react-clipboard.js'; +import { InviteModelState } from './model'; +import Header from '@/components/Header'; + +import styles from './style.less'; +import { UserModelState } from '@/models/user'; +import { generateInviteHref } from './service'; + +const InvitePage: React.FC = ({ + dispatch, + user, +}) => { + if (!user) return null; + + useEffect(() => { + dispatch({ type: 'invite/load' }); + }, []); + const href = generateInviteHref(user.inviteCode); + const onAddressCopied = () => { + message.success(formatMessage({ id: 'common.copied' })); + }; + + return ( +
+
+ +
+ {formatMessage({ id: 'invite.title2' })} +
+
+
+ {formatMessage({ id: 'invite.title3' })} + {user.inviteCode} + +
+ {href} + + + +
+ +
+
+
+
+ ); +}; + +export default connect( + ({ invite, user }: any) => ({ ...invite, ...user }), +)(InvitePage); diff --git a/src/pages/invite/model.ts b/src/pages/invite/model.ts new file mode 100644 index 0000000..b5257cf --- /dev/null +++ b/src/pages/invite/model.ts @@ -0,0 +1,28 @@ +import { Model, routerRedux } from "dva"; +import _ from 'lodash'; + +export interface InviteModelState { +} + +const initState: InviteModelState = { +}; + +const model: Model = { + namespace: 'invite', + + state: initState, + + effects: { + }, + + reducers: { + onUpdateState(state, payload) { + return { + ...state, + ...payload, + }; + }, + }, +}; + +export default model; diff --git a/src/pages/invite/service.ts b/src/pages/invite/service.ts new file mode 100644 index 0000000..87a4b50 --- /dev/null +++ b/src/pages/invite/service.ts @@ -0,0 +1,18 @@ + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function generateInviteHref(invite: string): string { + const postfix = invite ? `/check?inviteCode=${invite}` : '/check'; + if (isLocalhost) { + return `${window.location.origin}${postfix}` + } + return `https://fivapp.github.io/#${postfix}`; +} diff --git a/src/pages/invite/style.less b/src/pages/invite/style.less new file mode 100644 index 0000000..167592a --- /dev/null +++ b/src/pages/invite/style.less @@ -0,0 +1,147 @@ + +@import '../../global.less'; + +.container { + height: 100%; + background: linear-gradient(to bottom, @orange-one, @orange-two); + position: relative; + display: flex; + flex-direction: column; + + :global { + .header { + background-color: rgba(255,255,255,0); + color: white; + } + + .ant-btn-primary { + border-width: 0; + background-color: @orange-one; + } + } +} + +.body { + flex-grow: 1; + overflow-y: auto; + overflow-x: hidden; +} + +.title2 { + display: block; + text-align: center; + color: white; + font-weight: bold; +} + +.card { + @height: 450px; + @topHeight: @height * 0.4; + @ripSize: 32px; + @halfRip: @ripSize / 2; + @bottomHeight: @height - @topHeight - @ripSize; + @shadowAttr: 1px 1px 8px rgba(0, 0, 0, .2); + + position: relative; + margin: 20px 30px; + padding-bottom: 20px; + height: @height; + display: flex; + flex-direction: column; + align-items: stretch; + padding: 20px 32px ; + + &::before, &::after { + content: ''; + position: absolute; + left: 0; + background-color: #fff; + width: 100%; + z-index: 1; + box-shadow: @shadowAttr; + } + + &::before { + top: 0; + height: @topHeight; + border-radius: 4px 4px 0 0; + } + + &::after { + bottom: 0; + height: @bottomHeight; + border-radius: 0 0 4px 4px; + } + + :global { + .rip { + position: absolute; + top: @topHeight; + left: @halfRip; + right: @halfRip; + height: @ripSize; + background-color: #fff; + z-index: 2; + + &::before, &::after { + content: ''; + position: absolute; + width: @ripSize / sqrt(2); + height: @ripSize / sqrt(2); + top: 50%; + border: @halfRip solid transparent; + border-radius: 100%; + border-top-color: #fff; + border-right-color: #fff; + box-sizing: content-box; + box-shadow: inset -2px 2px 2px rgba(0, 0, 0, 0.1); + } + + &::before { + left: -(sqrt(2) / 4 + 1) * @ripSize; + transform: translateY(-50%) rotate(45deg); + } + + &::after { + right: -(sqrt(2) / 4 + 1) * @ripSize; + transform: translateY(-50%) rotate(225deg); + } + } + + .content { + z-index: 3; + display: flex; + flex-direction: column; + align-items: center; + + .title3 { + color: @orange-two; + font-weight: lighter; + } + + .invite-code { + font-weight: bold; + font-size: 1.2rem; + margin: 20px 0; + } + + .href-container { + margin: 20px 0; + word-break: break-all; + display: flex; + align-items: center; + padding: 0 20px; + } + + .anticon { + font-size: 1.8rem; + margin-left: 8px; + color: @orange-one; + } + + .ant-btn { + align-self: stretch; + } + } + } +} diff --git a/src/types/common.ts b/src/types/common.ts index ae90670..a018c6f 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -11,6 +11,7 @@ export interface User { phone: string; email?: string; token: string; + inviteCode: string; } export interface AreaCode {