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] 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{ } `}
-
+