From 016c0bee0032ee1a09b52f641564df5a72c090f9 Mon Sep 17 00:00:00 2001 From: qyzh Date: Tue, 8 Sep 2020 10:05:27 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E8=B5=84=E5=8A=A9=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- src/forge/sponsor/Sponsor.js | 161 +++++++++++++- src/forge/sponsor/sponsor.css | 20 ++ src/forge/sponsor/sponsor_tier_item.js | 260 ++++++++++++++++++++++ src/forge/users/Infos.js | 79 ++++++- src/forge/users/sponsor/CoinChangeItem.js | 43 ++++ src/forge/users/sponsor/wallet.js | 197 ++++++++++++++++ 7 files changed, 747 insertions(+), 15 deletions(-) create mode 100644 src/forge/sponsor/sponsor.css create mode 100644 src/forge/sponsor/sponsor_tier_item.js create mode 100644 src/forge/users/sponsor/CoinChangeItem.js create mode 100644 src/forge/users/sponsor/wallet.js diff --git a/src/App.js b/src/App.js index 41ba3d34..78ec2883 100644 --- a/src/App.js +++ b/src/App.js @@ -268,7 +268,7 @@ class App extends Component { }> () + (props) => () }> { + this.fetchUser(); + this.fetchSponsors(); + }; + + 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, + }); + }) + .catch((error) => { + console.log(error); + this.setState({ + isSpin: false, + }); + }); + }; + + fetchSponsors = () => { + this.setState({ + sponsors: tempSponsors, + }); + } + + sponsorList(){ + const {sponsors} = this.state; + const sponsorList = (sponsors && sponsors.length>0 ? sponsors.map((item, key)=>{ + return ( + + + ); + }) + :"") + return (

{sponsorList}

); + } + render(){ + const { current_user} = this.props; + const isSpin = false; + const { user } = this.state; + const sponsorList = this.sponsorList(); + // console.log("current", current_user) + // console.log("user", user) + return ( -

This is sponsor page

+
+ +
+
+
+
+
成为{user && user.username}的赞助者吧
+ + {user && user.user_identity && ( +
+ {user && user.user_identity} +
+ )} +
+
+ +
+
+ 自我介绍: + {user && current_user && user.login===current_user.login? + ():""} + + {user && user.description? + (

{user.description}

):(

暂无自我介绍

)} +
+
+ 赞助者: + {sponsorList} +
+
+
+
+
+ + +
+
+
+ +
); } diff --git a/src/forge/sponsor/sponsor.css b/src/forge/sponsor/sponsor.css new file mode 100644 index 00000000..e52ca123 --- /dev/null +++ b/src/forge/sponsor/sponsor.css @@ -0,0 +1,20 @@ +.sponsor-page-left{ + width: 65%; + padding-right: 20px; + box-sizing: border-box; + margin-bottom: 20px; +} + +.sponsor-page-right{ + width: 35%; + padding-right: 20px; + box-sizing: border-box; + margin-bottom: 20px; +} + +.sponsor-page-sponsors{ + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 11px; +} \ No newline at end of file diff --git a/src/forge/sponsor/sponsor_tier_item.js b/src/forge/sponsor/sponsor_tier_item.js new file mode 100644 index 00000000..bd932bc0 --- /dev/null +++ b/src/forge/sponsor/sponsor_tier_item.js @@ -0,0 +1,260 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import { Avatar, Tag, Button, Spin, Icon, Modal, Input, Form} from "antd"; +import { Route, Switch } from "react-router-dom"; +import { withRouter } from "react-router"; +// import { EditOutlined } from "@ant-design/icons"; + +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 "../users/new_user.css"; +import "../css/index.scss"; +import '../users/Index.scss'; +import "./sponsor.css"; +import Item from "antd/lib/list/Item"; + +const FormItem = Form.Item; + +const EditTierForm = Form.create()( +class extends Component{ + getItemsValue = ()=>{ + const val= this.props.form.getFieldsValue(); // 获取from表单的值 + return val; + } + render(){ + + const { form, initValue1, initValue2, initValueList } = this.props; + const { getFieldDecorator } = form; // 校验控件 + return( +
+ + {getFieldDecorator(`amount`,{ + rules: [{ + message: '必填字段!', + required: true + }], + initialValue: initValue1 ? initValue1 : undefined + })( + + )} + + + {getFieldDecorator(`name`,{ + rules: [{ + message: '必填字段!', + required: true + }], + initialValue: initValue2 ? initValue2 : undefined + })( + + )} + +
+ ) + } + +}); + +class SponsorTierItem extends Component{ + constructor(props) { + super(props) + + var edit = new Array(); + for(var i=0; i { + // console.log(this.props.tiers) + } + + editTier = (item, key, e) => { + var edit = this.state.edit; + edit[key] = true; + this.setState({ + edit:edit + }) + } + + confirmEdit = (item, key, e) => { + console.log("key", key, "item", item) + let values = this.formRef.getItemsValue(); + console.log("values:", values) + + // TODO: 在此处加入对后端的修改请求 + + var edit = this.state.edit; + edit[key] = false; + this.setState({ + edit:edit + }) + } + + canelEdit = (item, key, e) => { + var edit = this.state.edit; + edit[key] = false; + this.setState({ + edit:edit + }) + } + + showModal = () => { + let {tiers, edit} = this.state; + // this.setState({ + // visible: true + // }) + } + + hideModal = () => { + this.setState({ + visible: false + }) + } + + createTier = () => { + this.setState({ + visible: false + }) + } + + newTierModal = () => { + return ( + +

12312312

+ + ); + } + + visitorTemplate = (item, key) => { + return ( +
    + +
    + 金额：{item.amount} + +
    +
    + 描述：{item.description} +
    +
+ ); + } + + manageTemplate = (item, key) => { + return ( +
    +
    + 金额：{item.amount} + this.editTier(item, key, e)}> +
    +
    + 描述：{item.description} + +
    +
+ ); + } + + editTemplate = (item, key) => { + return ( +
    + this.formRef = form} + /> + + +
+ ); + + // return ( + //
    + //
    + // 金额： + //
    + //
    + // 描述： + // + // + //
    + //
+ // ); + } + + render() { + const {tiers} = this.state; + const { current_user, user} = this.props; + + const renderList = ( + tiers && tiers.length > 0 ? tiers.map((item, key) => { + const amount = this.state.edit[key]? ():item.amount; + const description = this.state.edit[key]? ():item.description; + + var content = ""; + if (current_user && user && user.login !== current_user.login){ + content = this.visitorTemplate(item, key); + } + else if(current_user && user && user.login === current_user.login && this.state.edit[key]){ + content = this.editTemplate(item, key); + } + else if(current_user && user && user.login === current_user.login && !this.state.edit[key]){ + content = this.manageTemplate(item, key); + } + + // return ( + //
    + + //
    + // 金额：{amount} + // {current_user && user && user.login === current_user.login ? + // // ( this.editTier(item)}/> + // ( this.editTier(item, key, e)}>): + // } + //
    + //
    + // 描述：{description} + // {current_user && user && user.login === current_user.login ? + // ():""} + //
    + //
+ + // ) + return content; + }) : "" + ); + + return ( +
+
{renderList}
+ {current_user && user && user.login === current_user.login ? + ( ): + "" + } + {this.newTierModal()} +
+ ) + } +} + + +export default SponsorTierItem; \ No newline at end of file diff --git a/src/forge/users/Infos.js b/src/forge/users/Infos.js index 3bc8507a..ee59e55c 100644 --- a/src/forge/users/Infos.js +++ b/src/forge/users/Infos.js @@ -36,6 +36,10 @@ const UndoEvents = Loadable({ loader: () => import("./undo_events"), loading: Loading, }) +const Wallet = Loadable({ + loader: () => import("./sponsor/wallet"), + loading: Loading, +}); class Infos extends Component { constructor(props) { super(props); @@ -43,7 +47,8 @@ class Infos extends Component { isSpin: false, user: undefined, project_type: undefined, - route_type: undefined + route_type: undefined, + choose_wallet: undefined }; } @@ -79,6 +84,7 @@ class Infos extends Component { const {user} = this.state this.setState({ project_type: type , + choose_wallet: false, route_type: undefined }) let url = `/users/${user && user.login}` @@ -119,10 +125,30 @@ class Infos extends Component { this.props.history.push(`/sponsor/${user && user.login}`) } + wallet_link = () => { + const {user} = this.state + this.setState({ + project_type: undefined, + choose_wallet: true, + route_type: undefined + }) + this.props.history.push(`/users/${user && user.login}/wallet`) + } + + sponsor_setting_link = () => { + const {user} = this.state + this.setState({ + route_type: undefined + }) + this.props.history.push(`/users/${user && user.login}/sponsor_setting`) + } + render() { const { current_user, mygetHelmetapi } = this.props; - const { user, isSpin, project_type, route_type } = this.state; + const { user, isSpin, project_type, route_type, choose_wallet } = this.state; + // console.log("current", current_user) + // console.log("user", user) return (
@@ -159,7 +185,10 @@ class Infos extends Component { 修改资料 + +
+ )} {current_user && user && user.login !== current_user.login && (
@@ -170,6 +199,13 @@ class Infos extends Component { fontClass={"font-14 ml5"} starText={"关注TA"} /> +
)} @@ -254,19 +290,32 @@ class Infos extends Component {

*/} - {current_user && user && current_user.id === user.id && ( + {current_user && user && user.login == current_user.login && ( +
-
-

this.sponsor_link()} > - - {/* */} - Sponsor +

    +
  • + + 赞助管理 + +
    • +
  • this.wallet_link()}> +

    + 我的钱包 + + {/* {user && user.common_projects_count} */} - {/* - {user && user.undo_events} - */}

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

    + 赞助管理 + + {/* {user && user.sync_mirror_projects_count} */} + +

    +
    • +
    )} @@ -286,6 +335,12 @@ class Infos extends Component { return ; }} >     + { + return ; + }} + > { diff --git a/src/forge/users/sponsor/CoinChangeItem.js b/src/forge/users/sponsor/CoinChangeItem.js new file mode 100644 index 00000000..e046b65c --- /dev/null +++ b/src/forge/users/sponsor/CoinChangeItem.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react'; +import { Tooltip } from 'antd'; +import '../../css/index.scss' +import '../../Main/list.css'; + +class CoinChangeItem extends Component { + TurnToDetail = (login, url) => { + this.props.history.push({ + pathname: url, + state: login + }) + } + render() { + const { coinChanges } = this.props; + const renderList = ( + coinChanges && coinChanges.length > 0 ? coinChanges.map((item, key) => { + return ( +
    +
    +

    金额：{item.amount>0? "收入":"支出"}{Math.abs(item.amount)}硬币

    +

    变动原因：{item.reasons}

    +

    备注：{item.description}

    + +
    + + {item.date} + {item.to_user} + {/* {item.amount>0 ? {item.to_user}: {item.to_user}} */} + +
    +
    +
    + ) + }) : "" + ) + return ( +
    + {renderList} +
    + ) + } +} +export default CoinChangeItem; \ No newline at end of file diff --git a/src/forge/users/sponsor/wallet.js b/src/forge/users/sponsor/wallet.js new file mode 100644 index 00000000..1f4f4343 --- /dev/null +++ b/src/forge/users/sponsor/wallet.js @@ -0,0 +1,197 @@ +import React, { Component } from "react"; +import { Link } from "react-router-dom"; +import { Menu, Input, Spin, Pagination, Popover, Button, Divider } from "antd"; + +import axios from "axios"; +import CoinChangeItem from "./CoinChangeItem"; +import Nodata from "../../Nodata"; +import img_array from "../../Images/array.png"; +const Search = Input.Search; + +const tempData = [ + {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, + {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, + {amount: -3, description: "des", reasons: "no reason", to_user: "串", date: "2016年1月5日"}, + {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, + {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, + {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, + {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, + {amount: 3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"}, + {amount: -3, description: "des", reasons: "no reason", to_user: "串串", date: "2016年1月5日"} +]; + +class Wallet extends Component { + constructor(props) { + super(props); + this.state = { + page: 1, + limit: 15, + sort_by: undefined, + totalCount: undefined, + isSpin: false, + coinChangeList: undefined, + displayList: undefined, + total: undefined, + category: undefined, + is_public: undefined + }; + } + + componentDidMount = () => { + this.get_coin_changes(); + }; + + componentDidUpdate = () => { + // this.get_coin_changes() + }; + + get_coin_changes = () => { + this.setState({ + coinChangeList: tempData, + displayList: tempData, + total: tempData.count, + isSpin: false, + }); + }; + + 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; + + } + this.setState({ + displayList: resultList, + }); + }; + + //切换页数 + changePage = (page) => { + this.state.page = page; + this.get_coin_changes(); + }; + + // 排序 + ChangeSoryBy = (e) => { + // this.state.sort_by = e.key; + // this.get_coin_changes(); + console.log(e.key) + }; + + changeSearchValue = (e) => { + this.setState({ + search: e.target.value, + }); + }; + + menu =()=> ( + + 时间从近到远排序 + 时间从远到近排序 + + ); + + category_button=(category)=>{ + const { current_user, user } = this.props; + const button_lists = + user && current_user && user.login === current_user.login + ? [ + { type: "all", name: "所有" }, + { type: "income", name: "收入" }, + { type: "outcome", name: "支出" }, + ] + : + []; + + let list = button_lists.map((item, key) => { + return ( + + + + ); + }) + return list; + } + + render() { + const { current_user, user } = this.props; + const { category , is_public } = this.state; + const { displayList, coinChangeList, isSpin, total, search, limit, page } = this.state; + + return ( + +
    + + +
    +
    +
    {this.category_button(category)}
    + +
    + {displayList && displayList.length > 0 ? + + : + + } + { + total && total > limit ? +
    + +
    + : + "" + } +     + ); + } +} +export default Wallet;