Zgna
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sponsor tiers增删改查

This commit is contained in:
qyzh 2020-09-19 10:00:30 +08:00
parent c696924523
commit 236a8f127a
8 changed files with 275 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppConfig.js
View File

@ -65,7 +65,7 @@ export function initAxiosInterceptors(props) {
// TODO 避免重复的请求 https://github.com/axios/axios#cancellation
var
proxy = "http://localhost:3000"
proxy = "https://testforgeplus.trustie.net"
// proxy = "https://testforgeplus.trustie.net"
const requestMap = {};
window.setfalseInRequestMap = function (keyName) {

81
src/forge/sponsor/Sponsor.js
View File

@ -1,6 +1,6 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Avatar, Tag, Button, Spin, Input, Form} from "antd";
import { Avatar, Tag, Button, Spin, Input, Form, message} from "antd";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
@ -23,13 +23,13 @@ import '../users/Index.scss';
import "./sponsor.css";
const tempData = [
{id:1, amount: 5, description: "这能让我感到很开心"},
{id:2, amount: 10, description: "如果您更加慷慨的话就选择这个"},
{id:3, amount: 150, description: "这能为我带来相当多的额外收入"},
{id:4, amount: 250, description: "这能为我带来相当多的额外收入"},
{id:5, amount: 500, description: "这能为我带来相当多的额外收入"},
{id:6, amount: 1000, description: "这能为我带来相当多的额外收入"},
{id:7, amount: 5000, description: "这能为我带来相当多的额外收入"},
{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我希望通过资助机制成为全职开源开发者，如果您对我的项目感兴趣，请资助我！"
@ -98,15 +98,17 @@ class Sponsor extends Component {
description: undefined,
sponsors: undefined,
edit: false,
tiers: [],
};
}
componentDidMount = () => {
this.fetchUser();
this.fetchSponsors();
this.fetchData();
};
fetchUser = () => {
fetchUser = async () => {
this.setState({
isSpin: true,
});
@ -114,15 +116,17 @@ class Sponsor extends Component {
const { username } = this.props.match.params;
let url = `/users/${username || (current_user && current_user.login)}.json`;
axios
await axios
.get(url)
.then((result) => {
// TODO: 在这里添加了对用户自我介绍的处理，前后端交互实现后需要删掉
result.data.description = tempDesc;
// result.data.description = tempDesc;
console.log(result.data);
this.setState({
user: result.data,
user: result.data,
isSpin: false,
});
// console.log(result.data);
})
.catch((error) => {
console.log(error);
@ -138,6 +142,23 @@ class Sponsor extends Component {
});
}
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,
@ -155,13 +176,29 @@ class Sponsor extends Component {
let value = this.formRef.getItemsValue().description;
// console.log(value);
let user = this.state.user;
if (user){
user.description = value;
}
this.setState({
user: user,
edit: false,
});
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 = () => {
@ -217,10 +254,8 @@ class Sponsor extends Component {
render(){
const { current_user} = this.props;
const { user, isSpin } = this.state;
const { user, isSpin, tiers} = this.state;
const sponsorList = this.sponsorList();
// console.log("current", current_user)
// console.log("user", user)
var content = "";
if (current_user && user && user.login !== current_user.login){
@ -268,7 +303,7 @@ class Sponsor extends Component {
<SponsorTierItem
{...this.props}
{...this.state}
tiers={tempData}>
tiers={tiers}>
</SponsorTierItem>
</div>
</div>

2
src/forge/sponsor/sponsor.css
View File

@ -34,5 +34,5 @@
}
.sponsor-inline{
display: inline;
display: inline-block;
}

199
src/forge/sponsor/sponsor_tier_item.js
View File

@ -1,6 +1,6 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Avatar, Tag, Button, Spin, Icon, Modal, Input, Form, message, Popconfirm, Divider} from "antd";
import { Avatar, Tag, Button, Spin, Icon, Modal, Input, Form, message, Popconfirm, Divider, InputNumber} from "antd";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
// import { EditOutlined } from "@ant-design/icons";
@ -37,15 +37,15 @@ class extends Component{
return(
<Form >
<FormItem label={`金额`} >
{getFieldDecorator(`amount`,{
{getFieldDecorator(`tier`,{
rules: [{
message: '必填字段!',
message: '请输入数字！',
pattern: /^[0-9]+$/,
required: true
}],
initialValue: initValue1 ? initValue1 : undefined
})(
<Input placeholder="请输入"/>
<InputNumber placeholder="请输入数字"/>
)}
</FormItem>
<FormItem label={`描述`} >
@ -70,19 +70,58 @@ class SponsorTierItem extends Component{
super(props)
var edit = new Array();
for(var i=0; i<props.tiers.length; i++) edit.push(false);
if (props.tiers){
for(var i=0; i<props.tiers.length; i++) edit.push(false);
}
this.state = {
tiers: props.tiers,
new_tier: undefined,
edit: edit,
isSpin: false,
}
// this.state = {
// tiers: undefined,
// new_tier: undefined,
// edit: undefined,
// isSpin: false,
// }
}
componentDidMount = () => {
// console.log(this.props.tiers)
this.fetchUser();
}
// 如果服务器较慢，组件会先被挂载，此时父组件传来的props数据是空的，但是获得数据后,有新的props，需要更新。
// 如果用户点击了修改自我描述等父组件的方法，父组件会重新渲染，这个方法又会被调用，有可能原有的编辑框会丢失。
// 因此先判断一下父组件传过来的数据是否有变化。没有变化则不需要修改state
componentWillReceiveProps = () => {
if (this.props.tiers !== this.state.tiers){
var edit = new Array();
for(var i=0; i<this.props.tiers.length; i++) edit.push(false);
this.setState({
tiers: this.props.tiers,
edit: edit,
})
}
}
fetchData = () => {
let url = `/sponsor_tiers.json`;
axios
.get(url)
.then((result) => {
console.log(result.data);
// console.log(tempData);
var edit = new Array();
for(var i=0; i<result.data.length; i++) edit.push(false);
this.setState({
tiers: result.data,
edit: edit,
})
})
.catch((error) => {
console.log(error);
})
}
fetchUser = () => {
@ -111,36 +150,87 @@ class SponsorTierItem extends Component{
editTier = (item, key, e) => {
var edit = this.state.edit;
edit[key] = true;
this.setState({
edit:edit
})
var editing = false;
for(var i=0; i<edit.length; i++)
editing = editing || edit[i];
if(editing){
message.warn("请先完成当前编辑");
return;
}
else{
edit[key] = true;
this.setState({
edit:edit
})
}
}
confirmEdit = (item, key, e) => {
let url;
let values = this.formRef.getItemsValue();
const {current_user} = this.props;
if (this.state.new_tier == key){
console.log("new tier");
url = `/sponsor_tiers.json`;
axios
.post(url, {
...values,
user_id: current_user.user_id
})
.then((result) => {
var {tiers, edit} = this.state;
tiers[key] = result.data;
edit[key] = false;
this.setState({
tiers: tiers,
edit: edit,
new_tier: undefined
})
})
.catch((error) => {
console.log(error);
})
}
console.log("key", key, "item", item)
let values = this.formRef.getItemsValue();
console.log("values:", values)
else{
url = `/sponsor_tiers/${item.id}.json`
axios
.put(url, {
...values,
})
.then((result) => {
var {tiers, edit} = this.state;
tiers[key] = result.data;
edit[key] = false;
this.setState({
tiers: tiers,
edit: edit,
new_tier: undefined
})
message.success("修改成功");
})
.catch((error) => {
console.log(error);
message.error("修改失败");
})
}
// TODO: 在此处加入对后端的修改请求
var {tiers, edit} = this.state;
tiers[key] = values;
edit[key] = false;
this.setState({
tiers: tiers,
edit: edit,
new_tier: undefined
})
// TODO: 修改的请求实现
}
cancelEdit = (item, key, e) => {
let {tiers, edit} = this.state;
tiers.pop();
edit.pop();
let {tiers, edit, new_tier} = this.state;
if (new_tier){
tiers.pop();
edit.pop();
}
else {
edit[key] = false;
}
this.setState({
tiers: tiers,
edit: edit,
@ -150,12 +240,12 @@ class SponsorTierItem extends Component{
newTier = () => {
if (this.state.new_tier !== undefined){
message.info("请先完成当前编辑")
message.warn("请先完成当前编辑")
return;
}
let {tiers, edit} = this.state;
tiers.push({amount: 1, description: ""})
tiers.push({tier: 1, description: ""})
edit.push(true);
this.setState({
tiers: tiers,
@ -168,12 +258,23 @@ class SponsorTierItem extends Component{
// TODO: 此处向后端发送请求删除
let {tiers, edit} = this.state;
tiers.splice(key, 1)
edit.splice(key, 1)
this.setState({
tiers: tiers,
edit: edit,
})
let url = `/sponsor_tiers/${item.id}.json`;
axios
.delete(url)
.then((result) => {
tiers.splice(key, 1)
edit.splice(key, 1)
this.setState({
tiers: tiers,
edit: edit,
})
message.success("删除成功");
})
.catch((error) => {
console.log(error);
message.error("删除失败");
})
}
toConformation = (item, key, e) => {
@ -189,7 +290,7 @@ class SponsorTierItem extends Component{
<ul className="list-l-Menu">
<div className="font-15 mr5">
金额：{item.amount}
金额：{item.tier}
<Button onClick={(e) => this.toConformation(item, key, e)}>选择</Button>
</div>
<div className="font-15 mr5">
@ -203,7 +304,7 @@ class SponsorTierItem extends Component{
return (
<ul className="list-l-Menu">
<div className="font-15 mr5">
金额：{item.amount}
金额：{item.tier}
<i className="iconfont icon-bianji3 font-15 mr5" onClick={e => this.editTier(item, key, e)}></i>
</div>
<div className="font-15 mr5">
@ -216,7 +317,7 @@ class SponsorTierItem extends Component{
cancelText="否"
>
<i className="iconfont icon-shanchu font-15"></i>
</Popconfirm>,
</Popconfirm>
</div>
</ul>
);
@ -226,7 +327,7 @@ class SponsorTierItem extends Component{
return (
<ul className="list-l-Menu">
<EditTierForm
initValue1={item.amount}
initValue1={item.tier}
initValue2={item.description}
wrappedComponentRef={(form) => this.formRef = form}
/>
@ -234,29 +335,18 @@ class SponsorTierItem extends Component{
<Button onClick={e => this.cancelEdit(item, key, e)}>取消</Button>
</ul>
);
// return (
// <ul className="list-l-Menu">
// <div className="font-15 mr5">
// 金额：<Input value={item.amount}></Input>
// </div>
// <div className="font-15 mr5">
// 描述：<Input value={item.description}></Input>
// <Button onClick={e => this.confirmEdit(item, key, e)}>确定</Button>
// <Button onClick={e => this.cancelEdit(item, key, e)}>取消</Button>
// </div>
// </ul>
// );
}
render() {
const {tiers} = this.state;
const { current_user} = this.props;
const {user} = this.state;
const {user} = this.props;
// console.log(tiers);
const renderList = (
tiers && tiers.length > 0 ? tiers.map((item, key) => {
const amount = this.state.edit[key]? (<Input></Input>):item.amount;
const tier = this.state.edit[key]? (<Input></Input>):item.tier;
const description = this.state.edit[key]? (<Input></Input>):item.description;
var content = "";
@ -291,7 +381,6 @@ class SponsorTierItem extends Component{
return content;
}) : ""
);
return (
<div>
<div>{renderList}</div>

20
src/forge/users/Infos.js
View File

@ -52,7 +52,8 @@ class Infos extends Component {
user: undefined,
project_type: undefined,
route_type: undefined,
choose_wallet: undefined
c: undefined,
sponsor_management: undefined,
};
}
@ -87,8 +88,9 @@ class Infos extends Component {
change_project_type = (type) => {
const {user} = this.state
this.setState({
project_type: type ,
project_type: type,
choose_wallet: false,
sponsor_management: undefined,
route_type: undefined
})
let url = `/users/${user && user.login}`
@ -132,7 +134,10 @@ class Infos extends Component {
sponsor_management_link = () => {
const {user} = this.state
this.setState({
route_type: undefined
route_type: undefined,
sponsor_management: true,
project_type: undefined,
choose_wallet: undefined,
})
this.props.history.push(`/users/${user && user.login}/sponsor_management`)
}
@ -142,7 +147,8 @@ class Infos extends Component {
this.setState({
project_type: undefined,
choose_wallet: true,
route_type: undefined
route_type: undefined,
sponsor_management: undefined,
})
this.props.history.push(`/users/${user && user.login}/wallet`)
}
@ -158,7 +164,7 @@ class Infos extends Component {
render() {
const { current_user, mygetHelmetapi } = this.props;
const { user, isSpin, project_type, route_type, choose_wallet } = this.state;
const { user, isSpin, project_type, route_type, choose_wallet, sponsor_management } = this.state;
// console.log("current", current_user)
// console.log("user", user)
return (
@ -313,7 +319,7 @@ class Infos extends Component {
<div className="bgcF">
<ul className="list-l-Menu">
<li className="MenuTitle">
<i className="font-15 mr5"></i>
<i className="iconfont icon-bianzu1 font-15 mr5"></i>
赞助管理
<i className="iconfont icon-youjiantou font-15 mr20 color-grey-9 pull-right"></i>
</li>
@ -325,7 +331,7 @@ class Infos extends Component {
</span>
</p>
</li>
<li className="" onClick={() => this.sponsor_management_link()}>
<li className={sponsor_management ? "active" : ""} onClick={() => this.sponsor_management_link()}>
<p>
<span className="font-16">赞助管理</span>
<span className="color-blue">

70
src/forge/users/sponsor/SponsorManagement.js
View File

@ -7,15 +7,23 @@ import CoinChangeItem from "./CoinChangeItem";
import Nodata from "../../Nodata";
import img_array from "../../Images/array.png";
import SponsorList from "./sponsor_list";
import "../../sponsor/sponsor.css";
// import "../new_user.css";
const Search = Input.Search;
const tempData = [
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104", format_time: "2020-08-01", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104", format_time: "2020-08-01", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104", format_time: "2020-08-01", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104", format_time: "2020-08-01", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104", format_time: "2020-08-01", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, login:"alpc104", format_time: "2020-08-01", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: true, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: true, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, private: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
];
@ -29,32 +37,33 @@ class SponsorManagement extends Component{
sort_by: undefined,
totalCount: undefined,
isSpin: false,
coinChangeList: undefined,
total: undefined,
category: undefined,
is_sponsor: undefined,
category: "all",
is_sponsor: false,
sponsors: undefined,
displayList: undefined,
};
}
changeCategory = (cate) => {
// let resultList = this.state.coinChangeList;
// switch (cate.target.value){
// case "income":
// resultList = resultList.filter(function(item,index,array){
// return item.amount > 0;
// });
// break;
// case "outcome":
// resultList = resultList.filter(function(item,index,array){
// return item.amount < 0;
// });
// break;
let resultList = this.state.sponsors;
switch (cate.target.value){
case "sponsoring":
resultList = resultList.filter(function(item,index,array){
return item.stop_time === "-";
});
break;
case "stopped":
resultList = resultList.filter(function(item,index,array){
return item.stop_time !== "-";
});
break;
// }
// this.setState({
// displayList: resultList,
// });
}
this.setState({
category: cate.target.value,
displayList: resultList,
});
};
componentDidMount = () => {
@ -64,6 +73,7 @@ class SponsorManagement extends Component{
get_sponsors = ()=>{
this.setState({
sponsors: tempData,
displayList: tempData,
})
}
@ -98,6 +108,7 @@ class SponsorManagement extends Component{
const button_lists =
user && current_user && user.login === current_user.login
? [
{ type: "all", name: "全部" },
{ type: "sponsoring", name: "赞助中" },
{ type: "stopped", name: "已终止" },
]
@ -138,8 +149,9 @@ class SponsorManagement extends Component{
render() {
const { current_user, user } = this.props;
const { category , is_sponsor, sponsors } = this.state;
const { coinChangeList, isSpin, total, search, limit, page } = this.state;
const { category , is_sponsor, sponsors, displayList} = this.state;
const {isSpin, total, search, limit, page }= this.state;
console.log(displayList);
return (
<Spin spinning={isSpin}>
@ -178,11 +190,11 @@ class SponsorManagement extends Component{
:""
}
</div>
{sponsors && sponsors.length > 0 ?
{displayList && displayList.length > 0 ?
<SponsorList
userClass={"w-33"}
current_user={current_user}
users={sponsors}
users={displayList}
></SponsorList>
:
<Nodata _html={`暂时没有项目`} />

53
src/forge/users/sponsor/sponsor_list.js
View File

@ -3,7 +3,9 @@ import { getImageUrl } from "educoder";
import FocusButton from "../../UsersList/focus_button";
import { Button } from "antd";
import "../../Main/list.css";
import "../../UsersList/list.css";
import "../../sponsor/sponsor.css";
import "../new_user.css"
class SponsorList extends Component {
renderList = (users, userClass, current_user) => {
@ -11,67 +13,34 @@ class SponsorList extends Component {
if (users && users.length > 0) {
return users.map((item, key) => {
return (
// <div className={`pull-left ${userClass}`} key={key}>
// <div className="pbt25 grid-item mlr10 border-b-line">
// <div>
// <a
// href={`/users/${item.login}`}
// className="show-user-link"
// >
// <img
// className="avatar-60"
// src={getImageUrl(`images/${item.image_url}`)}
// alt=""
// />
// </a>
// </div>
// <div className="ml12">
// <div>
// <a
// href={`/users/${item.login}`}
// className="font-16 text-primary hide-1 task-hide max-w-200"
// >
// {item.username}
// </a>
// </div>
// <div className="font-12 text-gray grid-item pb5">
// <i className="iconfont icon-shijian user-join-time"></i>
// <span className="ml4">赞助时间：{item.format_time}</span>
// </div>
// {
// current_user && current_user.login === item.login ?
// <Button type="default">当前用户</Button>
// :
// // <FocusButton is_watch={item.is_watch} id={item.login} />
// <Button>终止赞助关系</Button>
// }
// </div>
// </div>
// </div>
<div className="p-r-Item" key={key}>
<div>
<a
<a
href={`/users/${item.login}`}
className="show-user-link"
>
<img
<img className="text-center"
className="avatar-60"
src={getImageUrl(`images/${item.image_url}`)}
alt=""
/>
</a>
</div>
<a href={`/users/${item.login}`}>{item && item.username}</a>
<a className="text-center" href={`/users/${item.login}`}>{item && item.username}</a>
<div>
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>金额：{item.amount}硬币</p>
<span><label>赞助时间：</label>{item.format_time}</span>
<p><label>赞助时间：</label>{item.start_time}</p>
<p><label>终止时间：</label>{item.stop_time? item.stop_time:"-"}</p>
</div>
<div className="text-center">
可见性：{item.private? "私有":"公开"}
</div>
<div className="p-r-about">
<span className="p-r-detail">
{/* {item.amount>0 ? <span><label>金额来源：</label>{item.to_user}</span>: <span><label>金额去向：</label>{item.to_user}</span>} */}
</span>
</div>
<Button>终止赞助关系</Button>
{item.stop_time ==="-"? (<Button>终止赞助关系</Button>):""}
</div>
);
});

9
src/forge/users/sponsor/wallet.js
View File

@ -32,8 +32,9 @@ class Wallet extends Component {
coinChangeList: undefined,
displayList: undefined,
total: undefined,
category: undefined,
is_public: undefined
category: "all",
is_public: undefined,
balance: 50,
};
}
@ -70,6 +71,7 @@ class Wallet extends Component {
}
this.setState({
category: cate.target.value,
displayList: resultList,
});
};
@ -138,7 +140,7 @@ class Wallet extends Component {
render() {
const { current_user, user } = this.props;
const { category , is_public } = this.state;
const { displayList, coinChangeList, isSpin, total, search, limit, page } = this.state;
const { displayList, coinChangeList, isSpin, total, search, limit, page, balance} = this.state;
return (
<Spin spinning={isSpin}>
@ -163,6 +165,7 @@ class Wallet extends Component {
</Popover>
</div>
</div>
<div className="infosType">余额：{balance}</div>
<div className="infosType">
<div>{this.category_button(category)}</div>