141 lines
3.9 KiB
TypeScript
141 lines
3.9 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { getConfig, getService } from '@/api/user'
|
||
import { TEMP_TOKEN_STORAGE_KEY } from '@/utils/request'
|
||
|
||
type TwinsProps = {
|
||
installUrl: string
|
||
}
|
||
|
||
function Twins({ installUrl }: TwinsProps) {
|
||
const [serviceUrl, setServiceUrl] = useState('')
|
||
|
||
useEffect(() => {
|
||
let isMounted = true
|
||
|
||
async function initTwinsConfig() {
|
||
try {
|
||
const { data: config } = await getConfig()
|
||
|
||
if (config.token) {
|
||
window.sessionStorage.setItem(TEMP_TOKEN_STORAGE_KEY, config.token)
|
||
}
|
||
|
||
const { data: service } = await getService()
|
||
const nextServiceUrl = service['kf.address']
|
||
|
||
if (isMounted && typeof nextServiceUrl === 'string') {
|
||
setServiceUrl(nextServiceUrl)
|
||
}
|
||
} catch {
|
||
if (isMounted) {
|
||
setServiceUrl('')
|
||
}
|
||
}
|
||
}
|
||
|
||
initTwinsConfig()
|
||
|
||
return () => {
|
||
isMounted = false
|
||
}
|
||
}, [])
|
||
|
||
return (
|
||
<div id="Twins">
|
||
<Header />
|
||
<Card serviceUrl={serviceUrl} installUrl={installUrl} />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
|
||
function Header() {
|
||
return (
|
||
<div className="header">
|
||
<div className="row-1">
|
||
iPhone<span className="green">双开微信</span>
|
||
</div>
|
||
<div className="row-2">
|
||
专享 TestFlight 内测试版 | 无<br />需越狱 | 无封号风险
|
||
</div>
|
||
<div className="row-3">
|
||
<div className="item">
|
||
<img src="./images/app-twins/icon-safe.png" alt="安全问题"></img>
|
||
<span>安全问题</span>
|
||
</div>
|
||
<div className="item">
|
||
<img src="./images/app-twins/icon-minus.png" alt="无封号风险"></img>
|
||
<span>无封号风险</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
type CardProps = {
|
||
serviceUrl: string
|
||
installUrl: string
|
||
}
|
||
|
||
function Card({ serviceUrl, installUrl }: CardProps) {
|
||
const steps = [
|
||
{
|
||
label: '步骤一',
|
||
title: "下载 TestFlight 应用",
|
||
desc: [
|
||
"· 若已安装，请跳过此步；",
|
||
"· 未安装请点击下方按钮前往App Store下载；",
|
||
],
|
||
linkName: "前往下载",
|
||
linkUrl: "https://apps.apple.com/us/app/testflight/id899247664?l=zh-Hans-CN",
|
||
sideBg: "./images/app-twins/step1-side.png"
|
||
},
|
||
{
|
||
label: '步骤二',
|
||
title: "安装双开微信",
|
||
desc: [
|
||
"· 点击下方按钮，自动跳转安装您的专属微信",
|
||
"· 下载完成后，桌面会出现第二个微信图标；",
|
||
],
|
||
linkName: "前往安装",
|
||
linkUrl: installUrl,
|
||
sideBg: "./images/app-twins/step2-side.png"
|
||
}
|
||
]
|
||
return (
|
||
<div className="card">
|
||
<div className="card-title">
|
||
<img src="./images/app-twins/line-left.png"></img>
|
||
<div>
|
||
仅需<span className="green">两步</span> · 30秒完成安装
|
||
</div>
|
||
<img src="./images/app-twins/line-right.png"></img>
|
||
</div>
|
||
<div className="card-steps">
|
||
{
|
||
steps.map((step, index) => (
|
||
<div className="step-item" key={index} style={{ backgroundImage: `url(${step.sideBg})` }}>
|
||
<div className="step-item-label">{step.label}</div>
|
||
<div className="step-item-title">{step.title}</div>
|
||
<div className="step-item-desc">
|
||
{
|
||
step.desc.map((descItem, descIndex) => (
|
||
<div key={descIndex}>{descItem}</div>
|
||
))
|
||
}
|
||
</div>
|
||
<a className="step-item-link" target="_blank" href={step.linkUrl}>{step.linkName}</a>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
<a className="contact-us" href={serviceUrl || undefined} target="_blank" rel="noreferrer">
|
||
<img src="./images/app-twins/icon-concat.png" alt="客服1对1指导安装"></img>
|
||
<span>客服1对1<br/>指导安装</span>
|
||
</a>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Twins
|