3.0初稿

src/Column/ColumnEditor.tsx

@@ -585,7 +585,7 @@ const ColumnEditor: React.FC<IColumnEditorProps> = props => {
                           className="operate-search-input"
                           placeholder="搜索行业分类"
                           size="large"
-                          bordered={false}
+                          variant="borderless"
                           value={searchCategrayValue}
                           onChange={handleChangeSearchCategrayValue}
                         />
@@ -647,7 +647,7 @@ const ColumnEditor: React.FC<IColumnEditorProps> = props => {
                           className="operate-search-input"
                           placeholder="搜索公司标签"
                           size="large"
-                          bordered={false}
+                          variant="borderless"
                           value={searchCompanyValue}
                           onChange={handleChangeSearchCompanyValue}
                         />

src/Column/ColumnModify.tsx

@@ -506,7 +506,7 @@ const ColumnModify: React.FC<IColumnModifyProps> = props => {
                       className="operate-search-input"
                       placeholder="搜索行业分类"
                       size="large"
-                      bordered={false}
+                      variant="borderless"
                       value={searchCategrayValue}
                       onChange={handleChangeSearchCategrayValue}
                     />
@@ -568,7 +568,7 @@ const ColumnModify: React.FC<IColumnModifyProps> = props => {
                       className="operate-search-input"
                       placeholder="搜索公司标签"
                       size="large"
-                      bordered={false}
+                      variant="borderless"
                       value={searchCompanyValue}
                       onChange={handleChangeSearchCompanyValue}
                     />

src/Material/Material.service.ts

@@ -98,11 +98,11 @@ export interface IGetListBySearchItem {
   Pv: number
 }
 export interface IArcticleDetail {
-  IsSpecialArticle?: boolean // 是否是专项调研
   Abstract: string // 摘要
   Annotation: string // 核心观点
   ArticleId: number
   ArticleIdMd5: string // 报告MD5id
+  ArticleTypeId: number
   Body: string // 内容
   CategoryId: number // 分类ID
   CategoryName: string // 一级分类
@@ -121,20 +121,22 @@ export interface IArcticleDetail {
   FollowNum: number // 关注数量
   HttpUrl: string // 文章链接跳转地址
   InterviewApplyStatus: string // 当前访谈申请状态：'待邀请','待访谈','已完成','已取消'
+  IsApplyAppointmentExpert: boolean // 是否预约过专家
   IsCollect: boolean // 是否收藏:true，已收藏，false:未收藏
   IsFollow: boolean // 是否关注
   IsInterviewApply: boolean // 是否申请访谈:true，已申请，false:未申请
   IsNeedJump: boolean // 是否需要跳转链接地址 true 是策略平台的报告， false 是研选
   IsReport: number // 是否属于报告，1是，0否
+  IsSpecialArticle?: boolean // 是否是专项调研
   NickName: string
   PublishDate: string
   Seller: {
     SellerMobile: string
     SellerName: string
   }
-  Title: string
+  ShareImg: string // 分享图片
   SubCategoryName: string // 二级分类
-  IsApplyAppointmentExpert: boolean // 是否预约过专家
+  Title: string
   // HasPermission 1:有该行业权限,正常展示，2：无该行业权限，不存在权益客户下，3:无该品类权限,已提交过申请，4：无该行业权限,未提交过申请，5：潜在客户，未提交过申请，6：潜在客户,已提交过申请
 }
 export interface IArcticleHotListItem {
@@ -154,12 +156,24 @@ export interface IArcticleHotListItem {
 export interface IArcticleInfo {
   Detail: IArcticleDetail
   HasPermission: number
+  IsCompanyApply: boolean // 机构是否申请过试用
+  IsNeedBusinessCard: boolean // 是否需要上传名片
   IsResearch: boolean // 是否是买方研选
+  IsShowWxPay: boolean // 是否展示微信支付
   IsSpecialArticle: boolean // 是否是专项调研
   Mobile: string
   PopupMsg: string
+  PopupPriceMsg: string // 价格弹窗信息
   SellerMobile: string
   SellerName: string
+  GoodsList: IGoodsListItem[] // 商品信息
+}
+export interface IGoodsListItem {
+  CurrentPrice: string //商品现价（当时出售的价格）
+  GoodsId: number //商品ID
+  GoodsName: string //商品名称
+  PopupPriceMsg: string //价格弹窗信息
+  Price: string //商品原价格
 }
 export interface IApplyTryParams {
   ApplyMethod: number // 1:已付费客户申请试用，2:非客户申请试用,3:非客户申请试用(ficc下，不需要进行数据校验

src/Material/MaterialInfo.tsx

@@ -10,6 +10,7 @@ import ValidateEmpty from 'components/ValidateEmpty'
 import { useLogin2p } from 'Login2p/Login2pContext'
 import Research from './components/Research.container'
 import NoPermission, { INewPermissionType, ISpecialType, ITryType } from './components/NoPermission'
+import PayNoPermission from './components/PayNoPermission'
 import AskAdd from './components/AskAdd'
 import { IArcticleInfo, MaterialService } from './Material.service'
 import useTimeCount from './hooks/useTimeCount'
@@ -116,14 +117,18 @@ const MaterialInfo: React.FC<IMaterialInfoProps> = props => {
       <ValidateEmpty loading={infoLoading} data={data}>
         {data?.HasPermission && data?.HasPermission !== INewPermissionType.OK ? (
           <div className={styles['art-nopower-bg']}>
-            <NoPermission
-              hasPermission={data?.HasPermission}
-              seller={data?.Detail?.Seller}
-              detailID={props.articleID}
-              tryType={ITryType.Article}
-              specialType={specialType}
-              border={true}
-            />
+            {data.IsShowWxPay ? (
+              <PayNoPermission dataInfo={data as IArcticleInfo} tryType={ITryType.Article} border={true} />
+            ) : (
+              <NoPermission
+                hasPermission={data?.HasPermission}
+                seller={data?.Detail?.Seller}
+                detailID={props.articleID}
+                tryType={ITryType.Article}
+                specialType={specialType}
+                border={true}
+              />
+            )}
           </div>
         ) : (
           <div className={styles['art-white-bg']}>

src/Material/components/ApplyResult.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+
+import { Button, Form, Input, message, Row, Modal, Upload } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import type { UploadChangeParam } from 'antd/es/upload'
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
+import SuccessSvg from 'assets/success.svg'
+import FailSvg from 'assets/fail.svg'
+
+import NButton from 'components/NButton/NButton'
+import { MaterialService } from '../Material.service'
+import { useLogin2p } from 'Login2p/Login2pContext'
+import { ITryType } from './NoPermission'
+import styles from '../css/NoPermission.module.scss'
+
+const { Item } = Form
+interface IApplyPermissionProps {
+  visible: boolean
+  detailID?: number
+  tryType?: ITryType
+  handleClose: () => void
+}
+
+/**
+ * 支付结果
+ */
+const ApplyResult: React.FC<IApplyPermissionProps> = props => {
+  const { visible, detailID, tryType, handleClose } = props
+  const login2p = useLogin2p()
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+  const [imageUrl, setImageUrl] = useState<string>()
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>上传名片</div>
+    </div>
+  )
+
+  const { run } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
+      handleToClose()
+      setImageUrl(undefined)
+    }
+  })
+  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
+    manual: true,
+    onSuccess: res => {
+      message.info(res.data.Msg)
+      setImageUrl(res.data?.Data?.ResourceUrl)
+      setLoading(false)
+    }
+  })
+  useEffect(() => {
+    return () => {
+      form.resetFields()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleFinish = (value: any) => {
+    if (!imageUrl) {
+      message.error('请上传名片')
+      return
+    }
+    // 上传名片时，ApplyMethod为2，否则为1
+    run({
+      ApplyMethod: 2,
+      BusinessCardUrl: imageUrl,
+      CompanyName: value.CompanyName,
+      DetailId: detailID,
+      RealName: value.RealName,
+      TryType: tryType
+    })
+  }
+  const uploadProps: UploadProps = {
+    name: 'file',
+    multiple: false,
+    listType: 'picture-card',
+    showUploadList: false,
+    withCredentials: true,
+    customRequest: option => {
+      uploadImg(option.file)
+    },
+    onChange: (info: UploadChangeParam<UploadFile>) => {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return
+      }
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const normFile = (e: any) => {
+    if (Array.isArray(e)) {
+      return e
+    }
+    return e && e.fileList
+  }
+  const handleToClose = () => {
+    // 关闭前把名片给清除了
+    setImageUrl(undefined)
+    handleClose()
+  }
+  const handleBackClose = () => {
+    //
+    handleClose()
+  }
+  return (
+    <Modal
+      open={visible}
+      centered={true}
+      onCancel={handleToClose}
+      destroyOnClose={true}
+      maskClosable={false}
+      title="支付结果"
+      footer={null}
+    >
+      <div className={styles['paymodel-content-wrapper']}>
+        <div className="paymodel-title">
+          <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
+          <img src={FailSvg} alt="图标" className="paymodel-success-icon" />
+          <span>畅读卡购买成功</span>
+          <span>支付成功</span>
+          <span>支付失败</span>
+        </div>
+        <div className="paymodel-text">有效期至：2023.09.22 12:12:12</div>
+        <div className="paymodel-text">请到活动页面选择参会方式</div>
+      </div>
+      <div className={styles['paymodel-footer-wrapper']}>
+        <NButton type="primary" onClick={handleBackClose} size="large" className="pay-btn">
+          关闭
+        </NButton>
+        <NButton type="primary" onClick={handleBackClose} size="large" className="pay-btn">
+          返回活动页
+        </NButton>
+      </div>
+    </Modal>
+  )
+}
+
+export default ApplyResult

src/Material/components/BuyModel.tsx

@@ -0,0 +1,185 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+
+import { Button, Form, Input, message, Row, Modal, Upload } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import type { UploadChangeParam } from 'antd/es/upload'
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
+import CheckboxSvg from 'assets/checkbox.svg'
+import CheckedSvg from 'assets/checked.svg'
+
+import NButton from 'components/NButton/NButton'
+import { IGoodsListItem, MaterialService } from '../Material.service'
+import { useLogin2p } from 'Login2p/Login2pContext'
+import { ITryType } from './NoPermission'
+import styles from '../css/NoPermission.module.scss'
+export enum PayType {
+  Card = 1, // 畅销卡
+  Single = 2 // 单场活动
+}
+
+interface IBuyModelProps {
+  visible: boolean
+  detailID?: number
+  tryType?: ITryType
+  payType?: PayType
+  handleClose: () => void
+}
+
+/**
+ * 付费报名弹框(畅销卡与单场活动购买)
+ */
+const BuyModel: React.FC<IBuyModelProps> = props => {
+  const { visible, detailID, tryType, payType = PayType.Card, handleClose } = props
+  const login2p = useLogin2p()
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+  const [imageUrl, setImageUrl] = useState<string>()
+  const [buyType, setBuyType] = useState<number>(1)
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>上传名片</div>
+    </div>
+  )
+
+  const { run } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
+      handleToClose()
+      setImageUrl(undefined)
+    }
+  })
+  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
+    manual: true,
+    onSuccess: res => {
+      message.info(res.data.Msg)
+      setImageUrl(res.data?.Data?.ResourceUrl)
+      setLoading(false)
+    }
+  })
+  useEffect(() => {
+    return () => {
+      form.resetFields()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleFinish = (value: any) => {
+    if (!imageUrl) {
+      message.error('请上传名片')
+      return
+    }
+    // 上传名片时，ApplyMethod为2，否则为1
+    run({
+      ApplyMethod: 2,
+      BusinessCardUrl: imageUrl,
+      CompanyName: value.CompanyName,
+      DetailId: detailID,
+      RealName: value.RealName,
+      TryType: tryType
+    })
+  }
+  const uploadProps: UploadProps = {
+    name: 'file',
+    multiple: false,
+    listType: 'picture-card',
+    showUploadList: false,
+    withCredentials: true,
+    customRequest: option => {
+      uploadImg(option.file)
+    },
+    onChange: (info: UploadChangeParam<UploadFile>) => {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return
+      }
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const normFile = (e: any) => {
+    if (Array.isArray(e)) {
+      return e
+    }
+    return e && e.fileList
+  }
+  const handleToClose = () => {
+    // 关闭前把名片给清除了
+    setImageUrl(undefined)
+    handleClose()
+  }
+  const handleBackClose = () => {
+    //
+    handleClose()
+  }
+  const cardList: IGoodsListItem[] = [
+    { CurrentPrice: '0.01', GoodsId: 1, GoodsName: '日卡', PopupPriceMsg: '¥99/日，', Price: '99.00' },
+    {
+      CurrentPrice: '0.01',
+      GoodsId: 2,
+      GoodsName: '月卡',
+      PopupPriceMsg: '¥999/月',
+      Price: '399.00'
+    }
+  ]
+  return (
+    <Modal
+      open={visible}
+      centered={true}
+      onCancel={handleToClose}
+      destroyOnClose={true}
+      maskClosable={false}
+      title="付费报名"
+      footer={null}
+    >
+      <div
+        className={styles['buymodel-content-wrapper']}
+        style={{ textAlign: payType === PayType.Single ? 'center' : 'initial' }}
+      >
+        <div className="buymodel-card-wrapper">
+          {cardList.map(item => (
+            <div
+              className={`buymodel-card-item ${buyType === item.GoodsId ? 'buymodel-card-act' : ''}`}
+              key={item.GoodsId}
+            >
+              <span>{item.GoodsName}</span>
+              <span className="buymodel-price-current">&nbsp;¥{item.CurrentPrice}</span>
+              <span className="buymodel-price-undeline">&nbsp;¥{item.Price}</span>
+            </div>
+          ))}
+        </div>
+        <div className="buymodel-price-text" style={{ textAlign: payType === PayType.Single ? 'center' : 'initial' }}>
+          <span>应付金额：</span>
+          <span className="price-red">&nbsp;¥1299&nbsp;</span>
+          <span className="price-undeline">¥1999.00</span>
+        </div>
+        <div className="buymodel-checkbox-wrapper m-t-md">
+          <img src={CheckboxSvg} alt="图标" className="buymodel-icon" />
+          <img src={CheckedSvg} alt="图标" className="buymodel-icon" />
+          <span>我已阅读并同意</span>
+          <span className="buymodel-text-orange">《研选平台服务协议》</span>
+          <span className="buymodel-text-orange">《研选平台隐私政策》</span>
+        </div>
+      </div>
+      <div className={styles['paymodel-footer-wrapper']}>
+        {payType === PayType.Card ? (
+          <NButton type="white" onClick={handleBackClose} size="large" className="pay-btn m-r-md">
+            取消
+          </NButton>
+        ) : (
+          <NButton type="white" onClick={handleBackClose} size="large" className="pay-btn m-r-md">
+            申请试用
+          </NButton>
+        )}
+        <NButton type="primary" onClick={handleBackClose} size="large" className="pay-btn" disabled>
+          确认支付
+        </NButton>
+      </div>
+    </Modal>
+  )
+}
+
+export default BuyModel

src/Material/components/PayNoPermission.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+import { useHistory } from 'react-router-dom'
+
+import { Popover, Result, Tooltip, message } from 'antd'
+import { InfoCircleOutlined } from '@ant-design/icons'
+
+import NoPowerImg from 'assets/nopower.png'
+import BagImg from 'assets/bag.png'
+import TipsSvg from 'assets/tips2.svg'
+// import Introduce from 'assets/introduce.svg'
+// import Quotation from 'assets/quotation.svg'
+
+import { useMedia } from 'Context/Media/MediaContext'
+import ApplyPermission from './ApplyPermission'
+import NButton from 'components/NButton/NButton'
+import { IArcticleInfo, MaterialService } from 'Material/Material.service'
+import { ITryType, ISpecialType, INewPermissionType } from './NoPermission'
+import ApplyResult from './ApplyResult'
+import styles from '../css/NoPermission.module.scss'
+import YiDongModel from './YiDongModel'
+import BuyModel, { PayType } from './BuyModel'
+import QRCodeModel from './QRCodeModel'
+import UploadInfoModel from './UploadInfoModel'
+
+interface IPayNoPermissionProps {
+  dataInfo: IArcticleInfo
+  tryType: ITryType
+  border?: boolean
+}
+/**购买权限 */
+const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
+  const { dataInfo, tryType, border = false } = props
+  const [visibleApply, setVisibleApply] = useState(false) // 普通申请权限弹框
+  const [visibleUpload, setVisibleUpload] = useState(false) // 机构申请试用弹框
+  const [visibleBuyCard, setVisibleBuyCard] = useState(false) // 购买畅读卡弹框
+
+  const [visibleResult, setVisibleResult] = useState(true) // 支付结果弹框
+
+  const history = useHistory()
+  const media = useMedia()
+  // const [isHideBack, setIsHideBack] = useState<boolean>(false) // 识别报告详情页+活动详情页，隐藏返回按钮
+
+  useEffect(() => {
+    // handleChangeMenuKey(history.location)
+    // history.listen(location => {
+    //   window.scrollTo(0, 0)
+    //   handleChangeMenuKey(location)
+    // })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // const handleChangeMenuKey = (location: any) => {
+  //   // 识别报告详情页+活动详情页，适配移动菜单
+  //   if (media.isSmallMax) {
+  //     const routhStr = ['/material/info', '/activity/info', '/activity/detail', '/internal/article', '/column/detail']
+  //     let flag = false
+  //     routhStr.forEach(item => {
+  //       if (location.pathname.includes(item)) {
+  //         setIsHideBack(true)
+  //         flag = true
+  //       }
+  //     })
+  //     if (!flag) {
+  //       setIsHideBack(false)
+  //     }
+  //   } else {
+  //     setIsHideBack(false)
+  //   }
+  // }
+
+  const { run } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('提交成功，请等待销售人员与您联系') : message.info(res.data.Msg)
+    }
+  })
+  const handleCloseResult = () => {
+    setVisibleResult(false)
+  }
+  // 关闭购买畅读卡弹框
+  const handleCloseBuy = () => {
+    setVisibleBuyCard(false)
+  }
+  // 关闭上传名片弹框
+  const handleCloseUpload = () => {
+    setVisibleUpload(false)
+  }
+  // 点击购买畅读卡按钮
+  const handleOpenBuyModel = () => {
+    // 判断是否需要上传名片
+    setVisibleUpload(true)
+    if (dataInfo.IsNeedBusinessCard) {
+      setVisibleUpload(true)
+      return
+    }
+    // 打开畅读卡弹框
+    setVisibleBuyCard(true)
+  }
+  // 申请试用
+  const handleToAskTry = () => {
+    // HasPermission=2,4,6，已提交过申请的，提示：您已提交过申请，请等待销售与您联系。
+    const hasPermission = dataInfo.HasPermission
+    if (
+      hasPermission === INewPermissionType.HasApplyQY ||
+      hasPermission === INewPermissionType.HasApplyFICC ||
+      hasPermission === INewPermissionType.HasApplyPotential
+    ) {
+      message.info('您已提交过申请，请等待销售与您联系。')
+      return
+    }
+    // HasPermission=3，5，不弹表单，直接提交申请
+    if (hasPermission === INewPermissionType.NoApplyQY || hasPermission === INewPermissionType.NoApplyFICC) {
+      run({ ApplyMethod: 1, DetailId: dataInfo.Detail.ArticleId, TryType: tryType })
+      return
+    }
+    // HasPermission=7，弹表单填写，提交申请
+    setVisibleApply(true)
+  }
+  // 关闭申请试用弹框
+  const handleCloseApply = () => {
+    setVisibleApply(false)
+  }
+
+  return (
+    <>
+      <div className={`${border ? styles['gray-boder-box'] : ''} ${styles['nopower-showwxpay-wrapper']}`}>
+        <img src={NoPowerImg} alt="无权限" className="nopower-big-img" />
+        <div className="nopower-content-wrapper">
+          <div className="nopower-title">
+            {tryType === ITryType.Article ? '暂无权限查看此报告' : '暂无权限参加此活动'}
+          </div>
+          <div className="nopower-text">
+            <span>您可以购买畅读卡后查看</span>
+            <span className="nopower-red">（{dataInfo.PopupPriceMsg}）</span>
+            <Tooltip
+              title={
+                <div>
+                  注释：畅读卡有效期内，可查阅无限量调研纪要及常规研选专栏，
+                  参与所有公开活动（日卡自付费完成顺延24小时，月卡自付费完成当天顺延一个自然月）
+                </div>
+              }
+            >
+              {/* <InfoCircleOutlined style={{ fontSize: 16 }} /> */}
+              <img src={TipsSvg} alt="icon" className="nopower-tips-icon" />
+            </Tooltip>
+          </div>
+          <NButton type="primary" onClick={handleOpenBuyModel} size="large" className="btn-line">
+            购买畅读卡
+          </NButton>
+          <div className="nopower-text m-t-md">或向销售申请开通机构试用权限</div>
+          <NButton
+            type="default"
+            onClick={handleToAskTry}
+            size="auto-large"
+            className="btn-line"
+            disabled={dataInfo.IsCompanyApply}
+          >
+            <div className="nopower-disable-text">申请试用</div>
+            {dataInfo.IsCompanyApply && <span className="com-fz12">（贵司已申请过机构试用）</span>}
+          </NButton>
+          <div className="com-fz12 m-t-sm">（仅限机构投资者）</div>
+          <div className="g-inline-block">
+            <div className="nopower-bag-wrapper">
+              <img src={BagImg} alt="图片" className="nopower-bag-img" />
+              <div className="nopower-bag-right">
+                <div className="nopower-br-text com-fw-bold">
+                  机构订阅服务报价：
+                  <span className="com-fz20">3w/年</span>
+                </div>
+                <div className="nopower-br-text com-fz12 mobile-sm-text">
+                  无限量调研纪要及常规研选专栏查阅， 公开活动参与
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* <QRCodeModel
+        visible={visibleResult}
+        detailID={dataInfo.Detail.ArticleId}
+        tryType={tryType}
+        handleClose={handleCloseResult}
+      /> */}
+
+      {/* <ApplyResult
+        visible={visibleResult}
+        detailID={dataInfo.Detail.ArticleId}
+        tryType={tryType}
+        handleClose={handleCloseResult}
+      /> */}
+      <BuyModel
+        visible={visibleBuyCard}
+        detailID={dataInfo.Detail.ArticleId}
+        tryType={tryType}
+        payType={PayType.Single}
+        handleClose={handleCloseBuy}
+      />
+      <UploadInfoModel
+        visible={visibleUpload}
+        detailID={dataInfo.Detail.ArticleId}
+        tryType={tryType}
+        handleClose={handleCloseUpload}
+      />
+      <ApplyPermission
+        visible={visibleApply}
+        detailID={dataInfo.Detail.ArticleId}
+        tryType={tryType}
+        handleClose={handleCloseApply}
+      />
+    </>
+  )
+}
+
+export default PayNoPermission

src/Material/components/QRCodeModel.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+
+import { Button, Form, Input, message, Row, Modal, Upload, QRCode } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import type { UploadChangeParam } from 'antd/es/upload'
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
+import WechartSvg from 'assets/wechat.svg'
+
+import NButton from 'components/NButton/NButton'
+import { IGoodsListItem, MaterialService } from '../Material.service'
+import { useLogin2p } from 'Login2p/Login2pContext'
+import { ITryType } from './NoPermission'
+import styles from '../css/NoPermission.module.scss'
+
+const { Item } = Form
+interface IQRCodeModelProps {
+  visible: boolean
+  detailID?: number
+  tryType?: ITryType
+  handleClose: () => void
+}
+
+/**
+ * 二维码付款弹框
+ */
+const QRCodeModel: React.FC<IQRCodeModelProps> = props => {
+  const { visible, detailID, tryType, handleClose } = props
+  const login2p = useLogin2p()
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+  const [imageUrl, setImageUrl] = useState<string>()
+  const [payType, setPayType] = useState<number>(1)
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>上传名片</div>
+    </div>
+  )
+
+  const { run } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
+      handleToClose()
+      setImageUrl(undefined)
+    }
+  })
+  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
+    manual: true,
+    onSuccess: res => {
+      message.info(res.data.Msg)
+      setImageUrl(res.data?.Data?.ResourceUrl)
+      setLoading(false)
+    }
+  })
+  useEffect(() => {
+    return () => {
+      form.resetFields()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleFinish = (value: any) => {
+    if (!imageUrl) {
+      message.error('请上传名片')
+      return
+    }
+    // 上传名片时，ApplyMethod为2，否则为1
+    run({
+      ApplyMethod: 2,
+      BusinessCardUrl: imageUrl,
+      CompanyName: value.CompanyName,
+      DetailId: detailID,
+      RealName: value.RealName,
+      TryType: tryType
+    })
+  }
+  const uploadProps: UploadProps = {
+    name: 'file',
+    multiple: false,
+    listType: 'picture-card',
+    showUploadList: false,
+    withCredentials: true,
+    customRequest: option => {
+      uploadImg(option.file)
+    },
+    onChange: (info: UploadChangeParam<UploadFile>) => {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return
+      }
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const normFile = (e: any) => {
+    if (Array.isArray(e)) {
+      return e
+    }
+    return e && e.fileList
+  }
+  const handleToClose = () => {
+    // 关闭前把名片给清除了
+    setImageUrl(undefined)
+    handleClose()
+  }
+  const handleBackClose = () => {
+    //
+    handleClose()
+  }
+  const cardList: IGoodsListItem[] = [
+    { CurrentPrice: '0.01', GoodsId: 1, GoodsName: '日卡', PopupPriceMsg: '¥99/日，', Price: '99.00' },
+    {
+      CurrentPrice: '0.01',
+      GoodsId: 2,
+      GoodsName: '月卡',
+      PopupPriceMsg: '¥999/月',
+      Price: '399.00'
+    }
+  ]
+  return (
+    <Modal
+      open={visible}
+      centered={true}
+      onCancel={handleToClose}
+      destroyOnClose={true}
+      maskClosable={false}
+      title="付费"
+      footer={null}
+    >
+      <div className={styles['paymodel-content-wrapper']}>
+        <div className="paymodel-title">
+          <span>请试用 </span>
+          <img src={WechartSvg} alt="图标" className="paymodel-wechat-icon" />
+          <span className="paymodel-text-green"> 微信</span>
+          <span> 扫描二维码完成支付</span>
+        </div>
+        <div className="paymodel-code-wrapper">
+          <QRCode
+            value={''}
+            className="paymodel-qrcode"
+            // 加上icon不好扫
+            // icon="https://verticalmind.oss-accelerate.aliyuncs.com/new/article/img/wechat-pay_1709100398995.png"
+          />
+        </div>
+        <div className="paymodel-title">
+          <span>订单剩余支付时间 </span>
+          <span className="paymodel-redtext">10:00</span>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default QRCodeModel

src/Material/components/UploadInfoModel.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+
+import { Button, Form, Input, message, Row, Modal, Upload } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import type { UploadChangeParam } from 'antd/es/upload'
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
+
+import { MaterialService } from '../Material.service'
+import { useLogin2p } from 'Login2p/Login2pContext'
+import NButton from 'components/NButton/NButton'
+import { ITryType } from './NoPermission'
+import styles from '../css/NoPermission.module.scss'
+
+const { Item } = Form
+interface IUploadInfoModelProps {
+  visible: boolean
+  detailID?: number
+  tryType?: ITryType
+  handleClose: () => void
+}
+
+/**
+ * 上传名片弹框（用于机构申请权限）
+ */
+const UploadInfoModel: React.FC<IUploadInfoModelProps> = props => {
+  const { visible, detailID, tryType, handleClose } = props
+  const login2p = useLogin2p()
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+  const [imageUrl, setImageUrl] = useState<string>()
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>上传名片</div>
+    </div>
+  )
+
+  const { run } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
+      handleToClose()
+      setImageUrl(undefined)
+    }
+  })
+  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
+    manual: true,
+    onSuccess: res => {
+      message.info(res.data.Msg)
+      setImageUrl(res.data?.Data?.ResourceUrl)
+      setLoading(false)
+    }
+  })
+  useEffect(() => {
+    return () => {
+      form.resetFields()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleFinish = (value: any) => {
+    const values = form.getFieldsValue()
+    console.log(values)
+    if (!imageUrl) {
+      message.error('请上传名片')
+      return
+    }
+
+    return
+    // 上传名片时，ApplyMethod为2，否则为1
+    // run({
+    //   ApplyMethod: 2,
+    //   BusinessCardUrl: imageUrl,
+    //   CompanyName: value.CompanyName,
+    //   DetailId: detailID,
+    //   RealName: value.RealName,
+    //   TryType: tryType
+    // })
+  }
+  const uploadProps: UploadProps = {
+    name: 'file',
+    multiple: false,
+    listType: 'picture-card',
+    showUploadList: false,
+    withCredentials: true,
+    customRequest: option => {
+      uploadImg(option.file)
+    },
+    onChange: (info: UploadChangeParam<UploadFile>) => {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return
+      }
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const normFile = (e: any) => {
+    if (Array.isArray(e)) {
+      return e
+    }
+    return e && e.fileList
+  }
+  const handleToClose = () => {
+    // 关闭前把名片给清除了
+    setImageUrl(undefined)
+    handleClose()
+  }
+  return (
+    <Modal
+      open={visible}
+      onCancel={handleToClose}
+      destroyOnClose={true}
+      maskClosable={false}
+      title="上传名片"
+      footer={null}
+    >
+      <div className="m-b-md">当前没有所属机构，请上传您的名片</div>
+      <Form form={form} labelAlign="left">
+        <Item
+          label="上传名片"
+          name="BusinessCardUrl"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
+          valuePropName="fileList"
+          getValueFromEvent={normFile}
+        >
+          <Upload {...uploadProps}>
+            {imageUrl ? <img src={imageUrl} alt="file" style={{ width: '100%' }} /> : uploadButton}
+          </Upload>
+        </Item>
+        <Item
+          label="姓名"
+          name="RealName"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
+          rules={[{ required: true, message: '请输入姓名!' }]}
+        >
+          <Input placeholder="请输入姓名" />
+        </Item>
+        <Item
+          label="公司名"
+          name="CompanyName"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
+          rules={[{ required: true, message: '请输入公司名!' }]}
+        >
+          <Input placeholder="请输入公司名" />
+        </Item>
+        <Item
+          label="手机号"
+          name="Content"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 19 }}
+          rules={[{ required: true, message: '' }]}
+        >
+          <Input placeholder="请输入手机号" />
+        </Item>
+        <div className={styles['paymodel-footer-wrapper']}>
+          <NButton type="white" onClick={handleToClose} size="large" className="pay-btn m-r-md">
+            取消
+          </NButton>
+          <NButton type="primary" onClick={handleFinish} size="large" className="pay-btn">
+            提交
+          </NButton>
+        </div>
+      </Form>
+    </Modal>
+  )
+}
+
+export default UploadInfoModel

src/Material/components/YiDongModel.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+
+import { Button, Form, Input, message, Row, Modal, Upload, Tooltip } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import type { UploadChangeParam } from 'antd/es/upload'
+import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
+import SuccessSvg from 'assets/success.svg'
+import TipsSvg from 'assets/tips2.svg'
+
+import NButton from 'components/NButton/NButton'
+import { MaterialService } from '../Material.service'
+import { useLogin2p } from 'Login2p/Login2pContext'
+import { ITryType } from './NoPermission'
+import styles from '../css/NoPermission.module.scss'
+
+const { Item } = Form
+interface IYiDongModelProps {
+  visible: boolean
+  detailID?: number
+  tryType?: ITryType
+  handleClose: () => void
+}
+
+/**
+ * 易懂提示弹框
+ */
+const YiDongModel: React.FC<IYiDongModelProps> = props => {
+  const { visible, detailID, tryType, handleClose } = props
+  const login2p = useLogin2p()
+  const [form] = Form.useForm()
+  const [loading, setLoading] = useState(false)
+  const [imageUrl, setImageUrl] = useState<string>()
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>上传名片</div>
+    </div>
+  )
+
+  const { run } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
+      handleToClose()
+      setImageUrl(undefined)
+    }
+  })
+  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
+    manual: true,
+    onSuccess: res => {
+      message.info(res.data.Msg)
+      setImageUrl(res.data?.Data?.ResourceUrl)
+      setLoading(false)
+    }
+  })
+  useEffect(() => {
+    return () => {
+      form.resetFields()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleFinish = (value: any) => {
+    if (!imageUrl) {
+      message.error('请上传名片')
+      return
+    }
+    // 上传名片时，ApplyMethod为2，否则为1
+    run({
+      ApplyMethod: 2,
+      BusinessCardUrl: imageUrl,
+      CompanyName: value.CompanyName,
+      DetailId: detailID,
+      RealName: value.RealName,
+      TryType: tryType
+    })
+  }
+  const uploadProps: UploadProps = {
+    name: 'file',
+    multiple: false,
+    listType: 'picture-card',
+    showUploadList: false,
+    withCredentials: true,
+    customRequest: option => {
+      uploadImg(option.file)
+    },
+    onChange: (info: UploadChangeParam<UploadFile>) => {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return
+      }
+    }
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const normFile = (e: any) => {
+    if (Array.isArray(e)) {
+      return e
+    }
+    return e && e.fileList
+  }
+  const handleToClose = () => {
+    // 关闭前把名片给清除了
+    setImageUrl(undefined)
+    handleClose()
+  }
+  const handleBackClose = () => {
+    //
+    handleClose()
+  }
+  return (
+    <Modal
+      open={visible}
+      centered={true}
+      onCancel={handleToClose}
+      destroyOnClose={true}
+      maskClosable={false}
+      title="提示"
+      footer={null}
+    >
+      <div className={styles['paymodel-content-wrapper']}>
+        <div className="paymodel-title">
+          <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
+          <span>畅读卡购买成功</span>
+          <span>支付成功</span>
+        </div>
+        <div className="paymodel-text">您暂无权限参与此活动，</div>
+        <div className="paymodel-text">
+          <span>您可以购买畅读卡后参与</span>
+          <span className="paymodel-redtext">（¥99/日，¥999/月）</span>
+          <Tooltip
+            title={
+              <div>
+                注释：畅读卡有效期内，可查阅无限量调研纪要及常规研选专栏，
+                参与所有公开活动（日卡自付费完成顺延24小时，月卡自付费完成当天顺延一个自然月）
+              </div>
+            }
+          >
+            {/* <InfoCircleOutlined style={{ fontSize: 16 }} /> */}
+            <img src={TipsSvg} alt="icon" className="paymodel-tips-icon" />
+          </Tooltip>
+        </div>
+
+        <div className="paymodel-text">或者向销售申请开通机构试用</div>
+      </div>
+      <div className={styles['paymodel-footer-wrapper']}>
+        <NButton type="primary" onClick={handleBackClose} size="large" className="pay-btn">
+          返回活动页
+        </NButton>
+      </div>
+    </Modal>
+  )
+}
+
+export default YiDongModel

src/Material/css/NoPermission.module.scss

@@ -25,14 +25,67 @@
   margin-bottom: 20px;
 }
 .nopower-wrapper {
-  padding: 78px 0;
+  padding: 78px 0; 
+}
+.nopower-showwxpay-wrapper{
+  padding: 20px;
+  :global{
+    .nopower-big-img{
+      width: 400px;
+      display: block;
+      margin: 0 auto;
+    }
+    .nopower-content-wrapper{
+      text-align: center;
+      margin: 20px auto;
+    }
+    .nopower-title{
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+    .btn-line{
+      margin: 0 auto;
+      width: 300px;
+    }
+    // .nopower-disable-text{
+    //   line-height: 20px;
+    // }
+    .nopower-text{
+      margin-bottom: 10px;
+    }
+    .nopower-red{
+      color:#D54941
+    }
+    .nopower-tips-icon{
+      cursor: pointer;
+      vertical-align: middle;
+    }
+    .nopower-bag-wrapper{
+      background: linear-gradient(180deg, #FFFAF3 0%, #FFEFD9 100%);
+      padding: 6px 25px;
+      border-radius: 76px;
+      display: flex;
+      align-items: center;
+      margin: 20px auto 0 auto;
+      .nopower-bag-img{
+        width: 34px;
+        height:35px;
+        margin-right: 15px;
+      }
+      .nopower-br-text{
+        color: #DB6E27;
+        text-align: left;
+      }
+    }
+  }
 }
 .nopower-product-wrapper {
   padding: 50px 0 20px 0;
   :global {
     .product-top-wrapper {
       text-align: center;
-      font-size: 18px;
+      font-size: 18px;      
       .product-top-title {
         font-weight: bold;
       }
@@ -80,8 +133,156 @@
     }
   }
 }
+.buymodel-content-wrapper{
+  // padding: 24px 32px;
+  :global{
+    .buymodel-card-wrapper{
+      display: flex;
+      align-items: center; 
+      gap: 10px;
+      margin-bottom: 20px;
+      .buymodel-card-item{
+        flex: 1;
+        background: #F6F6F6;
+        color:#FAA12F;
+        padding: 10px 20px 10px 20px;       
+        border-radius: 4px;
+        text-align: center;
+        cursor: pointer;
+        .buymodel-price-undeline{
+          text-decoration: line-through;
+        }
+      }
+      .buymodel-card-act{
+        background: #FAA12F;
+        color: #ffffff;
+      }
+    }
+    .buymodel-price-text{
+      text-align: right;
+      font-size: 18px;
+      font-weight: bold;
+      .price-red{
+        color: #D54941;
+      }
+      .price-undeline{
+        color: #999999;
+        text-decoration: line-through;
+      }
+    }
+    .buymodel-icon{
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+    .buymodel-checkbox-wrapper span{
+      vertical-align: middle;
+    }
+    .buymodel-text-orange{
+      color: #FAA12F;
+      cursor: pointer;
+    }
+  }
+}
+.paymodel-content-wrapper{
+  // padding: 24px 32px;
+  text-align: center;
+  :global{
+    .paymodel-title{
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      span{
+        vertical-align: middle;
+      }
+    }
+    .paymodel-success-icon{
+      width: 24px;
+      height: 24px;
+      margin-right: 10px;
+      vertical-align: middle;
+    }
+    .paymodel-wechat-icon{
+      width: 24px;
+      height: 24px;
+      vertical-align: middle;
+    }
+    .paymodel-text{
+      font-size: 16px;
+      
+      .paymodel-tips-icon{
+        cursor: pointer;
+        vertical-align: middle;
+      }
+    }
+    .paymodel-code-wrapper{
+      width: 283px;
+      height:283px;
+      margin: 10px auto;
+      .paymodel-qrcode{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .paymodel-redtext{
+      color: #D54941;
+    }
+    .paymodel-text-green{
+      color: #00C800;
+    }
+  }
+}
+.paymodel-footer-wrapper{
+  padding: 24px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  :global{
+    .pay-btn{
+      width:96px;
+    }
+  }
+}
+
+
+
 @media screen and (max-width: 1024px) {
   .nopower-wrapper {
     padding: 20px 0;
   }
+}
+@media screen and (max-width: 768px) {
+  .nopower-showwxpay-wrapper{
+    padding: 20px;
+    :global{
+      .nopower-big-img{
+        max-width: 200px;
+      }
+      .nopower-content-wrapper{
+        margin: 25px auto 0 auto
+      }
+      .nopower-title{
+        margin-bottom: 68px;
+      }
+      .btn-line{
+        margin: 0 auto;
+        width: 252px;
+      }  
+      .nopower-tips-icon{
+        margin-top: -2px;
+      }
+      .nopower-bag-wrapper{
+        background: linear-gradient(180deg, #FFFAF3 0%, #FFEFD9 100%);
+        padding: 8px 12px;
+        margin: 35px auto 0 auto;
+        .nopower-bag-img{
+          margin-right: 7px;
+        }        
+        .mobile-sm-text{
+          font-size: 10px;
+        }
+      }
+    }
+  }
 }

src/assets/checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#C8CDD9"/>
+</svg>

src/assets/checked.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="3" fill="#FAA12F"/>
+<path d="M5.12117 10.3542C5.12112 10.3541 5.12122 10.3542 5.12117 10.3542L3 8.23299L4.43479 6.83935L6.53768 8.94224L11.4949 4L12.8995 5.40456L7.94224 10.3468L7.94975 10.3543L7.92887 10.3746C7.8856 10.4166 7.84091 10.4563 7.79496 10.4936L7.23299 11.0539C6.84229 11.4434 6.20995 11.4429 5.81985 11.0528L5.12117 10.3542Z" fill="white"/>
+</svg>

src/assets/fail.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 11C21 5.20101 16.299 0.500002 10.5 0.5C4.70101 0.499997 1.77438e-06 5.20101 0 11C-3.21279e-06 16.799 4.70101 21.5 10.5 21.5C16.299 21.5 21 16.799 21 11ZM7.00636 6.42131L10.5 9.93613L13.9937 6.42131L15.0575 7.47876L11.5575 11L15.0575 14.5212L13.9937 15.5787L10.5 12.0639L7.00637 15.5787L5.94251 14.5212L9.44255 11L5.9425 7.47876L7.00636 6.42131Z" fill="#D54941"/>
+</svg>

src/assets/success.svg

@@ -0,0 +1,3 @@
+<svg width="174" height="174" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87 173.625C134.842 173.625 173.625 134.842 173.625 87C173.625 39.1583 134.842 0.375 87 0.375C39.1583 0.375 0.375 39.1583 0.375 87C0.375 134.842 39.1583 173.625 87 173.625ZM43.6875 89.5554L52.4304 80.8125L74.625 103.001L121.557 56.0625L130.312 64.8178L74.625 120.499L43.6875 89.5554Z" fill="#F1A84A"/>
+</svg>

src/assets/tips.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.99977 0.0310059C3.15677 0.0310059 0.0307617 3.15701 0.0307617 7.00002C0.0307617 10.843 3.15677 13.969 6.99977 13.969C10.8428 13.969 13.9688 10.843 13.9688 7.00002C13.9688 3.15701 10.8428 0.0310059 6.99977 0.0310059ZM7.49978 10.5C7.49978 10.7765 7.27629 11 6.99977 11C6.72325 11 6.49976 10.7766 6.49976 10.5V6.00002C6.49976 5.72352 6.72325 5.5 6.99977 5.5C7.27627 5.5 7.49978 5.72349 7.49978 6.00002V10.5ZM6.99977 4.50003C6.58577 4.50003 6.24976 4.16351 6.24976 3.75002C6.24976 3.33553 6.58577 3.00002 6.99977 3.00002C7.41377 3.00002 7.74978 3.33551 7.74978 3.75002C7.74978 4.16351 7.41377 4.50003 6.99977 4.50003Z" fill="#C0C0C0"/>
+<path d="M6.99977 0.0310059C3.15677 0.0310059 0.0307617 3.15701 0.0307617 7.00002C0.0307617 10.843 3.15677 13.969 6.99977 13.969C10.8428 13.969 13.9688 10.843 13.9688 7.00002C13.9688 3.15701 10.8428 0.0310059 6.99977 0.0310059ZM7.49978 10.5C7.49978 10.7765 7.27629 11 6.99977 11C6.72325 11 6.49976 10.7766 6.49976 10.5V6.00002C6.49976 5.72352 6.72325 5.5 6.99977 5.5C7.27627 5.5 7.49978 5.72349 7.49978 6.00002V10.5ZM6.99977 4.50003C6.58577 4.50003 6.24976 4.16351 6.24976 3.75002C6.24976 3.33553 6.58577 3.00002 6.99977 3.00002C7.41377 3.00002 7.74978 3.33551 7.74978 3.75002C7.74978 4.16351 7.41377 4.50003 6.99977 4.50003Z" fill="#333333"/>
 </svg>

src/assets/tips2.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM6.3999 3H7.59985V4.19995H6.3999V3ZM6.50562 5.5H7.50562V10.9998H6.50562V5.5Z" fill="#333333"/>
+</svg>

src/assets/wechat.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98077 12.0826C7.88604 12.1305 7.77914 12.1582 7.6656 12.1582C7.40317 12.1582 7.17494 12.0136 7.05517 11.8001L7.00924 11.6994L5.09755 7.5047C5.07692 7.45889 5.06402 7.4075 5.06402 7.35739C5.06402 7.16399 5.22073 7.00714 5.41413 7.00714C5.49268 7.00714 5.56511 7.03311 5.6237 7.07666L7.8794 8.68264C8.04433 8.79069 8.24112 8.85386 8.45278 8.85386C8.57936 8.85386 8.69966 8.83036 8.81203 8.78937L19.4209 4.06766C17.5195 1.8266 14.3875 0.361816 10.8434 0.361816C5.04377 0.361816 0.342529 4.27958 0.342529 9.11248C0.342529 11.7495 1.75707 14.1228 3.97086 15.7269C4.14858 15.8536 4.26471 16.0619 4.26471 16.297C4.26471 16.3746 4.24802 16.446 4.22792 16.52C4.05109 17.1798 3.76794 18.2357 3.75474 18.2852C3.7327 18.3679 3.69812 18.4544 3.69812 18.5411C3.69812 18.7343 3.85497 18.8911 4.04838 18.8911C4.12457 18.8911 4.18643 18.8629 4.25063 18.8259L6.54952 17.4989C6.72242 17.3989 6.90551 17.3372 7.10712 17.3372C7.2144 17.3372 7.31813 17.3537 7.41589 17.3835C8.48827 17.692 9.64534 17.8634 10.8434 17.8634C16.6427 17.8634 21.3444 13.9456 21.3444 9.11252C21.3444 7.64882 20.9107 6.27014 20.1483 5.05762L8.05735 12.0384L7.98077 12.0826Z" fill="#00C800"/>
+</svg>

src/components/NButton/NButton.module.scss

@@ -19,7 +19,7 @@
   border-radius: 2px;
 }
 .custombutton-large {
-  width: 180px;
+  width: 180px;  
   height: 34px;
   line-height: 34px;
   text-align: center;
@@ -39,6 +39,13 @@
   text-align: center;
   border-radius: 4px;
 }
+.custombutton-auto-large {
+  width: auto;  
+  line-height: 22px;
+  padding: 6px 0;
+  text-align: center;
+  border-radius: 4px;
+}
 .custombutton-radius {
   border-radius: 42px;
 }
@@ -81,9 +88,27 @@
 }
 .custombutton-disabled {
   cursor: not-allowed;
-  background: #f5f5f5;
-  color: #d9d9d9;
+  background: #F6F6F6;
+  color: #333333;
+  border: none;
+  &:hover {
+    background: #F6F6F6;
+    color: #333333;
+    border: none;
+  }
 }
+.custombutton-primary-disabled {
+  cursor: not-allowed;
+  background: #FFCE8E;
+  color: #ffffff;
+  border: none;
+  &:hover {
+    background: #FFCE8E;
+    color: #ffffff;
+    border: none;
+  }
+}
+
 .custombutton-white {
   background: #ffffff;
   color: #333333;

src/components/NButton/NButton.tsx

@@ -4,7 +4,15 @@ import classNames from 'classnames'
 
 import styles from './NButton.module.scss'
 
-export type NButtonSizeType = 'small' | 'middle' | 'middle-large' | 'large' | 'big-large' | 'sm-radius' | 'login-large'
+export type NButtonSizeType =
+  | 'small'
+  | 'middle'
+  | 'middle-large'
+  | 'large'
+  | 'big-large'
+  | 'sm-radius'
+  | 'login-large'
+  | 'auto-large'
 export type NButtonType = 'primary' | 'default' | 'danger' | 'white'
 
 export type INButtonProps = {
@@ -24,7 +32,8 @@ const NButton: React.FC<INButtonProps> = props => {
     'com-cursor-p',
     styles.customNButton,
     {
-      [styles['custombutton-disabled']]: disabled,
+      [styles['custombutton-primary-disabled']]: type === 'primary' && disabled,
+      [styles['custombutton-disabled']]: type !== 'primary' && disabled,
       [styles[`custombutton-${size}`]]: size,
       [styles[`custombutton-${type}`]]: type
       // [styles['custombutton-radius']]: btnType === 'radius',