shalu-marketplace/src/pages/detail/index.tsx

import {
  Button,
  Form,
  Image,
  Input,
  Modal,
  Select,
  Skeleton,
  Breadcrumb,
  message,
  notification,
  Tooltip,
} from "antd";
import type { BreadcrumbProps } from "antd";
import { useMemo, useState } from "react";
import { useParams, useRequest, history } from "umi";
import { GetAppDetail } from "@/api/appStore";
import { GetTemplateDetail } from "@/api/templateStore";
import styles from "./index.less";
import { LeftOutlined } from "@ant-design/icons";
import { SubmitApply } from "@/api/apply";

export default function detail() {
  const [showAdvisory, setShowAdvisory] = useState(false);
  const [form] = Form.useForm();

  const { id, type } = useParams();

  const { data, loading } = useRequest<{ result: any }>(
    type === "application" ? GetAppDetail : GetTemplateDetail,
    {
      defaultParams: [
        {
          id: id,
        },
      ],
    }
  );

  const handleToApp = () => {
    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,
        templateId: id,
      });
      notification.success({
        message: "您的申请已提交，后续会有专员与您联系！~",
      });
      setShowAdvisory(false);
    });
  };

  const breadcrumbItems: BreadcrumbProps["items"] = useMemo(() => {
    return [
      {
        key: "all",
        // title: (
        //   <a onClick={handleBack}>
        //     <LeftOutlined />
        //     <span className="m-l-4px">返回</span>
        //   </a>
        // ),
        title: "全部",
      },
      { 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} />
        <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}`
                    : ""
                }
              />
            </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 || "暂无描述"}
              </div>
              <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> */}
                    <i className="iconfont icon-liulanliang"/>
                    <div className="system-xs-regular">浏览量 {data?.result?.viewCount || 0}</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">
              <Tooltip title={!data?.result?.isCanUseTrial ? "暂不支持体验~" : ""}>
                <Button
                  type="primary"
                  className="w-full mb-24px"
                  onClick={handleToApp}
                  disabled={!data?.result?.isCanUseTrial}
                >
                  在线体验
                </Button>
              </Tooltip>
              <Button className="w-full" onClick={() => setShowAdvisory(true)}>
                购买咨询
              </Button>
            </div>
          </div>
        </Skeleton>
        <div className="inline-block">
          <div className="text-24px font-[600] mb-8px">方案详情</div>
          <div className="w-60px h-4px bg-primary rounded-4px mx-auto" />
        </div>

        <Skeleton active loading={loading}>
          <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}
      >
        <Form labelCol={{ span: 6 }} autoComplete="off" form={form}>
          <Form.Item
            label="如何称呼您?"
            name="name"
            rules={[{ required: true, message: "请输入您的称呼！" }]}
          >
            <Input placeholder="请输入" maxLength={20} />
          </Form.Item>
          <Form.Item
            label="联系方式"
            name="tel"
            rules={[
              { required: true, message: "请输入您的联系方式！", max: 20 },
            ]}
          >
            <Input placeholder="请输入" maxLength={20} />
          </Form.Item>
          <Form.Item label="公司名称" name="companyName">
            <Input placeholder="请输入" maxLength={100} />
          </Form.Item>
          <Form.Item label="企业规模" name="companySize">
            <Select
              placeholder="请选择"
              options={[
                { label: "1-10人", value: "1-10人" },
                { label: "11-50人", value: "11-50人" },
                { label: "51-200人", value: "51-200人" },
                { label: "200人以上", value: "200人以上" },
              ]}
            />
          </Form.Item>
          <Form.Item label="您的职务" name="jobTitle">
            <Input placeholder="请输入" maxLength={20} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}