取消订单，畅销卡显示，支付流程提取

src/Activity/Activity.service.ts

@@ -335,6 +335,12 @@ export const ActivityService = {
       method: 'get',
       params: { ActivityId }
     }),
+  getSearchActivityList: (params: IActivityTypeParams): INewResponse<ISearchActivityRes> =>
+    NewAxiosInstanceFunc({
+      url: `/activity/listSearch`,
+      method: 'get',
+      params: params
+    }),
   // 报名方式，，1预约外呼，2自主拨入，3我要报名
   postActivitySignup: (ActivityId: number, SignupType: number, Email?: string): INewResponse<IActivitySignupRes> =>
     NewAxiosInstanceFunc({
@@ -413,10 +419,11 @@ export const ActivityService = {
       method: 'post',
       data: { ActivityId }
     }),
-  getSearchActivityList: (params: IActivityTypeParams): INewResponse<ISearchActivityRes> =>
+
+  postOrderCancel: (OrderCode: string): INewResponse =>
     NewAxiosInstanceFunc({
-      url: `/activity/listSearch`,
-      method: 'get',
-      params: params
+      url: `/order/cancel`,
+      method: 'post',
+      data: { OrderCode }
     })
 }

src/Activity/ActivityTypeDetail.tsx

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom'
 import useRequest from '@ahooksjs/use-request/es'
 import dayjs from 'dayjs'
 
-import { Col, Row, Tag, Spin, Modal } from 'antd'
+import { Col, Row, Tag, Spin, Modal, message } from 'antd'
 import { PlayCircleOutlined } from '@ant-design/icons'
 
 import { ReactComponent as CityImg } from 'assets/city.svg'
@@ -19,6 +19,7 @@ import NButton from 'components/NButton/NButton'
 import { setWxShare } from 'utils/wxConfig'
 import PayNoPermission from 'Material/components/PayNoPermission'
 import Countdown from 'Material/components/Countdown'
+import PayProcessModel from 'Material/components/PayProcessModel'
 import styles from './css/ActivityTypeDetail.module.scss'
 
 export interface IActivityTypeDetail {
@@ -31,6 +32,8 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
   const login2p = useLogin2p()
   const history = useHistory()
   const [refreshFlag, setRefreshFlag] = useState<boolean>(false)
+  const [visibleLink, setVisibleLink] = useState<boolean>(false)
+  const [openContinuePay, setOpenContinuePay] = useState<boolean>(false) // 去继续支付
 
   useEffect(() => {
     const code = sessionStorage.getItem('invite_code') || login2p.inviteCode
@@ -52,7 +55,14 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
       handleToOtherPage()
     }
   })
-  const [visibleLink, setVisibleLink] = useState<boolean>(false)
+  // 取消订单
+  const { run: postOrderCancel } = useRequest(ActivityService.postOrderCancel, {
+    manual: true,
+    formatResult: response => response.data,
+    onSuccess: res => {
+      res.Success ? refreshDetail() : message.error(res.Msg || res.ErrMsg)
+    }
+  })
 
   // 查看视频
   const handleToVideoPage = () => {
@@ -87,12 +97,13 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
   }
 
   const handleToIndepthPage = (item: IListndustrialItem) => {
+    // 没有这个页面
     if (!item.IsJump) return
-    history.push(
-      `/indepth/info/${item.ChartPermissionId}/${item.IndustrialManagementId}${
-        login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''
-      }`
-    )
+    // history.push(
+    //   `/indepth/info/${item.ChartPermissionId}/${item.IndustrialManagementId}${
+    //     login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''
+    //   }`
+    // )
   }
   const formatLinkText = (url: string) => {
     return url.indexOf('http') >= 0 ? (
@@ -114,7 +125,21 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
     // todo
     refreshDetail()
     setRefreshFlag(!refreshFlag)
+    setOpenContinuePay(false)
+  }
+
+  // 取消订单
+  const handleCancelOrder = () => {
+    if (!data?.OrderCode) return
+    postOrderCancel(data.OrderCode)
+  }
+  // 继续支付
+  const handleToContinuePay = () => {
+    if (!data?.OrderCode) return
+    // todo 打开支付码
+    setOpenContinuePay(true)
   }
+  const formatCountdown = <Countdown countdown={data?.PayTimeCountdown || 0} />
 
   return (
     <div className={styles['activity-detail-page']}>
@@ -147,13 +172,19 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
                           </span>
                         </div>
                         <div className="g-flex g-flex-center">
-                          <NButton type="default" size="large" className="m-t-md m-r-md">
+                          <NButton type="default" size="large" className="m-t-md m-r-md" onClick={handleCancelOrder}>
                             取消订单
                           </NButton>
-                          <NButton type="primary" size="large" className="m-t-md">
+                          <NButton type="primary" size="large" className="m-t-md" onClick={handleToContinuePay}>
                             去支付
                           </NButton>
                         </div>
+                        <PayProcessModel
+                          dataInfo={data}
+                          tryType={ITryType.Activity}
+                          continuePayFlag={openContinuePay}
+                          onRefresh={handleToRefresh}
+                        />
                       </div>
                     )}
                     <div className="activity-detail-title">

