+//
+// :
\ No newline at end of file
From 74f213c4815a63da4fe1eb866ac834d1cbdd4d09 Mon Sep 17 00:00:00 2001
From: hjm <63528605@qq.com>
Date: Thu, 4 Jul 2019 15:17:14 +0800
Subject: [PATCH 11/11] cropper
---
public/react/src/common/components/Cropper.js | 13 ++++++++----
public/react/src/modules/tpm/TPMIndexHOC.js | 11 ++++++----
public/react/src/modules/user/AccountPage.js | 4 ++--
.../src/modules/user/account/AccountImg.js | 10 +++++----
.../src/modules/user/account/AccountNav.js | 2 +-
.../user/account/ChangeHeaderPicModal.js | 21 ++++++++++++++-----
6 files changed, 41 insertions(+), 20 deletions(-)
diff --git a/public/react/src/common/components/Cropper.js b/public/react/src/common/components/Cropper.js
index 2fe71ea2b..f11248751 100644
--- a/public/react/src/common/components/Cropper.js
+++ b/public/react/src/common/components/Cropper.js
@@ -110,13 +110,15 @@ class Cropper extends Component {
render() {
const { width, height, previewId, imageSrc } = this.props;
+
return (
{/* This rule is very important, please do not ignore this! */}
- {/* http://localhost:3007/images/footNavLogo.png 图片转了后不对 */}
-
+ {/* http://localhost:3007/images/footNavLogo.png 图片转了后不对
+ || "/images/testPicture.jpg"
+ || "/images/shixun0.jpg"
+ */}
+
{/* background: 'aquamarine',
'border-radius': '128px'
diff --git a/public/react/src/modules/tpm/TPMIndexHOC.js b/public/react/src/modules/tpm/TPMIndexHOC.js
index f03d59751..cc89f3003 100644
--- a/public/react/src/modules/tpm/TPMIndexHOC.js
+++ b/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,
- current_user: user
+ user: newUser,
+ 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 (
diff --git a/public/react/src/modules/user/AccountPage.js b/public/react/src/modules/user/AccountPage.js
index 430f086a1..065724faf 100644
--- a/public/react/src/modules/user/AccountPage.js
+++ b/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`);
diff --git a/public/react/src/modules/user/account/AccountImg.js b/public/react/src/modules/user/account/AccountImg.js
index a802367f2..b8e060750 100644
--- a/public/react/src/modules/user/account/AccountImg.js
+++ b/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 (
-
+
-
+
修改头像
);
}
}
-export default AccountNav;
+export default AccountImg;
diff --git a/public/react/src/modules/user/account/AccountNav.js b/public/react/src/modules/user/account/AccountNav.js
index ea84b735e..6f07bd075 100644
--- a/public/react/src/modules/user/account/AccountNav.js
+++ b/public/react/src/modules/user/account/AccountNav.js
@@ -22,7 +22,7 @@ class AccountNav extends Component {
return (
-
+
{basicInfo && basicInfo.name}
{basicInfo && basicInfo.technical_title}
diff --git a/public/react/src/modules/user/account/ChangeHeaderPicModal.js b/public/react/src/modules/user/account/ChangeHeaderPicModal.js
index 1691c2a22..89f21838e 100644
--- a/public/react/src/modules/user/account/ChangeHeaderPicModal.js
+++ b/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{
}
`}