348 lines
12 KiB
JavaScript
348 lines
12 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import { Avatar, Tag, Button, Spin, Input, Form, message, Divider} from "antd";
|
||
import { Route, Switch } from "react-router-dom";
|
||
import { withRouter } from "react-router";
|
||
|
||
import { SnackbarHOC } from "educoder";
|
||
import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
|
||
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
|
||
|
||
import axios from "axios";
|
||
import { getImageUrl } from "educoder";
|
||
|
||
import Loadable from "react-loadable";
|
||
import Loading from "../../Loading";
|
||
import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
|
||
|
||
import SponsorTierItem from "./sponsor_tier_item";
|
||
|
||
import "../users/new_user.css";
|
||
import "../css/index.scss";
|
||
import '../users/Index.scss';
|
||
import "./sponsor.css";
|
||
|
||
const tempData = [
|
||
{id:1, tier: 5, description: "这能让我感到很开心"},
|
||
{id:2, tier: 10, description: "如果您更加慷慨的话就选择这个"},
|
||
{id:3, tier: 150, description: "这能为我带来相当多的额外收入"},
|
||
{id:4, tier: 250, description: "这能为我带来相当多的额外收入"},
|
||
{id:5, tier: 500, description: "这能为我带来相当多的额外收入"},
|
||
{id:6, tier: 1000, description: "这能为我带来相当多的额外收入"},
|
||
{id:7, tier: 5000, description: "这能为我带来相当多的额外收入"},
|
||
];
|
||
|
||
const tempDesc = "我长期从事开源社区相关工作...目前已经开发了多个项目，如xxx, xxxx, ...\n我希望通过资助机制成为全职开源开发者，如果您对我的项目感兴趣，请资助我！"
|
||
|
||
const tempSponsors = [
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104"},
|
||
];
|
||
|
||
const FormItem = Form.Item;
|
||
const TextArea = Input.TextArea;
|
||
|
||
const DescriptionForm = Form.create()(
|
||
class extends Component{
|
||
getItemsValue = ()=>{
|
||
const val= this.props.form.getFieldsValue(); // 获取from表单的值
|
||
return val;
|
||
}
|
||
render(){
|
||
|
||
const { form, initValue} = this.props;
|
||
const { getFieldDecorator } = form; // 校验控件
|
||
return(
|
||
<Form >
|
||
<FormItem>
|
||
{getFieldDecorator(`description`,{
|
||
rules: [],
|
||
initialValue: initValue ? initValue : undefined
|
||
})(
|
||
// <Input placeholder="请输入"/>
|
||
<TextArea rows={4} placeholder="请输入"></TextArea>
|
||
)}
|
||
</FormItem>
|
||
</Form>
|
||
)
|
||
}
|
||
}
|
||
);
|
||
|
||
class Sponsor extends Component {
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
isSpin: false,
|
||
user: undefined,
|
||
description: undefined,
|
||
sponsors: undefined,
|
||
edit: false,
|
||
tiers: [],
|
||
};
|
||
}
|
||
|
||
componentDidMount = () => {
|
||
this.fetchUser();
|
||
this.fetchData();
|
||
};
|
||
|
||
fetchUser = () => {
|
||
this.setState({
|
||
isSpin: true,
|
||
});
|
||
const { current_user } = this.props;
|
||
const { username } = this.props.match.params;
|
||
|
||
let url = `/users/${username || (current_user && current_user.login)}.json`;
|
||
axios
|
||
.get(url)
|
||
.then((result) => {
|
||
// TODO: 在这里添加了对用户自我介绍的处理，前后端交互实现后需要删掉
|
||
// result.data.description = tempDesc;
|
||
this.setState({
|
||
user: result.data,
|
||
isSpin: false,
|
||
}, () => {this.fetchSponsors()});
|
||
// console.log(result.data);
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
this.setState({
|
||
isSpin: false,
|
||
});
|
||
});
|
||
};
|
||
|
||
fetchSponsors = () => {
|
||
// console.log("fetch sponsors");
|
||
const user_id = this.state.user.user_id;
|
||
|
||
let url = `/sponsorships/sponsored.json`;
|
||
|
||
axios.get(url, {params: {id: user_id}})
|
||
.then((result) => {
|
||
// console.log(result);
|
||
this.setState({
|
||
sponsors: result.data.sponsorships,
|
||
isSpin: false,
|
||
})
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
this.setState({
|
||
isSpin: false,
|
||
});
|
||
});
|
||
// this.setState({
|
||
// sponsors: tempData,
|
||
// displayList: tempData,
|
||
// })
|
||
// this.setState({
|
||
// sponsors: tempSponsors,
|
||
// });
|
||
}
|
||
|
||
fetchData = () => {
|
||
let url = `/sponsor_tiers.json`;
|
||
const user_login = this.props.match.params.username;
|
||
axios
|
||
.get(url, {params:{login: user_login}})
|
||
.then((result) => {
|
||
// console.log(result.data);
|
||
// console.log(tempData)
|
||
this.setState({
|
||
tiers: result.data
|
||
});
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
})
|
||
}
|
||
|
||
editDescription = () => {
|
||
this.setState({
|
||
edit: true,
|
||
});
|
||
}
|
||
|
||
cancelEdit = () => {
|
||
this.setState({
|
||
edit: false,
|
||
})
|
||
}
|
||
|
||
confirmEdit = () => {
|
||
//TODO: 增加和后端交互
|
||
let value = this.formRef.getItemsValue().description;
|
||
// console.log(value);
|
||
let user = this.state.user;
|
||
let url = `/users/${user.user_id}/update_description.json`
|
||
axios.put(url, {description: value})
|
||
.then((result) => {
|
||
user.description = value;
|
||
this.setState({
|
||
user: user,
|
||
edit: false
|
||
})
|
||
message.success("修改成功")
|
||
})
|
||
.catch(error => {
|
||
console.log(error);
|
||
message.error("修改失败")
|
||
})
|
||
|
||
|
||
// if (user){
|
||
// user.description = value;
|
||
// }
|
||
// this.setState({
|
||
// user: user,
|
||
// edit: false,
|
||
// });
|
||
}
|
||
|
||
visitorTemplate = () => {
|
||
const user = this.state.user;
|
||
return (
|
||
<div>
|
||
{user && user.description?
|
||
(<p>{user.description}</p>):(<p>暂无自我介绍</p>)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
manageTemplate = () => {
|
||
const user = this.state.user;
|
||
return (
|
||
<div>
|
||
<div>
|
||
<i className="iconfont icon-bianji3 font-15" onClick={() => this.editDescription()}></i>
|
||
</div>
|
||
{user && user.description? (<div>{user.description}</div>):(<div>暂无自我介绍</div>)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
editTemplate = () => {
|
||
const user = this.state.user;
|
||
return (
|
||
<div>
|
||
<DescriptionForm
|
||
initValue={user && user.description}
|
||
wrappedComponentRef={(form) => this.formRef = form}
|
||
/>
|
||
<Button onClick={() => this.confirmEdit()}>确认</Button>
|
||
<Button onClick={() => this.cancelEdit()}>取消</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
sponsorList(){
|
||
const {sponsors} = this.state;
|
||
const sponsorList = (sponsors && sponsors.length>0 ? sponsors.map((item, key)=>{
|
||
return (
|
||
<Link to={`/users/${item.login}`} className="show-user-link">
|
||
<img className="sponsor-page-sponsors" alt="" src={getImageUrl(`images/${item && item.image_url}`)} title={item.username}></img>
|
||
</Link>);
|
||
})
|
||
:"")
|
||
return (<p>{sponsorList}</p>);
|
||
}
|
||
|
||
render(){
|
||
const { current_user} = this.props;
|
||
const { user, isSpin, tiers} = this.state;
|
||
const sponsorList = this.sponsorList();
|
||
console.log(tiers);
|
||
|
||
var content = "";
|
||
if (current_user && user && user.login !== current_user.login){
|
||
content = this.visitorTemplate();
|
||
}
|
||
else if(current_user && user && user.login === current_user.login && this.state.edit){
|
||
content = this.editTemplate();
|
||
}
|
||
else if(current_user && user && user.login === current_user.login && !this.state.edit){
|
||
content = this.manageTemplate();
|
||
}
|
||
|
||
return (
|
||
<div className="newMain clearfix">
|
||
<Spin spinning={isSpin}>
|
||
<div className="new-content-flex">
|
||
<div className="sponsor-page-left">
|
||
<div className="list-l-Menu pd20 ">
|
||
<div className="text-center mt15 font-16 fwb"> 成为{user && user.username}的赞助者吧</div>
|
||
<div className="text-center"><Avatar
|
||
size={110}
|
||
src={getImageUrl(`images/${user && user.image_url}`)}
|
||
/>
|
||
{user && user.user_identity && (
|
||
<div className="mt-n15 position-relative">
|
||
<Tag color="#FF6E21" style={{marginRight:"0px"}}>{user && user.user_identity}</Tag>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Divider />
|
||
{content}
|
||
<Divider />
|
||
<div>
|
||
赞助者:
|
||
{sponsorList}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bgcF">
|
||
{/* <div className="list-l-Menu pd20 ">
|
||
{content}
|
||
</div>
|
||
<div className="list-l-Menu pd20 ">
|
||
赞助者:
|
||
{sponsorList}
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
<div className="sponsor-page-right">
|
||
<SponsorTierItem
|
||
{...this.props}
|
||
{...this.state}
|
||
tiers={tiers}>
|
||
</SponsorTierItem>
|
||
</div>
|
||
</div>
|
||
</Spin>
|
||
</div>
|
||
);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
export default withRouter(
|
||
ImageLayerOfCommentHOC({
|
||
imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
|
||
parentSelector: ".newMain",
|
||
})(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Sponsor))))
|
||
);
|
||
|