组织头像

2024-01-13 09:59:14 +08:00 · 2024-01-13 09:59:14 +08:00 · 8e22504b8f
parent 181c80005d
commit 8e22504b8f
7 changed files with 122 additions and 46 deletions
--- a/src/forge/Component/Component.scss
+++ b/src/forge/Component/Component.scss
@ -23,7 +23,7 @@ li.ant-menu-item{
  border:1px solid #eee;
  .img{
    margin-right: 20px;
-    width: 190px;
+    max-width: 190px;
    height: 90px;
    border:1px solid rgba(238,238,238,1);
    display: flex;
--- a/src/forge/Team/Index.scss
+++ b/src/forge/Team/Index.scss
@ -561,4 +561,19 @@
    align-items: center;
    justify-content: center;
  }
+}
+
+.plusCard{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 104px;
+  height: 104px;
+  margin-bottom: 8px;
+  text-align: center;
+  vertical-align: top;
+  background-color: #fafafa;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  cursor: pointer;
 }
--- a/src/forge/Team/New.jsx
+++ b/src/forge/Team/New.jsx
@ -1,22 +1,26 @@
 import React,{ forwardRef , useCallback , useEffect, useState } from 'react';
 import './Index.scss';
-import { Form , Input , Radio , Checkbox , Button } from "antd";
-import UploadImage from './Component/UploadImage';
+import { Form , Input , Icon , Checkbox , Button } from "antd";
+// import UploadImage from './Component/UploadImage';
+import AvatarModal from '../users/Avatar/Index';
 import axios from 'axios';
