cropper

public/react/src/common/components/Cropper.js

@@ -110,13 +110,15 @@ class Cropper extends Component {
   render() {
     
     const { width, height, previewId, imageSrc } = this.props;
+
     return (
       <div>
         {/* This rule is very important, please do not ignore this! */}
         <style>{`
             .wrapper {
-                width: ${ (width+'px') || '500px'};
+                width: ${ width ? (width+'px') : '500px'};
-                height: ${ (height+'px') || '500px'};
+                height: ${ height ? (height+'px') : '500px'};
+                border: 1px solid #eee;
             }
             img {
                 max-width: 100%; 
@@ -129,8 +131,11 @@ class Cropper extends Component {
             }
         `}</style>
         <div className="wrapper">
-            {/* http://localhost:3007/images/footNavLogo.png  图片转了后不对 */}
+            {/* http://localhost:3007/images/footNavLogo.png  图片转了后不对 
-            <img id={this.props.imageId || "__image"} src={`${imageSrc || "/images/testPicture.jpg"}`}></img>
+                || "/images/testPicture.jpg"
+                || "/images/shixun0.jpg"
+            */}
+            <img id={this.props.imageId || "__image"} src={`${imageSrc }`}></img>
         </div>
         {/* background: 'aquamarine', 
             'border-radius': '128px'

public/react/src/modules/tpm/TPMIndexHOC.js

@@ -75,9 +75,11 @@ export function TPMIndexHOC(WrappedComponent) {
 
       // header里面需要有user
       initCommonState(user) {
+        // 更新头像后，需要改变参数，不然会被图片缓存影响到
+        const newUser = Object.assign({}, {...user}, { image_url: `${user.image_url}?t=${new Date().getTime()}`});
         this.setState({
-          user,
+          user: newUser,
-          current_user: user
+          current_user: newUser
         })
       }
       showShixun = () => {
@@ -230,7 +232,7 @@ export function TPMIndexHOC(WrappedComponent) {
       /**
         课堂权限相关方法，暂时写这里了 ----------------------------------------END
       */
-      fetchUser() {
+      fetchUser = () => {
         let url = `/users/get_user_info.json`
         let courseId;
         let query = this.props.location.pathname;
@@ -289,7 +291,8 @@ export function TPMIndexHOC(WrappedComponent) {
             isStudent: this.isStudent,
             isAdminOrStudent: this.isAdminOrStudent,
             isNotMember: this.isNotMember,
-            isUserid:this.state.coursedata&&this.state.coursedata.userid
+            isUserid:this.state.coursedata&&this.state.coursedata.userid,
+            fetchUser: this.fetchUser
           }
 		    return (
 		    	<div>

public/react/src/modules/user/AccountPage.js

@@ -51,11 +51,11 @@ class AccountPage extends Component {
   }
 
   getBasicInfo=(login)=>{
-    let url=`/users/accounts/${login}.json`;
+    let url=`/users/accounts/${login || this.props.current_user.login}.json`;
     axios.get(url).then((result)=>{
       if(result.data){
         this.setState({
-          basicInfo:result.data
+          basicInfo: Object.assign({}, {...result.data}, { avatar_url: `${result.data.avatar_url}?t=${new Date().getTime()}`})
         })
         if(result.data && result.data.base_info_completed == false){
           this.props.history.push(`/account/basic/edit`);

public/react/src/modules/user/account/AccountImg.js

@@ -2,14 +2,16 @@ import React, { Component } from 'react';
 
 import { SnackbarHOC, getImageUrl } from 'educoder';
 import ChangeHeaderPicModal from './ChangeHeaderPicModal'
-class AccountNav extends Component {
+class AccountImg extends Component {
     editImg = () => {
       this.refs['picModal'].setVisible(true)
     }
     render() {
+      const picUrl = getImageUrl("images/"+this.props.src)
       return (
         <div className="headphoto mt14">
-          <ChangeHeaderPicModal {...this.props} ref="picModal"></ChangeHeaderPicModal>
+          <ChangeHeaderPicModal 
+            {...this.props} ref="picModal" imageSrc={picUrl} userLogin={this.props.current_user ? this.props.current_user.login : '' }></ChangeHeaderPicModal>
           <style>{`
             /*
             .headphoto {
@@ -47,11 +49,11 @@ class AccountNav extends Component {
               display: block;
             }
           `}</style>
-          <img alt="头像" id="user_avatar_show" nhname="avatar_image" src={`${getImageUrl("images/"+this.props.src)}`}></img>
+          <img alt="头像" id="user_avatar_show" nhname="avatar_image" src={`${picUrl}`}></img>
           <p className="headphoto-black" onClick={this.editImg} >修改头像</p>
         </div>
       );
     }
 }
 
-export default AccountNav;
+export default AccountImg;

public/react/src/modules/user/account/AccountNav.js

@@ -22,7 +22,7 @@ class AccountNav extends Component {
       return (
           <div className="accountNav fl">
             <div className="accountInfo">
-              <AccountImg src={basicInfo && basicInfo.avatar_url}></AccountImg>
+              <AccountImg src={basicInfo && basicInfo.avatar_url} {...this.props}></AccountImg>
               <span className="name">{basicInfo && basicInfo.name}</span>
               <span className="role">{basicInfo && basicInfo.technical_title}</span>
             </div>

public/react/src/modules/user/account/ChangeHeaderPicModal.js

@@ -28,6 +28,10 @@ class ChangeHeaderPicModal extends Component{
         file = files[0];
 
         if (/^image\/\w+/.test(file.type)) {
+          if (file.size > 2 * 1024 * 1024) {
+            this.props.showNotification && this.props.showNotification("仅支持文件大小小于2M的文件")  
+            return;
+          }
           uploadedImageType = file.type;
           uploadedImageName = file.name;
 
@@ -41,7 +45,6 @@ class ChangeHeaderPicModal extends Component{
           // cropper = new Cropper(image, options);
           inputImage.value = null;
         } else {
-          
           this.props.showNotification && this.props.showNotification("请选择一个图片格式的文件")
           // window.alert('Please choose an image file.');
         }
@@ -72,14 +75,16 @@ class ChangeHeaderPicModal extends Component{
       var dataUrl = canvas.toDataURL("image/jpeg");    
       console.log(dataUrl)   
 
-      const url = `/users/accounts/${this.props.userLogin || 'kosasa'}/avatar.json`
+      const url = `/users/accounts/${this.props.userLogin}/avatar.json`
       axios.put(url, { 
         image: dataUrl
       })
       .then((response) => {
         // {"status":0,"message":"success","avatar_url":"avatars/User/15739"}
         if (response.data.status == 0) {
-          
+          // this.props.getBasicInfo()          
+          this.props.fetchUser()
+          // 头像更新后会触发AccountPage的DidUpdate，然后会调用getBasicInfo
           this.props.showNotification && this.props.showNotification("修改头像成功")
           this.setVisible(false)
         }
@@ -111,6 +116,7 @@ class ChangeHeaderPicModal extends Component{
                 text-align: center;
                 width: 120px;
                 height: 120px;
+                border: 1px solid #eee;
             }
             .previewWrap {
               flex-direction: column;
@@ -121,10 +127,14 @@ class ChangeHeaderPicModal extends Component{
             }
             .changeHeaderModal .tip {
               color: #9B9B9B;
+              margin-top: 4px;
+            }
+            .changeHeaderModal .cropperWrap .tip {
+              display: inline-block;
             }
             .previewWrap .tip {
               text-align: center;
-              margin-top: 2px;
+              margin-top: 4px;
             }
             #uploadBtn {
               color: #4CACFF;
@@ -134,8 +144,9 @@ class ChangeHeaderPicModal extends Component{
             }
         `}</style>
         <div className="df">
-            <div>
+            <div className="cropperWrap">
               <Cropper
+                  imageSrc={''}
                   ref="cropper"
                   imageId={imageId}
                   previewId="changeHeader_imagePreview"