src/Activity/Activity.service.ts

@@ -156,6 +156,7 @@ export interface IActivityTypeListRes {
   IsShowResearchPoints: boolean // 是否显示研选扣点
 }
 export interface IActivityTypeDetailRes {
+  VivoPoints: IArticleListItemVivoPoints
   Detail: IActivityTypeDetail
   GoodsList: IGoodsListItem[] // 商品信息
   HasPermission: number //1:有该行业权限,正常展示，2：无该行业权限，不存在权益客户下（ficc），3:无该品类权限,已提交过申请，4：无该品类权限,未提交过申请，5：潜在客户，未提交过申请，6：潜在客户,已提交过申请
@@ -171,6 +172,16 @@ export interface IActivityTypeDetailRes {
   SellerMobile: string //销售电话
   SellerName: string //销售姓名
 }
+export interface IArticleListItemVivoPoints {
+  HavePoint: boolean
+  PointPermission: number // id
+  CompanyPoints: string // 报告链接
+  ActivityPoints: string // 报告链接
+  Title: string // 报告链接
+  ResourceUrl: string // 报告链接
+  PlaySeconds: string // 报告链接
+  Type: number // 报告标题
+}
 export interface IActivityTypeDetail extends IActivityDetialBase {
   IsNeedBusinessCard: boolean // 是否需要上传名片
   IsResearchPointsByUser: boolean //是否为扣用户点数的研选扣点
@@ -439,5 +450,11 @@ export const ActivityService = {
       url: `/user/email/binding`,
       method: 'post',
       data: { Email }
+    }),
+  postVivoPointRecord: (ActivityId: number): INewResponse =>
+    NewAxiosInstanceFunc({
+      url: `/activity/vivo_point_record`,
+      method: 'post',
+      data: { ActivityId }
     })
 }

src/Activity/ActivityTypeDetail.tsx

