feat: 新增上传七牛组件

client/package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "prop-types": "^15.6.2",
+    "qiniu-js": "^2.5.3",
     "react": "^16.4.2",
     "react-addons-update": "^15.6.2",
     "react-dom": "^16.4.2",

client/src/components/upload/index.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from "prop-types";
+import * as qiniu from 'qiniu-js'
+import Style from './index.scss'
+import { notification } from 'antd';
+
+class Upload extends React.Component{
+
+
+    uploadFn = () => {
+        let files = this.refs.upload.files
+        let fileType = files[0].type;
+        if (/^image/.test(fileType)) {
+            // 读取结果在fileReader.result里面
+
+        } else {
+            notification['error']({
+                message: "请选择图片类型文件"
+            })
+        }
+
+        var putExtra = {
+            fname: "",
+            params: {},
+            mimeType: [] || null
+        };
+        var config = {
+            // useCdnDomain: true,
+            region: qiniu.region.z2
+        };
+        let token = 'Jyi6Ntprm38nI6n1heGjwXyQmzie8ZjY7l9Cq_Je:pmA4lE0xsPRmnGO9s8cEkgTGJ-g=:eyJzY29wZSI6ImRhbmthbC1jZG4iLCJkZWFkbGluZSI6MTU0MzI1Mjk3M30='
+        var observable = qiniu.upload(files[0], null, token, putExtra, config)
+
+        var observer = {
+            next(res){
+                console.log(res)
+              // ...
+            },
+            error(err){
+              // ...
+            }, 
+            complete(res){
+                console.log(res)
+              // ...
+            }
+        }
+
+        var subscription = observable.subscribe(observer) // 上传开始
+
+        console.log(this.refs.upload.files)
+
+    }
+
+    render () {
+        return (
+            <input 
+                ref="upload" 
+                className={Style['upload-image']} 
+                type="file" 
+                onChange={this.uploadFn} />
+        )
+    }
+}
+
+Upload.defaultProps = {
+
+}
+export default Upload

client/src/components/upload/index.scss

@@ -0,0 +1,11 @@
+
+@import '~@scss/mixin.scss';
+
+:local(.upload-image){
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity:0;
+}

client/src/pages/about/components/userInfos/index.js

@@ -11,9 +11,7 @@ class UserInfos extends React.Component {
             topicCounts: 0,
             fansCounts: 20,
             followCounts: 100,
-            avator: '',
-            // 本人相关
-            hasAttention: true
+            avator: ''
         }
     }
 
@@ -26,12 +24,10 @@ class UserInfos extends React.Component {
 
         await API.followUser({
             userId: this.props.userInfo.userId,
-            status: !this.state.hasAttention ? 1 : 0
+            status: !this.props.hasFollow ? 1 : 0
         })
 
-        this.setState({
-            hasAttention: !this.state.hasAttention
-        })
+        this.props.toggleFollowStatus()
     }
 
 
@@ -53,8 +49,8 @@ class UserInfos extends React.Component {
                         :
                         <p className="operate">
                             <span className="user-account">{userInfo.username}</span>
-                            <span className={`modify ${!this.state.hasAttention && 'blue'}`} onClick={this.attentionUser}>
-                                {this.state.hasAttention?'已关注': '关注'}
+                            <span className={`modify ${!this.props.hasFollow && 'blue'}`} onClick={this.attentionUser}>
+                                {this.props.hasFollow?'已关注': '关注'}
                             </span>
                         </p>
                     }

client/src/pages/about/index.js

