init view for claim

src/forge/Order/Detail.js

@@ -7,6 +7,7 @@ import { Form, Popconfirm, Tag, Spin } from "antd";
 import Attachments from "../Upload/attachment";
 import RenderHtml from "../../components/render-html";
 import Comments from "../comments/comments";
+import Claims from "../Claims/claims"
 import "./order.css";
 
 class Detail extends Component {
@@ -309,7 +310,14 @@ class Detail extends Component {
               {...this.props}
             />
           </div>
+
+
           <div className="list-left list-left-padding">
+            <div className="list-right-item-padding background-f boder-4">
+            {/* <Claims issue_id={orderId}/> */}
+            <h1>hello word</h1>
+            </div>
+
             <div className="list-right-item-padding background-f boder-4">
               <p className="grid-item-left pb15">
                 <span className="issue_detail_info">负责人:</span>

src/forge/claims/claims.js

@@ -0,0 +1,110 @@
+import React, { Component } from "react";
+import axios from "axios";
+import { List} from "antd";
+import { Link } from "react-router-dom";
+import { getImageUrl } from "educoder";
+import "../Order/order.css";
+
+class Claims extends React.Component {
+    constructor(props) {
+     super(props);
+     this.state = {
+       // claimerdata:  new Array({"id":2,"issue_id":999,"user_id":999,"created_at":"2021-11-09T17:56:57"},{"id":3,"issue_id":888,"user_id":777,"created_at":"2021-11-15T10:19:49"})
+       claimerdata: new Array(),
+       currentUserClaimed:0,
+       issue_id:this.props.issue_id
+     };
+   
+   }
+   getClaimers = ()=>{
+      const {issue_id} = this.state;
+     axios.get(`/claim/${issue_id}`)
+       .then((result) => {
+         // console.log(result)
+         // console.log(result.data)
+         this.setState({
+             claimerdata: result.data.claimers,
+             currentUserClaimed: result.data.currentUserclaimed
+          });
+             
+       }).catch(function (error) {
+         console.log("error")
+         console.log(error);
+       });
+   }
+   
+   claimFun = (flag) => {
+       const {issue_id} = this.state;
+       axios({
+         method: flag==1? 'delete' : 'post',
+         url: `/claim/${issue_id}`
+       }).then(result => {
+         this.setState({
+             claimerdata: result.data.claimers,
+             currentUserClaimed: result.data.currentUserclaimed
+          });
+       })
+         .catch(error => {
+           console.log(error);
+         });
+   }
+  
+   componentDidMount = () => {
+      this.getClaimers();
+     // this.props.bindCommentRef && this.props.bindCommentRef(this);
+   };
+   render() {
+     const {
+       claimerdata,
+       currentUserClaimed
+     } = this.state;
+     
+     const rednerlist = (item)=>{
+       return (
+         <div>
+            <Link to={`/${item && item.user_login}`} className="show-user-link">
+              <img
+                className="radius"
+                src={getImageUrl(`/${item && item.user_picture}`)}
+                alt=""
+                width="30"
+                height="30"/>
+            </Link>
+            <Link to={`/${item && item.user_login}`}
+              className="show-user-link color-black ml10 fwb">
+              {item && item.user_name}
+            </Link>
+            <span className="color-grey-8">声明于 {item.created_at}</span>
+            </div>
+         );
+     };
+     
+     return (
+       <div> 
+         {currentUserClaimed==1?(
+           <div><button onClick={()=>this.claimFun(currentUserClaimed)}> 取消声明 </button><br/>
+           <span> 你已经声明过此易修</span></div>
+         ):(
+           <div><button onClick={()=>this.claimFun(currentUserClaimed)}> 声明 </button><br/>
+           <span> 通过声明让别人知道你想要解决此易修</span></div>
+         )}
+
+         <div className="ant-divider ant-divider-horizontal"> </div>
+
+         
+         {    
+           claimerdata.length>0?(
+             <div>
+             <span>{claimerdata.length}位声明者</span>
+           <List 
+             header=""
+             dataSource={claimerdata}
+             renderItem={item => <List.Item>{rednerlist(item)}</List.Item>} 
+           /></div>):(
+         <span> 0位声明者 </span>
+         )}
+         
+       </div>
+     );
+   }
+ }