报告支付流程-初稿，新增协议，活动按钮点击判断是否跳转详情页，弹框close方法命名修改

src/Activity/Activity.service.ts

@@ -1,6 +1,6 @@
 import NewAxiosInstanceFunc from '../Service/NewAxiosInstance'
 import { INewResponse } from '../Service/INewResponse'
-import { IPaging } from 'Material/Material.service'
+import { IGoodsListItem, IPaging } from 'Material/Material.service'
 import { IAuthInfo, IIndustryVideo } from 'Indepth/Indepth.service'
 import { INewestItem } from 'Newest/Newest.service'
 export interface IActivityHomeListItem {
@@ -126,6 +126,12 @@ export interface IActivityDetialBase {
   CancelDeadline: string // 取消报名截止时间
   TopTime: number // 置顶时间
   LabelKeywordImgLink: string // 标签关键字图片链接
+  Days: number //调研天数
+  Explain: string //说明
+  IsTrip: number //是否报名 1是 ，0 否
+  ShareImg: string //分享图片
+  TripImgLink: string //行程图片链接
+  TripStatus: number //行程进行状态 1：预报名，2：确定行程
 }
 export interface IAudioDetail {
   ActivityId: number // 活动ID
@@ -149,13 +155,20 @@ export interface IActivityTypeListRes {
   IsShowResearchPoints: boolean // 是否显示研选扣点
 }
 export interface IActivityTypeDetailRes {
+  Detail: IActivityTypeDetail
+  GoodsList: IGoodsListItem[] // 商品信息
   HasPermission: number //1:有该行业权限,正常展示，2：无该行业权限，不存在权益客户下（ficc），3:无该品类权限,已提交过申请，4：无该品类权限,未提交过申请，5：潜在客户，未提交过申请，6：潜在客户,已提交过申请
+  IsCompanyApply: boolean // 机构是否申请过试用
+  IsNeedBusinessCard: boolean // 是否需要上传名片
+  IsResearch: boolean // 是否是买方研选
+  IsResearchSpecial: boolean // 是否属于特殊的研选
+  IsShowWxPay: boolean // 是否展示微信支付
+  OrderCode: string // 订单号
+  PayTimeCountdown: number // 支付倒计时
   PopupMsg: string //权限弹窗信息
+  PopupPriceMsg: string //价格弹窗信息
   SellerMobile: string //销售电话
   SellerName: string //销售姓名
-  Detail: IActivityTypeDetail
-  IsResearch: boolean // 是否属于研选
-  IsResearchSpecial: boolean // 是否属于特殊的研选
 }
 export interface IActivityTypeDetail extends IActivityDetialBase {
   SignupNum: number //已报名人数
@@ -188,20 +201,20 @@ export interface IActivitySpecialListRes {
 export interface IActivitySpecialListItem extends IActivityDetialBase {
   SpecialType: number //调研形式、 1 线上 ， 2 线下
   ResearchTheme: string //调研主题
-  TripImgLink: string //行程图片链接
+  // TripImgLink: string //行程图片链接
   IndustrialName: string //产业名称
   IndustrialSubjectName: string //标的名称（相关公司
   Scale: string
   CustomerTypeIds: string
-  IsTrip: number //是否报名 1是 ，0 否
+  // IsTrip: number //是否报名 1是 ，0 否
   TripNum: number //已报名人数
-  Days: number //调研天数
+  // Days: number //调研天数
   PersonInCharge: number //纪要负责人
   TripImgLinkFix: string //确定行程之后的图片链接
   ActivityTimeTextByDay: number //活动预期时间带周日
   ActivityTimeEnd: string
-  TripStatus: number //行程进行状态 1：预报名，2：确定行程
-  Explain: string //说明
+  // TripStatus: number //行程进行状态 1：预报名，2：确定行程
+  // Explain: string //说明
   AdminId: number
 }
 export interface IActivitySpecialDetailRes {

src/Activity/components/ActivityBtn.component.tsx

@@ -352,8 +352,16 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
   const handleCheckPower = (HasPermission: INewPermissionType, isResearch: boolean, isResearchSpecial: boolean) => {
     // 如果接口没返回权限则跳过
     if (!HasPermission) return true
+
     // 1.先判断权限，无权限则弹框
     if (HasPermission !== INewPermissionType.OK) {
+      // 列表的按钮点击，无权限时，需要进入详情页
+      if (btnGrous !== 'detail') {
+        isSpecial
+          ? window.open(`/activity/info/${(item as IActivitySpecialListItem).ActivityId}`)
+          : window.open(`/activity/detail/${(item as IActivityTypeListItem).ActivityId}`)
+        return false
+      }
       if (isResearchSpecial) {
         Modal.info({
           title: '提示',
@@ -812,7 +820,7 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
           visible={visible}
           ID={(item as IActivityTypeListItem).ActivityId || (item as INewestItem).SourceId}
           onApply={handleToAsk}
-          handleClose={handleOnClose}
+          onCloseModel={handleOnClose}
         />
       ) : null}
       {callVisible ? (
@@ -834,7 +842,7 @@ const ActivityBtnComponent: React.FC<IActivityBtnComponent> = props => {
         visible={visibleApply}
         detailID={(item as IActivityTypeListItem).ActivityId || (item as INewestItem).SourceId}
         tryType={ITryType.Activity}
-        handleClose={handleOKApply}
+        onCloseModel={handleOKApply}
       />
       <Picture visible={!!bigImg} imgSrc={bigImg} onClose={handleToCloseBigImg} />
       {isSpecial ? (

src/Column/Column.service.ts

@@ -104,6 +104,7 @@ export interface IColumnDetail {
   Pv: number
   IsApprovalAdmin: boolean // 是否是审批人员
   IsFollowAuthor: boolean // 是否已关注
+  ShareImg: string //分享图片
 }
 export interface ISaveColumnDetailParams {
   Id: number

src/Column/components/ColumnContent.tsx

@@ -350,7 +350,7 @@ const ColumnContent: React.FC<IColumnContentProps> = props => {
               visible={visibleAsk}
               ID={detail.Id}
               onApply={handleApplyContent}
-              handleClose={handleOkAsk}
+              onCloseModel={handleOkAsk}
             />
           ) : null}
         </>

src/Material/LicenseHtml.tsx

@@ -0,0 +1,389 @@
+import React from 'react'
+import styles from './css/LicenseHtml.module.scss'
+
+// 研选平台服务协议
+const LicenseHtml: React.FC = () => {
+  return (
+    <div className={styles['rich-text-wrapper']}>
+      <div className="rich-title">研选平台服务协议</div>
+      <div className="rich-h1-text">一、特别提示</div>
+      <div className="rich-p-line">
+        1、《研选平台服务协议》（以下简称“本协议”）是用户（以下或称“您”）与察研科技（其定义详见本协议第二条第1款）之间签署的具有法律约束力的协议。本协议为适用于察研科技提供的所有服务（以下简称“服务”或“察研科技提供的服务”）的基础性、通用性的协议，您注册研选平台账号和/或使用察研科技提供的任何服务均受本协议之约束。
+      </div>
+      <div className="rich-p-line">2、察研科技特别提示您：</div>
+      <div className="rich-p-line">
+        <strong>
+          （1）请您务必审慎阅读本协议的全部条款，特别是免除或者限制察研科技的责任的条款、排除或者限制您的权利的条款，以及约定适用法律、争议解决方式和管辖的条款等，这些条款可能以黑体加粗、设置下划线等方式被突出标示；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （2）请您务必审慎选择是否接受本协议。如果您在相关页面点击确认本协议或在注册/登录过程中作出（或被察研科技视为作出）同意本协议的意思表示或在察研科技以合理方式向您展示/提示/通知本协议或本协议的任何更新版本后仍继续使用察研科技提供的服务或以可能的其他方式作出（或被察研科技视为作出）同意本协议的意思表示，均代表您完全同意本协议的全部条款；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （3）本协议的效力范围及于察研科技提供的一切产品和服务，用户在享受任何单项服务时，应当受本协议的约束；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（4）如果您对本协议的任何部分有任何异议，您应当立即停止使用察研科技提供的服务。</strong>
+      </div>
+      <div className="rich-p-line">
+        3、为了给您提供更好的服务，察研科技的业务可能不时发生变化，本协议也可能随之作出调整。察研科技会通过在研选平台（其定义详见本协议第二条第2款）发布更新版本或以其他方式提示您相关内容的更新，也请您访问研选平台以便及时了解最新的协议文本；但您理解并同意，察研科技无义务对您或任何特定用户作出特定通知并就相关内容的更新取得您或任何特定用户的同意。
+      </div>
+      <div className="rich-p-line">
+        在前述情况下，如果您继续使用察研科技提供的服务，即表示您同意接受修订后的协议文本并愿意受其约束。如果您对更新后的服务条款有任何异议，您应当立即停止使用察研科技提供的服务。
+      </div>
+      <div className="rich-p-line">
+        4、如果您未注册研选平台账号，将导致您不能成为研选平台的用户，但这并不会导致察研科技禁止您访问研选平台并使用基本的浏览或信息搜索功能。然而，在任何情形下，您都充分理解并完全同意，察研科技无意且不应被认定为向任何未注册研选平台账号的对象提供任何服务或与之建立任何商业关系。
+      </div>
+      <div className="rich-p-line">5、本协议除正文外，还包含以下内容：</div>
+      <div className="rich-p-line">
+        （1）<a href="/material/policy">《研选平台隐私政策》</a>；
+      </div>
+      <div className="rich-p-line">
+        （2）您在使用研选平台的特定服务时，该等服务可能会另有单独适用的相关协议、政策、指引、制度或规则等。所有研选平台已经发布的或将来可能发布的涉及相关业务的协议、政策、指引、制度或规则等，均构成对本协议的有效补充，与本协议具有同等法律效力，对您具有法律上的约束力。
+      </div>
+      <div className="rich-h1-text">二、定义与释义</div>
+      <div className="rich-p-line">
+        1、本协议所称“察研科技”是指研选平台的经营者上海察研科技有限公司及现有和将来设立的相关关联公司的单称或合称。
+      </div>
+      <div className="rich-p-line">
+        2、本协议所称“研选平台”包括但不限于查研观向微信小程序，以及将来增加的网站及对应的移动客户端，以及相关的微信公众号或其他公众号平台或其他小程序，以及可能不时涉及的其他互联网媒介等。
+      </div>
+      <div className="rich-h1-text">三、用户注册要求</div>
+      <div className="rich-p-line">根据相关法律法规规定，结合研选平台服务的需求，用户注册时需遵守以下条款：</div>
+      <div className="rich-p-line">
+        1、根据法律法规，您在注册账号时应当提供真实身份信息，不得冒用他人身份（包括不限于冒用他人姓名或肖像、冒用其他公司或机构的名称、盗用他人手机号码或第三方账号、盗用他人邮箱、冒用他人肖像或社会身份等）。如果察研科技发现您未提供真实身份信息或者您冒用他人身份，察研科技将终止为您提供服务。
+      </div>
+      <div className="rich-p-line">2、提供完整、真实、准确、最新的个人或机构资料，如注册信息有变，应及时更新。</div>
+      <div className="rich-p-line">
+        3、您在注册研选平台账号，完善账号昵称、头像、简介等信息时，不得以任何形式违反法律法规或侵害他人合法权益，不得出现违法和不良信息；否则，察研科技有权随时不经通知对您的研选平台账号进行处理。
+      </div>
+      <div className="rich-p-line">在账号头像、昵称及注册信息中不得出现违法违规信息，包括但不限于以下信息：</div>
+      <div className="rich-p-line">（1）冒用国家名称、中央国家机关名称和地方各级党政机关名称的；</div>
+      <div className="rich-p-line">（2）冒用党和国家领导人或其他公众人物姓名、头衔等信息的；</div>
+      <div className="rich-p-line">（3）冒用社会公共机构名称、社会名人姓名和媒体名称的；</div>
+      <div className="rich-p-line">（4）冒用外国国家名称、国际组织名称、境外政要姓名、境外媒体名称的。</div>
+      <div className="rich-p-line">
+        察研科技保留对于用户昵称的审核权。如察研科技认为用户昵称出现有悖于社会公德、违反公序良俗、损害社会及他人利益的词语，察研科技有权对该用户昵称予以修改、标注或者禁止使用。
+      </div>
+      <div className="rich-p-line">
+        4、用户同意，其提供的真实、准备、合法的研选平台账号注册资料是作为认定用户与研选平台账号关联性以及用户身份的唯一证据。
+      </div>
+      <div className="rich-p-line">
+        如用户提供的资料不准确、不真实、不合法，察研科技保留结束用户使用研选平台各项服务的权利。
+      </div>
+      <div className="rich-h1-text">四、用户账号、密码安全性</div>
+      <div className="rich-p-line">
+        1、您完成研选平台账号申请注册手续后，您的研选平台账号由您使用、维护并独立承担全部责任，账号禁止赠与、借用、租用、转让或售卖等。
+      </div>
+      <div className="rich-p-line">
+        2、研选平台账号密码由您自行设定。察研科技特别提示您应妥善保管您的账号和密码。您需要采取特定措施保护您的账号安全，包括但不限于妥善保管研选平台账号与密码、定期更改密码等措施。您同意在任何情况下不向他人透露账号或密码信息。因您保管不善可能导致账号被他人使用（包括但不限于遭受盗号、密码失窃）或信息数据泄漏而对您本身、察研科技或第三方造成损害，责任由您自行承担，察研科技不承担任何责任。您理解并同意，在您未进行投诉或提出账号申诉等方式明确告知研选平台账号被他人使用或信息数据泄漏等情况并提供相关证明材料前，察研科技有理由相信该账号行为是您使用账号的行为。
+      </div>
+      <div className="rich-p-line">
+        3、在您怀疑他人在使用您的账号或密码时，您同意立即通知察研科技。如果您当前使用的研选平台账号并不是您初始申请注册的或者通过察研科技提供的其他途径获得的，但您却知悉该账号当前的密码，您不得用该账号登录或进行任何操作，并请您在第一时间通知察研科技或者该账号的初始申请注册主体。如果察研科技发现您并非该账号的初始申请注册主体，察研科技有权在未经通知的情况下终止您使用该账号。
+      </div>
+      <div className="rich-p-line">
+        4、您理解并同意，为保护您及其他用户的数据安全，防止用户信息泄露、毁损、篡改或者丢失，察研科技有权对您接入的信息系统实行接入审查，包括但不限于技术水平审查、安全水平审查、主体资质审查等，并根据审查结果向您提出防入侵、防病毒等措施建议。如果您的信息系统仍无法符合保护用户数据安全的要求，察研科技有权拒绝或终止向您提供服务。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          5、如果您违反法律法规、本协议以及专项规则的规定，察研科技有权进行独立判断并随时限制、冻结或终止您对研选平台账号的使用，且根据实际情况决定是否恢复使用。由此给您带来的损失（包括但不限于通信中断，用户资料及相关数据清空等），由您自行承担。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        6、如果您的研选平台账号被盗、密码遗忘或因其他原因导致无法正常登录，您可以按照研选平台的申诉途径进行申诉。察研科技将在可行的范围内为您的申诉提供便利，但并不承诺您一定能通过申诉找回账号。
+      </div>
+      <div className="rich-h1-text">五、用户使用规则</div>
+      <div className="rich-p-line">
+        <strong>
+          1、察研科技致力于为您提供文明健康、规范有序的网络环境，您对察研科技提供的服务的使用必须遵守法律法规。您不得利用研选平台账号或察研科技提供的服务从事如下行为：
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（1）发布、传送、传播、储存违反国家法律法规禁止的内容：</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>a.违反宪法确定的基本原则的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>b.危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>c.损害国家荣誉和利益的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>d.煽动民族仇恨、民族歧视，破坏民族团结的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>e.破坏国家宗教政策，宣扬邪教和封建迷信的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>f.散布谣言，扰乱社会秩序，破坏社会稳定的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>g.散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>h.侮辱或者诽谤他人，侵害他人合法权益的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>i.煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>j.以非法民间组织名义活动的；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>k.含有法律、行政法规禁止的其他内容的。</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（2）发布、传送、传播、储存侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的内容；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（3）发布、传送、传播、储存涉及他人隐私、个人信息或资料的内容；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（4）发布、传送、传播骚扰信息、广告信息、垃圾信息或含有任何性或性暗示信息的内容；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（5）发布、传送、传播谣言、虚假信息或其他含有不实信息的内容；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （6）发布、传送、传播、储存其他违反法律法规、政策及公序良俗、社会公德或干扰研选平台正常运营和侵犯其他用户或第三方合法权益内容的信息。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          2、您承诺：遵守法律法规、社会主义制度、国家利益、公民合法利益、社会公共秩序、社会道德风尚和信息真实性等七条底线的要求。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          3、您理解并同意：您发表在研选平台上的任何内容，察研科技可以根据自己标准和立场进行管理或者删除，而无需提前或者事后向您说明；管理或者删除的标准，也完全由察研科技独立制定，无需征求您意见，也无需向您公开。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          4、如果察研科技发现您通过研选平台发布、传送、传播、储存的信息属于本条第1款第（1）项及第2款所列内容之一，察研科技有义务依法立即停止传输，保存有关记录，进行相应处理并向国家有关机关报告。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          5、您仅限于在研选平台内使用察研科技提供的信息、数据等内容，任何以破解、转译、转录等非法手段将平台发布的内容与平台分离的行为，察研科技保留追究侵权人的法律责任及索赔的权利。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          6、任何以盗窃、利用系统漏洞、通过任何非察研科技授权途径获得的信息、数据等内容，察研科技有权立即终止服务，所有产生的损失及责任（包括直接经济损失、商誉损失及赔偿金和解款、律师费、公证费、诉讼费等间接经济损失等全部损失）由行为人自行承担。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          7、使用研选平台或参加相关线下活动时，您应通过察研科技公布/授权的方式进行，不得通过任何其他渠道、途径、方式非法获取的平台服务或参加活动获取资讯，一经察研科技发现立即终止服务，察研科技有权立即就行为人获取的相关服务做出删除、取消、清零等处理，所有产生的损失及责任由行为人自行承担。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          8、对察研科技提供的信息、数据、纪要、报告等内容，未经察研科技书面许可，您不得再次公开发布、转载或向任何第三方提供任何信息、数据等内容。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          9、您不得以任何方式提供察研科技提供的平台账号给他人使用，包括但不限于以转让、出租、借用、分享、出售等方式提供给他人作包括但不限于分享、上传、浏览、下载、存储等使用。否则，因此产生任何法律后果及责任均由行为人自行承担，且察研科技有权终止服务。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          10、因您的原因导致的任何纠纷、责任等，以及您或您的研选平台账号违反法律法规或本协议约定引发的任何后果，均由您独立承担全部责任，与察研科技无关；因此给察研科技、其他用户或第三方造成损害的，您应当承担完全的赔偿责任。
+        </strong>
+      </div>
+      <div className="rich-h1-text">六、服务费用</div>
+      <div className="rich-p-line">
+        <strong>
+          1、您理解并同意察研科技有权根据实际需要对本服务的服务内容、服务方式、是否收费及收费标准等进行调整，在相关服务页面或以其他合理方式进行通知，并在通知后生效。您继续使用相关服务，视为您同意察研科技的前述调整。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        2、您理解并同意察研科技有权决定新增服务/产品是否收费，您有权接受或拒绝该服务/产品。
+      </div>
+      <div className="rich-p-line">
+        3、如您使用察研科技的收费服务/产品，则您应当按照察研科技的收费规定支付费用；如您未支付费用或者欠费，则察研科技有权暂停或停止向您提供此项服务/产品。
+      </div>
+      <div className="rich-h1-text">七、服务变更、中断或终止</div>
+      <div className="rich-p-line">
+        1、受限于互联网的固有缺陷（包括但不限于软硬件故障、网络通信线路故障、恶意网络攻击、不可抗力或其他察研科技无法控制的情形），您同意察研科技有权依据自身判断在必要时变更、中断或终止部分或全部服务，如果发生此等情形，察研科技将尽可能及时通过公告、系统通知、私信、短信或察研科技认为合理的其他方式向受影响的用户进行通知或提示。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          2、您同意，察研科技需要定期或不定期对研选平台和相关软硬件进行维护、升级，或基于其他合理原因需要暂停部分或全部服务，如果因此类情况而造成服务在察研科技认为合理的时间内的中断或不稳定，察研科技无需为此承担任何责任。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          3、如果发生下列任何一种情形，察研科技有权随时中断或终止向您提供部分或全部服务而无需对您或任何第三方承担任何责任，由此造成的损失完全由您自行承担：
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（1）您提供的个人资料不真实；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（2）您违反法律法规、监管要求或本协议；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（3）您在使用收费服务时未按规定为其所使用的收费服务支付相关服务费用；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （4）您侵犯个人、企业事业单位或社会团体的合法权益，包括但不限于专利权、著作权、商标权，或姓名权、名称权、名誉权、荣誉权、肖像权、隐私权等；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（5）您损害监管部门、国家机关及政府形象；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（6）您以任何方式损害察研科技的商誉或信誉等合法权益；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（7）察研科技有其他合理理由认为需要中断或终止的。</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>4、您同意，您与察研科技的服务关系终止后，察研科技仍享有下列权利：</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （1）继续保存您未及时删除的注册信息及您使用察研科技提供的服务期间发布的所有信息至法律规定的记录保存期满；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （2）您在使用察研科技提供的服务期间存在违法行为或违反本协议和/或规则的行为的，察研科技仍可依据本协议向您主张权利、追究责任。
+        </strong>
+      </div>
+      <div className="rich-h1-text"> 八、知识产权及版权处理 </div>
+      <div className="rich-p-line">
+        1、研选平台的内容（包括但不限于界面设计、版面框架、文字、音频、视频、图片或其他资料等）等知识产权归察研科技所有。除另有约定外，研选平台的软件、系统等的著作权、专利权及其他知识产权归察研科技所有。
+      </div>
+      <div className="rich-p-line">
+        2、您使用察研科技提供的服务在平台上发布的文字、图片、图表等任何内容均应由您原创或已获得合法授权并且该内容不会侵犯任何第三方的合法权益。如有第三方声称您发布的内容侵犯了第三方的知识产权或其他权利、并向察研科技提供了相应的证明材料或说明（察研科技将对第三方提供的证明材料或说明进行合理的形式审查，但在察研科技的合法权限和合理能力范围内，察研科技可能无法实质审查相应内容是否确实侵权或确实不侵权，无论察研科技最终作出何种处理措施，您均理解并同意，察研科技无需为此向您承担任何责任。），察研科技有权基于自身判断对可能涉嫌侵权的内容作删除等处理，并采取包括但不限于关停账号等措施对您进行惩罚；同时，侵权责任由信息发布主体自行承担，察研科技不承担任何责任。对于因您的原因造成第三方向察研科技主张权利，由察研科技对外承担责任的，察研科技有权全额向您进行追偿。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          3、为了促进知识的分享和传播，您在研选平台上发表的全部内容，授予察研科技免费的、永久的、不可撤销的、非独家的使用许可。察研科技有权将该内容用于其各种形态的产品和服务商，包括但不限于部分或者全部地复制、修改、改编、翻译、组装、分拆、推广、分发、出版等。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          其中，您基于察研科技提供的专家服务形成的相关纪要、观点报告等，经察研科技审核后发表于研选平台中（察研科技可对内容进行适当调整，修改），相关知识产权归察研科技所有。且上述纪要、观点报告等仅可发表于研选平台中，未经察研科技书面许可不得擅自发表于研选平台以外的任何其他地方。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        4、您同意许可察研科技视具体情况就任何主体侵犯您权益的事宜进行维权，包括但不限于发送侵权函件、提起诉讼、申请仲裁，以及其他合理措施等，察研科技无需再向您单独获得授权。本协议已经构成《中华人民共和国著作权法》第二十五条所规定的书面协议，其效力及于用户在察研科技发布的任何受著作权法保护的内容，无论该内容形成于本协议签订前还是本协议签订后。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          5、察研科技尊重他人合法权益（包括知识产权、名誉权、商誉权等），呼吁您也尊重他人合法权益。如果您违反法律法规的禁止性规定、对他人的合法权益或公众利益造成了侵害，察研科技将依照法律法规的规定，或在适当的情形下，依本协议或其相关规定，删除或屏蔽特定内容直至终止您对研选平台账号的使用。如果您认为用户通过研选平台上传、发布的内容侵犯了您的合法权益，请您联系察研科技相关工作人员并提交相关材料，察研科技将依法进行处理。
+        </strong>
+      </div>
+      <div className="rich-h1-text"> 九、免责声明 </div>
+      <div className="rich-p-line">
+        <strong>
+          1、您理解并同意：察研科技所提供的任何信息（包括但不限于察研科技官方提供的、察研科技用户发布的、察研科技邀请的专家提供的），察研科技并不对其准确性、真实性、可用性、安全性、完整性、正当性做出保证，您应当自行决定是否采纳并自行承担相应的责任。察研科技不对您因使用察研科技提供的任何信息做出的任何决策承担责任。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          也不表明察研科技证实其描述或赞同其观点。所有内容仅供参考，不构成投资建议或者其他实际的操作意见，用户据此操作所造成的后果自行负责。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          2、您理解并同意：察研科技不保证服务一定能满足用户的要求，也不保证服务不会中断，对服务的及时性、准确性不做保证。您使用察研科技提供的服务所存在或导致的风险将完全由您自己承担；因您使用察研科技提供的服务而产生的一切后果也由您自己承担，察研科技对您不承担任何责任，该等风险或后果包括但不限于：
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （1）由于地震、台风、洪水、火灾、战争、政府禁令以及其他不能预见并且对其发生和后果不能防止或避免的不可抗力或受到计算机病毒、木马或其他恶意程序、黑客攻击的破坏等不可控因素可能引起的信息丢失、泄漏等损失和风险；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （2）您或察研科技的电脑软件、系统、硬件和通信线路出现故障导致的服务中断、资料丢失、数据损毁以及其他的损失和风险；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（3）您操作不当或通过非察研科技授权的方式使用察研科技提供的服务带来的损失和风险；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（4）您发布的内容被他人转发、分享，因此等传播可能带来的风险和责任；</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          （5）由于网络信号不稳定等原因，所引起的研选平台账号登录失败、资料同步不完整、页面打开速度慢等风险；
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（6）其他察研科技无法控制或合理预见的情形。</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          3、您理解并同意：研选平台提供的专家服务中涉及专家并非察研科技公司员工，专家均为相关行业的业内专家，其发表行业咨询信息为专家基于其行业经验和认知对相关行业的看法和评论。专家发布的行业咨询信息应当仅供您参考，专家发布的行业咨询信息并不代表研选平台的立场。察研科技不对专家所提供的行业咨询信息的准确性、合法性负责，亦不为您基于得到的行业咨询信息而做的决定、计划和行为承担责任。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          4、您理解并同意：研选平台中转发、摘编的其他专业人士或机构撰写的研究观点及数据仅代表其本人/该机构的分析判断，不代表研选平台观点，察研科技对其中的信息及观点不做任何形式的确认或保证。察研科技不对任何人依据或使用研选平台所载资料的行为或由此而引致的任何后果承担任何责任。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          5、您理解并同意：研选平台文章所载意见、评估及预测仅为该资料出具日的观点和判断，不保证有关观点或分析判断在未来不发生变更。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          6、您理解并同意：研选平台所载信息、意见不构成买卖任何证券、基金及其他金融工具的投资决策建议或推荐，且在任何时候均不构成对任何人具有针对性的、指导具体投资的操作意见，您应当对研选平台文章中的信息和意见进行评估，全面认识金融市场和金融产品的风险收益特征，根据自身情况自主作出决策并自行承担风险。市场有风险，投资需谨慎。
+        </strong>
+      </div>
+      <div className="rich-h1-text"> 十、通知和送达 </div>
+      <div className="rich-p-line">
+        1、您理解并同意，察研科技可能会通过包括但不限于小程序页面提示、公告、系统通知、电子邮件、手机短信、站内信息等通知方式中的一种或多种向您送达相关通知、提示等信息。通知成功发出时，即被视为已送达您。
+      </div>
+      <div className="rich-p-line">
+        2、您理解并同意，任何由于电子邮箱、手机号码、通讯地址等信息错误或其他不可归咎于察研科技的原因，导致您未收到相关规则、通知、提示等信息的，均不影响该等信息对您所产生的法律效力。
+      </div>
+      <div className="rich-p-line">
+        3、您理解并同意，察研科技可向您的电子邮箱、手机号码、平台账号等发送商业性电子信息。
+      </div>
+      <div className="rich-h1-text">十一、法律责任</div>
+      <div className="rich-p-line">
+        1、如果察研科技发现或收到他人投诉用户违反本协议约定、法律法规及监管要求的，察研科技有权不经通知随时对相关内容进行删除、屏蔽，并视行为情节对违规账号处以包括但不限于警告、限制或禁止使用部分或全部功能、账号封禁直至注销的处罚，并公告处理结果。察研科技也有权依照本协议及专项规则的规定，拒绝再向该主体提供服务。
+      </div>
+      <div className="rich-p-line">
+        2、如果您发现任何人违反本协议规定或以其他不当的方式使用察研科技提供的服务，请立即向察研科技投诉。
+      </div>
+      <div className="rich-p-line">
+        3、您理解并同意，察研科技有权依合理判断对违反法律法规或本协议规定的行为进行处罚，对违法违规的任何人采取适当的法律行动，并依据法律法规保存有关信息向有关部门报告等，用户应独自承担由此而产生的一切法律责任。
+      </div>
+      <div className="rich-p-line">
+        4、您理解并同意，因您违反本协议或相关服务条款的规定，导致或产生第三方主张的任何索赔、要求或损失，您应当独立承担责任；察研科技因此遭受损失的，您也应当一并赔偿。
+      </div>
+      <div className="rich-p-line">
+        5、您理解并同意，为及时保障您合法权益不受侵害，如果您的研选平台账号存在权益纠纷，察研科技有权根据情况，采取包括但不限于冻结该账号的部分或全部功能等保护措施，直至有权机关作出生效裁判或用户在不违反本协议的前提下协商一致，并由此所产生的一切法律责任均与察研科技无关。
+      </div>
+      <div className="rich-h1-text">十二、适用法律和争议解决方式</div>
+      <div className="rich-p-line">1、本协议适用中华人民共和国的法律。</div>
+      <div className="rich-p-line">
+        2、如产生的任何纠纷，双方应友好协商解决，协商不成的任何一方有权提交上海国际经济贸易仲裁委员会（上海国际仲裁中心），按照仲裁申请时上海国际经济贸易仲裁委员会现行有效的仲裁规则进行仲裁，仲裁地点在上海市。仲裁裁决是终局的，对双方均有约束力。
+      </div>
+      <div className="rich-h1-text">十三、解释权</div>
+      <div className="rich-p-line">
+        在法律允许的最大范围内，察研科技保留对本协议及相关政策、指引、规则的最终解释权。
+      </div>
+    </div>
+  )
+}
+
+export default LicenseHtml

src/Material/Material.service.ts

@@ -187,6 +187,31 @@ export interface IIntroduceItem {
   Img: string
   Height: string
 }
+export interface IBusinessCardParams {
+  BusinessCardUrl: string //名片地址
+  RealName: string //用户实际名称
+  Mobile: string //手机号
+  CompanyName: string //公司名称
+  InviteShareCode: string //邀请人code
+}
+export interface IOrderInfoRes {
+  CodeUrl: string //二维码参数链接
+  OrderCode: string //订单编号rl
+}
+export interface IOrderPayStatusRes {
+  OrderCode: string //订单编号
+  OrderType: number //订单类型 1：畅读卡订单，2：单场付费订单
+  EndDate: string //结束日期
+  OrderStatus: EOrderStatus //订单状态,0:已取消、1:待支付、2:已支付、3:已退款
+  SourceId: number //文章ID
+  Source: string //来源\n报告 ：article\n活动 ：activity
+}
+export enum EOrderStatus {
+  Cancel = 0, // 0:已取消
+  WaitPay = 1, // 1:待支付
+  Payed = 2, // 2:已支付
+  Refund = 3 // 3:已退款
+}
 
 export const MaterialService = {
   getHomeList: (params: IGetHomeListParams): INewResponse<IGetHomeListRes> =>
@@ -233,6 +258,12 @@ export const MaterialService = {
       url: `/config/research/quotation`,
       method: 'get'
     }),
+  getOrderPayStatus: (OrderCode: string): INewResponse<IOrderPayStatusRes> =>
+    NewAxiosInstanceFunc({
+      url: `/order/orderPay/detail`,
+      method: 'get',
+      params: { OrderCode }
+    }),
   postActicleInterview: (ArticleId: number): INewResponse =>
     NewAxiosInstanceFunc({
       url: `/article/interview/apply`,
@@ -295,5 +326,23 @@ export const MaterialService = {
       url: `/yanxuan_special/record`,
       method: 'post',
       data: { SpecialId, StopTime }
+    }),
+  postUploadBusinessCard: (params: IBusinessCardParams): INewResponse =>
+    NewAxiosInstanceFunc({
+      url: `/user/upload/UserBusinessCard`,
+      method: 'post',
+      data: { ...params }
+    }),
+  postCreateOrderByArticle: (GoodsId: number, SourceId: number): INewResponse<IOrderInfoRes> =>
+    NewAxiosInstanceFunc({
+      url: `/order/addByArticle`,
+      method: 'post',
+      data: { GoodsId, SourceId }
+    }),
+  postCreateOrderByActivity: (GoodsId: number, SourceId: number): INewResponse<IOrderInfoRes> =>
+    NewAxiosInstanceFunc({
+      url: `/order/addByActivity`,
+      method: 'post',
+      data: { GoodsId, SourceId }
     })
 }

src/Material/MaterialInfo.tsx

@@ -34,7 +34,8 @@ const MaterialInfo: React.FC<IMaterialInfoProps> = props => {
   const {
     data,
     loading: infoLoading,
-    run: getArcticleDetail
+    run: getArcticleDetail,
+    refresh: refreshArcticleDetail
   } = useRequest(MaterialService.getArcticleDetail, {
     manual: true,
     formatResult: response => response.data.Data,
@@ -112,14 +113,22 @@ const MaterialInfo: React.FC<IMaterialInfoProps> = props => {
       }
     })
   }
+  const handleToRefresh = () => {
+    refreshArcticleDetail()
+  }
   return (
     <Spin spinning={infoLoading}>
-      <AskAdd visible={visibleAsk} ID={props.articleID} onApply={handleApplyComment} handleClose={handleOkAsk} />
+      <AskAdd visible={visibleAsk} ID={props.articleID} onApply={handleApplyComment} onCloseModel={handleOkAsk} />
       <ValidateEmpty loading={infoLoading} data={data}>
         {data?.HasPermission && data?.HasPermission !== INewPermissionType.OK ? (
           <div className={styles['art-nopower-bg']}>
             {data.IsShowWxPay ? (
-              <PayNoPermission dataInfo={data as IArcticleInfo} tryType={ITryType.Article} border={true} />
+              <PayNoPermission
+                dataInfo={data as IArcticleInfo}
+                tryType={ITryType.Article}
+                border={true}
+                onRefresh={handleToRefresh}
+              />
             ) : (
               <NoPermission
                 hasPermission={data?.HasPermission}

src/Material/PolicyHtml.tsx

@@ -0,0 +1,510 @@
+import React from 'react'
+import styles from './css/LicenseHtml.module.scss'
+
+// 研选平台隐私政策
+const PolicyHtml: React.FC = () => {
+  return (
+    <div className={styles['rich-text-wrapper']}>
+      <div className="rich-title">研选平台隐私政策</div>
+      <div className="rich-h1-text">引言</div>
+      <div className="rich-p-line">
+        察研科技（“我们”）注重保护用户个人信息以及个人隐私。本隐私政策包含我们
+        <strong>收集、处理、存储、使用、共享、转让、公开披露和保护</strong>
+        用户（“您”）的个人信息（以下或称“信息”）的有关条款。 /或使用察研科技提供的任何服务均受本协议之约束。
+      </div>
+      <div className="rich-p-line">
+        我们深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。同时，我们承诺，我们将按照业界成熟的安全标准，采取相应的安全保护措施来保护您的个人信息。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          请在使用我们的服务以及该服务所包含的各项业务功能（以下统称“服务”或“我们的服务”）前，仔细阅读和了解本隐私政策，以帮助您了解我们对您个人信息的处理规则和您维护自己隐私权的方式。有关您个人信息权益的重要条款已用加粗及下划线形式提示，请您特别关注。如果对本隐私政策有任何疑问，您可以通过我们在本隐私政策中公布的联系方式与我们联系。
+        </strong>
+      </div>
+      <div className="rich-h1-text">第一部分 定义</div>
+      <div className="rich-p-line">
+        <strong>
+          1、本协议所称“察研科技”是指研选平台的经营者上海察研科技有限公司及现有和将来设立的相关关联公司的单称或合称。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          2、本协议所称“研选平台”包括但不限于查研观向微信小程序，以及将来增加的网站及对应的移动客户端，以及相关的微信公众号或其他公众号平台或其他小程序，以及可能不时涉及的其他互联网媒介等。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>3、关联公司：</strong>
+        指一方现在或将来控制、受控制或与其处于共同控制下的任何公司、机构。“控制”指直接或者间接拥有管理或影响管理该实体的管理层和政策的权利，无论是通过具有投票权的股权或通过合同等其他方式。
+      </div>
+      <div className="rich-p-line">
+        <strong>4、个人信息：</strong>
+        指以电子或者其他方式记录的与已识别或者可识别的自然人有关的各种信息，不包括匿名化处理后的信息。
+      </div>
+      <div className="rich-p-line">
+        <strong>5、敏感个人信息：</strong>
+        指一旦泄露或者非法使用，容易导致自然人的人格尊严受到侵害或者人身、财产安全受到危害的个人信息。包括
+        <strong>生物识别、宗教信仰、特定身份、医疗健康、金融账户、行踪轨迹</strong>等信息，以及
+        <strong>不满十四周岁未成年人的个人信息</strong>。在本隐私政策中将以<strong>粗体</strong>形式进行显著标识。
+      </div>
+      <div className="rich-h1-text">第二部分 隐私政策</div>
+      <div className="rich-h1-text">本隐私政策将帮助您了解以下内容</div>
+      <div className="rich-h1-text">
+        <ol>
+          <li>一、本隐私政策的管辖法律和适用范围；</li>
+          <li>二、我们如何收集和使用您的个人信息；</li>
+          <li>三、我们如何存储您的个人信息；</li>
+          <li>四、我们如何使用Cookie和同类技术；</li>
+          <li>五、我们如何委托处理、共享、转让、公开披露您的个人信息；</li>
+          <li>六、我们如何保护您的个人信息；</li>
+          <li>七、您管理您个人信息的权利；</li>
+          <li>八、未成年人个人信息保护；</li>
+          <li>九、本隐私政策的更新及如何联系我们；</li>
+        </ol>
+      </div>
+      <div className="rich-h1-text">一、本隐私政策的管辖法律和适用范围</div>
+      <div className="rich-h2-text">（一）本隐私政策的管辖法律</div>
+      <div className="rich-p-line">
+        <strong>
+          本隐私政策依照中华人民共和国（“中国”，为本隐私政策之目的，不包括香港特别行政区、澳门特别行政区和台湾地区）法律（不包括冲突法）制定和解释，适用中国法律并仅受中国法律管辖。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          本隐私政策所称中国法律，指中国的立法机关或政府机构不时颁布的法律法规、规章、规范性文件，以及其他形式的监管规定或政府命令。
+        </strong>
+      </div>
+      <div className="rich-h2-text">（二）本隐私政策的适用范围</div>
+      <div className="rich-p-line">
+        本隐私政策适用于提供的所有服务，您访问研选平台和使用察研科技提供的服务，均适用本隐私政策。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          此外，针对某些特定服务，我们也可能会制定特定的隐私政策/声明/条款（无论具体称谓如何，以下统称“特定隐私政策”），该等特定隐私政策将更加具体地说明我们在特定服务中如何收集、处理、存储、使用、共享、转让、公开披露和保护您的个人信息。如该等特定隐私政策与本隐私政策有不一致之处，则在涉及相关事项时优先适用该等特定隐私政策的相关规定。
+        </strong>
+      </div>
+      <div className="rich-h1-text">二、我们如何收集和使用您的个人信息</div>
+      <div className="rich-p-line">我们仅会出于本隐私政策所述的以下目的，收集和使用您的个人信息：</div>
+      <div className="rich-h2-text">
+        <strong>（一）您注册研选平台账号以成为我们的用户</strong>
+      </div>
+      <div className="rich-p-line">
+        在您使用我们的服务前，您需要注册研选平台账号以成为我们的用户。为账号注册之目的，您需要按照相关网络页面的提示向我们提供用于识别您身份的信息。
+      </div>
+      <div className="rich-p-line">
+        您可以在相关网络页面内使用您本人名下的实名制手机号进行注册（为此您必须保证该手机号已经以您本人名义在相应电信服务商处进行了实名登记，并且该手机号正在由您本人使用），你需要提供完整、真实、准确、最新的个人或机构资料。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          如果您尚未注册研选平台账号，将导致您不能成为我们的用户，但这并不会导致我们禁止您访问研选平台并使用基本的浏览或信息搜索功能。如果您在未注册研选平台账号的情形下访问研选平台，我们仅会在最小必要范围内且在获得您明确授权的情况下请求您的设备权限（您可查看下文所列示之“设备敏感权限与请求目的对照表”以进一步了解具体权限信息与请求目的）。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        在您注册研选平台账号之后，您可以进一步通过相关网络页面上传您的用户头像（头像可以是不包含违法内容的卡通形象或其他图片，我们并不要求您必须上传您的本人照片）或向我们进一步提供您的性别、地区、个人简介等信息（具体以相关网络页面的提示和实际情况为准），这些信息可能有助于我们向您提供更加个性化的服务，但拒绝提供这些信息不会影响您使用我们的服务的基本功能。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（二）您使用我们提供的服务</strong>
+      </div>
+      <div className="rich-p-line">
+        我们的服务包括基本业务功能和扩展业务功能，基本业务功能包含了满足您选择使用察研科技的最主要需求和根本期待的业务功能，如信息浏览功能、信息发布功能、互动交流功能（包括关注、收藏、点赞）。扩展业务功能是除基本业务功能之外的其他业务功能，如搜索功能、专项访谈或专家分享活动、用户画像、客户服务功能。
+      </div>
+      <div className="rich-p-line">
+        为了向您提供服务之目的，我们需要收集、保存和使用下列与您有关的信息。如果您不愿意提供与基本业务功能相关的信息，您将无法使用我们提供的基本业务功能；如果您不愿意提供与扩展业务功能相关的信息，您将无法使用相对应的扩展业务功能，但并不会影响您使用我们提供的基本业务功能。
+      </div>
+      <div className="rich-p-line">
+        <strong>1、基本业务功能包括： </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（1）信息浏览功能：</strong>
+        您可以通过访问研选平台使用我们提供的信息浏览功能。为了满足用户的差异化信息浏览需求，（包括关注、推荐及热门等版面，如有调整请以届时的最新情况为准）：
+      </div>
+      <div className="rich-p-line">a.关注版面：便于您浏览您关注的用户所发布的信息，以及您关注的其他信息等；</div>
+      <div className="rich-p-line">
+        b.推荐版面：是我们向您提供的个性化信息推荐版面。我们根据您在研选平台的浏览记录、关注、收藏、点赞的信息情况，为您推荐您可能感兴趣的信息。如果您对我们推荐的信息不感兴趣或希望减少某些信息的推荐，您可以点击相应推荐信息右下角的“×”，勾选理由后进行精准屏蔽；
+      </div>
+      <div className="rich-p-line">c.热门版面：便于您浏览研选平台内的热门主题、热门作者等。</div>
+      <div className="rich-p-line">
+        <strong>（2）信息发布功能：</strong>
+      </div>
+      <div className="rich-p-line">a.当您发布信息时，我们将记录您发布的信息和依法保存操作日志信息；</div>
+      <div className="rich-p-line">
+        b.当您使用拍摄/上传图片功能发布图片时，我们会请求您授权您的设备的相机/相册权限。如果您拒绝授权该权限，您将无法使用此项功能，但并不影响您使用其他功能。
+      </div>
+      <div className="rich-p-line">
+        <strong>（3）互动交流功能（包括关注、收藏、点赞）：</strong>
+        当您使用互动交流功能（包括关注、收藏、点赞）时，我们会依法保存操作日志信息。
+      </div>
+      <div className="rich-p-line">
+        <strong>2、扩展业务功能包括：</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>（1）搜索功能：</strong>
+        当您使用搜索功能时，我们会记录您的历史搜索记录、并依法保存操作日志信息。该等历史搜索记录通常无法单独识别您的个人身份，不属于您的个人信息，不在本隐私政策的限制范围内。只有当您的历史搜索记录与您的其他信息有联结并可识别您的个人身份时，则在结合使用期间，我们会将您的历史搜索记录作为您的个人信息，按照本隐私政策对其进行处理与保护。
+      </div>
+      <div className="rich-p-line">
+        <strong>（2）专项访谈或专家分享活动：</strong>
+        我们将不时举办线上或线下的专项访谈或专家分享活动，在此类活动中，我们可能需要您提供您的相关个人信息，我们会在相关活动的页面或规则中事先明示收集信息的具体类型、收集目的和收集方式。
+      </div>
+      <div className="rich-p-line">
+        <strong>（3）用户画像：</strong>
+        在遵守法律法规、规章和规范性文件规定的合法目的和正当程序的前提下，我们可能会将您的个人信息在匿名化、汇总、脱敏和加密处理后，形成统计信息或用户画像（但画像无法识别任何用户个人），为您展示和推送相关服务、产品或功能。
+      </div>
+      <div className="rich-p-line">
+        <strong>（4）客户服务：</strong>
+        当您使用客服咨询和投诉功能时，为了方便与您联系和帮助您解决投诉问题，我们可能需要您提供姓名、联系方式、我们相关业务规则要求提供的其他信息，以及您明示同意提供的其他信息。
+      </div>
+      <div className="rich-p-line">
+        此外，我们可能不时增加新的功能或对已有功能作出调整。我们将严格遵循法律法规的规定和本隐私政策的约定，依法采取必要的措施，保护您的数据隐私权和您管理您个人信息的权利。
+      </div>
+      <div className="rich-p-line">
+        <strong>3、支付功能：</strong>
+      </div>
+      <div className="rich-p-line">
+        在您使用我们的付费服务时，您需要通过第三方支付平台 （主要包括支付宝支付、微信支付等）
+        进行支付，相关服务和责任将由第三方承担。第三方会收集您的账单信息，如您不想第三方获得您的前述信息，请不要使用支付功能。
+      </div>
+      <div className="rich-p-line">
+        此外，我们可能不时增加新的功能或对已有功能作出调整。我们将严格遵循法律法规的规定和本隐私政策的约定，依法采取必要的措施，保护您的数据隐私权和您管理您个人信息的权利。
+      </div>
+      <div className="rich-p-line">
+        <strong>4、设备敏感权限与请求目的对照表</strong>
+      </div>
+      <table className="rich-table">
+        <tr>
+          <th>序号</th>
+          <th>设备敏感权限</th>
+          <th>调用权限的目的</th>
+          <th>权限授权方式</th>
+          <th>您是否可自行关闭</th>
+          <th>我们的建议</th>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>相机/相册</td>
+          <td>基于用户主动操作，拍摄/上传图片</td>
+          <td>在用户首次拍摄/上传图片时进行弹窗提示</td>
+          <td>是</td>
+          <td>
+            如果您经常上传图片，则可保持该权限开启；如果您很少上传图片，则建议您仅在使用相应功能时开启该权限，在使用完毕后及时关闭。
+          </td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>系统通知</td>
+          <td>向用户发送通知</td>
+          <td>在用户首次使用研选平台时进行弹窗提示</td>
+          <td>是</td>
+          <td>/</td>
+        </tr>
+      </table>
+      <div className="rich-p-line">
+        <strong>备注：</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          您可以通过您设备的“设置”路径，查看、开启或关闭上述敏感权限。在不同的设备或系统版本中，相关查看或操作路径和方式可能有所不同，具体请参考设备及系统开发方说明或指引。
+        </strong>
+      </div>
+      <div className="rich-h2-text">
+        <strong>（三）保障研选平台和相关服务的运行安全</strong>
+      </div>
+      <div className="rich-p-line">
+        为了保障研选平台和相关服务的运行安全，在您使用或访问研选平台时，我们会收集与您设备相关的设备型号、操作系统、操作系统版本、分辨率、网络信息、唯一设备标识符、MAC地址、浏览器类型/版本/内核、使用的语言、电信运营商、手机网络，储存您在使用我们服务的过程中产生的网络日志信息。这些信息是保障研选平台正常运行和提供服务所必须收集的基本信息。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（四）征得授权同意的例外</strong>
+      </div>
+      <div className="rich-p-line">根据中国法律，在以下情形中，收集和使用您的个人信息无需征得您的授权同意：</div>
+      <div className="rich-p-line">1、为订立、履行个人作为一方当事人的合同所必需； </div>
+      <div className="rich-p-line">2、为履行法定职责或者法定义务所必需；</div>
+      <div className="rich-p-line">
+        3、为应对突发公共卫生事件，或者紧急情况下为保护自然人的生命健康和财产安全所必需；
+      </div>
+      <div className="rich-p-line">4、为公共利益实施新闻报道、舆论监督等行为，在合理的范围内处理个人信息；</div>
+      <div className="rich-p-line">
+        5、依照《个人信息保护法》等相关法律法规在合理的范围内处理个人自行公开或者其他已经合法公开的个人信息；
+      </div>
+      <div className="rich-p-line">6、法律、行政法规规定的其他情形。</div>
+      <div className="rich-h1-text">三、我们如何存储您的个人信息</div>
+      <div className="rich-h2-text">
+        <strong>（一）存储地域</strong>
+      </div>
+      <div className="rich-p-line">
+        我们在中国境内收集和产生的个人信息，将仅存储在中国境内。如果因为处理跨境业务需要向境外机构传输境内收集的个人信息的，我们会严格执行法律法规、规章或规范性文件的规定，向您告知出境的目的、涉及的个人信息类型、接收方身份、安全风险，且事先征得您的同意，并通过签订协议、安全评估、核查等有效措施，要求接收方为所获得的个人信息保密并妥善处理，确保接收方有充分的能力来保护您的个人信息。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（二）存储期限</strong>
+      </div>
+      <div className="rich-p-line">除非法律法规、规章或规范性文件另有规定，我们将按如下期间存储您的信息：</div>
+      <div className="rich-p-line">
+        1、我们将在实现本隐私政策中所述目的所必需的期间内保留您的个人信息，除非法律法规、规章或规范性文件要求或允许在更长的期间内存储这些信息。
+      </div>
+      <div className="rich-p-line">
+        2、您的个人信息经匿名化处理后将形成可以使用及流通的数据，我们对此类数据的保存及处理无需另行通知并征得您的同意。
+      </div>
+      <div className="rich-h1-text">四、我们如何使用Cookie和同类技术</div>
+      <div className="rich-h2-text">
+        <strong>（一）Cookie </strong>
+      </div>
+      <div className="rich-p-line">
+        为确保网站正常高效运转、为您获得更轻松的访问体验、向您推荐您可能感兴趣的内容，我们有时会在您的设备终端/系统上存储名为
+        Cookie的小数据文件。 Cookie会帮助您在后续访问研选平台时调用您的信息，简化您填写个人信息（例如登录等）的流程。
+      </div>
+      <div className="rich-p-line">
+        我们不会将Cookie用于本隐私政策所述目的之外的任何用途。您可根据自己的偏好管理或删除Cookie。您可以清除计算机或移动设备上保存的所有Cookie，您有权接受或拒绝Cookie。大多数浏览器会自动接受Cookie，但您通常可根据自己的需要来修改浏览器的设置以拒绝Cookie；另外，您也可以清除软件内保存的所有Cookie。但您可能因此无法完全体验我们某些便捷性的服务功能。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（二）其他同类技术</strong>
+      </div>
+      <div className="rich-p-line">目前，我们并未使用除Cookie以外的其他同类技术。</div>
+      <div className="rich-h1-text">五、我们如何委托处理、共享、转让、公开披露您的个人信息</div>
+      <div className="rich-h2-text">
+        <strong>（一）委托处理</strong>
+      </div>
+      <div className="rich-p-line">
+        我们可能委托授权合作伙伴处理您的个人信息，以便授权合作伙伴代表我们为您提供某些服务或履行职能。我们仅会出于本隐私政策声明的合法、正当、必要、特定、明确的目的委托其处理您的信息，授权合作伙伴只能接触到其履行职责所需信息，且我们将会通过协议要求他们妥善保护和处理您的个人信息，不得将您的个人信息用于其他任何超出委托范围的目的。如果授权合作伙伴将您的个人信息用于我们未委托的用途，其将单独征得您的同意。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（二）共享</strong>
+      </div>
+      <div className="rich-p-line">我们不会与任何公司、组织和个人共享您的个人信息，但以下情况除外：</div>
+      <div className="rich-p-line">1、事先获得您明确的同意或授权；</div>
+      <div className="rich-p-line">
+        2、基于法定情形：根据法律规定、诉讼等争议解决需要，司法机关或政府机构等依法提出的要求；
+      </div>
+      <div className="rich-p-line">
+        3、与关联方共享：我们可能会与我们的关联公司共享您的个人信息。但我们仅共享必要的个人信息，且关联公司对您的个人信息的处理和保护亦须受本隐私政策所声明的目的的约束。关联公司如要改变您的个人信息的处理目的，将再次征求您的授权和同意；
+      </div>
+      <div className="rich-p-line">
+        4、与授权合作伙伴共享：仅为实现本隐私政策声明之目的，我们的某些服务由授权合作伙伴提供，我们可能会与合作伙伴共享您的某些个人信息；
+      </div>
+      <div className="rich-p-line">5、您与我们关于个人信息共享的其他约定。</div>
+      <div className="rich-p-line">
+        <strong>
+          请您知悉，即使已经取得您的授权同意，我们也仅会出于合法、正当、必要、特定、明确的目的共享您的个人信息，并尽量对共享内容中的个人信息进行去标识化处理。对我们与之共享您的个人信息的公司、组织和个人，我们会与其签署严格的数据保护协定，要求其按照我们的说明、本隐私政策以及其他任何相关的保密和安全措施妥善保护和处理您的个人信息。
+        </strong>
+      </div>
+      <div className="rich-h2-text">
+        <strong>（三）转让</strong>
+      </div>
+      <div className="rich-p-line">我们不会将您的个人信息转让给其他任何公司、组织和个人，但以下情形除外：</div>
+      <div className="rich-p-line">
+        1、随着我们业务的发展，我们及我们的关联公司有可能进行合并、收购、资产转让或其他类似的交易。如相关交易涉及您的个人信息转让，我们会按照相关法律规定向您告知接收方的名称和联系方式，我们亦会要求新持有您个人信息的公司、组织和个人继续受本隐私政策的约束，接受方变更本隐私政策所述个人信息处理目的、处理方式的，需按照法律规定重新取得您的授权同意；
+      </div>
+      <div className="rich-p-line">
+        2、在获得您明确同意的情形下转让，亦即获得您明确同意后，我们会向其他方转让我们已经获取的您的个人信息。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（四）公开披露</strong>
+      </div>
+      <div className="rich-p-line">我们仅会在以下情形中，公开披露您的个人信息：</div>
+      <div className="rich-p-line">1、已经获得您的单独同意；</div>
+      <div className="rich-p-line">
+        2、根据中国法律的要求、强制性的行政执法或司法活动的要求所必须提供您个人信息的情况下，我们可能会依据所要求的个人信息类型和披露方式公开披露您的个人信息。在可行的限度内，当我们收到上述披露信息的请求时，我们会要求请求方出具与之相应的法律文件，如传票或调查函；
+      </div>
+      <div className="rich-p-line">3、中国法律允许的其他情形。</div>
+      <div className="rich-h2-text">
+        <strong>（五）共享、转让、公开披露个人信息时事先征得授权同意的例外</strong>
+      </div>
+      <div className="rich-p-line">
+        根据中国法律，在以下情形中，共享、转让、公开披露您的个人信息无需事先征得您的授权同意：
+      </div>
+      <div className="rich-p-line">1、为订立、履行个人作为一方当事人的合同所必需；</div>
+      <div className="rich-p-line">2、为履行法定职责或者法定义务所必需；</div>
+      <div className="rich-p-line">
+        3、为应对突发公共卫生事件，或者紧急情况下为保护自然人的生命健康和财产安全所必需；
+      </div>
+      <div className="rich-p-line">4、为公共利益实施新闻报道、舆论监督等行为，在合理的范围内处理个人信息；</div>
+      <div className="rich-p-line">
+        5、依照《个人信息保护法》等相关法律法规在合理的范围内处理个人自行公开或者其他已经合法公开的个人信息；
+      </div>
+      <div className="rich-p-line">6、法律、行政法规规定的其他情形。</div>
+      <div className="rich-p-line">
+        根据法律规定，共享、转让、公开披露经去标识化处理的个人信息，且确保数据接收方无法复原并重新识别个人信息主体的，我们对此类数据的处理将无需另行向您通知并征得您的同意。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          请注意，您在使用我们服务时自愿发布甚至公开分享的信息，可能会涉及您或他人的个人信息甚至敏感个人信息，例如您的发帖、跟帖评论、聊天内容所包含的文字、图片等各种形式的信息。请您在使用我们的服务时谨慎确认是否要发布甚至公开分享相关信息。
+        </strong>
+      </div>
+      <div className="rich-h1-text">六、我们如何保护您的个人信息</div>
+      <div className="rich-h2-text">
+        <strong>（一）数据安全措施</strong>
+      </div>
+      <div className="rich-p-line">
+        为保障您的信息安全，我们努力采取各种符合业界标准的物理、电子和管理方面的安全措施来保护您的个人信息，防止您的个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们将尽力采取一切合理可行的措施，保护您的个人信息。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          请注意，无法与任何特定个人直接建立联系的数据，不属于个人信息。如果我们将这类非个人信息与其他信息结合用于识别自然人个人身份，或将其与个人信息结合使用，则在结合使用期间，此类信息将被视为个人信息。
+        </strong>
+      </div>
+      <div className="rich-h2-text">
+        <strong>（二）账号安全</strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          互联网并非绝对安全的环境，我们强烈建议您通过安全方式、使用复杂密码，协助我们保障您的账号安全。如果您发现自己的个人信息泄密，尤其是您的账号密码发生泄漏，请您立即根据本隐私政策中提供的联系方式联络我们，以便我们采取相应措施。
+        </strong>
+      </div>
+      <div className="rich-h2-text">
+        <strong>（三）个人信息安全事件处置</strong>
+      </div>
+      <div className="rich-p-line">
+        在不幸发生个人信息安全事件后，我们将按照中国法律的规定，及时向您告知：安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。我们将及时将事件相关情况以邮件、信函、电话、推送通知等方式告知您，难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。同时，我们还将按照监管部门要求，主动上报个人信息安全事件的处置情况。
+      </div>
+      <div className="rich-h1-text">七、您管理您个人信息的权利</div>
+      <div className="rich-p-line">
+        按照中国法律、并适当参照其他国家或地区的通行做法，我们保障您对自己的个人信息行使以下权利：
+      </div>
+      <div className="rich-h2-text">
+        <strong>（一）访问和编辑您的个人信息</strong>
+      </div>
+      <div className="rich-p-line">
+        您有权访问和编辑您的个人信息，法律规定的例外情况除外。如果您想行使数据访问和编辑的权利，可以通过以下方式自行访问和编辑：
+      </div>
+      <div className="rich-p-line">
+        1、账号信息：如果您希望访问或编辑您的账号中的个人资料信息、更改您的密码、添加安全信息或其他相关信息（以下统称“账号信息”），您可以在研选平台（
+        <span className="rich-underline">在登录状态下通过“我的－个人设置”路径</span>）执行此类操作。
+      </div>
+      <div className="rich-p-line">
+        2、关注用户：如果您希望访问您的关注用户信息，您可以在移动端访问研选平台（
+        <span className="rich-underline">在登录状态下通过“首页－关注”/“个人主页－更多－关注”路径</span>
+        ）找到您的相应的关注用户，并在相应的页面执行此类操作。
+      </div>
+      <div className="rich-p-line">
+        3、收藏信息：如果您希望访问您的收藏信息，您可以在移动端访问研选平台（
+        <span className="rich-underline">在登录状态下通过“我的－收藏”路径</span>
+        ）找到您的相应的收藏信息，并在相应的页面执行此类操作。
+      </div>
+      <div className="rich-p-line">
+        4、搜索记录：如果您希望访问您的最近的搜索记录，您可以在端搜索页面找到您的历史搜索执行此类操作。
+      </div>
+      <div className="rich-p-line">
+        5、浏览记录：如果您希望访问您的最近的搜索记录您可以在研选平台（
+        <span className="rich-underline">在登录状态下通过“我的-足迹”</span>）找到您的浏览记录执行此类操作。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（二）更正、补充您的个人信息</strong>
+      </div>
+      <div className="rich-p-line">
+        当您发现我们处理的关于您的个人信息不准确或者不完整时，您有权要求我们做出更正、补充。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（三）删除您的个人信息</strong>
+      </div>
+      <div className="rich-p-line">您可以通过“（一）访问和编辑您的个人信息”中允许的方式删除您的部分个人信息。</div>
+      <div className="rich-p-line">在以下情形中，您可以向我们提出删除个人信息的请求：</div>
+      <div className="rich-p-line">1、您的个人信息的处理目的已实现、无法实现或者为实现处理目的不再必要；</div>
+      <div className="rich-p-line">2、我们停止提供产品或者服务，或者保存期限已届满；</div>
+      <div className="rich-p-line">3、您撤回同意；</div>
+      <div className="rich-p-line">4、我们违反法律、行政法规或者违反约定处理个人信息；</div>
+      <div className="rich-p-line">5、法律、行政法规规定的其他情形。</div>
+      <div className="rich-p-line">
+        <strong>
+          法律、行政法规规定的保存期限未届满，或者删除个人信息从技术上难以实现的，我们会停止除存储和采取必要的安全保护措施之外的处理。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        如果我们决定响应您的删除请求，我们还将同时尽可能通知从我们处获得您的个人信息的主体，要求其及时删除，除非中国法律另有规定，或这些主体获得您的独立授权。
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          当您从我们的服务中删除信息后，我们可能不会立即从备份系统中删除相应的信息，但会在备份更新时删除这些信息。
+        </strong>
+      </div>
+      <div className="rich-h2-text">
+        <strong>（四）改变您授权同意的范围或撤回授权</strong>
+      </div>
+      <div className="rich-p-line">
+        每个业务功能需要一些基本的个人信息才能得以完成。您可以通过“（一）访问和编辑您的个人信息”中允许的方式删除信息、更改隐私设置，以及在浏览器或您的移动设备操作系统中关闭相关功能等方式改变同意范围或撤回您的授权。
+        <strong>
+          但请您理解，当您执行上述操作后，我们将无法继续为您提供撤回同意或授权所对应的服务，也将不再处理相应的个人信息。但您撤回同意的决定，不会影响此前基于您的授权而开展的个人信息处理。
+        </strong>
+      </div>
+      <div className="rich-h2-text">
+        <strong>（五）注销账号 </strong>
+      </div>
+      <div className="rich-p-line">
+        <strong>
+          您有权注销您的研选平台账号。您可以通过我们的在线客服以及我们不时提供的其他方式（如有）与我们取得联系，我们将为您提供账号注销服务。
+        </strong>
+      </div>
+      <div className="rich-p-line">
+        在您主动注销账号之后，我们将停止为您提供服务，并根据中国法律的规定删除您的个人信息，法律另有规定的除外。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（六）约束信息系统自动决策</strong>
+      </div>
+      <div className="rich-p20-line">
+        在某些业务功能中，我们可能仅依据信息系统、算法等在内的非人工自动决策机制做出决定。如果这些决定显著影响您的合法权益，您有权要求我们作出解释，并有权拒绝我们仅通过自动化决策的方式作出决定，我们也将提供适当的救济方式。
+      </div>
+      <div className="rich-h2-text">
+        <strong>（七）响应您的上述请求</strong>
+      </div>
+      <div className="rich-p-line">
+        为了保障您的账号及个人信息安全，在涉及部分请求（如注销账号等）时，我们可能需要您提供相应方式证明您的身份和请求的正当性，我们将在收到您反馈并验证您的身份后的15个工作日内答复您的请求。
+      </div>
+      <div className="rich-p-line">
+        对于您合理的请求，我们原则上不收取费用，但对多次重复、超出合理限度的请求，我们将视情况收取一定的成本费用。
+      </div>
+      <div className="rich-p-line">
+        对于那些无端重复、需要过多技术手段（例如，需要开发新系统或从根本上改变现行惯例）、给他人合法权益带来风险或非常不切实际的请求，我们可能会予以拒绝。
+      </div>
+      <div className="rich-p-line">在以下情形中，按照法律法规要求，我们将无法响应您的请求：</div>
+      <div className="rich-p-line">1、与个人信息控制者履行法律法规规定的义务相关的；</div>
+      <div className="rich-p-line">2、与国家安全、国防安全直接相关的；</div>
+      <div className="rich-p-line">3、与公共安全、公共卫生、重大公共利益直接相关的；</div>
+      <div className="rich-p-line">4、与犯罪侦查、起诉、审判和执行判决等直接相关的；</div>
+      <div className="rich-p-line">5、个人信息控制者有充分证据表明个人信息主体存在主观恶意或滥用权利的；</div>
+      <div className="rich-p-line">
+        6、出于维护个人信息主体或其他个人的生命、财产等重大合法权益但又很难得到本人同意的；
+      </div>
+      <div className="rich-p-line">
+        7、响应个人信息主体的请求将导致个人信息主体或其他个人、组织的合法权益受到严重损害的；
+      </div>
+      <div className="rich-p-line">8、涉及商业秘密的。</div>
+      <div className="rich-h1-text">八、未成年人个人信息保护</div>
+      <div className="rich-p-line">
+        基于我们的服务的特征，我们的网站和服务面向成年人，我们不向未成年人提供任何服务，并且我们拒绝收集未成年人的个人信息或者向这类人群发送任何宣传资料。
+      </div>
+      <div className="rich-p-line">
+        我们不会寻求或试图寻求接收来自未成年人的任何个人信息。如果家长或监护人有理由相信未成年人未经事先同意而向我们提交了个人信息，请联系我们以确保删除此类个人信息，并保证未成年人取消其所订阅并使用的研选平台服务。
+      </div>
+      <div className="rich-h1-text">九、本隐私政策的更新及如何联系我们 </div>
+      <div className="rich-h2-text">
+        <strong>（一）本隐私政策的更新</strong>
+      </div>
+      <div className="rich-p-line">
+        我们的服务可能不时发生变化，本隐私政策也将随之调整。未经您明确同意，我们不会削减您依据本隐私政策所应享有的权利。
+      </div>
+      <div className="rich-p-line">
+        我们会通过在研选平台发出更新版本或以其他方式提醒您相关内容的更新，也请您访问研选平台以便及时了解最新的隐私政策。对于重大变更，我们还会提供更为显著的通知（包括我们会通过平台公示的方式进行通知甚至向您提供弹窗提示）。
+      </div>
+      <div className="rich-p-line">本隐私政策所指的重大变更包括但不限于：</div>
+      <div className="rich-p-line">
+        1、我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息类型、个人信息的使用方式等；
+      </div>
+      <div className="rich-p-line">
+        2、我们在所有权结构、组织架构等方面发生重大变化。如业务调整、破产并购等引起的所有者变更；
+      </div>
+      <div className="rich-p-line">3、个人信息共享、转让或公开披露的主要对象发生变化；</div>
+      <div className="rich-p-line">4、您参与个人信息处理方面的权利及其行使方式发生重大变化；</div>
+      <div className="rich-p-line">5、我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；</div>
+      <div className="rich-p-line">6、个人信息安全影响评估报告表明存在高风险时。</div>
+      <div className="rich-p-line">我们还会在研选平台上持续展示本隐私政策的历史版本。</div>
+      <div className="rich-h2-text">
+        <strong>（二）您如何联系我们</strong>
+      </div>
+      <div className="rich-p-line">
+        如果您对本隐私政策有任何意见、建议或需要咨询的事项，您可以通过如下方式与我们的个人信息保护专职部门取得联系：
+      </div>
+      <div className="rich-p-line">上海察研科技有限公司 合规法务部（收）</div>
+      <div className="rich-p-line">联系邮箱：compliance@hzinsights.com</div>
+      <div className="rich-p-line">联系地址：上海市浦东新区世纪大道210号21世纪大厦12层</div>
+      <div className="rich-p-line">
+        您也可以通过我们的在线客服，以及我们不时提供的其他方式（如有）与我们取得联系并对您的意见、建议或需要咨询的事项做充分描述，我们将在验证您身份后的15个工作日内答复您的请求并尽力解决。
+      </div>
+    </div>
+  )
+}
+
+export default PolicyHtml

src/Material/components/ApplyPermission.tsx

@@ -16,14 +16,14 @@ interface IApplyPermissionProps {
   visible: boolean
   detailID?: number
   tryType?: ITryType
-  handleClose: () => void
+  onCloseModel: () => void
 }
 
 /**
  * 申请权限
  */
 const ApplyPermission: React.FC<IApplyPermissionProps> = props => {
-  const { visible, detailID, tryType, handleClose } = props
+  const { visible, detailID, tryType, onCloseModel } = props
   const login2p = useLogin2p()
   const [form] = Form.useForm()
   const [loading, setLoading] = useState(false)
@@ -101,7 +101,7 @@ const ApplyPermission: React.FC<IApplyPermissionProps> = props => {
   const handleToClose = () => {
     // 关闭前把名片给清除了
     setImageUrl(undefined)
-    handleClose()
+    onCloseModel()
   }
   return (
     <Modal

src/Material/components/ApplyResult.tsx

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

src/Material/components/AskAdd.tsx

@@ -8,14 +8,14 @@ interface IAskAddProps {
   ID: number
   title?: string
   placeholder?: string
-  handleClose: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  onCloseModel: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void
   onApply: (ID: number, content: string) => void
 }
 /**
  * 提问/留言
  */
 const AskAdd: React.FC<IAskAddProps> = props => {
-  const { visible, ID, title = '留言', placeholder = '可以留下您对报告内容的看法或者疑问', handleClose } = props
+  const { visible, ID, title = '留言', placeholder = '可以留下您对报告内容的看法或者疑问', onCloseModel } = props
   const [form] = Form.useForm()
 
   useEffect(() => {
@@ -33,7 +33,7 @@ const AskAdd: React.FC<IAskAddProps> = props => {
     <div onClick={e => e.stopPropagation()}>
       <Modal
         open={visible}
-        onCancel={handleClose}
+        onCancel={onCloseModel}
         destroyOnClose={true}
         maskClosable={false}
         title={title}
@@ -61,7 +61,7 @@ const AskAdd: React.FC<IAskAddProps> = props => {
           </Item>
           <Row align="middle" justify="center">
             <Item>
-              <Button onClick={handleClose} className="m-r-xs">
+              <Button onClick={onCloseModel} className="m-r-xs">
                 取消
               </Button>
               <Button type="primary" htmlType="submit">

src/Material/components/BuyModel.tsx

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

src/Material/components/Countdown.tsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react'
+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(() => {
+    if (countTime > 0) {
+      timer = setTimeout(() => {
+        console.log(countTime)
+        setCountTime(countTime => countTime - 1)
+      }, 1000)
+    }
+    return () => clearTimeout(timer)
+  }, [countTime])
+
+  return <>{dayjs(countTime * 1000 - 28800000).format('mm:ss')}</>
+}
+
+export default Countdown

src/Material/components/NoPermission.tsx

@@ -165,7 +165,7 @@ const NoPermission: React.FC<INoPermissionProps> = props => {
     }
     return tryType === 'Article' ? '您暂无权限查看此报告内容~' : '您暂无权限参加此活动~'
   }
-  const { run } = useRequest(MaterialService.postApplyTry, {
+  const { run: postApplyTry } = useRequest(MaterialService.postApplyTry, {
     manual: true,
     onSuccess: res => {
       res.data.Ret === 200 ? message.success('提交成功，请等待销售人员与您联系') : message.info(res.data.Msg)
@@ -184,7 +184,7 @@ const NoPermission: React.FC<INoPermissionProps> = props => {
     }
     // HasPermission=3，5，不弹表单，直接提交申请
     if (hasPermission === INewPermissionType.NoApplyQY || hasPermission === INewPermissionType.NoApplyFICC) {
-      run({ ApplyMethod: 1, DetailId: detailID, TryType: tryType })
+      postApplyTry({ ApplyMethod: 1, DetailId: detailID, TryType: tryType })
       return
     }
     // HasPermission=7，弹表单填写，提交申请
@@ -284,7 +284,7 @@ const NoPermission: React.FC<INoPermissionProps> = props => {
           </div>
         </div>
       )}
-      <ApplyPermission visible={visibleApply} detailID={detailID} tryType={tryType} handleClose={handleOKApply} />
+      <ApplyPermission visible={visibleApply} detailID={detailID} tryType={tryType} onCloseModel={handleOKApply} />
     </>
   )
 }

src/Material/components/PayNoPermission.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request'
-import { useHistory } from 'react-router-dom'
 
-import { Popover, Result, Tooltip, message } from 'antd'
-import { InfoCircleOutlined } from '@ant-design/icons'
+import { Tooltip, message } from 'antd'
 
 import NoPowerImg from 'assets/nopower.png'
 import BagImg from 'assets/bag.png'
@@ -14,88 +12,94 @@ import TipsSvg from 'assets/tips2.svg'
 import { useMedia } from 'Context/Media/MediaContext'
 import ApplyPermission from './ApplyPermission'
 import NButton from 'components/NButton/NButton'
-import { IArcticleInfo, MaterialService } from 'Material/Material.service'
-import { ITryType, ISpecialType, INewPermissionType } from './NoPermission'
+import { EOrderStatus, IArcticleInfo, IOrderPayStatusRes, MaterialService } from 'Material/Material.service'
+import { ITryType, INewPermissionType } from './NoPermission'
 import ApplyResult from './ApplyResult'
-import styles from '../css/NoPermission.module.scss'
-import YiDongModel from './YiDongModel'
 import BuyModel, { PayType } from './BuyModel'
 import QRCodeModel from './QRCodeModel'
 import UploadInfoModel from './UploadInfoModel'
+import styles from '../css/NoPermission.module.scss'
 
 interface IPayNoPermissionProps {
   dataInfo: IArcticleInfo
   tryType: ITryType
   border?: boolean
+  onRefresh?: () => void // 刷新页面
 }
 /**购买权限 */
 const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
-  const { dataInfo, tryType, border = false } = 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 [visibleResult, setVisibleResult] = useState(true) // 支付结果弹框
-
-  const history = useHistory()
-  const media = useMedia()
-  // const [isHideBack, setIsHideBack] = useState<boolean>(false) // 识别报告详情页+活动详情页，隐藏返回按钮
-
-  useEffect(() => {
-    // handleChangeMenuKey(history.location)
-    // history.listen(location => {
-    //   window.scrollTo(0, 0)
-    //   handleChangeMenuKey(location)
-    // })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // const handleChangeMenuKey = (location: any) => {
-  //   // 识别报告详情页+活动详情页，适配移动菜单
-  //   if (media.isSmallMax) {
-  //     const routhStr = ['/material/info', '/activity/info', '/activity/detail', '/internal/article', '/column/detail']
-  //     let flag = false
-  //     routhStr.forEach(item => {
-  //       if (location.pathname.includes(item)) {
-  //         setIsHideBack(true)
-  //         flag = true
-  //       }
-  //     })
-  //     if (!flag) {
-  //       setIsHideBack(false)
-  //     }
-  //   } else {
-  //     setIsHideBack(false)
-  //   }
-  // }
-
-  const { run } = useRequest(MaterialService.postApplyTry, {
+  // 报告畅读卡购买,创建订单
+  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 { run: postApplyTry } = useRequest(MaterialService.postApplyTry, {
     manual: true,
     onSuccess: res => {
       res.data.Ret === 200 ? message.success('提交成功，请等待销售人员与您联系') : message.info(res.data.Msg)
     }
   })
+  // 关闭支付结果弹框
   const handleCloseResult = () => {
+    // 并刷新页面
+    onRefresh && onRefresh()
     setVisibleResult(false)
   }
+  // 关闭支付code弹框
+  const handleCloseCode = () => {
+    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)
     // 判断是否需要上传名片
-    setVisibleUpload(true)
     if (dataInfo.IsNeedBusinessCard) {
       setVisibleUpload(true)
       return
     }
-    // 打开畅读卡弹框
-    setVisibleBuyCard(true)
+    // 调接口获取支付二维码 todo
+    postCreateOrderByArticle(GoodsId, dataInfo.Detail.ArticleId)
+    setVisibleBuyCard(false)
   }
   // 申请试用
   const handleToAskTry = () => {
@@ -111,15 +115,36 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
     }
     // HasPermission=3，5，不弹表单，直接提交申请
     if (hasPermission === INewPermissionType.NoApplyQY || hasPermission === INewPermissionType.NoApplyFICC) {
-      run({ ApplyMethod: 1, DetailId: dataInfo.Detail.ArticleId, TryType: tryType })
+      postApplyTry({ ApplyMethod: 1, DetailId: dataInfo.Detail.ArticleId, TryType: tryType })
       return
     }
     // HasPermission=7，弹表单填写，提交申请
     setVisibleApply(true)
   }
-  // 关闭申请试用弹框
-  const handleCloseApply = () => {
-    setVisibleApply(false)
+
+  // 订单支付结果
+  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 (
@@ -141,7 +166,6 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
                 </div>
               }
             >
-              {/* <InfoCircleOutlined style={{ fontSize: 16 }} /> */}
               <img src={TipsSvg} alt="icon" className="nopower-tips-icon" />
             </Tooltip>
           </div>
@@ -176,37 +200,31 @@ const PayNoPermission: React.FC<IPayNoPermissionProps> = props => {
           </div>
         </div>
       </div>
-      {/* <QRCodeModel
-        visible={visibleResult}
-        detailID={dataInfo.Detail.ArticleId}
-        tryType={tryType}
-        handleClose={handleCloseResult}
-      /> */}
-
-      {/* <ApplyResult
-        visible={visibleResult}
-        detailID={dataInfo.Detail.ArticleId}
-        tryType={tryType}
-        handleClose={handleCloseResult}
-      /> */}
+      <QRCodeModel
+        visible={visibleOrderCode}
+        codeUrl={articleOrderInfo?.Data.CodeUrl || ''}
+        orderCode={articleOrderInfo?.Data.OrderCode || ''}
+        onCloseModel={handleCloseCode}
+        onSendPayResult={handleDoPayResult}
+      />
+      <ApplyResult visible={visibleResult} info={payInfo} onCloseModel={handleCloseResult} />
       <BuyModel
         visible={visibleBuyCard}
-        detailID={dataInfo.Detail.ArticleId}
-        tryType={tryType}
-        payType={PayType.Single}
-        handleClose={handleCloseBuy}
+        goodsList={dataInfo.GoodsList}
+        payType={PayType.Card} // todo
+        onCloseModel={handleCloseBuy}
+        handleCheckPay={handleClickPay}
       />
       <UploadInfoModel
         visible={visibleUpload}
-        detailID={dataInfo.Detail.ArticleId}
-        tryType={tryType}
-        handleClose={handleCloseUpload}
+        onCloseModel={handleCloseUpload}
+        handleSuccess={handleUploadCardSuccess}
       />
       <ApplyPermission
         visible={visibleApply}
         detailID={dataInfo.Detail.ArticleId}
         tryType={tryType}
-        handleClose={handleCloseApply}
+        onCloseModel={handleCloseApply}
       />
     </>
   )

src/Material/components/QRCodeModel.tsx

@@ -1,125 +1,60 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request'
 
-import { Button, Form, Input, message, Row, Modal, Upload, QRCode } from 'antd'
-import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
-import type { UploadChangeParam } from 'antd/es/upload'
-import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
+import { Modal, QRCode } from 'antd'
 import WechartSvg from 'assets/wechat.svg'
 
-import NButton from 'components/NButton/NButton'
-import { IGoodsListItem, MaterialService } from '../Material.service'
+import { EOrderStatus, IOrderPayStatusRes, MaterialService } from '../Material.service'
 import { useLogin2p } from 'Login2p/Login2pContext'
-import { ITryType } from './NoPermission'
+import Countdown from './Countdown'
 import styles from '../css/NoPermission.module.scss'
 
-const { Item } = Form
 interface IQRCodeModelProps {
   visible: boolean
-  detailID?: number
-  tryType?: ITryType
-  handleClose: () => void
+  codeUrl: string
+  orderCode: string
+  onCloseModel: () => void
+  onSendPayResult: (orderResut: IOrderPayStatusRes) => void
 }
+let payTimer: NodeJS.Timeout
 
 /**
  * 二维码付款弹框
  */
 const QRCodeModel: React.FC<IQRCodeModelProps> = props => {
-  const { visible, detailID, tryType, handleClose } = props
+  const { visible, codeUrl, orderCode, onCloseModel, onSendPayResult } = props
   const login2p = useLogin2p()
-  const [form] = Form.useForm()
-  const [loading, setLoading] = useState(false)
-  const [imageUrl, setImageUrl] = useState<string>()
-  const [payType, setPayType] = useState<number>(1)
 
-  const uploadButton = (
-    <div>
-      {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <div style={{ marginTop: 8 }}>上传名片</div>
-    </div>
-  )
-
-  const { run } = useRequest(MaterialService.postApplyTry, {
+  // 获取订单查询结果
+  const { data: orderResut, run: getOrderPayStatus } = useRequest(MaterialService.getOrderPayStatus, {
     manual: true,
+    formatResult: res => res?.data?.Data,
     onSuccess: res => {
-      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
-      handleToClose()
-      setImageUrl(undefined)
+      console.log('订单查询结果', res)
     }
   })
-  const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
-    manual: true,
-    onSuccess: res => {
-      message.info(res.data.Msg)
-      setImageUrl(res.data?.Data?.ResourceUrl)
-      setLoading(false)
-    }
-  })
-  useEffect(() => {
-    return () => {
-      form.resetFields()
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [form])
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleFinish = (value: any) => {
-    if (!imageUrl) {
-      message.error('请上传名片')
-      return
+  useEffect(() => {
+    // 获取订单支付状态
+    if (visible) {
+      payTimer = setTimeout(() => {
+        getOrderPayStatus(orderCode)
+      }, 2000)
     }
-    // 上传名片时，ApplyMethod为2，否则为1
-    run({
-      ApplyMethod: 2,
-      BusinessCardUrl: imageUrl,
-      CompanyName: value.CompanyName,
-      DetailId: detailID,
-      RealName: value.RealName,
-      TryType: tryType
-    })
-  }
-  const uploadProps: UploadProps = {
-    name: 'file',
-    multiple: false,
-    listType: 'picture-card',
-    showUploadList: false,
-    withCredentials: true,
-    customRequest: option => {
-      uploadImg(option.file)
-    },
-    onChange: (info: UploadChangeParam<UploadFile>) => {
-      if (info.file.status === 'uploading') {
-        setLoading(true)
-        return
-      }
+    if (visible && orderResut && orderResut?.OrderStatus !== EOrderStatus.WaitPay) {
+      console.log('订单查询结束')
+      payTimer && clearInterval(payTimer)
+      onSendPayResult(orderResut)
     }
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e
+    return () => {
+      console.log('清除定时器')
+      payTimer && clearTimeout(payTimer)
     }
-    return e && e.fileList
-  }
+  }, [visible, orderResut])
+
   const handleToClose = () => {
-    // 关闭前把名片给清除了
-    setImageUrl(undefined)
-    handleClose()
+    onCloseModel()
   }
-  const handleBackClose = () => {
-    //
-    handleClose()
-  }
-  const cardList: IGoodsListItem[] = [
-    { CurrentPrice: '0.01', GoodsId: 1, GoodsName: '日卡', PopupPriceMsg: '¥99/日，', Price: '99.00' },
-    {
-      CurrentPrice: '0.01',
-      GoodsId: 2,
-      GoodsName: '月卡',
-      PopupPriceMsg: '¥999/月',
-      Price: '399.00'
-    }
-  ]
   return (
     <Modal
       open={visible}
@@ -139,7 +74,8 @@ const QRCodeModel: React.FC<IQRCodeModelProps> = props => {
         </div>
         <div className="paymodel-code-wrapper">
           <QRCode
-            value={''}
+            size={283}
+            value={codeUrl}
             className="paymodel-qrcode"
             // 加上icon不好扫
             // icon="https://verticalmind.oss-accelerate.aliyuncs.com/new/article/img/wechat-pay_1709100398995.png"
@@ -147,7 +83,9 @@ const QRCodeModel: React.FC<IQRCodeModelProps> = props => {
         </div>
         <div className="paymodel-title">
           <span>订单剩余支付时间 </span>
-          <span className="paymodel-redtext">10:00</span>
+          <span className="paymodel-redtext">
+            <Countdown countdown={600} />
+          </span>
         </div>
       </div>
     </Modal>

src/Material/components/UploadInfoModel.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import useRequest from '@ahooksjs/use-request'
 
-import { Button, Form, Input, message, Row, Modal, Upload } from 'antd'
+import { Form, Input, message, Modal, Upload } from 'antd'
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
 import type { UploadChangeParam } from 'antd/es/upload'
 import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
@@ -9,22 +9,20 @@ import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
 import { MaterialService } from '../Material.service'
 import { useLogin2p } from 'Login2p/Login2pContext'
 import NButton from 'components/NButton/NButton'
-import { ITryType } from './NoPermission'
 import styles from '../css/NoPermission.module.scss'
 
 const { Item } = Form
 interface IUploadInfoModelProps {
   visible: boolean
-  detailID?: number
-  tryType?: ITryType
-  handleClose: () => void
+  onCloseModel: () => void
+  handleSuccess: () => void
 }
 
 /**
  * 上传名片弹框（用于机构申请权限）
  */
 const UploadInfoModel: React.FC<IUploadInfoModelProps> = props => {
-  const { visible, detailID, tryType, handleClose } = props
+  const { visible, onCloseModel, handleSuccess } = props
   const login2p = useLogin2p()
   const [form] = Form.useForm()
   const [loading, setLoading] = useState(false)
@@ -37,12 +35,16 @@ const UploadInfoModel: React.FC<IUploadInfoModelProps> = props => {
     </div>
   )
 
-  const { run } = useRequest(MaterialService.postApplyTry, {
+  const { run: UploadBusinessCard } = useRequest(MaterialService.postUploadBusinessCard, {
     manual: true,
     onSuccess: res => {
-      res.data.Ret === 200 ? message.success('已提交给您的对口销售，请耐心等待。') : message.info(res.data.Msg)
-      handleToClose()
-      setImageUrl(undefined)
+      if (res.data.Success) {
+        setImageUrl(undefined)
+        message.success(res.data.Msg)
+        handleSuccess()
+      } else {
+        message.info(res.data.ErrMsg || res.data.Msg)
+      }
     }
   })
   const { run: uploadImg } = useRequest(MaterialService.postUploadImage, {
@@ -61,24 +63,21 @@ const UploadInfoModel: React.FC<IUploadInfoModelProps> = props => {
   }, [form])
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleFinish = (value: any) => {
-    const values = form.getFieldsValue()
-    console.log(values)
+  const handleFinish = async () => {
     if (!imageUrl) {
       message.error('请上传名片')
       return
     }
-
-    return
-    // 上传名片时，ApplyMethod为2，否则为1
-    // run({
-    //   ApplyMethod: 2,
-    //   BusinessCardUrl: imageUrl,
-    //   CompanyName: value.CompanyName,
-    //   DetailId: detailID,
-    //   RealName: value.RealName,
-    //   TryType: tryType
-    // })
+    try {
+      const values = await form.validateFields()
+      UploadBusinessCard({
+        BusinessCardUrl: imageUrl,
+        RealName: values.RealName,
+        Mobile: values.Mobile,
+        CompanyName: values.CompanyName,
+        InviteShareCode: login2p.inviteCode || sessionStorage.getItem('invite_code') || ''
+      })
+    } catch (errorInfo) {}
   }
   const uploadProps: UploadProps = {
     name: 'file',
@@ -106,7 +105,7 @@ const UploadInfoModel: React.FC<IUploadInfoModelProps> = props => {
   const handleToClose = () => {
     // 关闭前把名片给清除了
     setImageUrl(undefined)
-    handleClose()
+    onCloseModel()
   }
   return (
     <Modal
@@ -151,21 +150,23 @@ const UploadInfoModel: React.FC<IUploadInfoModelProps> = props => {
         </Item>
         <Item
           label="手机号"
-          name="Content"
+          name="Mobile"
           labelCol={{ span: 5 }}
           wrapperCol={{ span: 19 }}
-          rules={[{ required: true, message: '' }]}
+          rules={[{ required: true, message: '请输入手机号' }]}
         >
           <Input placeholder="请输入手机号" />
         </Item>
-        <div className={styles['paymodel-footer-wrapper']}>
-          <NButton type="white" onClick={handleToClose} size="large" className="pay-btn m-r-md">
-            取消
-          </NButton>
-          <NButton type="primary" onClick={handleFinish} size="large" className="pay-btn">
-            提交
-          </NButton>
-        </div>
+        <Item>
+          <div className={styles['paymodel-footer-wrapper']}>
+            <NButton type="white" onClick={handleToClose} size="large" className="pay-btn m-r-md">
+              取消
+            </NButton>
+            <NButton type="primary" size="large" className="pay-btn" onClick={handleFinish}>
+              提交
+            </NButton>
+          </div>
+        </Item>
       </Form>
     </Modal>
   )

src/Material/components/VideoAudioCard.tsx

@@ -255,7 +255,7 @@ const VideoAudioCard: React.FC<IVideoAudioCard> = props => {
           ID={item?.SourceId || item.Id}
           placeholder={commentPlaceholder}
           onApply={handleApplyComment}
-          handleClose={handleOkAsk}
+          onCloseModel={handleOkAsk}
         />
       </div>
     </div>

src/Material/css/LicenseHtml.module.scss

@@ -0,0 +1,49 @@
+.rich-text-wrapper {
+  margin: 0 auto 20px auto;
+  :global{
+    .rich-title{
+      font-weight: bold;
+      font-size: 26px;
+      text-align: center;
+      margin: 10px auto;
+    }
+    .rich-h1-text{
+      font-size: 22px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      ol{
+        list-style:disc;
+        margin: 0;
+      }
+    }
+    .rich-h2-text{
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+    .rich-p-line{
+      text-indent: 2em;
+      font-size: 16px;
+      margin-bottom: 5px;
+    }
+    .rich-p20-line{
+      text-indent: 2em;
+      font-size: 20px;
+      margin-bottom: 5px;
+    }
+    .rich-table{
+      margin: 0 auto;
+      border-collapse: collapse;
+      border-spacing: 0;
+      width: 100%;
+      th, td {
+        border: 1px solid #000;
+        padding: 5px;
+        text-align: center;
+      }
+    }
+    .rich-underline{
+      text-decoration: underline;
+    }
+  }
+}
+

src/Material/css/NoPermission.module.scss

@@ -175,6 +175,7 @@
       height: 16px;
       margin-right: 5px;
       vertical-align: middle;
+      cursor: pointer;
     }
     .buymodel-checkbox-wrapper span{
       vertical-align: middle;

src/NewIndex.tsx

@@ -31,6 +31,8 @@ const ColumnEditor = React.lazy(() => import('./Column/ColumnEditor'))
 const ColumnDetail = React.lazy(() => import('./Column/ColumnDetail'))
 const ColumnModify = React.lazy(() => import('./Column/ColumnModify'))
 const ColumnCheck = React.lazy(() => import('./Column/ColumnCheck'))
+const LicenseHtml = React.lazy(() => import('./Material/LicenseHtml'))
+const PolicyHtml = React.lazy(() => import('./Material/PolicyHtml'))
 
 // const ArticleNoAuthentication = React.lazy(() => import('./Article/ArticleNoAuthentication'))
 
@@ -150,6 +152,16 @@ const NewPage: React.FC = () => {
       key: 'columncheck',
       path: '/column/check/:articleId',
       component: ColumnCheckwidthRoute
+    },
+    {
+      key: 'license',
+      path: '/material/license',
+      component: LicenseHtml
+    },
+    {
+      key: 'policy',
+      path: '/material/policy',
+      component: PolicyHtml
     }
   ]
   const history = useHistory()

src/NewPageHeader.tsx

@@ -360,7 +360,7 @@ const NewPage: React.FC = props => {
         </Row>
       )}
       {/* todo */}
-      <ApplyPermission visible={visibleApply} handleClose={handleOKApply} />
+      <ApplyPermission visible={visibleApply} onCloseModel={handleOKApply} />
     </div>
   )
 }

src/Personal/Personal.service.ts

@@ -133,6 +133,7 @@ export interface IProductInteriorItem {
   Abstract: string //摘要
   Department: string //作者
   Pv: number //浏览量
+  ShareImg: string //分享图片
 }
 export interface IProductInteriorDetail {
   Detail: IProductInteriorItem

src/Personal/PersonalIndex.tsx

@@ -242,16 +242,16 @@ const PersonalIndex: React.FC = () => {
           </div>
         </div>
 
-        <ApplyAdivise visible={adviseVisible} handleClose={() => setAdviseVisible(false)} />
+        <ApplyAdivise visible={adviseVisible} onCloseModel={() => setAdviseVisible(false)} />
         <ApplyPhoneNumber
           visible={phoneVisible}
           phone={`${login2p.userInfo?.OutboundCountryCode ? login2p.userInfo?.OutboundCountryCode + '-' : ''}${
             login2p.userInfo?.OutboundMobile
           }`}
-          handleClose={() => setPhoneVisible(false)}
+          onCloseModel={() => setPhoneVisible(false)}
         />
       </ValidateLogin2p>
-      <ApplyPermission visible={visibleApply} handleClose={handleOKApply} />
+      <ApplyPermission visible={visibleApply} onCloseModel={handleOKApply} />
     </div>
   )
 }

src/Personal/components/ApplyAdivise.tsx

@@ -12,14 +12,14 @@ import styles from '../css/ApplyAdivise.module.scss'
 
 interface IApplyAdiviseProps {
   visible: boolean
-  handleClose: () => void
+  onCloseModel: () => void
 }
 
 /**
  * 优化建议
  */
 const ApplyAdivise: React.FC<IApplyAdiviseProps> = props => {
-  const { visible, handleClose } = props
+  const { visible, onCloseModel } = props
   const [loading, setLoading] = useState(false)
   const [adviseText, setAdviseText] = useState<string>()
   const [fileList, setFileList] = useState<UploadFile[]>([])
@@ -53,7 +53,7 @@ const ApplyAdivise: React.FC<IApplyAdiviseProps> = props => {
     setAdviseText(undefined)
     setFileList([])
     setAllImg([])
-    handleClose()
+    onCloseModel()
   }
   const handleChangeAdivise = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setAdviseText(e.target.value)

src/Personal/components/ApplyPhoneNumber.tsx

@@ -11,14 +11,14 @@ const { Option } = Select
 interface IApplyPhoneNumberProps {
   visible: boolean
   phone: string
-  handleClose: () => void
+  onCloseModel: () => void
 }
 
 /**
  * 设置外呼号码
  */
 const ApplyPhoneNumber: React.FC<IApplyPhoneNumberProps> = props => {
-  const { visible, phone, handleClose } = props
+  const { visible, phone, onCloseModel } = props
   const login2p = useLogin2p()
 
   const [phoneArea, setPhoneArea] = useState<number>(86)
@@ -49,7 +49,7 @@ const ApplyPhoneNumber: React.FC<IApplyPhoneNumberProps> = props => {
   const handleToClose = () => {
     setPhoneArea(86)
     setMobile(undefined)
-    handleClose()
+    onCloseModel()
   }
   const handleOnOk = () => {
     if (!mobile) return message.error('外呼号码不能为空')

src/Vmp.tsx

@@ -61,7 +61,9 @@ const Vmp: React.FC = () => {
           '/column/editor/:columnId',
           '/column/editor/:columnId/:articleId',
           '/column/modify/:articleId',
-          '/column/check/:articleId'
+          '/column/check/:articleId',
+          '/material/license',
+          '/material/policy'
         ]}
       >
         <NewIndex />