Skip to content

Commit

Permalink
add picture show and pay
Browse files Browse the repository at this point in the history
  • Loading branch information
zrll12 committed Nov 16, 2023
1 parent 3610106 commit ceceee6
Show file tree
Hide file tree
Showing 13 changed files with 213 additions and 24 deletions.
11 changes: 3 additions & 8 deletions app/authenticate/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import {Card, CardBody, CardFooter, Spinner} from "@nextui-org/react";
import {Card, CardBody, CardFooter} from "@nextui-org/react";
import {Button} from "@nextui-org/button";
import React, {ReactNode, useState} from "react";
import {Input} from "@nextui-org/input";
Expand Down Expand Up @@ -118,7 +118,7 @@ export default function Page() {
</div>
</CardBody>
<CardFooter>
<Button style={{position: "relative", left: 7}} color={buttonColor} disabled={buttonDisable}
<Button style={{position: "relative", left: 7}} disabled={buttonDisable} color={buttonColor} isLoading={isLoading}
onClick={
() => {
if (state == "email") {
Expand All @@ -127,10 +127,8 @@ export default function Page() {
return;
}
setLoading(true);
setButtonDisable(true);
UserAPI.checkEmail(email).then(r => {
setState(r ? "login" : "register")
setButtonDisable(false);
setLoading(false);
if (!r) {
Message.message("验证码已发送")
Expand All @@ -139,7 +137,6 @@ export default function Page() {
}
else if (state == "register") {
setLoading(true);
setButtonDisable(true);
if (password != confirmPassword) {
Message.error("密码输入不一致")
}
Expand All @@ -155,11 +152,9 @@ export default function Page() {
Message.error(message);
}
setLoading(false);
setButtonDisable(false);
})
} else {//login
setLoading(true);
setButtonDisable(true);

UserAPI.login(email, password).then((r) => {
let [state, text] = r;
Expand All @@ -178,7 +173,7 @@ export default function Page() {
}
}>
{isLoading ?
<div className="justify-center flex space-x-3"><Spinner color="default" size="sm"/><p>加载中...</p></div> : state == "email" ? "下一步" : state == "login" ? "登录" : "注册"}
"加载中..." : state == "email" ? "下一步" : state == "login" ? "登录" : "注册"}
</Button>
</CardFooter>
</Card>
Expand Down
13 changes: 13 additions & 0 deletions app/buy/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default function BuyLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<div className="inline-block max-w-lg text-center justify-center">
{children}
</div>
</section>
);
}
97 changes: 97 additions & 0 deletions app/buy/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
'use client'

import {title} from "@/components/primitives";
import {IsLoggedIn} from "@/interface/hooks";
import {useRouter} from "next/navigation";
import {useState} from "react";
import {Card, CardBody, CardFooter, CardHeader, Divider, Select, SelectItem} from "@nextui-org/react";
import {Button, ButtonGroup} from "@nextui-org/button";

export default function BuyPage() {
let router = useRouter();
let [group, setGroup] = useState("");
let [state, setState] = useState(0);
let [time, setTime] = useState("year");

let pages = [
<>
<Card>
<CardHeader>确认支付信息</CardHeader>
<CardBody>
<div className={"space-y-10"}>
<p>请确认下方信息是否正确,如信息错误导致损失,我们不承担任何责任。</p>
<div className={"flex space-x-3"}>
<Select
label="请选择套餐"
className="max-w-xs"
labelPlacement={"outside"}
>
<SelectItem key="started" value="入门">
入门
</SelectItem>
<SelectItem key="advanced" value="进阶">
进阶
</SelectItem>
<SelectItem key="professional" value="专业">
专业
</SelectItem>
</Select>
<ButtonGroup>
<Button color={time == "month" ? "primary" : "default"} onClick={() => {
setTime("month")
}}>月度</Button>
<Button color={time == "quarter" ? "primary" : "default"} onClick={() => {
setTime("quarter")
}}>季度</Button>
<Button color={time == "half" ? "primary" : "default"} onClick={() => {
setTime("half")
}}>半年</Button>
<Button color={time == "year" ? "primary" : "default"} onClick={() => {
setTime("year")
}}>年度</Button>
</ButtonGroup>
</div>
<div>
<p>支付方式</p>
<ButtonGroup>
<Button>微信支付</Button>
<Button>支付宝</Button>
</ButtonGroup>
</div>
</div>
</CardBody>
<Divider/>
<CardFooter>
<Button color={"primary"} onClick={() => {
setState(1)
}}>下一步</Button>
</CardFooter>
</Card>
</>,
<>
<Card>
<CardHeader>支付</CardHeader>
<CardBody>
<p>请扫描下方的二维码进行支付,支付成功后请点击下方的刷新按钮或直接前往用户中心。</p>
<p>将立即进行支付,恕不退款。</p>
</CardBody>
<Divider/>
<CardFooter className={"space-x-3"}>
<Button color={"secondary"}>刷新</Button>
<Button variant={"light"} color={"danger"} onClick={() => {
setState(0);
}}>上一步</Button>
</CardFooter>
</Card></>
]

if (!IsLoggedIn) {
router.push("/authenticate");
}
return (
<div className="max-w-7xl space-y-10">
<h1 className={title()}>购买</h1>
{pages[state]}
</div>
);
}
22 changes: 17 additions & 5 deletions app/dashboard/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,19 @@ import {PictureAPI} from "@/interface/pictureAPI";
import {useState} from "react";
import {UserAPI} from "@/interface/userAPI";
import {getGroupPrice} from "@/config/prices";
import {PictureList} from "@/interface/model/picture";
import {SERVER_URL} from "@/interface/api";
import cookie from "react-cookies";

export default function Page() {
let [used, setUsed] = useState(0);
let [total, setTotal] = useState(1);

let [timeLeft, setTimeLeft] = useState(100);
let [timeDescription, setTimeDescription] = useState("无限时间");
let [pictures, setPictures] = useState<PictureList>();


if (used == 0 && total == 1) {
function updateInfo() {
UserAPI.getExtendedInformation().then((r) => {
if (r == undefined) {
router.push("/authenticate");
Expand All @@ -43,7 +46,13 @@ export default function Page() {
}
}
})
PictureAPI.getPicturesList().then();
PictureAPI.getPicturesList().then((r) => {
setPictures(r);
});
}

if (used == 0 && total == 1) {
updateInfo();
}


Expand Down Expand Up @@ -78,6 +87,7 @@ export default function Page() {
let files = e.target.files!;
let file = files[0];
PictureAPI.uploadFile(file).then(() => {
updateInfo();
});
}}></Uploader>

Expand Down Expand Up @@ -105,8 +115,10 @@ export default function Page() {
</a>
</CardFooter>
</Card>

<Picture url="https://t7.baidu.com/it/u=2961459243,2146986594&fm=193&f=GIF" name="雪景.png"/>
{pictures?.records == null ? <a>请上传</a> : pictures!.records.map(picture => <Picture
url={SERVER_URL + "/picture/preview?shareMode=2&id=" + picture.id.toString() + "&token=" + cookie.load("token")}
name={picture.fileName}/>)}
{/*<Picture url="https://t7.baidu.com/it/u=2961459243,2146986594&fm=193&f=GIF" name="雪景.png"/>*/}
</div>
)
}
2 changes: 1 addition & 1 deletion components/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import NextLink from "next/link";
import clsx from "clsx";

import {ThemeSwitch} from "@/components/theme-switch";
import {GithubIcon, Logo, LogoText,} from "@/components/icons";
import {GithubIcon, LogoText,} from "@/components/icons";
import {useRouter} from "next/navigation";
import {useState} from "react";
import cookie from "react-cookies";
Expand Down
18 changes: 13 additions & 5 deletions components/picture.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import {DropdownMenu, DropdownTrigger} from "@nextui-org/dropdown";
import {Message} from "@/components/message";
import {FiClipboard, FiShare} from "react-icons/fi";
import {Input} from "@nextui-org/input";
import cookie from "react-cookies";

export default function Picture(props: PictureProps) {
let [isChecked, setIsChecked] = useState(false);
let [isModelChecked, setIsModelChecked] = useState(false);
const {isOpen, onOpen, onOpenChange} = useDisclosure();
const descriptionOpen = useDisclosure();
let [name, setName] = useState(props.name);
let [shareMode, setShareMode] = useState(props.pubicMode);
let [shareMode, setShareMode] = useState(props.pubicMode == null ? "none" : props.pubicMode!);
let timeout: NodeJS.Timeout | null = null;
let modelTimeout: NodeJS.Timeout | null = null;
let [link, setShareLink] = useState("");
Expand All @@ -24,6 +25,8 @@ export default function Picture(props: PictureProps) {
Message.success("已生成链接")
}

console.log(cookie.load("token"));

// @ts-ignore
return (
<>
Expand All @@ -35,17 +38,19 @@ export default function Picture(props: PictureProps) {
onPress={() => {
descriptionOpen.onOpen();
}}
style={{width: 450}}
>
<Image
alt={props.name}
className="object-cover"
width={450}
height={200}
src={props.url}
isZoomed
/>
<CardFooter
className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-auto shadow-small ml-1 z-10 space-x-2">
<p className="text-tiny font-mono text-white/80">{props.name}</p>&nbsp;
<p className="text-tiny font-mono ">{props.name}</p>&nbsp;
<Button isIconOnly className="text-white bg-black/20 justify-center" variant="light" size="sm"
onClick={() => {
copy(props.url);
Expand Down Expand Up @@ -81,6 +86,7 @@ export default function Picture(props: PictureProps) {
<Image
alt={props.name}
className="object-cover"
width={450}
height={200}
src={props.url}
/>
Expand All @@ -95,7 +101,7 @@ export default function Picture(props: PictureProps) {
variant="bordered"
className="capitalize"
>
{shareMode == "watermark" ? "水印" : shareMode == "compressed" ? "压缩" : "原图"}
{shareMode == "watermark" ? "水印" : shareMode == "compressed" ? "压缩" : shareMode == "none" ? "不公开" : "原图"}
</Button>
</DropdownTrigger>
<DropdownMenu
Expand All @@ -107,10 +113,12 @@ export default function Picture(props: PictureProps) {
disabledKeys={["original"]}
onAction={(key) => {
setShareMode(key.toString());
let description = key == "watermark" ? "水印" : key == "compressed" ? "压缩" : "原图";
console.log(key);
let description = key == "watermark" ? "水印" : key == "compressed" ? "压缩" : key == "none" ? "不公开" : "原图";
Message.success("已经设置公开等级为:" + description);
}}
>
<DropdownItem key="none">不公开</DropdownItem>
<DropdownItem key="watermark">公开水印版本</DropdownItem>
<DropdownItem key="compressed">公开压缩版本</DropdownItem>
<DropdownItem key="original"
Expand All @@ -119,7 +127,7 @@ export default function Picture(props: PictureProps) {
</Dropdown>
<div>
{link == "" ?
<Button onClick={generateShareLink}>生成分享链接</Button> :
<Button disabled={shareMode == "none"} color={shareMode == "none" ? "default" : "primary"} onClick={generateShareLink}>生成分享链接</Button> :
<Input value={link} style={{width: 260}} variant={"underlined"} endContent={
<Button isIconOnly style={{position: "relative", left: 7}} size="sm"
onClick={() => {
Expand Down
20 changes: 18 additions & 2 deletions components/price.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,23 @@ import {Card, CardBody, CardFooter, CardHeader, Divider} from "@nextui-org/react
import {Button} from "@nextui-org/button";
import {Spacer} from "@nextui-org/spacer";
import {ReactNode} from "react";
import {IsLoggedIn} from "@/interface/hooks";
import {useRouter} from "next/navigation";

export const Price = (price: PriceProps) => {
const router = useRouter();
function onStart() {
if (IsLoggedIn) {
if (price.price.price == 0) {
router.push("/dashboard");
} else {
router.push("/buy");
}
} else {
router.push("/authenticate");
}
}


return (
<>
Expand All @@ -22,7 +37,7 @@ export const Price = (price: PriceProps) => {
</CardBody>
<Divider/>
<CardFooter>
<Button variant="ghost" color="primary">开始使用</Button>
<Button variant="ghost" color="primary" onClick={onStart}>开始使用</Button>
<Spacer style={{width: 20}}/>
<p>{price.price.price} 元/月</p>
<Spacer style={{width: 20}}/>
Expand All @@ -38,7 +53,8 @@ export type PriceInfo = {
name: ReactNode,
singleFile: string,
allSpace: string,
price: number
price: number,
plainName: string
}

type PriceProps = {
Expand Down
4 changes: 4 additions & 0 deletions config/prices.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import {PiFireDuotone} from "react-icons/pi";

export const priceFree: PriceInfo = {
name: "免费",
plainName: "免费",
singleFile: "50 MB",
allSpace: "2 GB",
price: 0,
}

export const priceStarted: PriceInfo = {
name: "入门",
plainName: "入门",
singleFile: "50 MB",
allSpace: "10 GB",
price: 30, // 0.9 320
Expand All @@ -20,13 +22,15 @@ export const priceAdvanced: PriceInfo = {
<span>进阶</span>
<PiFireDuotone style={{color: "red"}}/>
</div>,
plainName: "进阶",
singleFile: "100 MB",
allSpace: "50 GB",
price: 50, // 0.8 480
}

export const priceProfessional: PriceInfo = {
name: "专业",
plainName: "专业",
singleFile: "不限",
allSpace: "200 GB",
price: 150, // 0.7 1250
Expand Down
Loading

0 comments on commit ceceee6

Please sign in to comment.