合并大赛介绍、指南、联系我们可编辑

2022-04-01 15:35:39 +08:00 · 2022-04-01 15:35:39 +08:00 · 579cfc4ba0
parent f9f1a49a17
commit 579cfc4ba0
13 changed files with 164 additions and 53 deletions
--- a/src/military/qz2022.js
+++ b/src/military/qz2022.js
@ -18,6 +18,10 @@ const Introduce = Loadable({
  loader: () => import('./qz2022/introduce'),
  loading: Loading,
 })
+const ManageEdit = Loadable({
+  loader: () => import('./qz2022/components/manageEdit'),
+  loading: Loading,
+})
 const Fingerpost = Loadable({
  loader: () => import('./qz2022/fingerpost'),
  loading: Loading,
@ -65,6 +69,7 @@ const Qz2022 = (props) => {
  const {pathname} = location;
  const [active, setActive] = useState();
  const [reload, setReload] = useState();
+  const [reloadDetail, setReloadDetail] = useState();
  const [qzDetail, setQzDetail] = useState();
  const [enrollStatus, setEnrollStatus] = useState();

@ -92,7 +97,7 @@ const Qz2022 = (props) => {
        setQzDetail(response.data.data);
      }
    })
-  }, [])
+  }, [reloadDetail])

  useEffect(()=>{
    // 获取用户参与竞赛状态
@ -115,7 +120,7 @@ const Qz2022 = (props) => {
  function goToRefer(){
    if(current_user && !current_user.login){
      props.showLoginDialog();
-    }else if(!enrollStatus.enroll_status){
+    }else if(enrollStatus && !enrollStatus.enroll_status){
      props.showNotification("您还未报名竞赛!");
    }else{
      !referStatus ? props.showNotification(!referEnd ? `竞赛尚未开始提交作品，提交作品开始时间为:${qzDetail && qzDetail.enroll_date.substring(0,10)}` :"比赛已结束"):"";
@ -143,7 +148,7 @@ const Qz2022 = (props) => {
            <Link to={{ pathname: applyStatus && current_user && current_user.login ? '/competition/qz2022/apply' :'' }} onClick={()=>{current_user && current_user.login ? !applyStatus && props.showNotification("报名时间已截止") : props.showLoginDialog()}}>参赛报名</Link>
          </li> 
          <li className={active === "refer" ? "active" : ""}>
-            <Link to={{ pathname: referStatus && !referEnd && current_user && current_user.login && enrollStatus.enroll_date ? `/competition/qz2022/refer` : '' }} onClick={goToRefer}>提案提交</Link>
+            <Link to={{ pathname: referStatus && !referEnd && current_user && current_user.login && enrollStatus && enrollStatus.enroll_status ? `/competition/qz2022/refer` : '' }} onClick={goToRefer}>提案提交</Link>
          </li>
          {/* <li className={active === "apply" ? "active" : ""}>
            <Link to={{ pathname: '/competition/qz2022/apply'}}>参赛报名</Link>
@ -169,18 +174,6 @@ const Qz2022 = (props) => {
        {paths.indexOf(active) !== -1 && <div className="menu_border mt20 qz_main"></div>}
        <Spin spinning={false} wrapperClassName="spinstyle qzCont" tip="正在同步镜像" size="large">
          <Switch {...props}>
-            {/* 大赛介绍 */}
-            <Route path="/competition/qz2022/introduce"
-              render={
-                () => (<Introduce {...props} qzDetail={qzDetail} />)
-              }
-            ></Route>
-            {/* 大赛指南 */}
-            <Route path="/competition/qz2022/fingerpost"
-              render={
-                () => (<Fingerpost {...props} qzDetail={qzDetail}/>)
-              }
-            ></Route>
            {/* 通知公告详情页 */}
            <Route path="/competition/qz2022/notice/detail/:noticeId"
              render={
@ -199,6 +192,12 @@ const Qz2022 = (props) => {
                ({match}) => (<NoticeEdit {...props} match={match}/>)
              }
            ></Route>
+            {/* 大赛介绍、大赛指南、关于我们 编辑页 */}
+            <Route path="/competition/qz2022/:type/edit"
+              render={
+                ({match}) => (<ManageEdit {...props} qzDetail={qzDetail} match={match} setReloadDetail={setReloadDetail}/>)
+              }
+            ></Route>
            {/* 通知公告 */}
            <Route path="/competition/qz2022/notice"
              render={
@ -248,6 +247,18 @@ const Qz2022 = (props) => {
              }
            ></Route>
            {/* 大赛介绍 */}
+            <Route path="/competition/qz2022/introduce"
+              render={
+                () => (<Introduce {...props} qzDetail={qzDetail} />)
+              }
+            ></Route>
+            {/* 大赛指南 */}
+            <Route path="/competition/qz2022/fingerpost"
+              render={
+                () => (<Fingerpost {...props} qzDetail={qzDetail}/>)
+              }
+            ></Route>
+            {/* 大赛介绍 */}
            <Route path="/competition/qz2022"
              render={
                () => (<Introduce {...props} qzDetail={qzDetail}/>)
--- a/src/military/qz2022/api.js
+++ b/src/military/qz2022/api.js
@ -58,4 +58,9 @@ export async function updateQz2022Notice(id,data){
 // 删除通知
 export async function deleteQz2022Notice(id){
  return axios.delete(`/competition_infos/qz2022/competition_notices/${id}.json`);
+}
+
+// 编辑大赛介绍、大赛指南、关于我
+export async function updateQz2022(data){
+  return axios.put(`/competition_infos/qz2022.json`,data);
 }
--- a/src/military/qz2022/components/manageEdit.jsx
+++ b/src/military/qz2022/components/manageEdit.jsx
@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+import { Button, Form, message } from 'antd';
+import { Link } from "react-router-dom";
+import icon from '../image/notice_breadcrumb.svg';
+import MDEditor from '../../../modules/tpm/challengesnew/tpm-md-editor';
+import { updateQz2022 } from "../api";
+import '../index.scss';
+import '../notice/index.scss';
+import '../notice/detail.scss';
+
+export default Form.create()((props) => {
+  const {history, match:{params:{type}}, qzDetail, setReloadDetail} = props;
+  const [description, setDescription] = useState(qzDetail && type === "introduce" ? (qzDetail.content) : type === "fingerpost" ? (qzDetail.guide) : (qzDetail && qzDetail.about_us));
+  const [errorMessage, setErrorMessage] = useState(undefined);
+
+  useEffect(()=>{
+    setDescription(qzDetail && type === "introduce" ? (qzDetail.content) : type === "fingerpost" ? (qzDetail.guide) : (qzDetail && qzDetail.about_us));
+  }, [qzDetail])
+
+  function submit(){
+    // 判断用户是否输入内容
+    if(!description){
+      setErrorMessage("内容不能为空");
+    }else{
+      const info = new Object();
+      info[type === "introduce" ? "content" : type === "fingerpost" ? "guide" : "about_us"] = description
+      const params = {
+        'competition_info': info,
+      }
+      updateQz2022(params).then(response=>{
+        if(response && response.data.message === "success"){
+          setReloadDetail(Math.random());
+          message.success('更新成功');
+          history.push(`/competition/qz2022/${type}`);
+        }else{
+          message.error(response.message);
+        }
+      })
+    }
+  }
+  return (
+    <div className="qz_notice">
+      <div className="qz_main notice_detal qz2022_notice_edit">
+        <div className="breadCrumb mb20">
+          <img src={icon} className="mr12 icon_d"/>
+          <Link to={`/competition/qz2022/${type}`}><span className="font-16 _999">{type === "introduce" ? "大赛介绍" : type === "fingerpost" ? "大赛指南" : "联系我们"}</span></Link>
+          <span className="mr10 ml10 _999">/</span>
+          <span className="font-16 _18">编辑</span>
+        </div>
+        <div className="qzContent">
+          <p className="title mb10"><span>*</span>内容:</p>
+          <p className={`errorMessage mb10 ${errorMessage && 'not'}`}>{errorMessage}</p>
+          <MDEditor
+            placeholder={"请输入描述信息"}
+            height={500}
+            mdID={"order-new-description"}
+            initValue={description}
+            onChange={(value)=>{setDescription(value)}}
+          ></MDEditor>
+        </div>
+        <div className="qz2022_notice_but">
+          <Button className="mr30" type="primary" onClick={submit}>提交</Button>
+          <Button onClick={()=>{history.push(`/competition/qz2022/${type}`);}}>取消</Button>
+        </div>
+      </div>
+    </div>
+  )
+})
--- a/src/military/qz2022/contact/index.jsx
+++ b/src/military/qz2022/contact/index.jsx
@ -1,25 +1,22 @@
 import React from "react";
 import contactPng from "../image/contact.png";
-// import btn from "../image/btn-right.png";
+import RenderHtml from "src/components/render-html";
+import Link from "react-router-dom/Link";
+import { Button } from "antd";
 import './index.scss';
 import '../../index.scss';
-import RenderHtml from "src/components/render-html";
-
-function Contact({ aboutUs }) {

+function Contact({ aboutUs, qzDetail, current_user }) {
+  const manageEdit = (qzDetail && qzDetail.is_manager) || (current_user && current_user.admin);

  return (
    <div className="contact-bg">
      <div className="contact qz_main">
        <div className="contact-words">
-          <RenderHtml value={aboutUs} className="contact-content" />
-          {/* <p>主办方：JWJWJW联合参谋部、科学技术委员会</p>
-          <p>协办方：军事科学院、航天科技集团</p> */}
-          {/* <div className="contact-content">
-          <p>地址：北京市海淀区西三环北路72号</p>
-          <p>Email：osredm@163.com</p>
-          <p>电话：+86-010-66357650</p>
-        </div> */}
+          <RenderHtml value={aboutUs} className="contact-content"/>
+          {manageEdit && <div className="manageEdit mb20">
+            <Link to={"/competition/qz2022/contact/edit"}><Button><i className="iconfont icon-a-bianji11 font-13 mr5"></i>编辑</Button></Link>
+          </div>}
        </div>
        <div className="contact-png">
          <img src={contactPng} ></img>
--- a/src/military/qz2022/contact/index.scss
+++ b/src/military/qz2022/contact/index.scss
@ -1,5 +1,5 @@
 .contact-bg{
-  padding:3rem 0;
+  padding:2rem 0;
  background-image: url('../image/chat-bg.png');
  background-size:100% 100%;
 }
@ -30,11 +30,18 @@
  }
  .contact-words {
    max-width: 45%;
+    position: relative;
+    .manageEdit{
+      position: absolute;
+      bottom: -20px;
+    }
  }
 
  .contact-content {
    font-size: 1rem;
    line-height: 2rem;
    margin-bottom: 1rem;
+    height: 26vh;
+    overflow-y: auto;
  }
 }
--- a/src/military/qz2022/fingerpost/index.jsx
+++ b/src/military/qz2022/fingerpost/index.jsx
@ -1,13 +1,18 @@
 import React from "react";
+import RenderHtml from "src/components/render-html";
+import Link from "react-router-dom/Link";
+import { Button } from "antd";

 import './index.scss';
-import '../../index.scss';
-import RenderHtml from "src/components/render-html";
+import '../index.scss';

-function Introduce({qzDetail }) {
+function Introduce({ qzDetail, current_user}) {
+  const manageEdit = (qzDetail && qzDetail.is_manager) || (current_user && current_user.admin);
  return (
    <div className="fingerpost">
-      <div className="fingerpost_head font-18 mb20 qz_main">2022年赛程说明</div>
+      {manageEdit && <div className="qz_main manageEdit mb15">
+        <Link to={"/competition/qz2022/fingerpost/edit"}><Button><i className="iconfont icon-a-bianji11 font-13 mr5"></i>编辑</Button></Link>
+      </div>}
      <RenderHtml value={qzDetail && qzDetail.guide} className="fingerpost_cont qz_main"/>
    </div>
  )
--- a/src/military/qz2022/fingerpost/index.scss
+++ b/src/military/qz2022/fingerpost/index.scss
@ -1,10 +1,11 @@
 .fingerpost{
+    padding-top: 30px;
    min-height: 35vh;
    background-image: url('../image/f_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    .fingerpost_head{
-        padding: 60px 0 30px;
+        padding: 30px 0 30px;
        text-align: center;
        font-weight: bold;
    }
--- a/src/military/qz2022/index.scss
+++ b/src/military/qz2022/index.scss
@ -80,6 +80,9 @@
  max-width: 98vw;
  margin: 0 auto;
 }
+.manageEdit{
+  text-align: right;
+}
 // 按钮样式
 .but_2e5 {
  border: none;
--- a/src/military/qz2022/introduce/index.jsx
+++ b/src/military/qz2022/introduce/index.jsx
@ -1,25 +1,29 @@
 import React, { useEffect, useState } from "react";
+import Link from "react-router-dom/Link";
+import { Button } from "antd";

 import './index.scss';
-import '../../index.scss';
-
-function Introduce({ qzDetail }) {
+import '../index.scss';
+import RenderHtml from "src/components/render-html";

+function Introduce({ qzDetail, current_user }) {
+  const manageEdit = (qzDetail && qzDetail.is_manager) || (current_user && current_user.admin);
  let content= qzDetail&&qzDetail.content;
  let video_url= qzDetail&&qzDetail.video_url;

  return (
-    <div className="introduce">
-      <div className="introduce-content clearfix">
-        <div className="introduce-video"><video src={video_url} autoPlay controls muted></video></div>
-        <div className="introduce-info">
-          <h3 className="info-tit">“启智-2022”作战概念·事需求创新大赛</h3>
-          <div className="info-content" dangerouslySetInnerHTML={{__html:content}}>
-         
+    <div className="introduce_bg">
+      <div className="introduce">
+        <div className="introduce-content clearfix">
+          <div className="introduce-video"><video src={video_url} autoPlay controls muted></video></div>
+          <div className="introduce-info">
+            <RenderHtml value={content} className="info-content"/>
+            {manageEdit && <div className="manageEdit mb15">
+              <Link to={"/competition/qz2022/introduce/edit"}><Button><i className="iconfont icon-a-bianji11 font-13 mr5"></i>编辑</Button></Link>
+            </div>}
          </div>

        </div>
-
      </div>
    </div>
  )
--- a/src/military/qz2022/introduce/index.scss
+++ b/src/military/qz2022/introduce/index.scss
@ -1,7 +1,10 @@
+.introduce_bg{
+  background: #f1f7fc;
+  padding-top: 30px;
+}
 .introduce {
  width: 100%;
  height: 36.3vw;
-  background: #f1f7fc;
  background-image: url("../image/introduce.png");
  background-size: 100% 100.5%;

@ -30,6 +33,16 @@
    justify-content: center;
    min-width: 35%;
    min-height: 75%;
+    position: relative;
+    .manageEdit{
+      text-align: left;
+      position: absolute;
+      bottom: -36px;
+    }
+    .info-content{
+      height: 25vh;
+      overflow-y: auto;
+    }
  }

  .info-tit {
--- a/src/military/qz2022/notice/addNotice.jsx
+++ b/src/military/qz2022/notice/addNotice.jsx
@ -11,7 +11,7 @@ import RenderHtml from "src/components/render-html";
 const Option = Select.Option;

 export default Form.create()((props) => {
-  const {form, history, match:{params:{noticeId,type}}} = props;
+  const {form, history, match:{params:{noticeId,type}, params}} = props;
  const {getFieldDecorator, validateFields, setFieldsValue } = form;
  const [description, setDescription] = useState(undefined);
  const [errorMessage, setErrorMessage] = useState(undefined);
--- a/src/military/qz2022/notice/index.jsx
+++ b/src/military/qz2022/notice/index.jsx
@ -8,7 +8,7 @@ import { getNoticeList, deleteQz2022Notice } from "../api";
 import RenderHtml from "src/components/render-html";

 function Notice({ current_user, qzDetail }) {
-  const addEdit = (qzDetail && qzDetail.is_manager) || (current_user && current_user.admin);
+  const manageEdit = (qzDetail && qzDetail.is_manager) || (current_user && current_user.admin);
  const [noticeList, setNoticeList] = useState([]);
  const [reload, setReload] = useState(undefined);

@ -37,13 +37,13 @@ function Notice({ current_user, qzDetail }) {

  return (
    <div className="qz_notice bg">
-      {addEdit && <div className="qz_main addNotice">
+      {manageEdit && <div className="qz_main manageEdit mt30">
        <Link to={"/competition/qz2022/notice/add"}><Button>新增公告</Button></Link>
      </div>}
      <div className="qz_main not">
        {noticeList && noticeList.map(item=>{
          return <div className="qz_notice_cont" key={item.id}>
-            {addEdit && <div className="head">
+            {manageEdit && <div className="head">
              <Link to={`/competition/qz2022/notice/detail/${item.id}`} className="notCont_head">{item.title}</Link>
              <Popover content={<Menu>
                <Menu.Item>
--- a/src/military/qz2022/notice/index.scss
+++ b/src/military/qz2022/notice/index.scss
@ -27,6 +27,7 @@
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid rgba(153, 153, 153, 0.2);
+            >span{cursor: pointer;}
        }
        .notCont_head{
            font-weight:bold;
@ -76,10 +77,6 @@
        margin-bottom: 50px;
        border-bottom: 1px dashed #979797;
    }
-    .addNotice{
-        text-align: right;
-        padding-top: 30px;
-    }
 }
 .edit .ant-popover-inner-content{
    padding: 0;