src/Activity/components/ActivityBtn.component.tsx

@@ -25,6 +25,8 @@ import Picture from './Picture'
 import { MaterialService } from 'Material/Material.service'
 import { INewestItem } from 'Newest/Newest.service'
 import { IMyActivityItem } from 'Personal/Personal.service'
+import YiDongModel from './YiDongModel'
+import PayProcessModel from 'Material/components/PayProcessModel'
 import styles from '../css/ActivityCard.module.scss'
 
 export enum IActivityBtnType {
@@ -81,6 +83,10 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
   const [emailVisible, setEmailVisible] = useState<boolean>() // 含有邮箱填写的弹框
   const [actionType, setActionType] = useState<IActivityBtnType | IActivitySpecialBtnType>() // 记录点击了哪个按钮操作
   const [resourceCountData, setResourceCountData] = useState({ CompanyPoints: '0', ActivityPoints: '0' }) // 记录活动扣点数据
+  const [openYidongModel, setOpenYidongModel] = useState(false) // 易懂支付弹框提示
+  // const [visibleApply, setVisibleApply] = useState(false) // 普通申请权限弹框
+  const [visibleBuyCard, setVisibleBuyCard] = useState(false) // 购买畅读卡弹框
+
   const login2p = useLogin2p()
   const location = useLocation()
   const history = useHistory()
@@ -348,6 +354,10 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
 
     return { title: title[type] }
   }