+
+
 const port = window.location.port;
 const hostname = window.location.hostname;
 export default Form.create()(
  forwardRef(({ form , showNotification , history, showNpsModal })=>{
    const [ image , setImage ] = useState(undefined);
    const [ imageFlag , setImageFlag] = useState(false);
+    const [ imageVisible , setIamgeVisible ] = useState(false);
    const [ descNum ,setDescNum ] = useState(0);

    const { getFieldDecorator, validateFields , setFieldsValue } = form;
-    const radioStyle = {
-      display: 'block',
-      height: '30px',
-      lineHeight: '30px',
-    }
+    // const radioStyle = {
+    //   display: 'block',
+    //   height: '30px',
+    //   lineHeight: '30px',
+    // }
    const helper = useCallback(
      (label, name, rules, widget, isRequired = true) => (
        <React.Fragment>
@ -78,8 +82,17 @@ export default Form.create()(
      callback();
    }

+    function saveImgFunc(imgUrl){
+      setImage(imgUrl);
+      setIamgeVisible(false);
+    }
+
    return(
        <div className="main" style={{padding:"0px",border:"none"}}>
+          {
+            imageVisible &&
+            <AvatarModal avatarImg={image} onCancel={()=>{setIamgeVisible(false)}} saveFunc={saveImgFunc}/>
+          }
          <div className="teamBox">
            <p className="teamBox-title">新建组织</p>
            <Form className="teamBox-form">
@ -135,11 +148,23 @@ export default Form.create()(
                  <Radio style={radioStyle} value="privacy" key={3}>私有<span className="color-grey-8">（仅对组织成员可见）</span></Radio>
                </Radio.Group>
              )} */}
-              
-              <p className="font-16 lables must">选择头像</p>
-              <UploadImage getImage={getImage}/>
-              {imageFlag && <p className="color-red" style={{marginTop:"-10px"}}>请上传头像</p> }
-              
+              <div className="mb25">
+                <p className="font-16 lables must mb10">选择头像</p>
+                {/* <UploadImage getImage={getImage}/> */}
+                <div className="plusCard" onClick={()=>{setIamgeVisible(true)}}>
+                  {
+                    image ? 
+                    <img src={image} alt="avatar" style={{ width: '100%' }} />
+                    :
+                    <React.Fragment>
+                      <Icon type={'plus'} />
+                      <div className="ant-upload-text">点击上传</div>
+                    </React.Fragment>
+                  }
+                </div>
+                {/* <Button onClick={()=>{setIamgeVisible(true)}} type={"primary"}>点击选择</Button> */}
+                {imageFlag && <p className="color-red">请上传头像</p> }
+              </div>
              {helper(
                '权限',
                "repo_admin_change_team_access",
--- a/src/forge/Team/Setting/TeamSettingCommon.jsx
+++ b/src/forge/Team/Setting/TeamSettingCommon.jsx
@ -1,11 +1,12 @@
 import React, { forwardRef , useCallback , useEffect, useState } from 'react';
-import { Form , Input , Radio ,Checkbox , Divider , Button , InputNumber } from 'antd';
+import { Form , Input , Icon ,Checkbox , Divider , Button , InputNumber } from 'antd';
 import { WhiteBack , FlexAJ } from '../../Component/layout';
 import Title from '../../Component/Title';
 import styled from 'styled-components';
-import UploadImage from '../Component/UploadImage';
+// import UploadImage from '../Component/UploadImage';
 import axios from 'axios';
 import Modals from '../Component/Modals';
+import AvatarModal from '../../users/Avatar/Index';

 import { getImageUrl } from 'educoder';
 const TextArea = Input.TextArea;
@ -27,6 +28,7 @@ export default Form.create()(
    const [ visible , setVisible ] = useState(false);
    const [ privacyVisible , setPrivacyVisible ] = useState(false);
    const [ descNum , setDescNum ] = useState(0);
+    const [ imageVisible , setIamgeVisible ] = useState(false);
    const { getFieldDecorator , validateFields , setFieldsValue , getFieldsValue} = form;

    useEffect(()=>{
@ -75,7 +77,7 @@ export default Form.create()(
    function getImage(image){
      setImageFlag(true);
      setImage(image);
-      console.log(image);
+      setIamgeVisible(false);
    }

    // 删除组织
@ -123,6 +125,10 @@ export default Form.create()(
    }
    return(
      <div style={{border:"1px solid #eee"}}>
+        {
+          imageVisible &&
+          <AvatarModal avatarImg={image&&image.startsWith('images/avatars/Organization')?getImageUrl(`/${image}`):image} onCancel={()=>{setIamgeVisible(false)}} saveFunc={getImage}/>
+        }
        <WhiteBack>
          <Title>基本设置</Title>
          <Modals visible={privacyVisible} okText={"确认"} cancelText={"取消"} onCancel={concelChangePrivacy} onOk={()=>setPrivacyVisible(false)}> 
@ -196,8 +202,19 @@ export default Form.create()(
                <InputNumber value="-1" max={1000} style={{width:"350px"}}/>,false,false,
                "当输入栏为空时，默认数量无限制"
              )}
-              <p>选择头像:</p>
-              <UploadImage url={image&&image.startsWith('images/avatars/Organization')?getImageUrl(`/${image}`):image} getImage={getImage}/>
+              <p className="font-15 mb10">选择头像:</p>
+              {/* <UploadImage url={image&&image.startsWith('images/avatars/Organization')?getImageUrl(`/${image}`):image} getImage={getImage}/> */}
+              <div className="plusCard mb20" onClick={()=>{setIamgeVisible(true)}}>
+                {
+                  image ? 
+                  <img src={image&&image.startsWith('images/avatars/Organization')?getImageUrl(`/${image}`):image} alt="avatar" style={{ width: '100%' }} />
+                  :
+                  <React.Fragment>
+                    <Icon type={'plus'} />
+                    <div className="ant-upload-text">点击上传</div>
+                  </React.Fragment>
+                }
+              </div>
              <Button type={"primary"} onClick={updateDetail}>更新组织设置</Button>
            </Form>
          </Div>
--- a/src/forge/Team/images/white.jpg
+++ b/src/forge/Team/images/white.jpg
--- a/src/forge/users/Avatar/Index.jsx
+++ b/src/forge/users/Avatar/Index.jsx
@ -5,9 +5,7 @@ import Cropper from 'react-cropper';
 import 'cropperjs/dist/cropper.css';
 import axios from 'axios';

-function Index({onCancel,avatarImg,login}){
-  console.log('avatarImg,login', avatarImg,login);
-
+function Index({onCancel,avatarImg,login,saveFunc}){
  const [ avatarPhoto , setAvatarPhoto ] = useState(avatarImg);

  useEffect(()=>{
@ -23,15 +21,19 @@ function Index({onCancel,avatarImg,login}){
    if (!imgUrl) {
      message.info('请先上传图片');
    }
-    const url = `/users/${login}/update_image.json`;
-    axios.put(url,{
-      image:imgUrl
-    }).then(result=>{
-      if(result){
-        message.success("头像修改成功!");
-        onCancel(true);
-      }
-    }).catch(error=>{})
+    if(login){
+      const url = `/users/${login}/update_image.json`;
+      axios.put(url,{
+        image:imgUrl
+      }).then(result=>{
+        if(result){
+          message.success("头像修改成功!");
+          onCancel(true);
+        }
+      }).catch(error=>{})
+    }else{
+      saveFunc && saveFunc(imgUrl);
+    }
  }

  function onChange(e){
@ -73,30 +75,35 @@ function Index({onCancel,avatarImg,login}){
      footer={null}
      centered
      maskClosable={false}
-      title="修改头像"
+      title={`${login ? "修改": "上传组织" }头像`}
      onCancel={()=>onCancel(false)}
      className="avatarBox"
    >
      <div className="avatarDiv">
-        <div>
-          <Cropper
-            style={{ height: 320, width: 320 }}
-            src={avatarPhoto}
-            guides={false}
-            preview="#updateAvatarImg"
-            ref={cropper}
-            aspectRatio={1}
-          />
-          {/* <span className={"tips"}>仅支持JPG、GIF、PNG，且文件小于2M</span> */}
-        </div>
+        {
+          avatarPhoto ?
+          <div>
+            <Cropper
+              style={{ height: 320, width: 320 }}
+              src={avatarPhoto}
+              guides={false}
+              preview="#updateAvatarImg"
+              ref={cropper}
+              aspectRatio={1}
+            />
+            {/* <span className={"tips"}>仅支持JPG、GIF、PNG，且文件小于2M</span> */}
+          </div>
+          :
+          <div className="font-18 tipsPosi">选择本地照片，上传编辑{!login && "组织"}头像</div>
+        }
        <div className="previewBox">
-          <div className={"previewImg"} id="updateAvatarImg"></div>
+          <div className={`previewImg ${login ? "ring":""}`} id="updateAvatarImg"></div>
          <div className="uploadBtn">
            <label className={"uploadButton"} id="uploadBtn" htmlFor="inputImage">
              <input type="file" className="sr-only" id="inputImage" name="file" accept="image/*" style={{ display: "none" }} onChange={onChange}></input>
              点击上传
            </label>
-            <a onClick={saveAvatar}>保存头像</a>
+            <a onClick={saveAvatar}>{login ? "保存头像":"确定"}</a>
          </div>
        </div>
      </div>
--- a/src/forge/users/Avatar/Index.scss
+++ b/src/forge/users/Avatar/Index.scss
@ -12,12 +12,22 @@
  }
  .avatarDiv{
    display: flex;
+    position: relative;
+    min-height: 320px;
+    .tipsPosi{
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      top:40%;
+      height: 30px;
+      margin-top: -15px;
+    }
    .previewBox{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
-      margin-left: 30px;
+      margin-left: auto;
      .uploadBtn{
        margin-bottom: 30px;
        display: flex;
@ -57,10 +67,12 @@
    .previewImg{
      overflow: hidden;
      background-color: #fff;
-      border-radius: 50%;
      text-align: center;
      width: 100px!important;
      height: 100px!important;
+      &.ring{
+        border-radius: 50%;
+      }
    }
  }
 }