@@ -432,7 +432,13 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
                       )}
                     {!login2p.jwt && (
                       <div className="detail-btn-wrapper">
-                        <NButton type="primary" onClick={handleToShowMore} size="login-large" className="m-center">
+                        <NButton
+                          style={{ width: 300 }}
+                          type="primary"
+                          onClick={handleToShowMore}
+                          size="login-large"
+                          className="m-center"
+                        >
                           请登录后报名
                         </NButton>
                       </div>
@@ -441,6 +447,7 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
                     login2p.jwt &&
                     data?.HasPermission !== INewPermissionType.OK &&
                     data?.IsShowWxPay &&
+                    data?.Detail.ActiveState !== '3' &&
                     !media.isSmallMax ? (
                       <div className="activity-paynopermission-wrapper">
                         <div className="white-wrapper" />
@@ -458,8 +465,7 @@ const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
                 {!activityDetailLoading &&
                 login2p.jwt &&
                 data?.HasPermission !== INewPermissionType.OK &&
-                !data?.IsShowWxPay &&
-                !media.isSmallMax ? (
+                media.isSmallMax ? (
                   <NoPermission
                     hasPermission={data?.HasPermission}
                     detailID={activityID}

src/Activity/ActivityVideo.tsx

@@ -1,107 +1,51 @@
-import React, { useRef } from 'react'
+import React, { useRef, useEffect } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
 
-import { Col, Result, Row, Spin } from 'antd'
-
 import { useLogin2p } from 'Login2p/Login2pContext'
-import { WebNoAuthentication } from 'components/Empty'
 import { MicroRoadshowService } from 'Material/MicroRoadshow.service'
-import ActivityReplay from './components/ActivityReplay'
-import { ActivityService } from './Activity.service'
 import styles from './css/ActivityVideo.module.scss'
 
 export interface IActivityVideo {
-  videoID: number // 视频ID
+  VideoDetail?: any // 视频ID
 }
 /**活动类型列表 */
 const ActivityVideo: React.FC<IActivityVideo> = props => {
-  const { videoID } = props
-  const login2p = useLogin2p()
+  const { VideoDetail } = props
+
   const videoRef = useRef<HTMLVideoElement>(null)
 
-  // 视频详情
-  const { data: videoData, loading: videoLoading } = useRequest(ActivityService.getActivityVideoDetail, {
-    defaultParams: [videoID],
-    formatResult: response => response.data.Data
-  })
   // 视频播放记录
   const { run: applyVideoHistory } = useRequest(MicroRoadshowService.postVideoHistory, {
     manual: true
   })
 
-  const subTitle = () => {
-    if (videoData?.AuthInfo.HasPermission === 1) return
-    return (
-      <div>
-        <p>若想查看可以联系对口销售</p>
-        <p>申请开通对应的试用权限</p>
-      </div>
-    )
-  }
   const handleOnplay = () => {
     videoRef.current &&
       parseInt(videoRef.current.currentTime.toString()) === 0 &&
-      videoData &&
-      applyVideoHistory(videoData?.VideoDetail.ActivityId || videoData?.VideoDetail.Id, videoData?.VideoDetail.Type)
+      applyVideoHistory(
+        VideoDetail?.ActivityId || VideoDetail?.Id,
+        VideoDetail?.Type,
+        sessionStorage.getItem('invite_code') || ''
+      )
   }
   return (
     <div className={styles['activity-video-page']}>
-      <Row className="padding-t">
-        <Col
-          xs={{ span: 24, offset: 0 }}
-          sm={{ span: 24, offset: 0 }}
-          md={{ span: 24, offset: 0 }}
-          lg={{ span: 20, offset: 2 }}
-          xl={{ span: 20, offset: 2 }}
-        >
-          <div className="video-title">{videoData?.VideoDetail?.Title}</div>
-          <Row wrap={false} gutter={24}>
-            <Col flex={1}>
-              {login2p.jwt ? (
-                <>
-                  <Spin spinning={videoLoading}>
-                    <div className="act-video-wrapper">
-                      {videoData ? (
-                        videoData?.AuthInfo?.HasPermission === 1 ? (
-                          <video
-                            ref={videoRef}
-                            src={videoData?.VideoDetail.ResourceUrl}
-                            className="video-content"
-                            controls={true}
-                            controlsList="nodownload"
-                            autoPlay={true}
-                            loop={true}
-                            preload="auto"
-                            onContextMenu={e => {
-                              e.preventDefault()
-                              return false
-                            }}
-                            onPlay={handleOnplay}
-                          >
-                            <p> 当前浏览器不支持video标签 </p>
-                          </video>
-                        ) : (
-                          <Result
-                            status="403"
-                            title="您暂无权限查看此视频~"
-                            subTitle={subTitle()}
-                            style={{ margin: '5% auto' }}
-                          />
-                        )
-                      ) : null}
-                    </div>
-                  </Spin>
-                </>
-              ) : (
-                <WebNoAuthentication />
-              )}
-            </Col>
-            <Col flex={'475px'} xs={0} sm={0} md={0} lg={0} xl={24} xxl={24}>
-              <ActivityReplay />
-            </Col>
-          </Row>
-        </Col>
-      </Row>
+      <video
+        ref={videoRef}
+        src={VideoDetail?.ResourceUrl}
+        className="video-content"
+        controls={true}
+        controlsList="nodownload"
+        loop={true}
+        preload="auto"
+        onContextMenu={e => {
+          e.preventDefault()
+          return false
+        }}
+        onPlay={handleOnplay}
+      >
+        <p> 当前浏览器不支持video标签 </p>
+      </video>
     </div>
   )
 }

src/Activity/ActivityVideoAudio.tsx

@@ -0,0 +1,571 @@
+import React, { useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import useRequest from '@ahooksjs/use-request/es'
+import dayjs from 'dayjs'
+
+import { Col, Row, Tag, Spin, Modal, message } from 'antd'
+import { PlayCircleOutlined } from '@ant-design/icons'
+
+import { ReactComponent as CityImg } from 'assets/city.svg'
+import NewImg from 'assets/new.png'
+import NoPowerImg from 'assets/nopower.png'
+import ActivityVideo from './ActivityVideo'
+
+import { useLogin2p } from 'Login2p/Login2pContext'
+import { useMedia } from 'Context/Media/MediaContext'
+import { ActivityService, IActivityTypeDetailRes, IArticleListItem, IListndustrialItem } from './Activity.service'
+import NoPermission, { INewPermissionType, ISpecialType, ITryType } from 'Material/components/NoPermission'
+import AudioControler from './components/AudioControler'
+import ActivityBtnComponent, { IStateStringType } from './components/ActivityBtn.component'
+import ResearchActivity from 'Community/components/ResearchActivity'
+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 {
+  activityID: number
+}
+
+/**活动详情页 */
+const ActivityTypeDetail: React.FC<IActivityTypeDetail> = props => {
+  const { activityID } = props
+  const login2p = useLogin2p()
+  const history = useHistory()
+  const media = useMedia()
+
+  const [refreshFlag, setRefreshFlag] = useState<boolean>(false)
+  const [visibleLink, setVisibleLink] = useState<boolean>(false)
+  const [openContinuePay, setOpenContinuePay] = useState<boolean>(false) // 去继续支付
+  const [openPayProcess, setOpenPayProcess] = useState<boolean>(false) // 付费报名
+
+  useEffect(() => {
+    const code = sessionStorage.getItem('invite_code') || login2p.inviteCode
+    activityID && run(activityID, code || undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activityID])
+
+  // 活动详情
+  const {
+    data,
+    loading: activityDetailLoading,
+    refresh: refreshDetail,
+    run
+  } = useRequest(ActivityService.getActivityTypeDetail, {
+    manual: true,
+    formatResult: response => response.data.Data,
+    onSuccess: res => {
+      res?.Detail && setWxShare(res?.Detail.ActivityName, res?.Detail.ActivityTimeText, res?.Detail.ShareImg)
+      handleToOtherPage()
+    }
+  })
+  // 取消订单
+  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 = () => {
+    if (!data?.Detail.VideoDetail) return
+    const url = `${window.location.origin}/activity/video/${data?.Detail.VideoDetail.Id}`
+    window.open(url)
+  }
+  // 易董活动跳转地址
+  const handleToOtherPage = () => {
+    if (!data?.Detail?.YidongActivityUrl) return
+    const aLink = document.createElement('a')
+    aLink.href = data?.Detail.YidongActivityUrl
+    aLink.target = '_blank'
+    aLink.click()
+  }
+  // 是否存在多篇报告
+  const handleArticleLink = () => {
+    if (data?.Detail?.ArticleList.length === 1) {
+      const url = `${window.location.origin}/material/info/${data?.Detail?.ArticleList[0]?.ArticleId}`
+      window.open(url)
+    } else {
+      setVisibleLink(true)
+    }
+  }
+  const handleClickLink = (item: IArticleListItem) => {
+    const url = `${window.location.origin}/material/info/${item.ArticleId}`
+    window.open(url)
+  }
+  // 关闭多篇报告的打开
+  const handleToClose = () => {
+    setVisibleLink(false)
+  }
+
+  const handleToIndepthPage = (item: IListndustrialItem) => {
+    // 没有这个页面
+    if (!item.IsJump) return
+    // history.push(
+    //   `/indepth/info/${item.ChartPermissionId}/${item.IndustrialManagementId}${
+    //     login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''
+    //   }`
+    // )
+  }
+  const formatLinkText = (url: string) => {
+    return url.indexOf('http') >= 0 ? (
+      <a href={url} target="_blank" rel="noreferrer" className="detail-link">
+        {url}
+      </a>
+    ) : (
+      url
+    )
+  }
+  // 登录报名
+  const handleToShowMore = () => {
+    if (!login2p.jwt) {
+      history.push(`/login2p?next=${encodeURIComponent(window.location.pathname + window.location.search)}`)
+      return
+    }
+  }
+  const handleToRefresh = () => {
+    // 支付之后刷新页面
+    refreshDetail()
+    setRefreshFlag(!refreshFlag)
+    setOpenContinuePay(false)
+    setOpenPayProcess(false)
+  }
+
+  // 取消订单
+  const handleCancelOrder = () => {
+    if (!data?.OrderCode) return
+    postOrderCancel(data.OrderCode)
+  }
+  // 继续支付
+  const handleToContinuePay = () => {
+    if (!data?.OrderCode) return
+    console.log(data)
+
+    // 打开支付码
+    setOpenContinuePay(true)
+  }
+  // const formatCountdown = <Countdown countdown={data?.PayTimeCountdown || 0} />
+  // 点数不足付费报名
+  const handlePayForSignUp = () => {
+    setOpenPayProcess(true)
+  }
+  const parentMethod = () => {
+    setOpenPayProcess(false)
+  }
+
+  // 查看音视频扣点接口
+  const { run: postVivoPointRecord } = useRequest(ActivityService.postVivoPointRecord, {
+    manual: true,
+    formatResult: response => response.data,
+    onSuccess: res => {
+      handleToRefresh()
+    }
+  })
+
+  const clickBackHandler = () => {
+    postVivoPointRecord(data?.Detail?.ActivityId || 0)
+  }
+
+  return (
+    <div className={styles['activity-detail-page']}>
+      <Spin spinning={activityDetailLoading}>
+        <Row>
+          <Col
+            xs={{ span: 24, offset: 0 }}
+            sm={{ span: 24, offset: 0 }}
+            md={{ span: 24, offset: 0 }}
+            lg={{ span: 20, offset: 2 }}
+            xl={{ span: 20, offset: 2 }}
+          >
+            <Row wrap={false} gutter={24} justify="start">
+              <Col flex={1} className="m-b-sm">
+                {/* 音视频播放 无权限 */}
+                {!media.isSmallMax && (
+                  <div className="nopower-box">
+                    {data?.Detail ? (
+                      <div>
+                        {data.OrderCode && data.PayTimeCountdown > 0 && (
+                          <div className="activity-wait-pay-wrapper">
+                            <div className="com-fw-bold com-fz18 m-b-xs">待支付</div>
+                            <div className="com-fw-bold com-fz18">
+                              剩余支付时间：
+                              <span className="countdown-text">
+                                <Countdown countdown={data.PayTimeCountdown} onTimeChange={refreshDetail} />
+                              </span>
+                            </div>
+                            <div className="g-flex g-flex-center">
+                              <NButton
+                                type="default"
+                                size="large"
+                                className="m-t-md m-r-md"
+                                onClick={handleCancelOrder}
+                              >
+                                取消订单
+                              </NButton>
+                              <NButton type="primary" size="large" className="m-t-md" onClick={handleToContinuePay}>
+                                去支付
+                              </NButton>
+                            </div>
+                          </div>
+                        )}
+                        {/* 没有扣过点 并且点数充足的情况下 */}
+                        {!data.VivoPoints.HavePoint && data.VivoPoints.PointPermission === 1 && (
+                          <div className={` ${styles['nopower-showwxpay-wrapper']} `}>
+                            <img src={NoPowerImg} alt="无权限" className="nopower-big-img" />
+                            <div className="nopower-title">确定查看此活动回放吗？</div>
+                            <div className="prompt-box">
+                              <span>当前剩余点数：</span>
+                              <span>{data.VivoPoints.CompanyPoints}</span>
+                            </div>
+                            <div className="prompt-box">
+                              <span>本次查看需扣除点数：</span>
+                              <span>{data.VivoPoints.ActivityPoints}</span>
+                            </div>
+                            <div className="determine-btn" onClick={clickBackHandler}>
+                              确定
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    ) : null}
+                    {!activityDetailLoading &&
+                    !data?.VivoPoints.HavePoint &&
+                    (data?.VivoPoints.PointPermission === 2 || data?.VivoPoints.PointPermission === 3) &&
+                    login2p.jwt &&
+                    data?.IsShowWxPay &&
+                    !media.isSmallMax ? (
+                      <div className="activity-paynopermission-wrapper">
+                        <div className="white-bg">
+                          <PayNoPermission
+                            dataInfo={data as IActivityTypeDetailRes}
+                            tryType={ITryType.ActivityVideoAudio}
+                            onRefresh={handleToRefresh}
+                          />
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                )}
+
+                {data?.Detail && data?.VivoPoints.HavePoint ? (
+                  <>
+                    {data?.Detail.VideoDetail && (
+                      <div>
+                        <ActivityVideo VideoDetail={data?.Detail.VideoDetail} />
+                      </div>
+                    )}
+                    {data?.Detail.VoiceDetail && (
+                      <div className="audio-div">
+                        <AudioControler audioDetail={data?.Detail.VoiceDetail} />
+                        <p className="audio-title">{data?.Detail.VoiceDetail.Name}</p>
+                      </div>
+                    )}
+                  </>
+                ) : null}
+                {data?.Detail ? (
+                  <div
+                    style={{ minHeight: '0vh' }}
+                    className={`activity-detail-content ${
+                      data?.HasPermission !== INewPermissionType.OK && data?.IsShowWxPay && !media.isSmallMax
+                        ? 'activity-content-nopower'
+                        : ''
+                    }`}
+                  >
+                    <div className="activity-detail-title">
+                      {data?.Detail?.IsResearchPoints ? (
+                        <span className={`mfyx-label-normal mfyx-label-kd no-wrap`}>扣点</span>
+                      ) : data?.Detail?.IsExternalLabel ? (
+                        <span className={`mfyx-label-normal mfyx-label-wbzy no-wrap`}>外部资源</span>
+                      ) : null}
+                      <span className="com-fz18">{data?.Detail.ActivityName}</span>
+                    </div>
+                    <div className="activity-detail-list">
+                      <div className="activity-detail-line">
+                        <span className="activity-detail-label">活动类型：</span>
+                        <span className="g-va-middle no-wrap">{data?.Detail.ActivityTypeName}</span>
+                        {data?.Detail.City && (
+                          <div className="city-wrapper g-va-middle">
+                            <CityImg fill="#faa12f" className="city-img" />
+                            <span className="g-va-middle">{data?.Detail.City}</span>
+                          </div>
+                        )}
+                      </div>
+                      <div className="activity-detail-line">
+                        <span className="activity-detail-label">产业标签：</span>
+                        {data?.Detail.Label && <span className="m-r-md"> {data?.Detail.Label}</span>}
+                        <div>
+                          {data?.Detail?.Listndustrial?.map(item => (
+                            <React.Fragment key={item.IndustrialManagementId}>
+                              <Tag
+                                color={item.IsJump ? 'blue' : 'default'}
+                                className={`tag-ml ${item.IsJump ? 'com-cursor-p' : ''}`}
+                                onClick={handleToIndepthPage.bind(this, item)}
+                              >
+                                {item.IndustryName}
+                              </Tag>
+                              {item.IndustryNewLabel && <img src={NewImg} alt="新的" className="new-flag" />}
+                            </React.Fragment>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="activity-detail-line">
+                        <span className="activity-detail-label">活动时间：</span>
+                        {data?.Detail.ActivityTimeText}
+                      </div>
+
+                      {data?.Detail.DistinguishedGuest && data?.HasPermission === INewPermissionType.OK && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">嘉宾：</span>
+                          {data?.Detail.DistinguishedGuest}
+                        </div>
+                      )}
+                      {data?.Detail.Host && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">主持人：</span>
+                          {data?.Detail.Host}
+                        </div>
+                      )}
+                      {data?.Detail.Speaker && data?.HasPermission === INewPermissionType.OK && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">主讲人：</span>
+                          {data?.Detail.Speaker}
+                        </div>
+                      )}
+                      {data?.Detail.Expert && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">专家背景：</span>
+                          <div dangerouslySetInnerHTML={{ __html: data?.Detail.Expert }} className="reset-pm" />
+                        </div>
+                      )}
+                      {login2p.jwt && data?.Detail.Address && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">活动地点：</span>
+                          {data.Detail.ActivityTypeId === 4
+                            ? data.Detail.IsSignup
+                              ? data?.Detail.Address
+                              : '请报名获取'
+                            : data?.Detail.Address}
+                        </div>
+                      )}
+
+                      {data?.Detail.MainlandTell && data?.HasPermission === INewPermissionType.OK && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">大陆拨入：</span>
+                          <span className="detail-link">{data?.Detail.MainlandTell}</span>
+                        </div>
+                      )}
+                      {data?.Detail.HongKongTell && data?.HasPermission === INewPermissionType.OK && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">香港拨入：</span>
+                          <span className="detail-link">{data?.Detail.HongKongTell}</span>
+                        </div>
+                      )}
+                      {data?.Detail.TaiwanTell && data?.HasPermission === INewPermissionType.OK && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">台湾拨入：</span>
+                          <span className="detail-link">{data?.Detail.TaiwanTell}</span>
+                        </div>
+                      )}
+                      {data?.Detail.AmericaTell && data?.HasPermission === INewPermissionType.OK && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">美国拨入：</span>
+                          <span className="detail-link">{data?.Detail.AmericaTell}</span>
+                        </div>
+                      )}
+                      {login2p.jwt &&
+                        data?.Detail.ParticipationCode &&
+                        data?.HasPermission === INewPermissionType.OK && (
+                          <div className="activity-detail-line">
+                            <span className="activity-detail-label">拨入密码：</span>
+                            {!!data?.Detail.IsLimitPeople
+                              ? data.Detail.IsSignup
+                                ? data?.Detail.ParticipationCode
+                                : '请报名获取'
+                              : data?.Detail.ParticipationCode}
+                          </div>
+                        )}
+                      {login2p.jwt &&
+                        data?.Detail.OnlineParticipation &&
+                        data?.HasPermission === INewPermissionType.OK && (
+                          <div className="activity-detail-line">
+                            <span className="activity-detail-label">网络参会：</span>
+                            {!!data?.Detail.IsLimitPeople &&
+                            !data.Detail.IsSignup &&
+                            [1, 2].includes(data.Detail.ActivityTypeId) ? (
+                              '请报名获取'
+                            ) : (
+                              <a
+                                href={data?.Detail.OnlineParticipation}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="detail-link"
+                              >
+                                {data?.Detail.OnlineParticipation}
+                              </a>
+                            )}
+                          </div>
+                        )}
+                      {login2p.jwt &&
+                        data?.Detail.LinkParticipants &&
+                        data?.HasPermission === INewPermissionType.OK && (
+                          <div className="activity-detail-line">
+                            <span className="activity-detail-label">链接参会：</span>
+                            {!!data?.Detail.IsLimitPeople
+                              ? data.Detail.IsSignup
+                                ? formatLinkText(data?.Detail.LinkParticipants)
+                                : '请报名获取'
+                              : formatLinkText(data?.Detail.LinkParticipants)}
+                          </div>
+                        )}
+                      {(data?.Detail?.ArticleList?.length || 0) > 0 &&
+                        data?.HasPermission === INewPermissionType.OK && (
+                          <div className="activity-detail-line">
+                            <span className="activity-detail-label">相关报告：</span>
+                            <div onClick={handleArticleLink} className="detail-btn-link">
+                              点击查看
+                            </div>
+                          </div>
+                        )}
+                      {data?.Detail.Theme && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">主题：</span>
+                          <div dangerouslySetInnerHTML={{ __html: data?.Detail.Theme }} className="reset-pm" />
+                        </div>
+                      )}
+                      {login2p.jwt &&
+                        data?.Detail.TencentConferenceNumber &&
+                        data?.HasPermission === INewPermissionType.OK && (
+                          <div className="activity-detail-line">
+                            <span className="activity-detail-label">腾讯会议号：</span>
+                            <div className="detail-link">
+                              {!!data?.Detail.IsLimitPeople || data.Detail.IsYidongConduct
+                                ? data.Detail.IsSignup
+                                  ? data?.Detail.TencentConferenceNumber
+                                  : '请报名获取'
+                                : data?.Detail.TencentConferenceNumber}
+                            </div>
+                          </div>
+                        )}
+                      {data?.Detail.AppAttendance && data?.HasPermission === INewPermissionType.OK && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">App参会：</span>
+                          {data.Detail.AppAttendance}
+                        </div>
+                      )}
+                      {login2p.jwt &&
+                        data?.Detail.ConferencePassword &&
+                        data?.HasPermission === INewPermissionType.OK && (
+                          <div className="activity-detail-line">
+                            <span className="activity-detail-label">会议密码：</span>
+                            {!!data?.Detail.IsLimitPeople
+                              ? data.Detail.IsSignup
+                                ? data.Detail.ConferencePassword
+                                : '请报名获取'
+                              : data.Detail.ConferencePassword}
+                          </div>
+                        )}
+                      {data?.Detail.Highlights && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">活动亮点：</span>
+                          <div dangerouslySetInnerHTML={{ __html: data?.Detail.Highlights }} className="reset-pm" />
+                        </div>
+                      )}
+                      {data?.Detail.Remarks && (
+                        <div className="activity-detail-line">
+                          <span className="activity-detail-label">备注：</span>
+                          <div dangerouslySetInnerHTML={{ __html: data?.Detail.Remarks }} className="reset-pm" />
+                        </div>
+                      )}
+                    </div>
+                    {/* {login2p.jwt &&
+                      data.HasPermission === INewPermissionType.OK &&
+                      data?.Detail.ActiveState !== IStateStringType.End &&
+                      data?.Detail && (
+                        <div className="detail-btn-wrapper">
+                          <ActivityBtnComponent
+                            item={data?.Detail}
+                            btnGrous="detail"
+                            onChangeSomething={refreshDetail}
+                            onNeedToDoSome={handlePayForSignUp}
+                            isType="详情"
+                          />
+                        </div>
+                      )} */}
+                    {!login2p.jwt && (
+                      <div className="detail-btn-wrapper">
+                        <NButton
+                          style={{ width: 300 }}
+                          type="primary"
+                          onClick={handleToShowMore}
+                          size="login-large"
+                          className="m-center"
+                        >
+                          请登录后查看
+                        </NButton>
+                      </div>
+                    )}
+                  </div>
+                ) : null}
+
+                {!activityDetailLoading &&
+                login2p.jwt &&
+                data?.HasPermission !== INewPermissionType.OK &&
+                media.isSmallMax ? (
+                  <NoPermission
+                    hasPermission={data?.HasPermission}
+                    detailID={activityID}
+                    specialType={
+                      data?.IsResearchSpecial
+                        ? ISpecialType.ResearchSpecial
+                        : data?.IsResearch
+                        ? ISpecialType.ResearchActivity
+                        : ISpecialType.Activity
+                    }
+                    tryType={ITryType.ActivityVideoAudio}
+                    border={true}
+                  />
+                ) : null}
+                {!activityDetailLoading && !!data ? (
+                  <PayProcessModel
+                    dataInfo={data as IActivityTypeDetailRes}
+                    tryType={ITryType.ActivityVideoAudio}
+                    open={openPayProcess}
+                    continuePayFlag={openContinuePay}
+                    onRefresh={handleToRefresh}
+                    parentMethod={parentMethod}
+                  />
+                ) : null}
+              </Col>
+              <Col flex={'542px'} xs={0} sm={0} md={0} lg={0} xl={24} xxl={24}>
+                <ResearchActivity isRefresh={refreshFlag} />
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      </Spin>
+      <Modal
+        open={visibleLink}
+        title="请选择报告"
+        onCancel={handleToClose}
+        destroyOnClose={true}
+        maskClosable={false}
+        footer={null}
+        centered
+      >
+        <div>
+          {data?.Detail?.ArticleList?.map(item => (
+            <p key={item.ArticleId} onClick={handleClickLink.bind(this, item)} className="detail-dialog-link">
+              {item.Title}
+            </p>
+          ))}
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default ActivityTypeDetail

src/Activity/components/AudioControler.tsx

@@ -37,7 +37,12 @@ const AudioControler: React.FC<AudioControlerProp> = ({ audioDetail, isPlay = fa
   }, [])
   useEffect(() => {
     if (isPlay && audioDetail) {
-      audioDetail?.Type && applyRecord(audioDetail.SourceId || audioDetail.ActivityId, audioDetail?.Type)
+      audioDetail?.Type &&
+        applyRecord(
+          audioDetail.SourceId || audioDetail.ActivityId,
+          audioDetail?.Type,
+          sessionStorage.getItem('invite_code') || ''
+        )
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [audioDetail])
@@ -104,7 +109,11 @@ const AudioControler: React.FC<AudioControlerProp> = ({ audioDetail, isPlay = fa
       audioRef.current &&
         parseInt(audioRef.current.currentTime.toString()) === 0 &&
         audioDetail?.Type &&
-        applyRecord(audioDetail.SourceId || audioDetail.ActivityId, audioDetail.Type)
+        applyRecord(
+          audioDetail.SourceId || audioDetail.ActivityId,
+          audioDetail.Type,
+          sessionStorage.getItem('invite_code') || ''
+        )
       audioRef.current?.play().then(() => {
         setPlayState(true)
       })

src/Activity/css/ActivityTypeDetail.module.scss

@@ -61,6 +61,14 @@
     }
     .audio-div {
       width: 100%;
+      background: #ffffff;
+      padding: 20px;
+      margin-bottom: 20px;
+      border-radius: 8px;
+      .audio-title {
+        font-size:18px;
+        margin: 15px 0 5px;
+      }
       .custom-video {
         width: 100%;
         box-sizing: border-box;
@@ -178,6 +186,49 @@
         overflow: auto;
       }
     }
+    
+    .nopower-box {
+      background-color: #fff;
+      overflow: hidden;
+      margin-bottom: 20px;
+      border-radius: 8px;
+    }
+  }
+  .nopower-showwxpay-wrapper{
+    padding: 0 20px 20px 20px;
+    background-color: #fff;
+    :global{
+      .nopower-big-img{
+        width: 400px;
+        display: block;
+        margin: 0 auto 20px auto;
+      }
+      .nopower-title,.nopower-activity-title{
+        font-size: 18px;
+        font-weight: bold;
+        text-align: center;
+      }
+      .prompt-box {
+        color: #333;
+        font-size: 14px;
+        margin-top: 10px;
+        text-align: center;
+        :nth-child(2){
+          color: #FAA12F;
+        }
+      }
+      .determine-btn {
+        width: 250px;
+        height: 34px;
+        background-color: #FAA12F;
+        border-radius: 4px;
+        margin: 10px auto;
+        text-align: center;
+        line-height: 34px;
+        color: #fff;
+        cursor: pointer;
+      }    
+    }
   }
 }
 .special-tips-wrapper {

src/Activity/css/ActivityVideo.module.scss

@@ -1,25 +1,17 @@
 .activity-video-page {
-  min-height: calc(100vh - 76px);
+  width: 100%;
+  height: 600px;
+  padding: 20px;
   background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 20px;
   :global {
-    .video-title {
-      font-weight: bold;
-      font-size: 20px;
-      padding: 10px 0;
-    }
-    .act-video-wrapper {
-      position: relative;
-      width: 100%;
-      height: 0;
-      padding-bottom: 56.3%;
       .video-content {
-        position: absolute;
-        left: 0;
-        top: 0;
+    
         width: 100%;
         height: 100%;
       }
-    }
   }
 }
 @media screen and (max-width: 1024px) {

src/Column/ColumnDetail.tsx

@@ -44,27 +44,6 @@ const ColumnDetail: React.FC<IColumnDetailProps> = props => {
     refreshArcticleDetail()
   }
   const formatRender = (data: IColumnDetail) => {
-    if (data.HasPermission && data.HasPermission !== ColumnHasPermissionType.OK && !data?.IsShowWxPay) {
-      return (
-        <div className={styles['art-nopower-bg']}>
-          {/* {data?.IsShowWxPay && !media.isSmallMax ? ( // 暂时这么写
-            <PayNoPermission
-              dataInfo={data as IColumnDetail}
-              tryType={ITryType.YanxuanSpecial}
-              border={true}
-              onRefresh={handleToRefresh}
-            />
-          ) : ( */}
-          <NoPermission
-            hasPermission={data?.HasPermission}
-            detailID={data.Id}
-            specialType={ISpecialType.YanxuanSpecial}
-            tryType={ITryType.YanxuanSpecial}
-            border={true}
-          />
-        </div>
-      )
-    }
     if (login2p.userInfo?.UserId === data.UserId || data.IsApprovalAdmin || data.Status === 3) {
       return (
         <div className={`${styles['columndetail-page']}`}>
@@ -84,6 +63,17 @@ const ColumnDetail: React.FC<IColumnDetailProps> = props => {
       <ValidateEmpty loading={loading} data={data}>
         {data && formatRender(data)}
       </ValidateEmpty>
+      {data?.HasPermission && data?.HasPermission !== ColumnHasPermissionType.OK && media.isSmallMax && (
+        <div className={styles['art-nopower-bg']} style={{ marginTop: 20 }}>
+          <NoPermission
+            hasPermission={data?.HasPermission}
+            detailID={data.Id}
+            specialType={ISpecialType.YanxuanSpecial}
+            tryType={ITryType.YanxuanSpecial}
+            border={true}
+          />
+        </div>
+      )}
       {data?.Status === 3 && data.HasPermission === ColumnHasPermissionType.OK && (
         <div className={`${styles['statement-wrapper']}`}>
           <strong>郑重声明：</strong>

src/Column/components/ColumnContent.tsx

@@ -25,6 +25,7 @@ import 'froala-editor/css/plugins/file.min.css'
 import 'froala-editor/css/plugins/colors.min.css'
 import 'froala-editor/css/plugins/emoticons.min.css'
 
+import { useMedia } from 'Context/Media/MediaContext'
 export enum ColumnType {
   Note = 1,
   Viewpoint = 2
@@ -45,7 +46,7 @@ const ColumnContent: React.FC<IColumnContentProps> = props => {
   const history = useHistory()
   const [bigImg, setBigImg] = useState<string>() // 展开的图片
   const [visibleAsk, setVisibleAsk] = useState(false)
-
+  const media = useMedia()
   // 收藏/取消收藏（研选专栏）
   const { run: applyCollect } = useRequest(ColumnService.postColumnCollect, {
     manual: true,
@@ -251,7 +252,8 @@ const ColumnContent: React.FC<IColumnContentProps> = props => {
         />
       </Watermark>
       {(detail as IColumnDetail)?.IsShowWxPay &&
-        (detail as IColumnDetail)?.HasPermission !== INewPermissionType.OK && ( // 暂时这么写
+        (detail as IColumnDetail)?.HasPermission !== INewPermissionType.OK &&
+        !media.isSmallMax && ( // 暂时这么写
           <PayNoPermission
             dataInfo={detail as IColumnDetail}
             tryType={ITryType.YanxuanSpecial}

src/Community/css/ResearchActivity.module.scss

@@ -40,14 +40,14 @@
       }
     }
     .act-online-item {
-      border-top: 4px solid #333333;
+      border-top: 4px solid #faa12f;
       .research-act-state {
         background: #fff6dd;
         color: #faa12f;
       }
     }
     .act-underline-item {
-      border-top: 4px solid #333333;
+      border-top: 4px solid #faa12f;
       .research-act-state {
         background: #fff1e9;
         color: #e37318;

src/Material/Material.service.ts

@@ -349,12 +349,13 @@ export const MaterialService = {
   postCreateOrderByActivity: (
     GoodsId: number,
     SourceId: number,
-    InviteShareCode: string | null
+    InviteShareCode: string | null,
+    Source?: string
   ): INewResponse<IOrderInfoRes> =>
     NewAxiosInstanceFunc({
       url: `/order/addByActivity`,
       method: 'post',
-      data: { GoodsId, SourceId, InviteShareCode }
+      data: { GoodsId, SourceId, InviteShareCode, Source }
     }),
   postCreateOrderByYanXuan: (
     GoodsId: number,

src/Material/MaterialInfo.tsx

@@ -120,7 +120,53 @@ const MaterialInfo: React.FC<IMaterialInfoProps> = props => {
     <Spin spinning={infoLoading}>
       <AskAdd visible={visibleAsk} ID={props.articleID} onApply={handleApplyComment} onCloseModel={handleOkAsk} />
       <ValidateEmpty loading={infoLoading} data={data}>
-        {data?.HasPermission && data?.HasPermission !== INewPermissionType.OK && !data?.IsShowWxPay ? (
+        <div className={`${media.isSmallMax ? styles['research-container-moblie'] : styles['art-white-bg']}`}>
+          {login2p.jwt && data?.HasPermission && data?.HasPermission === INewPermissionType.OK ? (
+            <div className={styles['material-info-option']}>
+              <span className="material-option-item" onClick={() => setVisibleAsk(true)}>
+                <img src={CommentFillSvg} alt="icon" className="option-icon" />
+                <span className="option-text">留言</span>
+              </span>
+              <span className="divide-line" />
+              {data?.Detail?.IsApplyAppointmentExpert && (
+                <>
+                  <span className="material-option-item" onClick={handleToFindExpert}>
+                    <img src={FindExpertSvg} alt="icon" className="option-icon" />
+                    <span className="option-text">约访专家</span>
+                  </span>
+                  <span className="divide-line" />
+                </>
+              )}
+              <span className="material-option-item" onClick={handleToApplyCollect}>
+                {data?.Detail.IsCollect ? (
+                  <StarFilled size={16} className={`option-icon collect-color`} />
+                ) : (
+                  <StarOutlined size={16} className="option-icon" />
+                )}
+                <span className="option-text option-text-ml">{data?.Detail.IsCollect ? '已' : ''}收藏</span>
+              </span>
+            </div>
+          ) : null}
+          {data && <Research info={data as IArcticleInfo} handleToRefresh={handleToRefresh} />}
+          {data?.HasPermission && data?.HasPermission === INewPermissionType.OK && (
+            <div className={`${styles['statement-wrapper']}`}>
+              <strong>郑重声明：</strong>
+              <p>
+                察研科技研选平台（以下简称“本平台”）所载内容仅供上海察研科技有限公司（以下简称“察研科技”）正式签约客户参考使用，察研科技不因任何机构或个人登录或浏览本页面内容而将该机构或个人视为察研科技的服务对象。
+              </p>
+              <p>
+                本平台所载信息为用户投稿、公开信息及从第三方合法取得的市场、行业及企业相关等信息，上述信息涉及的观点、陈述、判断等与察研科技立场无关，察研科技对此表述中立。察研科技并不对上述信息的准确性、真实性、可用性、安全性、完整性、正当性做出保证，您应当自行决定是否采纳并自行承担相应的责任。察研科技不对您因使用察研科技提供的任何信息做出的任何决策承担责任。
+              </p>
+              <p>
+                本平台所载信息、意见不构成任何买卖证券、基金及其他金融工具的投资决策建议或推荐，且在任何时候均不构成对任何人具有针对性的、指导具体投资的操作意见，您应当对本平台中的信息和意见进行评估，全面认识金融市场的风险收益特征，根据自身情况自主作出决策并自行承担风险。市场有风险，投资需谨慎。
+              </p>
+              <p>
+                未经察研科技书面许可，任何机构或个人不得以翻版、复制、发表、引用或再次分发他人等任何形式侵犯本平台发布的所有内容的版权。如因侵权行为给察研科技造成任何直接或间接的损失，察研科技保留追究一切法律责任的权利。
+              </p>
+            </div>
+          )}
+        </div>
+        {data?.HasPermission && data?.HasPermission !== INewPermissionType.OK && media.isSmallMax ? (
           <div className={styles['art-nopower-bg']}>
             <NoPermission
               hasPermission={data?.HasPermission}
@@ -131,54 +177,7 @@ const MaterialInfo: React.FC<IMaterialInfoProps> = props => {
               border={true}
             />
           </div>
-        ) : (
-          <div className={styles['art-white-bg']}>
-            {login2p.jwt && data?.HasPermission && data?.HasPermission === INewPermissionType.OK ? (
-              <div className={styles['material-info-option']}>
-                <span className="material-option-item" onClick={() => setVisibleAsk(true)}>
-                  <img src={CommentFillSvg} alt="icon" className="option-icon" />
-                  <span className="option-text">留言</span>
-                </span>
-                <span className="divide-line" />
-                {data?.Detail?.IsApplyAppointmentExpert && (
-                  <>
-                    <span className="material-option-item" onClick={handleToFindExpert}>
-                      <img src={FindExpertSvg} alt="icon" className="option-icon" />
-                      <span className="option-text">约访专家</span>
-                    </span>
-                    <span className="divide-line" />
-                  </>
-                )}
-                <span className="material-option-item" onClick={handleToApplyCollect}>
-                  {data?.Detail.IsCollect ? (
-                    <StarFilled size={16} className={`option-icon collect-color`} />
-                  ) : (
-                    <StarOutlined size={16} className="option-icon" />
-                  )}
-                  <span className="option-text option-text-ml">{data?.Detail.IsCollect ? '已' : ''}收藏</span>
-                </span>
-              </div>
-            ) : null}
-            {data && <Research info={data as IArcticleInfo} handleToRefresh={handleToRefresh} />}
-            {data?.HasPermission && data?.HasPermission === INewPermissionType.OK && (
-              <div className={`${styles['statement-wrapper']}`}>
-                <strong>郑重声明：</strong>
-                <p>
-                  察研科技研选平台（以下简称“本平台”）所载内容仅供上海察研科技有限公司（以下简称“察研科技”）正式签约客户参考使用，察研科技不因任何机构或个人登录或浏览本页面内容而将该机构或个人视为察研科技的服务对象。
-                </p>
-                <p>
-                  本平台所载信息为用户投稿、公开信息及从第三方合法取得的市场、行业及企业相关等信息，上述信息涉及的观点、陈述、判断等与察研科技立场无关，察研科技对此表述中立。察研科技并不对上述信息的准确性、真实性、可用性、安全性、完整性、正当性做出保证，您应当自行决定是否采纳并自行承担相应的责任。察研科技不对您因使用察研科技提供的任何信息做出的任何决策承担责任。
-                </p>
-                <p>
-                  本平台所载信息、意见不构成任何买卖证券、基金及其他金融工具的投资决策建议或推荐，且在任何时候均不构成对任何人具有针对性的、指导具体投资的操作意见，您应当对本平台中的信息和意见进行评估，全面认识金融市场的风险收益特征，根据自身情况自主作出决策并自行承担风险。市场有风险，投资需谨慎。
-                </p>
-                <p>
-                  未经察研科技书面许可，任何机构或个人不得以翻版、复制、发表、引用或再次分发他人等任何形式侵犯本平台发布的所有内容的版权。如因侵权行为给察研科技造成任何直接或间接的损失，察研科技保留追究一切法律责任的权利。
-                </p>
-              </div>
-            )}
-          </div>
-        )}
+        ) : null}
       </ValidateEmpty>
     </Spin>
   )

src/Material/MicroRoadshow.service.ts

@@ -21,6 +21,7 @@ export interface IRoadshowResponse {
 }
 
 export interface IRoadshowistItem {
+  LabelKeywordImgLink: string
   ActivityId: number //活动ID
   AuthInfo: IAuthInfo
   BackgroundImg: string //背景图片
@@ -75,10 +76,10 @@ export const MicroRoadshowService = {
       method: 'post',
       data: { SourceId, SourceType } // SourceType-视频来源: 1-音频; 2-活动视频; 3-微路演视频
     }),
-  postVideoHistory: (SourceId: number, SourceType: number, PlaySeconds?: number): INewResponse =>
+  postVideoHistory: (SourceId: number, SourceType: number, InviteShareCode?: string): INewResponse =>
     NewAxiosInstanceFunc({
       url: `/micro_roadshow/videoHistory/add`,
       method: 'post',
-      data: { SourceId, SourceType, PlaySeconds }
+      data: { SourceId, SourceType, InviteShareCode }
     })
 }

src/Material/components/ApplyResult.tsx

@@ -55,7 +55,7 @@ const ApplyResult: React.FC<IApplyPermissionProps> = props => {
             </div>
           </>
         )}
-        {info.Source === 'activity' && (
+        {(info.Source === 'activity' || info.Source === 'activityvoice' || info.Source === 'activityvideo') && (
           <>
             <div className="paymodel-title">
               {info.OrderStatus === EOrderStatus.Payed ? (
@@ -63,9 +63,11 @@ const ApplyResult: React.FC<IApplyPermissionProps> = props => {
                   <img src={SuccessSvg} alt="图标" className="paymodel-success-icon" />
                   <span>{info.IsPublicActivitie ? '畅读卡购买成功' : '支付成功'}</span>
                   {info.IsPublicActivitie && <div className="paymodel-text">有效期至：{info.EndDate}</div>}
-                  <div className="paymodel-text">
-                    {info.IsSignUp ? '您已成功报名此活动' : '请到活动页面选择参会方式'}
-                  </div>
+                  {info.Source === 'activity' && (
+                    <div className="paymodel-text">
+                      {info.IsSignUp ? '您已成功报名此活动' : '请到活动页面选择参会方式'}
+                    </div>
+                  )}
                 </div>
               ) : (
                 <>

src/Material/components/NoPermission.tsx

@@ -46,7 +46,8 @@ export enum ITryType {
   ReportSelection = 'ReportSelection', // 报告精选
   ProductInterior = 'ProductInterior', // 产品内测
   Meetingreviewchapt = 'Meetingreviewchapt', // 晨会精华
-  YanxuanSpecial = 'YanxuanSpecial' // 研选专栏报告
+  YanxuanSpecial = 'YanxuanSpecial', // 研选专栏报告
+  ActivityVideoAudio = 'ActivityVideoAudio' // 活动视频
 }
 interface INoPermissionProps {
   hasPermission: number | undefined

src/Material/components/PayNoPermission.tsx

@@ -123,6 +123,8 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
   const handleOpenBuyModel = () => {
     if (tryType === ITryType.Activity) {
       applyActivityCheck((dataInfo as IActivityTypeDetailRes).Detail.ActivityId)
+    } else if (tryType === ITryType.ActivityVideoAudio) {
+      setVisibleBuyCard(true)
     } else {
       //已有归属机构 这个在前的
       if ((dataInfo as IColumnDetail).Detail.IsNeedBusinessCard || (dataInfo as IArcticleInfo).IsNeedBusinessCard) {
@@ -198,95 +200,135 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
         {tryType !== ITryType.Activity ? <img src={NoPowerImg} alt="无权限" className="nopower-big-img" /> : null}
         <div className="nopower-content-wrapper">
           <div className={tryType !== ITryType.Activity ? 'nopower-title' : 'nopower-activity-title'}>
-            {tryType === ITryType.Activity ? '暂无权限参加此活动' : '暂无权限查看完整报告'}
+            {tryType === ITryType.Activity
+              ? '暂无权限参加此活动'
+              : tryType === ITryType.ActivityVideoAudio
+              ? '暂无权限查看活动回放'
+              : '暂无权限查看完整报告'}
           </div>
           <div className="nopower-text">
-            {payType === PayType.Card ? (
+            {tryType === ITryType.ActivityVideoAudio ? (
               <>
-                <span>您可以购买畅读卡后查看</span>
-                <span className="nopower-red">（{dataInfo.PopupPriceMsg}）</span>
-                <Tooltip
-                  title={
-                    <div>
-                      注释：畅读卡有效期内，可查阅无限量调研纪要及常规研选专栏，
-                      参与所有公开活动（日卡自付费完成顺延24小时，月卡自付费完成当天顺延一个自然月）
+                {(dataInfo as IActivityTypeDetailRes).VivoPoints.PointPermission === 2 ? (
+                  <>
+                    <div className="prompt-box">
+                      <span>当前剩余点数：</span>
+                      <span>{(dataInfo as IActivityTypeDetailRes).VivoPoints.CompanyPoints}</span>
                     </div>
-                  }
-                >
-                  <img src={TipsSvg} alt="icon" className="nopower-tips-icon" />
-                </Tooltip>
+                    <div className="prompt-box">
+                      <span>本次查看需扣除点数：</span>
+                      <span>{(dataInfo as IActivityTypeDetailRes).VivoPoints.ActivityPoints}</span>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <span>您可以付费 </span>
+                    <span className="nopower-red">{dataInfo.PopupPriceMsg}</span>
+                    <span>查看</span>
+                  </>
+                )}
               </>
             ) : (
               <>
-                <span>您可以通过单场付费</span>
-                <span className="nopower-red">{dataInfo.PopupPriceMsg}</span>
-                <span>参与</span>
+                {payType === PayType.Card ? (
+                  <>
+                    <span>您可以购买畅读卡后查看</span>
+                    <span className="nopower-red">（{dataInfo.PopupPriceMsg}）</span>
+                    <Tooltip
+                      title={
+                        <div>
+                          注释：畅读卡有效期内，可查阅无限量调研纪要及常规研选专栏，
+                          参与所有公开活动（日卡自付费完成顺延24小时，月卡自付费完成当天顺延一个自然月）
+                        </div>
+                      }
+                    >
+                      <img src={TipsSvg} alt="icon" className="nopower-tips-icon" />
+                    </Tooltip>
+                  </>
+                ) : (
+                  <>
+                    <span>您可以通过单场付费</span>
+                    <span className="nopower-red">{dataInfo.PopupPriceMsg}</span>
+                    <span>参与</span>
+                  </>
+                )}
               </>
             )}
           </div>
           {!(dataInfo as IActivityTypeDetailRes).OrderCode ? (
             <NButton type="primary" onClick={handleOpenBuyModel} size="large" className="btn-line">
-              {payType === PayType.Card
-                ? '购买畅读卡'
-                : `付费报名${
-                    !!(dataInfo as IActivityTypeDetailRes).Detail.IsLimitPeople
-                      ? '(' +
-                        (dataInfo as IActivityTypeDetailRes).Detail.SignupNum +
-                        '/' +
-                        (dataInfo as IActivityTypeDetailRes).Detail.LimitPeopleNum +
-                        ')'
-                      : ''
-                  }`}
+              {tryType === ITryType.ActivityVideoAudio ? (
+                '付费查看'
+              ) : (
+                <>
+                  {payType === PayType.Card
+                    ? '购买畅读卡'
+                    : `付费报名${
+                        !!(dataInfo as IActivityTypeDetailRes).Detail.IsLimitPeople
+                          ? '(' +
+                            (dataInfo as IActivityTypeDetailRes).Detail.SignupNum +
+                            '/' +
+                            (dataInfo as IActivityTypeDetailRes).Detail.LimitPeopleNum +
+                            ')'
+                          : ''
+                      }`}
+                </>
+              )}
             </NButton>
           ) : null}
-          <div className="nopower-text m-t-md">
-            {(dataInfo as IActivityTypeDetailRes).Detail.IsResearchPoints
-              ? '或者申请开通机构年度付费通道'
-              : '或向销售申请开通机构试用权限'}
-          </div>
-          {!(dataInfo as IActivityTypeDetailRes).Detail.IsResearchPointsByUser ? (
+
+          {tryType !== ITryType.ActivityVideoAudio && (
             <>
-              <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>
-            </>
-          ) : null}
-          <div className="g-inline-block">
-            <div className="nopower-bag-wrapper">
-              <img src={BagImg} alt="图片" className="nopower-bag-img" />
-              {(dataInfo as IActivityTypeDetailRes).Detail.IsResearchPoints ? (
-                <div className="nopower-bag-right">
-                  <div className="nopower-br-text com-fw-bold">
-                    服务报价：
-                    <span className="com-fz20">5w/年</span>
-                  </div>
-                  <div className="nopower-br-text com-fz12 mobile-sm-text">
-                    低至2000元/场专家、同业访谈
-                    <br />
-                    1000元/场重点公司小范围交流
-                  </div>
-                </div>
-              ) : (
-                <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 className="nopower-text m-t-md">
+                {(dataInfo as IActivityTypeDetailRes).Detail.IsResearchPoints
+                  ? '或者申请开通机构年度付费通道'
+                  : '或向销售申请开通机构试用权限'}
+              </div>
+              {!(dataInfo as IActivityTypeDetailRes).Detail.IsResearchPointsByUser ? (
+                <>
+                  <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>
+                </>
+              ) : null}
+              <div className="g-inline-block">
+                <div className="nopower-bag-wrapper">
+                  <img src={BagImg} alt="图片" className="nopower-bag-img" />
+                  {(dataInfo as IActivityTypeDetailRes).Detail.IsResearchPoints ? (
+                    <div className="nopower-bag-right">
+                      <div className="nopower-br-text com-fw-bold">
+                        服务报价：
+                        <span className="com-fz20">5w/年</span>
+                      </div>
+                      <div className="nopower-br-text com-fz12 mobile-sm-text">
+                        低至2000元/场专家、同业访谈
+                        <br />
+                        1000元/场重点公司小范围交流
+                      </div>
+                    </div>
+                  ) : (
+                    <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>
+            </>
+          )}
         </div>
       </div>
       <PayProcessModel

src/Material/components/PayProcessModel.tsx

@@ -88,13 +88,18 @@ const PayProcessModel: React.FC<IPayProcessModelProps> = props => {
       // 申请试用
       handleToAskTry()
     }
-    if (tryType === ITryType.Activity && payType === PayType.Single && continuePayFlag) {
+    if (
+      (tryType === ITryType.Activity || tryType === ITryType.ActivityVideoAudio) &&
+      payType === PayType.Single &&
+      continuePayFlag
+    ) {
       // 继续支付(现在只有活动有继续支付的需求)
       // todo 二维码的倒计时，需要后端返回订单剩余支付时间
       postCreateOrderByActivity(
         dataInfo.GoodsList[0]?.GoodsId,
         (dataInfo as IActivityTypeDetailRes).Detail.ActivityId,
-        sessionStorage.getItem('invite_code')
+        sessionStorage.getItem('invite_code'),
+        tryType === ITryType.ActivityVideoAudio ? 'ActivityVivo' : ''
       )
     }
   }, [open, applyTrial, continuePayFlag])
@@ -136,11 +141,12 @@ const PayProcessModel: React.FC<IPayProcessModelProps> = props => {
         sessionStorage.getItem('invite_code')
       )
     }
-    if (tryType === ITryType.Activity) {
+    if (tryType === ITryType.Activity || tryType === ITryType.ActivityVideoAudio) {
       postCreateOrderByActivity(
         wantBuyGoodsId,
         (dataInfo as IActivityTypeDetailRes).Detail.ActivityId,
-        sessionStorage.getItem('invite_code')
+        sessionStorage.getItem('invite_code'),
+        tryType === ITryType.ActivityVideoAudio ? 'ActivityVivo' : ''
       )
     }
   }
@@ -177,11 +183,12 @@ const PayProcessModel: React.FC<IPayProcessModelProps> = props => {
     if (tryType === ITryType.YanxuanSpecial) {
       postCreateOrderByYanXuan(GoodsId, (dataInfo as IColumnDetail).Detail.Id, sessionStorage.getItem('invite_code'))
     }
-    if (tryType === ITryType.Activity) {
+    if (tryType === ITryType.Activity || tryType === ITryType.ActivityVideoAudio) {
       postCreateOrderByActivity(
         GoodsId,
         (dataInfo as IActivityTypeDetailRes).Detail.ActivityId,
-        sessionStorage.getItem('invite_code')
+        sessionStorage.getItem('invite_code'),
+        tryType === ITryType.ActivityVideoAudio ? 'ActivityVivo' : ''
       )
     }
     setVisibleBuyCard(false)

src/Material/components/Research.container.tsx

@@ -56,7 +56,7 @@ const ResearchContainer: React.FC<ResearchContainerProps> = props => {
     window.open(path)
   }
   return info ? (
-    <div className={styles['research-container']}>
+    <div className={`${styles['research-container']} ${media.isSmallMax && styles['research-container-moblie']}`}>
       <div className="reserch-breadcrumb">
         <Breadcrumb style={{ margin: '12px 0' }}>
           <Breadcrumb.Item>
@@ -147,7 +147,8 @@ const ResearchContainer: React.FC<ResearchContainerProps> = props => {
                 />
               </Watermark>
               {info?.IsShowWxPay &&
-                info?.HasPermission !== INewPermissionType.OK && ( // 暂时这么写
+                info?.HasPermission !== INewPermissionType.OK &&
+                !media.isSmallMax && ( // 暂时这么写
                   <PayNoPermission
                     dataInfo={info as IArcticleInfo}
                     tryType={ITryType.Article}

src/Material/components/VideoAudioCard.tsx

@@ -105,76 +105,73 @@ const VideoAudioCard: React.FC<IVideoAudioCard> = props => {
       [key: number]: () => { url: string; tryType: ITryType; text: string }
     } = {
       1: () => ({
-        url: type === 'detail' ? `${window.location.origin}/activity/detail/${item.ActivityId}` : '',
+        url: type === 'detail' ? `${window.location.origin}/activity/medium/detail/${item.ActivityId}` : '',
         tryType: ITryType.MicroAudio,
         text: '音频'
       }),
       2: () => ({
-        url:
-          type === 'detail'
-            ? `${window.location.origin}/activity/detail/${item.ActivityId}`
-            : `${window.location.origin}/activity/video/${item.Id}`,
+        url: type === 'detail' ? `${window.location.origin}/activity/medium/detail/${item.ActivityId}` : '',
         tryType: ITryType.ActivityVideo,
         text: '视频'
-      }),
-
-      3: () => ({
-        url:
-          type === 'detail'
-            ? `${window.location.origin}/indepth/info/${item.ChartPermissionId}/${item.IndustrialManagementId}`
-            : `${window.location.origin}/indepth/video/${item.ChartPermissionId}/${item.IndustrialManagementId}/${item.Id}`,
-        tryType: ITryType.MicroVideo,
-        text: '视频'
-      }),
-      4: () => ({
-        url: '',
-        tryType: ITryType.MicroAudio,
-        text: '音频' // 暂时是音频
       })
+
+      // 3: () => ({
+      //   url:
+      //     type === 'detail'
+      //       ? `${window.location.origin}/indepth/info/${item.ChartPermissionId}/${item.IndustrialManagementId}`
+      //       : `${window.location.origin}/indepth/video/${item.ChartPermissionId}/${item.IndustrialManagementId}/${item.Id}`,
+      //   tryType: ITryType.MicroVideo,
+      //   text: '视频'
+      // }),
+      // 4: () => ({
+      //   url: '',
+      //   tryType: ITryType.MicroAudio,
+      //   text: '音频' // 暂时是音频
+      // })
     }
-    if (item.AuthInfo.HasPermission !== INewPermissionType.OK) {
-      let content: React.ReactNode = (
-        <div>
-          <div>您暂无权限查看此{urlType[item.Type]().text}</div>
-          <div>若想查看可以联系对口销售</div>
-          {item.AuthInfo?.SellerName && (
-            <div>
-              {item.AuthInfo?.SellerName}：{item.AuthInfo?.SellerMobile}
-            </div>
-          )}
-          <div>申请开通对应的试用权限</div>
-        </div>
-      )
-      if (
-        item.AuthInfo.HasPermission === INewPermissionType.HasApplyPotential ||
-        item.AuthInfo.HasPermission === INewPermissionType.NoApplyPotential ||
-        item.AuthInfo.HasPermission === INewPermissionType.HasApplyFICC ||
-        item.AuthInfo.HasPermission === INewPermissionType.NoApplyFICC
-      ) {
-        content = (
-          <div>
-            <p>您暂无权限查看此{urlType[item.Type]().text}，若想查看可以申请开通对应的试用权限</p>
-          </div>
-        )
-      }
-      // 上传名片时-7，ApplyMethod为2，否则为1
-      Modal.confirm({
-        title: '提示',
-        content: content,
-        okText: '提交申请',
-        cancelText: '取消',
-        centered: true,
-        closable: true,
-        onOk: () => {
-          applyTry({
-            ApplyMethod: item.AuthInfo.HasPermission === INewPermissionType.NoApplyPotential ? 2 : 1,
-            DetailId: item.Id,
-            TryType: urlType[item.Type]().tryType
-          })
-        }
-      })
-      return
-    }
+    // if (item.AuthInfo.HasPermission !== INewPermissionType.OK) {
+    //   let content: React.ReactNode = (
+    //     <div>
+    //       <div>您暂无权限查看此{urlType[item.Type]().text}</div>
+    //       <div>若想查看可以联系对口销售</div>
+    //       {item.AuthInfo?.SellerName && (
+    //         <div>
+    //           {item.AuthInfo?.SellerName}：{item.AuthInfo?.SellerMobile}
+    //         </div>
+    //       )}
+    //       <div>申请开通对应的试用权限</div>
+    //     </div>
+    //   )
+    //   if (
+    //     item.AuthInfo.HasPermission === INewPermissionType.HasApplyPotential ||
+    //     item.AuthInfo.HasPermission === INewPermissionType.NoApplyPotential ||
+    //     item.AuthInfo.HasPermission === INewPermissionType.HasApplyFICC ||
+    //     item.AuthInfo.HasPermission === INewPermissionType.NoApplyFICC
+    //   ) {
+    //     content = (
+    //       <div>
+    //         <p>您暂无权限查看此{urlType[item.Type]().text}，若想查看可以申请开通对应的试用权限</p>
+    //       </div>
+    //     )
+    //   }
+    //   // 上传名片时-7，ApplyMethod为2，否则为1
+    //   Modal.confirm({
+    //     title: '提示',
+    //     content: content,
+    //     okText: '提交申请',
+    //     cancelText: '取消',
+    //     centered: true,
+    //     closable: true,
+    //     onOk: () => {
+    //       applyTry({
+    //         ApplyMethod: item.AuthInfo.HasPermission === INewPermissionType.NoApplyPotential ? 2 : 1,
+    //         DetailId: item.Id,
+    //         TryType: urlType[item.Type]().tryType
+    //       })
+    //     }
+    //   })
+    //   return
+    // }
     // 音频播放按钮点击抛出
     if (isAudioOrVideo(item) && type === 'play') {
       onItemClick && onItemClick()
@@ -196,7 +193,7 @@ const VideoAudioCard: React.FC<IVideoAudioCard> = props => {
   if (!item) return null
   return (
     <div className={`${styles['roadshow-item']}`}>
-      <div
+      {/* <div
         className={`roadshow-item-title ${item.Type === 4 ? '' : 'com-cursor-p'}`}
         onClick={handleToSomePage.bind(this, item, 'detail')}
         dangerouslySetInnerHTML={{
@@ -206,8 +203,15 @@ const VideoAudioCard: React.FC<IVideoAudioCard> = props => {
               }</span>`
             : title || item?.Title
         }}
+      /> */}
+      <div
+        className={`roadshow-item-title ${item.Type === 4 ? '' : 'com-cursor-p'}`}
+        onClick={handleToSomePage.bind(this, item, 'detail')}
+        dangerouslySetInnerHTML={{
+          __html: `<img src=${item.LabelKeywordImgLink} class="mfyx-label-img" /><span>${item?.Title}</span>`
+        }}
       />
-      <div className="video-line-box">
+      <div className="video-line-box" onClick={handleToSomePage.bind(this, item, 'detail')}>
         <div className="video-img-wrapper">
           <img src={item.BackgroundImg} alt="图像" className="video-img-bg" />
           <div className={`right-top-bg ${isAudioOrVideo(item) ? 'right-top-blue' : 'right-top-orange'}`} />
@@ -217,15 +221,9 @@ const VideoAudioCard: React.FC<IVideoAudioCard> = props => {
               alt="图像"
               src={audioPlayId && audioPlayId === item.SourceId ? stopIcon : audioPlay}
               className="play-center"
-              onClick={handleToSomePage.bind(this, item, 'play')}
             />
           ) : (
-            <img
-              alt="图像"
-              src={videoPlay}
-              className="play-center"
-              onClick={handleToSomePage.bind(this, item, 'play')}
-            />
+            <img alt="图像" src={videoPlay} className="play-center" />
           )}
           <span className="video-play-time">
             {dayjs(parseInt(item.PlaySeconds || '0', 10) * 1000 - 28800000).format(
@@ -235,27 +233,10 @@ const VideoAudioCard: React.FC<IVideoAudioCard> = props => {
         </div>
       </div>
       <div className="roadshow-footer">
+        <div className="video-time"></div>
         <div className="video-time">
-          <CategoryTag content={item.ChartPermissionName} className="m-r-xs" />
           <span className="video-publishtime">{item.PublishTime}</span>
         </div>
-        <div className="roadshow-right">
-          <img src={CommentSvg} alt="图标" className="comment-icon" onClick={handleOpenComment} />
-          {videoItem?.IsCollect ? (
-            <StarFilled size={14} className="collect-icon " onClick={handleCollectOrNot} />
-          ) : (
-            <StarOutlined size={14} className="not-collect-icon" onClick={handleCollectOrNot} />
-          )}
-        </div>
-      </div>
-      <div onClick={e => e.stopPropagation()}>
-        <AskAdd
-          visible={visibleComment}
-          ID={item?.SourceId || item.Id}
-          placeholder={commentPlaceholder}
-          onApply={handleApplyComment}
-          onCloseModel={handleOkAsk}
-        />
       </div>
     </div>
   )

src/Material/css/ItemComponent.module.scss

@@ -231,12 +231,15 @@
       position: relative;
       margin: 5px auto;
       width: 213px;
+      border-radius: 6px;
+      overflow: hidden;
       .video-img-bg {
         width: 100%;
         height: 174px;
         min-width: 100%;
         min-height: 174px;
         background: #d9d9d9;
+        border-radius: 6px;
       }
       .right-top-bg {
         position: absolute;
@@ -244,20 +247,20 @@
         top: 0;
         z-index: 2;
       }
-      .right-top-blue {
-        border-top: 62px solid #3385ff;
-        border-left: 62px solid transparent;
-      }
-      .right-top-orange {
-        border-top: 62px solid #f1963b;
-        border-left: 62px solid transparent;
-      }
+      // .right-top-blue {
+      //   border-top: 62px solid #3385ff;
+      //   border-left: 62px solid transparent;
+      // }
+      // .right-top-orange {
+      //   border-top: 62px solid #f1963b;
+      //   border-left: 62px solid transparent;
+      // }
       .right-top-icon {
         position: absolute;
-        top: 10px;
-        right: 8px;
-        width: 20px;
-        height: 20px;
+        top: 0px;
+        right: 0px;
+        width: 48px;
+        height: 48px;
         z-index: 3;
       }
       .play-center {

src/Material/css/MaterialInfo.module.scss

@@ -113,6 +113,7 @@
     }
   }
 }
+
 .margin-auto {
   margin: 0 auto;
 }
@@ -132,6 +133,15 @@
   width: auto;
   word-break: break-all;
 }
+.research-container-moblie {
+  min-height: auto !important;
+  background: #ffffff;
+  border: 1px solid transparent;
+  padding-bottom: 0px;
+  margin-bottom: 20px;
+  width: auto;
+  word-break: break-all;
+}
 .art-nopower-bg {
   min-height: calc(100vh - 76px);
   padding: 20px 82px;

src/Material/css/NoPermission.module.scss

@@ -78,6 +78,15 @@
         text-align: left;
       }
     }
+    .prompt-box {
+      color: #333;
+      font-size: 14px;
+      margin-top: 10px;
+      text-align: center;
+      :nth-child(2){
+        color: #FAA12F;
+      }
+    }
   }
 }
 .nopower-product-wrapper {

src/NewIndex.tsx

@@ -14,6 +14,7 @@ import style from './styles/NewPage.module.scss'
 
 const MaterialInfo = React.lazy(() => import('./Material/MaterialInfo'))
 const ActivityVideo = React.lazy(() => import('./Activity/ActivityVideo'))
+const ActivityVideoAudio = React.lazy(() => import('./Activity/ActivityVideoAudio'))
 const ActivityTypeDetail = React.lazy(() => import('./Activity/ActivityTypeDetail'))
 const ActivitySpecialInfo = React.lazy(() => import('./Activity/ActivitySpecialInfo'))
 
@@ -42,14 +43,18 @@ const MaterialInfowidthRoute: React.FC = () => {
   const { articleID }: { articleID: string } = useParams()
   return <MaterialInfo articleID={Number(articleID)} />
 }
-const ActivityVideowidthRoute: React.FC = () => {
-  const { videoID }: { videoID: string } = useParams()
-  return <ActivityVideo videoID={Number(videoID || 0)} />
-}
+// const ActivityVideowidthRoute: React.FC = () => {
+//   const { videoID }: { videoID: string } = useParams()
+//   return <ActivityVideo />
+// }
 const ActivityDetailwidthRoute: React.FC = () => {
   const { activityID }: { activityID: string } = useParams()
   return <ActivityTypeDetail activityID={Number(activityID || 0)} />
 }
+const ActivityVideoAudioRoute: React.FC = () => {
+  const { activityID }: { activityID: string } = useParams()
+  return <ActivityVideoAudio activityID={Number(activityID || 0)} />
+}
 const ActivitySpecialInfowidthRoute: React.FC = () => {
   const { activityID }: { activityID: string } = useParams()
   return <ActivitySpecialInfo activityID={Number(activityID || 0)} />
@@ -100,11 +105,11 @@ const NewPage: React.FC = () => {
     { key: 'quotation', path: '/material/quotation', component: Quotation },
     { key: 'search', path: '/search/:keword', component: SearchIndexwidthRoute },
 
-    {
-      key: 'activityVideo',
-      path: '/activity/video/:videoID(\\d+)',
-      component: ActivityVideowidthRoute
-    },
+    // {
+    //   key: 'activityVideo',
+    //   path: '/activity/video/:videoID(\\d+)',
+    //   component: ActivityVideowidthRoute
+    // },
     {
       key: 'activitySpecialDetail',
       path: '/activity/info/:activityID(\\d+)',
@@ -116,6 +121,11 @@ const NewPage: React.FC = () => {
       path: '/activity/detail/:activityID(\\d+)',
       component: ActivityDetailwidthRoute
     },
+    {
+      key: 'ActivityVideoAudio',
+      path: '/activity/medium/detail/:activityID(\\d+)',
+      component: ActivityVideoAudioRoute
+    },
     // {
     //   key: 'indepthvideo',
     //   path: '/indepth/video/:permissionID(\\d+)/:industryID(\\d+)/:videoID',
@@ -180,7 +190,14 @@ const NewPage: React.FC = () => {
   const handleChangeMenuKey = (location: any) => {
     // 识别报告详情页+活动详情页，适配移动菜单
     if (media.isSmallMax) {
-      const routhStr = ['/material/info', '/activity/info', '/activity/detail', '/internal/article', '/column/detail']
+      const routhStr = [
+        '/material/info',
+        '/activity/info',
+        '/activity/detail',
+        '/internal/article',
+        '/column/detail',
+        '/activity/medium/detail'
+      ]
       let flag = false
       routhStr.forEach(item => {
         if (location.pathname.includes(item)) {

src/NewPageHeader.tsx

@@ -88,7 +88,14 @@ const NewPage: React.FC = props => {
     setHoverKey(findKey ? findKey : 'newest')
     // 识别报告详情页+活动详情页，适配移动菜单
     if (media.isSmallMax) {
-      const routhStr = ['/material/info', '/activity/info', '/activity/detail', '/internal/article', '/column/detail']
+      const routhStr = [
+        '/material/info',
+        '/activity/info',
+        '/activity/detail',
+        '/internal/article',
+        '/column/detail',
+        '/activity/medium/detail'
+      ]
       let flag = false
       routhStr.forEach(item => {
         if (location.pathname.includes(item)) {

src/Personal/Personal.service.ts

@@ -147,6 +147,7 @@ export interface IBodySlice {
   Body: string //内容
 }
 export interface IOrderListItem {
+  PlaySeconds: string
   LabelKeyword: string //标签关键词
   CreateTime: string //创建时间
   EndDate: string //结束日期

src/Personal/components/Order.component.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request/es'
 import InfiniteScroll from 'react-infinite-scroll-component'
-
+import dayjs from 'dayjs'
 import { List, Spin } from 'antd'
 
 import { IMyCollectionItem, IOrderListItem, PersonalService } from 'Personal/Personal.service'
@@ -41,7 +41,8 @@ const OrderComponent: React.FC = () => {
 
   const orderTypeList = [
     { key: 1, value: '畅读卡订单' },
-    { key: 2, value: '单场付费订单' }
+    { key: 2, value: '单场付费订单' },
+    { key: 3, value: '活动回放' }
   ]
 
   // 切换tab
@@ -56,6 +57,9 @@ const OrderComponent: React.FC = () => {
     if (item.Source === 'activity') {
       // 活动
       window.open(`${window.location.origin}/activity/detail/${item?.SourceId}`)
+    } else if (item.Source === 'activityvoice' || item.Source === 'activityvideo') {
+      // 活动
+      window.open(`${window.location.origin}/activity/medium/detail/${item?.SourceId}`)
     }
   }
   return (
@@ -88,7 +92,7 @@ const OrderComponent: React.FC = () => {
                   <div className="order-status">{item.OrderStatusText}</div>
                 </div>
                 <div
-                  className={`order-content ${orderType === 2 ? 'order-buy-title' : ''}`}
+                  className={`order-content ${orderType === 2 || orderType === 3 ? 'order-buy-title' : ''}`}
                   onClick={handleToDetail.bind(this, item)}
                 >
                   {orderType === 1
@@ -97,6 +101,23 @@ const OrderComponent: React.FC = () => {
                       : ''
                     : item.SourceTitle}
                 </div>
+                {(item.Source === 'activityvoice' || item.Source === 'activityvideo') && (
+                  <div className="medium-comtent">
+                    {item.Source === 'activityvoice' ? (
+                      <img className="video_icon" src="https://hzstatic.hzinsights.com/yx_xcx/autio_icon-pay.png" />
+                    ) : (
+                      <img className="video_icon" src="https://hzstatic.hzinsights.com/yx_xcx/video_icon_pay.png" />
+                    )}
+                    <img className="wave-icon" src="https://hzstatic.hzinsights.com/yx_xcx/play-wave.png" />
+                    <p>
+                      {' '}
+                      {dayjs(parseInt(item.PlaySeconds || '0', 10) * 1000 - 28800000).format(
+                        parseInt(item.PlaySeconds || '0', 10) >= 3600 ? 'HH:mm:ss' : 'mm:ss'
+                      )}
+                    </p>
+                  </div>
+                )}
+
                 <div className="order-bottom-line g-flex g-flex-between g-flex-v-center">
                   <div className="order-price">¥{item.OrderMoney}</div>
                   <div className="order-paytime">{item.CreateTime}</div>

src/Personal/css/PersonalIndex.module.scss

@@ -2,12 +2,12 @@
   color: #333333;
   display: flex;
   align-items: flex-start;
-  box-shadow: 0px 2px 11px 0px #0000001A;
+  box-shadow: 0px 2px 11px 0px #0000001a;
   border-radius: 16px;
   max-width: 1650px;
   height: 909px;
   margin: 0 auto;
-  overflow: hidden;  
+  overflow: hidden;
   :global {
     .personal-box-wrapper {
       box-sizing: border-box;
@@ -119,17 +119,17 @@
           height: 16px;
         }
       }
-      .vip-card-wrapper{
+      .vip-card-wrapper {
         width: 222px;
         height: 87px;
         margin: 0 auto;
         position: relative;
-        .vip-card-img{
+        .vip-card-img {
           width: 100%;
           height: 100%;
         }
-        .vip-timetext{
-          color:#F1A84A;
+        .vip-timetext {
+          color: #f1a84a;
           line-height: 20px;
           position: absolute;
           bottom: 15px;
@@ -141,21 +141,21 @@
         .personal-menu-item {
           padding: 15px 20px;
           font-size: 18px;
-          cursor: pointer;          
+          cursor: pointer;
           &:hover {
             background: #ffffff;
-            color: #F1A84A;
+            color: #f1a84a;
           }
         }
         .personal-act-menu {
           background: #ffffff;
-          color: #F1A84A;
+          color: #f1a84a;
           position: relative;
-          &::before{
+          &::before {
             content: '';
             height: 100%;
             width: 4px;
-            background: #FAA12F;
+            background: #faa12f;
             position: absolute;
             top: 0;
             left: 0;
@@ -166,7 +166,7 @@
     .personal-right-wrapper {
       flex: 1;
       background: #ffffff;
-      padding:20px;
+      padding: 20px;
       height: 100%;
       min-height: 100%;
       overflow: auto;
@@ -205,7 +205,7 @@
       }
     }
     .personal-left {
-      margin-right: 32px;      
+      margin-right: 32px;
     }
     .personal-right {
       width: 408px;
@@ -296,7 +296,7 @@
 .bd-none {
   border-bottom: none !important;
 }
-.my-collection-article {  
+.my-collection-article {
   padding: 20px;
   margin-bottom: 20px;
   box-sizing: border-box;
@@ -333,7 +333,7 @@
     .article-unclick {
       margin-left: 10px;
       display: inline-block;
-      color: #FFE097;
+      color: #ffe097;
     }
     .my-article-footer {
       width: 100%;
@@ -477,7 +477,7 @@
   margin-bottom: 10px;
   background: #ffffff;
   border-radius: 8px;
-  border: 1px solid #DEE4EE;
+  border: 1px solid #dee4ee;
   :global {
     .my-message-time {
       color: #666666;
@@ -499,70 +499,85 @@
     }
   }
 }
-.order-list-item{
+.order-list-item {
   // padding: 20px;
   box-sizing: border-box;
   margin-bottom: 10px;
   background: #ffffff;
   border-radius: 8px;
-  border: 1px solid #DEE4EE;
-  :global{
-    .order-item-title{
+  border: 1px solid #dee4ee;
+  :global {
+    .order-item-title {
       font-size: 12px;
       line-height: 25px;
-      padding-right:20px;
-      .order-name{
+      padding-right: 20px;
+      .order-name {
         width: 341px;
-        background: linear-gradient(90deg, #FFF1E4 0%, #FFFFFF 99.73%);
-        color:#F1A84A;
+        background: linear-gradient(90deg, #fff1e4 0%, #ffffff 99.73%);
+        color: #f1a84a;
         padding-left: 10px;
         border-radius: 8px 0 0 0;
-        .order-name-img{
+        .order-name-img {
           height: 25px;
           width: auto;
         }
       }
-      .order-status{
-        color:#999999;
+      .order-status {
+        color: #999999;
+      }
+    }
+    .medium-comtent {
+      color: #FAA12F;
+      padding-left: 18px;
+      display: flex;
+      align-items: center;
+      .video_icon {
+        width: 24px;
+        height: 24px;
+      }
+      .wave-icon {
+        width: 56px;
+        height: 16px;
+        margin: 0 5px;
       }
     }
-    .order-content{
+    .order-content {
       padding: 20px;
     }
-    .order-buy-title{
+    .order-buy-title {
       cursor: pointer;
-      &:hover{
-        color:#F1A84A
+      &:hover {
+        color: #f1a84a;
       }
     }
-    .order-bottom-line{
+    .order-bottom-line {
       padding: 0 20px;
       line-height: 22px;
       margin-bottom: 12px;
-      .order-price{
-        color:#F1A84A;
+      .order-price {
+        color: #f1a84a;
       }
     }
   }
 }
-.order-tab-wrapper{
-  border-bottom: 1px solid #E7E7E7;
+.order-tab-wrapper {
+  border-bottom: 1px solid #e7e7e7;
   display: flex;
   margin-bottom: 10px;
-  :global{
-    .order-tab-item{
+  :global {
+    .order-tab-item {
       line-height: 22px;
       padding: 13px 16px;
       cursor: pointer;
     }
-    .order-tab-act{
-      color:#F1A84A;
+    .order-tab-act {
+      color: #f1a84a;
       position: relative;
-      &::after{
+      &::after {
         content: '';
         width: 100%;
         height: 3px;
-        background: #F1A84A;
+        background: #f1a84a;
         position: absolute;
         bottom: 0;
         left: 0;
@@ -570,4 +585,4 @@
       }
     }
   }
-}
+}

src/Vmp.tsx

@@ -51,6 +51,7 @@ const Vmp: React.FC = () => {
           '/activity/video/:videoID(\\d+)',
           '/activity/info/:activityID(\\d+)',
           '/activity/detail/:activityID(\\d+)',
+          '/activity/medium/detail/:activityID(\\d+)',
           '/community/theme/:themeID',
           '/community/author/:authorID',
           // '/indepth/video/:permissionID(\\d+)/:industryID(\\d+)/:videoID(\\d+)',

src/assets/video-icon.svg

@@ -1,6 +1,11 @@
-<svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23.2441 5.12655C23.5374 4.99712 23.8542 4.94632 24.1687 4.97828C24.4831 5.01025 24.7863 5.12409 25.0533 5.31049C25.3204 5.49688 25.5437 5.75054 25.7051 6.0507C25.8665 6.35087 25.9613 6.68903 25.9819 7.03751L25.9859 7.17689L25.9999 14.7134C26.0006 15.063 25.9264 15.4077 25.7833 15.7194C25.6403 16.0311 25.4325 16.3009 25.177 16.5067C24.9215 16.7125 24.6255 16.8484 24.3134 16.9032C24.0012 16.9581 23.6817 16.9304 23.3811 16.8224L23.2621 16.7748L18.6368 14.7466C18.3968 14.641 18.2031 14.4367 18.0962 14.1767C17.9893 13.9167 17.9775 13.621 18.0632 13.3516C18.149 13.0822 18.3257 12.8599 18.5563 12.7312C18.7869 12.6026 19.0535 12.5776 19.3005 12.6614L19.374 12.6902L23.9993 14.7179L23.9853 7.18187L19.376 9.21506C19.1357 9.32159 18.8675 9.32099 18.6277 9.21338C18.3878 9.10578 18.195 8.89955 18.0898 8.63803C17.9846 8.37651 17.9751 8.08007 18.0634 7.811C18.1517 7.54193 18.3309 7.32118 18.5632 7.19514L18.6348 7.15974L23.2441 5.12655Z" fill="white"/>
-<path d="M18.0052 0.99707H2.00058C1.46999 0.99707 0.961136 1.23016 0.585955 1.64507C0.210774 2.05997 7.77225e-09 2.6227 0 3.20947V18.6963C0 19.283 0.210774 19.8458 0.585955 20.2607C0.961136 20.6756 1.46999 20.9087 2.00058 20.9087H18.0052C18.5358 20.9087 19.0446 20.6756 19.4198 20.2607C19.795 19.8458 20.0058 19.283 20.0058 18.6963V3.20947C20.0058 2.6227 19.795 2.05997 19.4198 1.64507C19.0446 1.23016 18.5358 0.99707 18.0052 0.99707ZM2.00058 3.20947H18.0052V18.6963H2.00058V3.20947Z" fill="white"/>
-<path d="M5.10695 19.8611C5.22279 19.6059 5.42341 19.4101 5.66682 19.3147C5.91023 19.2193 6.17757 19.2317 6.4129 19.3494C6.64822 19.467 6.8333 19.6807 6.92939 19.9457C7.02549 20.2108 7.02516 20.5067 6.92847 20.7715L6.89646 20.8501L4.39574 26.3811C4.2799 26.6363 4.07928 26.8321 3.83587 26.9275C3.59246 27.0229 3.32512 27.0105 3.08979 26.8929C2.85447 26.7753 2.66939 26.5615 2.5733 26.2965C2.4772 26.0314 2.47753 25.7355 2.57422 25.4707L2.60623 25.3921L5.10695 19.8611ZM13.5569 19.3661C13.782 19.2416 14.0414 19.2155 14.2832 19.2931C14.525 19.3707 14.7314 19.5463 14.8613 19.7848L14.8988 19.8611L17.3995 25.3921C17.5164 25.648 17.5389 25.9441 17.4622 26.218C17.3856 26.4919 17.2158 26.7221 16.9886 26.8603C16.7614 26.9984 16.4946 27.0336 16.2444 26.9584C15.9943 26.8833 15.7802 26.7037 15.6475 26.4574L15.61 26.3811L13.1092 20.8501C12.9907 20.5877 12.9712 20.2839 13.0552 20.0056C13.1391 19.7273 13.3196 19.4973 13.5569 19.3661Z" fill="white"/>
-<path d="M13.0036 14.2715V15.3777C13.0036 15.6711 12.8982 15.9524 12.7106 16.1599C12.523 16.3673 12.2686 16.4839 12.0033 16.4839H5.00126C4.73597 16.4839 4.48154 16.3673 4.29395 16.1599C4.10636 15.9524 4.00098 15.6711 4.00098 15.3777V14.2715H13.0036Z" fill="white"/>
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.25 0H44.25C46.4591 0 48.25 1.79086 48.25 4V36H24.25C17.6226 36 12.25 30.6274 12.25 24V0Z" fill="#FFF6DD"/>
+<path d="M12.25 12C12.25 5.37256 6.87741 0 0.25 0H12.25V12Z" fill="#FFF6DD"/>
+<path d="M48.25 48C48.25 41.3726 42.8774 36 36.25 36H48.25V48Z" fill="#FFF6DD"/>
+<path d="M40.0499 19.7958L40.0499 19.7959C40.0509 20.1373 39.8756 20.4539 39.5605 20.6436C39.3871 20.748 39.1936 20.8 39.0004 20.8C38.9389 20.8 38.7445 20.7778 38.5042 20.7303C38.3927 20.7083 38.2864 20.6837 38.1987 20.6595C38.1549 20.6475 38.1193 20.6365 38.092 20.6271C38.0693 20.6193 38.0581 20.6146 38.0556 20.6135L34.9499 19.0666V13.9498L35.0808 13.89C35.4082 13.7403 35.8505 13.5379 36.3099 13.3271C37.223 12.9083 38.2199 12.4491 38.5023 12.3114C38.8363 12.1486 39.2232 12.1653 39.5398 12.3545L39.54 12.3546C39.855 12.5427 40.0312 12.8579 40.032 13.1991L40.032 13.1995L40.0499 19.7958Z" stroke="#FAA12F" stroke-width="1.4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4 24.5H34.6C35.51 24.5 36.25 23.7025 36.25 22.7222V10.2778C36.25 9.29753 35.51 8.5 34.6 8.5H21.4C20.49 8.5 19.75 9.29751 19.75 10.2778V22.7222C19.75 23.7025 20.49 24.5 21.4 24.5ZM24.3334 19.1H31.6667V19.7C31.6667 20.1419 31.3019 20.5 30.8519 20.5H25.1482C24.6982 20.5 24.3334 20.1418 24.3334 19.7V19.1Z" fill="#FAA12F"/>
+<path d="M26.1444 24H24.3556L22.0345 27.1422C21.8369 27.5374 21.9971 28.018 22.3922 28.2156C22.7874 28.4131 23.268 28.253 23.4655 27.8578L26.1444 24Z" fill="#FAA12F"/>
+<path d="M31.6444 24L33.9655 27.1422C34.1631 27.5374 34.003 28.018 33.6078 28.2156C33.2126 28.4131 32.7321 28.253 32.5345 27.8578L29.8556 24H31.6444Z" fill="#FAA12F"/>
+<path d="M26.1444 24H24.3556L22.0345 27.1422C21.8369 27.5374 21.9971 28.018 22.3922 28.2156C22.7874 28.4131 23.268 28.253 23.4655 27.8578L26.1444 24Z" stroke="#FAA12F" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M31.6444 24L33.9655 27.1422C34.1631 27.5374 34.003 28.018 33.6078 28.2156C33.2126 28.4131 32.7321 28.253 32.5345 27.8578L29.8556 24H31.6444Z" stroke="#FAA12F" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="bevel"/>
 </svg>