+  // 关闭易懂支付提示弹框
+  const handleCloseYidong = () => {
+    setOpenYidongModel(true)
+  }
   // 权限判断
   const handleCheckPower = (HasPermission: INewPermissionType, isResearch: boolean, isResearchSpecial: boolean) => {
     // 如果接口没返回权限则跳过
@@ -355,6 +365,12 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
 
     // 1.先判断权限，无权限则弹框
     if (HasPermission !== INewPermissionType.OK) {
+      // 如果是易懂活动，无权限时，弹框
+      // todo 缺个字段判断是否进入支付流程
+      if (btnGrous !== 'detail' && (item as IActivityTypeListItem)?.IsYidongActivity) {
+        setOpenYidongModel(true)
+        return false
+      }
       // 列表的按钮点击，无权限时，需要进入详情页
       if (btnGrous !== 'detail') {
         isSpecial
@@ -706,13 +722,38 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
     }
     // 3.研选扣点
     if (!res.CheckPoints) {
+      // todo 如果需要付费
+      Modal.warning({
+        title: '提示',
+        content: (
+          <div className="reset-pm">
+            <p>
+              <span>点数不足，您可以通过单场付费 ¥1299 参与或者联系销售机构充值</span>
+            </p>
+            <div>
+              当前剩余点数：<span className={styles['link-text']}>{res.CompanyPoints}</span>
+            </div>
+            <div>
+              本次会议扣除点数：<span className={styles['link-text']}>{res.ActivityPoints}</span>
+            </div>
+          </div>
+        ),
+        cancelText: '取消',
+        okText: '付费报名',
+        onOk: () => {
+          setVisibleBuyCard(true)
+        },
+        width: 520,
+        centered: true
+      })
+
       Modal.warning({
         title: '点数不足',
         content: (
           <div className="reset-pm">
             <p>
               <span>您的研选服务点数不足，若想报名，请联系对口销售升级套餐</span>
-              <img src={TipsSvg} alt="icon" className={styles['link-tips-icon']} />
+              {/* <img src={TipsSvg} alt="icon" className={styles['link-tips-icon']} /> */}
             </p>
             <div>
               当前剩余点数：<span className={styles['link-text']}>{res.CompanyPoints}</span>
@@ -845,6 +886,14 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
         onCloseModel={handleOKApply}
       />
       <Picture visible={!!bigImg} imgSrc={bigImg} onClose={handleToCloseBigImg} />
+      {/* <YiDongModel visible={openYidongModel} handleClose={handleCloseYidong}  /> */}
+      {/* <PayProcessModel
+        dataInfo={dataInfo}
+        tryType={ITryType.Activity}
+        open={visibleBuyCard}
+        // applyTrial={visibleApply}
+        // onRefresh={onRefresh}
+      /> */}
       {isSpecial ? (
         <>
           <NButton

src/Activity/components/ActivityCard.tsx

@@ -13,7 +13,6 @@ import ActivityBtnComponent, { IStateStringType } from './ActivityBtn.component'
 import { INewPermissionType } from 'Material/components/NoPermission'
 import { INewestItem } from 'Newest/Newest.service'
 import { IMyActivityItem } from 'Personal/Personal.service'
-import YiDongModel from 'Material/components/YiDongModel'
 import styles from '../css/ActivityCard.module.scss'
 
 export interface IActivityCard {

src/Activity/components/YiDongModel.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+
+import { message, Modal, Tooltip } from 'antd'
+import SuccessSvg from 'assets/success.svg'
+import TipsSvg from 'assets/tips2.svg'
+
+import NButton from 'components/NButton/NButton'
+import { MaterialService } from '../../Material/Material.service'
+import { useLogin2p } from 'Login2p/Login2pContext'
+import { ITryType } from '../../Material/components/NoPermission'
+import PayProcessModel from 'Material/components/PayProcessModel'
+import { IActivityTypeDetailRes } from 'Activity/Activity.service'
+import styles from '../css/NoPermission.module.scss'
+
+interface IYiDongModelProps {
+  visible: boolean
+  dataInfo: IActivityTypeDetailRes
+  handleClose: () => void
+  onRefresh: () => void
+}
+
+/**
+ * 易懂提示弹框
+ */
+const YiDongModel: React.FC<IYiDongModelProps> = props => {
+  const { visible, dataInfo, handleClose, onRefresh } = props
+  const login2p = useLogin2p()
+
+  const [visibleApply, setVisibleApply] = useState(false) // 普通申请权限弹框
+  const [visibleBuyCard, setVisibleBuyCard] = useState(false) // 购买畅读卡弹框
+
+  const { run } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
+      handleToClose()
+      // setImageUrl(undefined)
+    }
+  })
+  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>
+      {/* <PayProcessModel
+        dataInfo={dataInfo}
+        tryType={ITryType.Activity}
+        open={visibleBuyCard}
+        applyTrial={visibleApply}
+        // onRefresh={onRefresh}
+      /> */}
+    </>
+  )
+}
+
+export default YiDongModel

src/Activity/css/ActivityTypeDetail.module.scss

@@ -208,11 +208,54 @@
   .activity-detail-page {
     :global{
       .activity-detail-content {
-        padding: 15px;
+        padding: 0;
       }
     }
   }
 }
+
+@media screen and (max-width: 768px) {
+  .activity-detail-page{
+    :global {
+      .activity-content-nopower{
+        min-height: calc(100vh - 84px);
+        position: relative;
+        .activity-paynopermission-wrapper{
+          position: absolute;
+          bottom: 0;
+          left: -15px;
+          right: -15px;
+        }
+      }
+      .activity-paynopermission-wrapper{
+        .white-wrapper{
+          height: 55px;
+          width: 100%;
+          background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
+  
+        }
+        .white-bg{
+          background: #ffffff;
+        }
+      }
+      .activity-wait-pay-wrapper{
+        text-align: center;
+        padding: 20px 35px 20px 35px;
+        border-bottom: 1px dashed #DCDFE6;
+        .countdown-text{
+          color: #faa12f;
+        }
+      }
+      .activity-detail-title {
+        font-weight: bold;
+        padding: 15px 15px 25px 15px;
+      }
+      .activity-detail-list {
+        padding: 0 15px;
+      }        
+    }
+  }
+}
 @media screen and (max-width: 430px) {
   .activity-detail-page {
     :global{

src/Login2p/Login2p.service.ts

@@ -14,8 +14,8 @@ export interface IPrivateEquityUser {
   PermissionName: string[]
   PermissionStatus: string
   StartDate: string
-  UserCardEndDate: string // 3.0版 畅读卡到期时间
-  UserCardType: number // 3.0版 畅读卡类型
+  UserCardEndDate: string // 畅读卡到期时间
+  UserCardType: number //  畅读卡类型0:未开通、1日卡、2月卡
   UserId: number
   UserName: string
   HasPermission: number

src/Login2p/Login2pContext.tsx

@@ -110,7 +110,6 @@ const Login2pProvider: React.FC<ContextProviderProps> = ({ children }: ContextPr
       // 如果有邀请码
       if (!!data.InviteShareCode) {
         sessionStorage.setItem('invite_code', data.InviteShareCode)
-        console.log(window.location)
         history.replace(`${window.location.pathname}?invite_code=${data.InviteShareCode}`)
       }
 

src/Material/components/ApplyResult.tsx

@@ -16,7 +16,7 @@ interface IApplyPermissionProps {
 }
 
 /**
- * 支付结果
+ * 支付结果 todo
  */
 const ApplyResult: React.FC<IApplyPermissionProps> = props => {
   const { visible, info, onCloseModel } = props

src/Material/components/Countdown.tsx

@@ -4,13 +4,13 @@ import dayjs from 'dayjs'
 interface ICountdownProps {
   countdown: number // 以秒为单位
 }
-let timer: NodeJS.Timeout
 
 // 倒计时
 const Countdown: React.FC<ICountdownProps> = props => {
   const [countTime, setCountTime] = useState(props?.countdown ?? 0)
 
   useEffect(() => {
+    let timer: NodeJS.Timeout
     if (countTime > 0) {
       timer = setTimeout(() => {
         setCountTime(countTime => countTime - 1)

src/Material/components/PayNoPermission.tsx

@@ -6,19 +6,13 @@ import { Tooltip, message } from 'antd'
 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 { EOrderStatus, IArcticleInfo, IOrderPayStatusRes, MaterialService } from 'Material/Material.service'
+import { IArcticleInfo, MaterialService } from 'Material/Material.service'
 import { ITryType, INewPermissionType } from './NoPermission'
-import ApplyResult from './ApplyResult'
-import BuyModel, { PayType } from './BuyModel'
-import QRCodeModel from './QRCodeModel'
-import UploadInfoModel from './UploadInfoModel'
+import { PayType } from './BuyModel'
 import { IActivityTypeDetailRes } from 'Activity/Activity.service'
+import PayProcessModel from './PayProcessModel'
 import styles from '../css/NoPermission.module.scss'
 
 interface IPayNoPermissionProps {
@@ -31,38 +25,9 @@ interface IPayNoPermissionProps {
 const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
   const { dataInfo, tryType, border = false, onRefresh } = props
   const [visibleApply, setVisibleApply] = useState(false) // 普通申请权限弹框
-  const [visibleUpload, setVisibleUpload] = useState(false) // 机构申请试用弹框
   const [visibleBuyCard, setVisibleBuyCard] = useState(false) // 购买畅读卡弹框
-  const [visibleOrderCode, setVisibleOrderCode] = useState(false) // 订单二维码弹框
-  const [visibleResult, setVisibleResult] = useState(false) // 支付结果弹框
-  // const [wantBuyGoodsId, setWantBuyGoodsId] = useState(0) // 购买畅读卡的选项
-  const [payInfo, setPayInfo] = useState<IOrderPayStatusRes | null>(null) // 支付订单详情
   const payType = dataInfo.GoodsList.length > 1 ? PayType.Card : PayType.Single // 支付类型[1:畅销卡,2:单场活动
 
-  // 报告畅读卡购买,创建订单
-  const { data: articleOrderInfo, run: postCreateOrderByArticle } = useRequest(
-    MaterialService.postCreateOrderByArticle,
-    {
-      manual: true,
-      formatResult: response => response.data,
-      onSuccess: res => {
-        // todo
-        res.Success ? setVisibleOrderCode(true) : message.error(res.Msg || res.ErrMsg)
-      }
-    }
-  )
-  // 活动报名购买,创建订单
-  const { data: activityOrderInfo, run: postCreateOrderByActivity } = useRequest(
-    MaterialService.postCreateOrderByActivity,
-    {
-      manual: true,
-      formatResult: response => response.data,
-      onSuccess: res => {
-        // todo
-        res.Success ? setVisibleOrderCode(true) : message.error(res.Msg || res.ErrMsg)
-      }
-    }
-  )
   // 申请试用接口
   const { run: postApplyTry } = useRequest(MaterialService.postApplyTry, {
     manual: true,
@@ -70,60 +35,11 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
       res.data.Ret === 200 ? message.success('提交成功，请等待销售人员与您联系') : message.info(res.data.Msg)
     }
   })
-  // 关闭支付结果弹框
-  const handleCloseResult = () => {
-    // 并刷新页面
-    onRefresh && onRefresh()
-    setVisibleResult(false)
-  }
-  // 关闭支付code弹框
-  const handleCloseCode = () => {
-    // 如果是单场购买，关闭后刷新页面
-    if (payType === PayType.Single) {
-      onRefresh && onRefresh()
-    }
-    setVisibleOrderCode(false)
-  }
-  // 关闭购买畅读卡弹框
-  const handleCloseBuy = () => {
-    setVisibleBuyCard(false)
-  }
-  // 上传名片成功后,关闭上传名片弹框
-  const handleUploadCardSuccess = () => {
-    // todo
-    handleCloseUpload()
-  }
-  // 关闭上传名片弹框
-  const handleCloseUpload = () => {
-    setVisibleUpload(false)
-  }
-  // 关闭申请试用弹框
-  const handleCloseApply = () => {
-    setVisibleApply(false)
-  }
   // 点击购买畅读卡按钮
   const handleOpenBuyModel = () => {
     // 打开畅读卡弹框
     setVisibleBuyCard(true)
   }
-  // 点击支付
-  const handleClickPay = (GoodsId: number) => {
-    console.log('GoodsId', GoodsId)
-    // setWantBuyGoodsId(GoodsId)
-    // 判断是否需要上传名片
-    if (dataInfo.IsNeedBusinessCard) {
-      setVisibleUpload(true)
-      return
-    }
-    // 调接口获取支付二维码 todo
-    if (tryType === ITryType.Article) {
-      postCreateOrderByArticle(GoodsId, (dataInfo as IArcticleInfo).Detail.ArticleId)
-    }
-    if (tryType === ITryType.Activity) {
-      postCreateOrderByActivity(GoodsId, (dataInfo as IActivityTypeDetailRes).Detail.ActivityId)
-    }
-    setVisibleBuyCard(false)
-  }
   // 申请试用
   const handleToAskTry = () => {
     // HasPermission=2,4,6，已提交过申请的，提示：您已提交过申请，请等待销售与您联系。
@@ -149,37 +65,12 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
     setVisibleApply(true)
   }
 
-  // 订单支付结果
-  const handleDoPayResult = (OrderRes: IOrderPayStatusRes) => {
-    // todo
-    console.log('OrderStatus', OrderRes)
-    setPayInfo(OrderRes)
-    switch (OrderRes.OrderStatus) {
-      case EOrderStatus.Cancel:
-        console.log('已取消')
-        setVisibleResult(true)
-        break
-      case EOrderStatus.WaitPay:
-        console.log('待支付')
-        break
-      case EOrderStatus.Payed:
-        setVisibleResult(true)
-        break
-      case EOrderStatus.Refund:
-        console.log('已退款')
-        break
-      default:
-        console.log('未知状态')
-        break
-    }
-  }
-
   return (
     <>
       <div className={`${border ? styles['gray-boder-box'] : ''} ${styles['nopower-showwxpay-wrapper']} `}>
         {tryType !== ITryType.Activity ? <img src={NoPowerImg} alt="无权限" className="nopower-big-img" /> : null}
         <div className="nopower-content-wrapper">
-          <div className="nopower-title">
+          <div className={tryType !== ITryType.Activity ? 'nopower-title' : 'nopower-activity-title'}>
             {tryType === ITryType.Article ? '暂无权限查看此报告' : '暂无权限参加此活动'}
           </div>
           <div className="nopower-text">
@@ -274,35 +165,12 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
           </div>
         </div>
       </div>
-      <QRCodeModel
-        visible={visibleOrderCode}
-        codeUrl={articleOrderInfo?.Data.CodeUrl || activityOrderInfo?.Data.CodeUrl || ''}
-        orderCode={articleOrderInfo?.Data.OrderCode || activityOrderInfo?.Data.OrderCode || ''}
-        onCloseModel={handleCloseCode}
-        onSendPayResult={handleDoPayResult}
-      />
-      <ApplyResult visible={visibleResult} info={payInfo} onCloseModel={handleCloseResult} />
-      <BuyModel
-        visible={visibleBuyCard}
-        goodsList={dataInfo.GoodsList}
-        payType={payType} // todo
-        onCloseModel={handleCloseBuy}
-        handleCheckPay={handleClickPay}
-      />
-      <UploadInfoModel
-        visible={visibleUpload}
-        onCloseModel={handleCloseUpload}
-        handleSuccess={handleUploadCardSuccess}
-      />
-      <ApplyPermission
-        visible={visibleApply}
-        detailID={
-          tryType === ITryType.Article
-            ? (dataInfo as IArcticleInfo).Detail.ArticleId
-            : (dataInfo as IActivityTypeDetailRes).Detail.ActivityId
-        }
+      <PayProcessModel
+        dataInfo={dataInfo}
         tryType={tryType}
-        onCloseModel={handleCloseApply}
+        open={visibleBuyCard}
+        applyTrial={visibleApply}
+        onRefresh={onRefresh}
       />
     </>
   )

src/Material/components/PayProcessModel.tsx

@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+
+import { Tooltip, message } from 'antd'
+
+import ApplyPermission from './ApplyPermission'
+import { EOrderStatus, IArcticleInfo, IOrderPayStatusRes, MaterialService } from 'Material/Material.service'
+import { ITryType, INewPermissionType } from './NoPermission'
+import ApplyResult from './ApplyResult'
+import BuyModel, { PayType } from './BuyModel'
+import QRCodeModel from './QRCodeModel'
+import UploadInfoModel from './UploadInfoModel'
+import { IActivityTypeDetailRes } from 'Activity/Activity.service'
+import styles from '../css/NoPermission.module.scss'
+
+interface IPayProcessModelProps {
+  dataInfo: IArcticleInfo | IActivityTypeDetailRes
+  tryType: ITryType
+  open?: boolean // 是否打开支付流程弹框
+  applyTrial?: boolean // 是否申请试用
+  continuePayFlag?: boolean // 继续支付
+  countDownRender?: React.ReactNode
+  onRefresh?: () => void // 刷新页面
+}
+/**支付流程汇总弹框 */
+const PayProcessModel: React.FC<IPayProcessModelProps> = props => {
+  const { dataInfo, tryType, open, applyTrial, continuePayFlag, countDownRender, onRefresh } = props
+  const [visibleApply, setVisibleApply] = useState(false) // 普通申请权限弹框
+  const [visibleUpload, setVisibleUpload] = useState(false) // 机构申请试用弹框
+  const [visibleBuyCard, setVisibleBuyCard] = useState(false) // 购买畅读卡弹框
+  const [visibleOrderCode, setVisibleOrderCode] = useState(false) // 订单二维码弹框
+  const [visibleResult, setVisibleResult] = useState(false) // 支付结果弹框
+  const [wantBuyGoodsId, setWantBuyGoodsId] = useState(0) // 购买畅读卡的选项
+  const [payInfo, setPayInfo] = useState<IOrderPayStatusRes | null>(null) // 支付订单详情
+  const payType = dataInfo.GoodsList.length > 1 ? PayType.Card : PayType.Single // 支付类型[1:畅销卡,2:单场活动
+
+  // 报告畅读卡购买,创建订单
+  const { data: articleOrderInfo, run: postCreateOrderByArticle } = useRequest(
+    MaterialService.postCreateOrderByArticle,
+    {
+      manual: true,
+      formatResult: response => response.data,
+      onSuccess: res => {
+        // todo
+        res.Success ? setVisibleOrderCode(true) : message.error(res.Msg || res.ErrMsg)
+      }
+    }
+  )
+  // 活动报名购买,创建订单
+  const { data: activityOrderInfo, run: postCreateOrderByActivity } = useRequest(
+    MaterialService.postCreateOrderByActivity,
+    {
+      manual: true,
+      formatResult: response => response.data,
+      onSuccess: res => {
+        // todo
+        res.Success ? setVisibleOrderCode(true) : message.error(res.Msg || res.ErrMsg)
+      }
+    }
+  )
+  // 申请试用接口
+  const { run: postApplyTry } = useRequest(MaterialService.postApplyTry, {
+    manual: true,
+    onSuccess: res => {
+      res.data.Ret === 200 ? message.success('提交成功，请等待销售人员与您联系') : message.info(res.data.Msg)
+    }
+  })
+  useEffect(() => {
+    // todo
+    if (open) {
+      // 开启支付流程
+      handleOpenBuyModel()
+    }
+    if (applyTrial) {
+      // 申请试用
+      handleToAskTry()
+    }
+    if (tryType === ITryType.Activity && payType === PayType.Single && continuePayFlag) {
+      // 继续支付(现在只有活动有继续支付的需求)
+      // todo 二维码的倒计时，需要后端返回订单剩余支付时间
+      postCreateOrderByActivity(dataInfo.GoodsList[0]?.GoodsId, (dataInfo as IActivityTypeDetailRes).Detail.ActivityId)
+    }
+  }, [open, applyTrial, continuePayFlag])
+  // 关闭支付结果弹框
+  const handleCloseResult = () => {
+    // 并刷新页面
+    onRefresh && onRefresh()
+    setVisibleResult(false)
+  }
+  // 关闭支付code弹框
+  const handleCloseCode = () => {
+    // 如果是单场购买，关闭后刷新页面
+    if (payType === PayType.Single) {
+      onRefresh && onRefresh()
+    }
+    setVisibleOrderCode(false)
+  }
+  // 关闭购买畅读卡弹框
+  const handleCloseBuy = () => {
+    setVisibleBuyCard(false)
+  }
+  // 上传名片成功后,关闭上传名片弹框,并请求创建订单接口
+  const handleUploadCardSuccess = () => {
+    handleCloseUpload()
+    // 调接口获取支付二维码
+    if (tryType === ITryType.Article) {
+      postCreateOrderByArticle(wantBuyGoodsId, (dataInfo as IArcticleInfo).Detail.ArticleId)
+    }
+    if (tryType === ITryType.Activity) {
+      postCreateOrderByActivity(wantBuyGoodsId, (dataInfo as IActivityTypeDetailRes).Detail.ActivityId)
+    }
+  }
+  // 关闭上传名片弹框
+  const handleCloseUpload = () => {
+    setVisibleUpload(false)
+  }
+  // 关闭申请试用弹框
+  const handleCloseApply = () => {
+    setVisibleApply(false)
+  }
+  // 点击购买畅读卡按钮
+  const handleOpenBuyModel = () => {
+    // 打开畅读卡弹框
+    setVisibleBuyCard(true)
+  }
+  // 点击支付
+  const handleClickPay = (GoodsId: number) => {
+    console.log('GoodsId', GoodsId)
+    setWantBuyGoodsId(GoodsId)
+    // 判断是否需要上传名片
+    if (dataInfo.IsNeedBusinessCard) {
+      setVisibleUpload(true)
+      return
+    }
+    // 调接口获取支付二维码
+    if (tryType === ITryType.Article) {
+      postCreateOrderByArticle(GoodsId, (dataInfo as IArcticleInfo).Detail.ArticleId)
+    }
+    if (tryType === ITryType.Activity) {
+      postCreateOrderByActivity(GoodsId, (dataInfo as IActivityTypeDetailRes).Detail.ActivityId)
+    }
+    setVisibleBuyCard(false)
+  }
+  // 申请试用
+  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) {
+      const detailId =
+        tryType === ITryType.Article
+          ? (dataInfo as IArcticleInfo).Detail.ArticleId
+          : (dataInfo as IActivityTypeDetailRes).Detail.ActivityId
+      postApplyTry({ ApplyMethod: 1, DetailId: detailId, TryType: tryType })
+      return
+    }
+    // HasPermission=7，弹表单填写，提交申请
+    setVisibleApply(true)
+  }
+
+  // 订单支付结果
+  const handleDoPayResult = (OrderRes: IOrderPayStatusRes) => {
+    // todo
+    console.log('OrderRes', OrderRes)
+    setPayInfo(OrderRes)
+    switch (OrderRes.OrderStatus) {
+      case EOrderStatus.Cancel:
+        console.log('已取消')
+        setVisibleResult(true)
+        setVisibleOrderCode(false)
+        break
+      case EOrderStatus.WaitPay:
+        console.log('待支付')
+        break
+      case EOrderStatus.Payed:
+        setVisibleResult(true)
+        setVisibleOrderCode(false)
+        break
+      case EOrderStatus.Refund:
+        console.log('已退款')
+        break
+      default:
+        console.log('未知状态')
+        break
+    }
+  }
+
+  return (
+    <>
+      <QRCodeModel
+        visible={visibleOrderCode}
+        codeUrl={articleOrderInfo?.Data.CodeUrl || activityOrderInfo?.Data.CodeUrl || ''}
+        orderCode={articleOrderInfo?.Data.OrderCode || activityOrderInfo?.Data.OrderCode || ''}
+        // countDown={todo}
+        onCloseModel={handleCloseCode}
+        onSendPayResult={handleDoPayResult}
+      />
+      <ApplyResult visible={visibleResult} info={payInfo} onCloseModel={handleCloseResult} />
+      <BuyModel
+        visible={visibleBuyCard}
+        goodsList={dataInfo.GoodsList}
+        payType={payType}
+        onCloseModel={handleCloseBuy}
+        handleCheckPay={handleClickPay}
+      />
+      <UploadInfoModel
+        visible={visibleUpload}
+        onCloseModel={handleCloseUpload}
+        handleSuccess={handleUploadCardSuccess}
+      />
+      <ApplyPermission
+        visible={visibleApply}
+        detailID={
+          tryType === ITryType.Article
+            ? (dataInfo as IArcticleInfo).Detail.ArticleId
+            : (dataInfo as IActivityTypeDetailRes).Detail.ActivityId
+        }
+        tryType={tryType}
+        onCloseModel={handleCloseApply}
+      />
+    </>
+  )
+}
+
+export default PayProcessModel

src/Material/components/YiDongModel.tsx

@@ -1,96 +0,0 @@
-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 { run } = useRequest(MaterialService.postApplyTry, {
-    manual: true,
-    onSuccess: res => {
-      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
-      handleToClose()
-      setImageUrl(undefined)
-    }
-  })
-  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

@@ -38,11 +38,11 @@
     .nopower-content-wrapper{
       text-align: center;
     }
-    .nopower-title{
+    .nopower-title,.nopower-activity-title{
       font-size: 18px;
       font-weight: bold;
       padding: 0 0 20px 0;
-    }
+    }    
     .btn-line{
       margin: 0 auto;
       width: 300px;
@@ -255,17 +255,21 @@
 }
 @media screen and (max-width: 768px) {
   .nopower-showwxpay-wrapper{
-    padding: 20px;
+    padding: 0 20px 20px 20px;
     :global{
       .nopower-big-img{
         max-width: 200px;
+        padding-top: 35px;
       }
       .nopower-content-wrapper{
-        margin: 25px auto 0 auto
+        margin: 0px auto 0 auto
       }
       .nopower-title{
         margin-bottom: 68px;
       }
+      .nopower-activity-title{
+        padding: 0 0 10px 0;
+      }
       .btn-line{
         margin: 0 auto;
         width: 252px;
@@ -276,7 +280,8 @@
       .nopower-bag-wrapper{
         background: linear-gradient(180deg, #FFFAF3 0%, #FFEFD9 100%);
         padding: 8px 12px;
-        margin: 35px auto 0 auto;
+        margin: 10px auto 0 auto;
+        min-width: 300px;
         .nopower-bag-img{
           margin-right: 7px;
         }        

src/NewPageHeader.tsx

@@ -6,6 +6,8 @@ import { Avatar, Button, Col, Row, message } from 'antd'
 import QrcodeIcon from 'assets/qrcode-icon.svg'
 import AppletImg from 'assets/applet.png'
 import OfficialImg from 'assets/official.png'
+import VipDay from 'assets/vipday.png'
+import VipMonth from 'assets/vipmonth.png'
 // import LogoImg from 'assets/logo.png'
 
 import { useLogin2p } from './Login2p/Login2pContext'
@@ -334,6 +336,16 @@ const NewPage: React.FC = props => {
                       </div>
                     )}
                   </div>
+                  {login2p.userInfo?.UserCardType !== 0 ? (
+                    <div className="person-vip-card-wrapper">
+                      {login2p.userInfo?.UserCardType === 1 ? (
+                        <img src={VipDay} alt="vip" className="person-vip-card-img" />
+                      ) : (
+                        <img src={VipMonth} alt="vip" className="person-vip-card-img" />
+                      )}
+                      <span className="person-vip-timetext">有效期至{login2p.userInfo?.UserCardEndDate}</span>
+                    </div>
+                  ) : null}
                   {/* <div className="person-power">
                   {login2p.userInfo?.PermissionName?.map((item, index) => (
                     <div className={item ? 'person-power-one' : ''} key={index}>

src/Personal/PersonalIndex.tsx

@@ -223,10 +223,16 @@ const PersonalIndex: React.FC = () => {
               <img src={EditSvg} alt="图标" className="edit-icon" />
             </span>
           </div>
-          <div className="vip-card-wrapper">
-            <img src={VipDay} alt="vip" className="vip-card-img" />
-            <span className="vip-timetext">有效期至2024.03.03 12:12:12</span>
-          </div>
+          {login2p.userInfo?.UserCardType !== 0 ? (
+            <div className="vip-card-wrapper">
+              {login2p.userInfo?.UserCardType === 1 ? (
+                <img src={VipDay} alt="vip" className="vip-card-img" />
+              ) : (
+                <img src={VipMonth} alt="vip" className="vip-card-img" />
+              )}
+              <span className="vip-timetext">有效期至{login2p.userInfo?.UserCardEndDate}</span>
+            </div>
+          ) : null}
           <div className="personal-menu-wrapper">
             {menuOption.map(item => (
               <div

src/Personal/components/Order.component.tsx

@@ -32,25 +32,19 @@ const OrderComponent: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // 切换tab
-  const handleCancelCollection = (articleID: number) => {
-    // const findIndex = listData.findIndex(item => item.ArticleId === articleID)
-    // if (findIndex === -1) return
-    // const newList = JSON.parse(JSON.stringify(listData))
-    // newList.splice(findIndex, 1)
-    // setListData(newList)
-  }
-
   const handleGetMore = () => {
     console.log(listLoading, hasMore)
     if (listLoading || !hasMore) return
     setCurrentPage(currentPage + 1)
     getOrderList(pageSize, currentPage + 1, orderType)
   }
+
   const orderTypeList = [
     { key: 1, value: '畅读卡订单' },
     { key: 2, value: '单场付费订单' }
   ]
+
+  // 切换tab
   const handleChangeOrderType = (type: number) => {
     setOrderType(type)
     setListData([])
@@ -58,7 +52,11 @@ const OrderComponent: React.FC = () => {
     getOrderList(pageSize, 1, type)
   }
   const handleToDetail = (item: IOrderListItem) => {
-    // todo
+    if (orderType === 1) return
+    if (item.Source === 'activity') {
+      // 活动
+      window.open(`${window.location.origin}/activity/detail/${item?.SourceId}`)
+    }
   }
   return (
     <Spin spinning={listLoading}>
@@ -87,11 +85,8 @@ const OrderComponent: React.FC = () => {
               <div className={styles['order-list-item']}>
                 <div className="order-item-title g-flex g-flex-between g-flex-v-center">
                   <div className="order-name">
-                    {orderType === 1 ? (
-                      '畅读卡'
-                    ) : (
-                      <img src={item.LabelKeywordImgLink} alt="图标" className="order-name-img" />
-                    )}
+                    {/* todo 这里后端返回文字，替换 */}
+                    {orderType === 1 ? '畅读卡' : '单场付费订单'}
                   </div>
                   <div className="order-status">{item.OrderStatusText}</div>
                 </div>

src/Personal/css/PersonalIndex.module.scss

@@ -18,7 +18,6 @@
       width: 299px;
       box-sizing: border-box;
       padding-bottom: 45px;
-      border: 1px solid red;
       .personal-head {
         width: 120px;
         height: 120px;
@@ -131,6 +130,7 @@
         }
         .vip-timetext{
           color:#F1A84A;
+          line-height: 20px;
           position: absolute;
           bottom: 15px;
           left: 18px;
@@ -164,7 +164,6 @@
       }
     }
     .personal-right-wrapper {
-      border: 1px solid blue;
       flex: 1;
       background: #ffffff;
       padding:20px;
@@ -206,10 +205,7 @@
       }
     }
     .personal-left {
-      margin-right: 32px;
-      // .personal-component-wrapper {
-      // border: 1px solid red;
-      // }
+      margin-right: 32px;      
     }
     .personal-right {
       width: 408px;
@@ -297,9 +293,6 @@
     }
   }
 }
-// .collection-wrapper {
-//   border: 1px solid red;
-// }
 .bd-none {
   border-bottom: none !important;
 }

src/styles/NewPage.module.scss

@@ -316,6 +316,23 @@
           }
         }
       }
+      .person-vip-card-wrapper{
+        width: 222px;
+        height: 87px;
+        margin: 10px auto 0 auto;
+        position: relative;
+        .person-vip-card-img{
+          width: 100%;
+          height: 100%;
+        }
+        .person-vip-timetext{
+          color:#F1A84A;
+          line-height: 20px;
+          position: absolute;
+          bottom: 15px;
+          left: 18px;
+        }
+      }
       .divide-line {
         margin: 20px 0 10px 0;
         width: 100%;