@@ -12,8 +12,7 @@ import { withRouter } from 'react-router'
     store => {
         return {
             personalInfo: store.personalInfo,
-            userInfo: store.userInfo,
-            isSelf: true
+            userInfo: store.userInfo
         }
     },
     dispatch => {
@@ -29,40 +28,28 @@ import { withRouter } from 'react-router'
 )
 class Detail extends React.Component {
     state = {
-        userInfos: {}
+        userInfo: {},
+        hasFollow: false,
+        isSelf: true
     }
 
     constructor(props) {
         super(props);
     }
 
     async componentDidMount () {
-        let isSelf;
-        console.log(this.props)
         let params = this.props.match.params || {}
-        let userId = this.props.userInfo.userId
-        let getUserId = params.userId
+        let userId = params.userId
 
-        // 与当前登录用户userId不相同或没传输userId视为当前about页面不是本人信息
-        if (getUserId === userId || !getUserId) {
-            isSelf = true
-        } else {
-            isSelf = false
-        }
-
-        let userInfos;
-        if (!isSelf) {
-            let response = await API.getUserInfo({params: {userId: getUserId}})
-            userInfos = response.data
-        }
+        let response = await API.getUserInfo({params: {userId}})
+        let userInfo = response.data
 
         this.setState({
-            isSelf,
-            userInfos
+            userInfo
         })
 
         // 获取帖子列表
-        this.initBaseData(isSelf ? userId : getUserId)
+        this.initBaseData(userId)
     }
 
     async initBaseData(userId) {
@@ -72,9 +59,19 @@ class Detail extends React.Component {
 
         // 获取用户帖子列表
         let response = await API.getPersonalInfo({ params })
+        let {isSelf, hasFollow} = response.data
         this.props.addPersonalInfo(response.data)
+        this.setState({
+            isSelf,
+            hasFollow
+        })
     }
 
+    toggleFollowStatus = () => {
+        this.setState({
+            hasFollow: !this.state.hasFollow
+        })
+    }
 
     render() {
         let {topic, fansCounts, followCounts} = this.props.personalInfo
@@ -83,13 +80,18 @@ class Detail extends React.Component {
                 <Nav />
                 <div className="page-container">
                 <div className={Style['personal-about']}>
-                        <UserInfos isSelf={this.state.isSelf} userInfo={this.state.isSelf ? this.props.userInfo : this.state.userInfos} personalInfo={
-                            {
-                                topicCounts: topic.counts,
-                                fansCounts: fansCounts,
-                                followCounts: followCounts
-                            }
-                        } />
+                        <UserInfos 
+                            isSelf={this.state.isSelf} 
+                            hasFollow={this.state.hasFollow} 
+                            toggleFollowStatus={this.toggleFollowStatus}
+                            userInfo={this.state.userInfo} 
+                            personalInfo={
+                                {
+                                    topicCounts: topic.counts,
+                                    fansCounts: fansCounts,
+                                    followCounts: followCounts
+                                }
+                            } />
                         <FavoriteList topicList={topic.topicList}/>
                         <Footer />
                 </div>

client/src/pages/accounts/components/edit/index.js

@@ -4,6 +4,7 @@ import Style from './index.scss'
 import API from '@common/api.js'
 import { Row, Col } from 'antd';
 import { connect } from "react-redux";
+import Upload from '@components/upload'
 
 const { TextArea } = Input;
 const FormItem = Form.Item;
@@ -131,7 +132,8 @@ class RegistrationForm extends React.Component {
                     </Col>
                     <Col span={16}  className="user_abstract">
                         <div className={'username'}>{userInfo.account}</div>
-                        <div className={'notice'}>更换头像</div>
+                        <div className={'notice'}>更换头像<Upload  className={'notice'} /></div>
+
                     </Col>
                 </Row>
                 <Form onSubmit={this.handleSubmit}>

client/src/pages/accounts/components/edit/index.scss

@@ -22,6 +22,7 @@
             font-weight: 400;
         }
         .notice {
+            position: relative;
             font-size: 14px;
             font-weight: bold;
             color: #3897f0;

service/app/controller/handle.ts

@@ -10,7 +10,8 @@ class HandlerController extends Controller {
         const {ctx} = this
         let token = await ctx.service.qiniu.getQiniuToken()
         ctx.returnBody(200, "获取token成功", {
-            token: token
+            token: token,
+            baseUrl: 'https://cdn.dankal.cn'
         })
     }
 

service/app/controller/user.ts

@@ -93,13 +93,32 @@ class UserController extends Controller {
             status: 1
         })
 
+        // 非本人查询是否关注了登录人
+
+        let isSelf = !ctx.query.userId || ctx.query.userId === ctx.user.userId
+        // 查询已关注用户
+        let followList = []
+        if (!isSelf) {
+            followList  = await this.ctx.model.Follow.findAll({
+                attributes: ['userId'],
+                where: {
+                    followedId: ctx.user.userId,
+                    userId: ctx.query.userId,
+                    status: 1
+                }
+            })
+        }
+
+
         ctx.returnBody(200, "获取成功", {
             topic: {
                 counts: topics.count,
                 topicList
             },
             followCounts: followCounts.count,
-            fansCounts: fansCounts.count
+            fansCounts: fansCounts.count,
+            isSelf,
+            hasFollow: followList.length > 0
         })
     }
 }