From 236a8f127a83034530cf775104f79b3b376b0efc Mon Sep 17 00:00:00 2001 From: qyzh Date: Sat, 19 Sep 2020 10:00:30 +0800 Subject: [PATCH] =?UTF-8?q?sponsor=20tiers=E5=A2=9E=E5=88=A0=E6=94=B9?= =?UTF-8?q?=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/AppConfig.js | 2 +- src/forge/sponsor/Sponsor.js | 81 +++++--- src/forge/sponsor/sponsor.css | 2 +- src/forge/sponsor/sponsor_tier_item.js | 199 ++++++++++++++----- src/forge/users/Infos.js | 20 +- src/forge/users/sponsor/SponsorManagement.js | 70 ++++--- src/forge/users/sponsor/sponsor_list.js | 53 +---- src/forge/users/sponsor/wallet.js | 9 +- 8 files changed, 275 insertions(+), 161 deletions(-) diff --git a/src/AppConfig.js b/src/AppConfig.js index dadadc5f3..f80e96efa 100644 --- a/src/AppConfig.js +++ b/src/AppConfig.js @@ -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) { diff --git a/src/forge/sponsor/Sponsor.js b/src/forge/sponsor/Sponsor.js index 5beba6967..627f076e5 100644 --- a/src/forge/sponsor/Sponsor.js +++ b/src/forge/sponsor/Sponsor.js @@ -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 { + tiers={tiers}> diff --git a/src/forge/sponsor/sponsor.css b/src/forge/sponsor/sponsor.css index 5493e6c48..1ca79791a 100644 --- a/src/forge/sponsor/sponsor.css +++ b/src/forge/sponsor/sponsor.css @@ -34,5 +34,5 @@ } .sponsor-inline{ - display: inline; + display: inline-block; } \ No newline at end of file diff --git a/src/forge/sponsor/sponsor_tier_item.js b/src/forge/sponsor/sponsor_tier_item.js index c3f15ea12..96e767233 100644 --- a/src/forge/sponsor/sponsor_tier_item.js +++ b/src/forge/sponsor/sponsor_tier_item.js @@ -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(
- {getFieldDecorator(`amount`,{ + {getFieldDecorator(`tier`,{ rules: [{ - message: '必填字段!', + message: '请输入数字！', pattern: /^[0-9]+$/, required: true }], initialValue: initValue1 ? initValue1 : undefined })( - + )} @@ -70,19 +70,58 @@ class SponsorTierItem extends Component{ super(props) var edit = new Array(); - for(var i=0; i { - // 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 { + 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 { + 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 { + 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{
    - 金额：{item.amount} + 金额：{item.tier}
    @@ -203,7 +304,7 @@ class SponsorTierItem extends Component{ return (
      - 金额：{item.amount} + 金额：{item.tier} this.editTier(item, key, e)}>
      @@ -216,7 +317,7 @@ class SponsorTierItem extends Component{ cancelText="否" > - , +
    ); @@ -226,7 +327,7 @@ class SponsorTierItem extends Component{ return (
      this.formRef = form} /> @@ -234,29 +335,18 @@ class SponsorTierItem extends Component{
    ); - - // return ( - //
      - //
      - // 金额： - //
      - //
      - // 描述： - // - // - //
      - //
    - // ); } 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]? ():item.amount; + const tier = this.state.edit[key]? ():item.tier; const description = this.state.edit[key]? ():item.description; var content = ""; @@ -291,7 +381,6 @@ class SponsorTierItem extends Component{ return content; }) : "" ); - return (
    {renderList}
    diff --git a/src/forge/users/Infos.js b/src/forge/users/Infos.js index 434197fea..b6d6b6053 100644 --- a/src/forge/users/Infos.js +++ b/src/forge/users/Infos.js @@ -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 {
    • - + 赞助管理
      • @@ -325,7 +331,7 @@ class Infos extends Component {

      -
    • this.sponsor_management_link()}> +
    • this.sponsor_management_link()}>

      赞助管理 diff --git a/src/forge/users/sponsor/SponsorManagement.js b/src/forge/users/sponsor/SponsorManagement.js index a9fbbf64f..74c3c150e 100644 --- a/src/forge/users/sponsor/SponsorManagement.js +++ b/src/forge/users/sponsor/SponsorManagement.js @@ -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 ( @@ -178,11 +190,11 @@ class SponsorManagement extends Component{ :"" }

    - {sponsors && sponsors.length > 0 ? + {displayList && displayList.length > 0 ? : diff --git a/src/forge/users/sponsor/sponsor_list.js b/src/forge/users/sponsor/sponsor_list.js index 826f011b7..feee49edb 100644 --- a/src/forge/users/sponsor/sponsor_list.js +++ b/src/forge/users/sponsor/sponsor_list.js @@ -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 ( - //
    - //
    - //
    - // - // - // - //
    - //
    - // - //
    - // - // 赞助时间：{item.format_time} - //
    - // { - // current_user && current_user.login === item.login ? - // - // : - // // - // - // } - //
    - //
    - //
    - -
    - {item && item.username} + {item && item.username}

    金额：{item.amount}硬币

    - {item.format_time} +

    {item.start_time}

    +

    {item.stop_time? item.stop_time:"-"}

    +
    +
    + 可见性：{item.private? "私有":"公开"}
    {/* {item.amount>0 ? {item.to_user}: {item.to_user}} */}
    - + {item.stop_time ==="-"? ():""}
    ); }); diff --git a/src/forge/users/sponsor/wallet.js b/src/forge/users/sponsor/wallet.js index 1f4f43439..2818fade2 100644 --- a/src/forge/users/sponsor/wallet.js +++ b/src/forge/users/sponsor/wallet.js @@ -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 ( @@ -163,6 +165,7 @@ class Wallet extends Component {
    +
    余额：{balance}
    {this.category_button(category)}