|
@@ -1,4 +1,15 @@
|
|
|
-import { Button, Form, Image, Input, Modal, Select, Skeleton, Breadcrumb, message, notification } from "antd";
|
|
|
+import {
|
|
|
+ Button,
|
|
|
+ Form,
|
|
|
+ Image,
|
|
|
+ Input,
|
|
|
+ Modal,
|
|
|
+ Select,
|
|
|
+ Skeleton,
|
|
|
+ Breadcrumb,
|
|
|
+ message,
|
|
|
+ notification,
|
|
|
+} from "antd";
|
|
|
import type { BreadcrumbProps } from "antd";
|
|
|
import { useMemo, useState } from "react";
|
|
|
import { useParams, useRequest, history } from "umi";
|
|
@@ -14,65 +25,127 @@ export default function detail() {
|
|
|
|
|
|
const { id, type } = useParams();
|
|
|
|
|
|
- const { data, loading } = useRequest<{result: any}>(type === 'application' ? GetAppDetail : GetTemplateDetail, {
|
|
|
- defaultParams: [{
|
|
|
- id: id
|
|
|
- }]
|
|
|
- });
|
|
|
+ const { data, loading } = useRequest<{ result: any }>(
|
|
|
+ type === "application" ? GetAppDetail : GetTemplateDetail,
|
|
|
+ {
|
|
|
+ defaultParams: [
|
|
|
+ {
|
|
|
+ id: id,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
const handleToApp = () => {
|
|
|
- if(data?.result?.trialUrl) {
|
|
|
+ if (data?.result?.trialUrl) {
|
|
|
window.open(data?.result?.trialUrl, "_blank");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleBack = () => {
|
|
|
history.back();
|
|
|
- }
|
|
|
+ };
|
|
|
|
|
|
// 提交申请
|
|
|
const handleSubmit = () => {
|
|
|
form.validateFields().then(async (values) => {
|
|
|
await SubmitApply({
|
|
|
...values,
|
|
|
- type: type === 'application' ? 0 : 1,
|
|
|
+ type: type === "application" ? 0 : 1,
|
|
|
templateId: id,
|
|
|
});
|
|
|
notification.success({
|
|
|
- message: '您的申请已提交,后续会有专员与您联系!~',
|
|
|
+ message: "您的申请已提交,后续会有专员与您联系!~",
|
|
|
});
|
|
|
setShowAdvisory(false);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- const breadcrumbItems: BreadcrumbProps['items'] = useMemo(() => {
|
|
|
+ const breadcrumbItems: BreadcrumbProps["items"] = useMemo(() => {
|
|
|
return [
|
|
|
- { key: 'all', title: <a onClick={handleBack}><LeftOutlined/><span className="m-l-4px">返回</span></a>},
|
|
|
- { key: 'current', title: data?.result.name}
|
|
|
- ]
|
|
|
+ {
|
|
|
+ key: "all",
|
|
|
+ title: (
|
|
|
+ <a onClick={handleBack}>
|
|
|
+ <LeftOutlined />
|
|
|
+ <span className="m-l-4px">返回</span>
|
|
|
+ </a>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ { key: "current", title: data?.result.name },
|
|
|
+ ];
|
|
|
}, [data]);
|
|
|
|
|
|
return (
|
|
|
<div className="detail relative mx-auto pt-24px h-full overflow-y-auto">
|
|
|
<div className="max-w-[1200px] mx-auto">
|
|
|
- <Breadcrumb className="mb-24px" items={breadcrumbItems}/>
|
|
|
+ <Breadcrumb className="mb-24px" items={breadcrumbItems} />
|
|
|
<Skeleton avatar active loading={loading}>
|
|
|
<div className="flex mb-32px">
|
|
|
<div className="w-128px h-128px rounded-20px bg-gray-200 overflow-hidden flex justify-center items-center">
|
|
|
- <Image className="w-full h-full" preview={false} src={data?.result?.icon ? `/api/File/Download?fileId=${data?.result?.icon}` : ''}/>
|
|
|
+ <Image
|
|
|
+ className="w-full h-full"
|
|
|
+ preview={false}
|
|
|
+ src={
|
|
|
+ data?.result?.icon
|
|
|
+ ? `/api/File/Download?fileId=${data?.result?.icon}`
|
|
|
+ : ""
|
|
|
+ }
|
|
|
+ />
|
|
|
</div>
|
|
|
<div className="flex-1 mx-24px">
|
|
|
<div className="text-32px font-[600]">{data?.result?.name}</div>
|
|
|
<div className="text-secondary text-14px">
|
|
|
- {data?.result?.desc || '暂无描述'}
|
|
|
+ {data?.result?.desc || "暂无描述"}
|
|
|
</div>
|
|
|
- <div className="inline-block bg-[#dcdde0] rounded-8px text-secondary px-8px py-4px mt-12px text-12px">
|
|
|
- <i className="iconfont icon-qiyexinxi mr-8px" />
|
|
|
- <span>{data?.result?.createByName || '易码工坊'}</span>
|
|
|
+ <div className="mt-12px flex items-center">
|
|
|
+ <div className="block bg-[#dcdde0] rounded-8px text-secondary px-8px py-4px text-12px">
|
|
|
+ <i className="iconfont icon-qiyexinxi mr-8px" />
|
|
|
+ <span>{data?.result?.createByName || "易码工坊"}</span>
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center px-[14px] leading-24px text-12px">
|
|
|
+ <div className="flex items-center space-x-1 text-text-tertiary">
|
|
|
+ <svg
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ fill="currentColor"
|
|
|
+ className="remixicon shrink-0 w-3 h-3"
|
|
|
+ >
|
|
|
+ <path d="M9 2V4H5L4.999 14H18.999L19 4H15V2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H9ZM18.999 16H4.999L5 20H19L18.999 16ZM17 17V19H15V17H17ZM13 2V7H16L12 11L8 7H11V2H13Z"></path>
|
|
|
+ </svg>
|
|
|
+ <div className="system-xs-regular">使用量 339</div>
|
|
|
+ </div>
|
|
|
+ <div className="mx-2 text-text-quaternary system-xs-regular">
|
|
|
+ ·
|
|
|
+ </div>
|
|
|
+ <div className="flex flex-wrap space-x-2 h-4 overflow-hidden">
|
|
|
+ {(data?.result.tags?.split(",") || []).map(
|
|
|
+ (tag: string) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className="flex space-x-1 system-xs-regular max-w-[120px] overflow-hidden"
|
|
|
+ title={`# ${tag}`}
|
|
|
+ >
|
|
|
+ <span className="text-text-quaternary">#</span>
|
|
|
+ <span className="truncate text-text-tertiary">
|
|
|
+ {tag}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="head-right flex flex-col justify-center items-center">
|
|
|
- <Button type="primary" className="w-full mb-24px" onClick={handleToApp}>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ className="w-full mb-24px"
|
|
|
+ onClick={handleToApp}
|
|
|
+ >
|
|
|
在线体验
|
|
|
</Button>
|
|
|
<Button className="w-full" onClick={() => setShowAdvisory(true)}>
|
|
@@ -87,13 +160,24 @@ export default function detail() {
|
|
|
</div>
|
|
|
|
|
|
<Skeleton active loading={loading}>
|
|
|
- <div className={"content m-y-32px overflow-hidden relative " + styles.rich}>
|
|
|
- <div dangerouslySetInnerHTML={{__html: data?.result?.detail || ''}}/>
|
|
|
+ <div
|
|
|
+ className={
|
|
|
+ "content m-y-32px overflow-hidden relative " + styles.rich
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ dangerouslySetInnerHTML={{ __html: data?.result?.detail || "" }}
|
|
|
+ />
|
|
|
</div>
|
|
|
</Skeleton>
|
|
|
-
|
|
|
</div>
|
|
|
- <Modal title="购买咨询" width={500} open={showAdvisory} onCancel={() => setShowAdvisory(false)} onOk={handleSubmit}>
|
|
|
+ <Modal
|
|
|
+ title="购买咨询"
|
|
|
+ width={500}
|
|
|
+ open={showAdvisory}
|
|
|
+ onCancel={() => setShowAdvisory(false)}
|
|
|
+ onOk={handleSubmit}
|
|
|
+ >
|
|
|
<Form labelCol={{ span: 6 }} autoComplete="off" form={form}>
|
|
|
<Form.Item
|
|
|
label="如何称呼您?"
|
|
@@ -105,7 +189,9 @@ export default function detail() {
|
|
|
<Form.Item
|
|
|
label="联系方式"
|
|
|
name="tel"
|
|
|
- rules={[{ required: true, message: "请输入您的联系方式!", max: 20 }]}
|
|
|
+ rules={[
|
|
|
+ { required: true, message: "请输入您的联系方式!", max: 20 },
|
|
|
+ ]}
|
|
|
>
|
|
|
<Input placeholder="请输入" maxLength={20} />
|
|
|
</Form.Item>
|