Gitlink
/
forgeplus-react
0
0
Fork 37
Code Issues Pull Requests 5 Releases 1 Wiki Activity

添加部分布局

This commit is contained in:
qyzh 2020-10-20 19:59:18 +08:00
parent 236a8f127a
commit fc55df4d30
8 changed files with 389 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
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, message} from "antd";
import { Avatar, Tag, Button, Spin, Input, Form, message, Divider} from "antd";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
@ -104,11 +104,10 @@ class Sponsor extends Component {
componentDidMount = () => {
this.fetchUser();
this.fetchSponsors();
this.fetchData();
};
fetchUser = async () => {
fetchUser = () => {
this.setState({
isSpin: true,
});
@ -116,16 +115,15 @@ class Sponsor extends Component {
const { username } = this.props.match.params;
let url = `/users/${username || (current_user && current_user.login)}.json`;
await axios
axios
.get(url)
.then((result) => {
// TODO: 在这里添加了对用户自我介绍的处理，前后端交互实现后需要删掉
// result.data.description = tempDesc;
console.log(result.data);
this.setState({
user: result.data,
isSpin: false,
});
}, () => {this.fetchSponsors()});
// console.log(result.data);
})
.catch((error) => {
@ -137,9 +135,32 @@ class Sponsor extends Component {
};
fetchSponsors = () => {
this.setState({
sponsors: tempSponsors,
});
// 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 = () => {
@ -152,7 +173,7 @@ class Sponsor extends Component {
// console.log(tempData)
this.setState({
tiers: result.data
})
});
})
.catch((error) => {
console.log(error);
@ -205,7 +226,6 @@ class Sponsor extends Component {
const user = this.state.user;
return (
<div>
<span>自我介绍:</span>
{user && user.description?
(<p>{user.description}</p>):(<p>暂无自我介绍</p>)}
</div>
@ -216,11 +236,10 @@ class Sponsor extends Component {
const user = this.state.user;
return (
<div>
<span>
自我介绍:
<i className="iconfont icon-bianji3 font-15 mr5" onClick={() => this.editDescription()}></i>
</span>
{user && user.description? (<p>{user.description}</p>):(<p>暂无自我介绍</p>)}
<div>
<i className="iconfont icon-bianji3 font-15" onClick={() => this.editDescription()}></i>
</div>
{user && user.description? (<div>{user.description}</div>):(<div>暂无自我介绍</div>)}
</div>
);
}
@ -229,7 +248,6 @@ class Sponsor extends Component {
const user = this.state.user;
return (
<div>
<span>自我介绍:</span>
<DescriptionForm
initValue={user && user.description}
wrappedComponentRef={(form) => this.formRef = form}
@ -256,6 +274,7 @@ class Sponsor extends Component {
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){
@ -273,39 +292,43 @@ class Sponsor extends Component {
<Spin spinning={isSpin}>
<div className="new-content-flex">
<div className="sponsor-page-left">
<div className="bgcF">
<div className="list-l-Menu text-center pd20 ">
<div className="text-center mt15 font-16 fwb"> 成为{user && user.username}的赞助者吧</div>
<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 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>
</div>
<Divider />
{content}
<Divider />
<div>
赞助者:
{sponsorList}
</div>
</div>
<div className="bgcF">
<div className="list-l-Menu pd20 ">
{/* <div className="list-l-Menu pd20 ">
{content}
</div>
<div className="list-l-Menu pd20 ">
赞助者:
{sponsorList}
</div>
</div> */}
</div>
</div>
<div className="sponsor-page-right">
<div className="bgcF">
<SponsorTierItem
{...this.props}
{...this.state}
tiers={tiers}>
</SponsorTierItem>
</div>
<SponsorTierItem
{...this.props}
{...this.state}
tiers={tiers}>
</SponsorTierItem>
</div>
</div>
</Spin>

85
src/forge/sponsor/SponsorConfirmation.js
View File

@ -43,8 +43,15 @@ class extends Component{
this.fetchUser();
this.fetchTierInformation();
this.fetchBalance();
// this.fetchData();
};
//组件刚刚挂载时，TPMINDEXHOC还没从后端获取current_user，需要在获取后，再使用current_user的内容
componentWillReceiveProps = () => {
if (this.props.current_user)
this.fetchBalance();
}
fetchUser = () => {
this.setState({
isSpin: true,
@ -70,16 +77,42 @@ class extends Component{
};
fetchTierInformation = () => {
//TODO: 和后端交互
this.setState({
tier: tempData
})
const { current_user } = this.props;
const { username, tier_id } = this.props.match.params;
let url = `/sponsor_tiers/${tier_id}.json`;
axios
.get(url)
.then((result) => {
this.setState({
tier: result.data,
})
})
.catch((error) => {
console.log(error);
this.setState({
isSpin: false,
});
});
}
fetchBalance = () => {
this.setState({
balance: tempBalance
})
const { current_user } = this.props;
let url = `/wallets/balance.json`;
if (current_user){
axios
.get(url, {params: {id: current_user.user_id}})
.then((result) => {
this.setState({
balance: result.data.balance,
})
})
.catch((error) => {
console.log(error);
this.setState({
isSpin: false,
});
});
}
}
reSelect = () => {
@ -99,8 +132,24 @@ class extends Component{
submit = () => {
const value = this.props.form.getFieldsValue();
console.log(value);
message.success("赞助成功！");
const {tier, user} = this.state;
const {current_user} = this.props;
// console.log(value);
let url = `/sponsorships.json`;
axios.post(url, {
amount: tier.tier,
visible: value.visible,
single: value.single,
developer_id: user.user_id,
})
.then((result) => {
console.log(result);
if (result && result.data.status == 1)
message.success(result.data.message);
})
.catch((error) => {
console.log(error);
})
}
render(){
@ -110,8 +159,8 @@ class extends Component{
const {getFieldDecorator} = form;
const current_username = current_user && current_user.username;
const alert_text = this.state.single? `您选择了单次付费，本次扣除${tier && tier.amount}硬币`
:`您选择了按月付费，每月20日将扣除${tier && tier.amount}硬币`;
const alert_text = this.state.single? `您选择了单次付费，本次扣除${tier && tier.tier}硬币`
:`您选择了按月付费，每月20日将扣除${tier && tier.tier}硬币`;
// console.log("user", user)
// console.log("current user", current_user);
@ -145,7 +194,7 @@ class extends Component{
</p>
<Divider></Divider>
<p>所选赞助等级</p>
<p>{tier && tier.amount}硬币</p>
<p>{tier && tier.tier}硬币</p>
<p>{tier && tier.description}</p>
<Button onClick={() => this.reSelect()}>重新选择</Button>
</div>
@ -167,7 +216,7 @@ class extends Component{
</Radio.Group>
)}
</FormItem>
<p>本次支付金额{tier && tier.amount}硬币</p>
<p>本次支付金额{tier && tier.tier}硬币</p>
<p>{this.state.single? "单次付费": "即日起-次月20日"}</p>
<Divider></Divider>
@ -188,19 +237,19 @@ class extends Component{
<Divider></Divider>
<span>赞助关系可见性</span>
<FormItem >
{getFieldDecorator(`private`,{
{getFieldDecorator(`visible`,{
rules: [{
required: true
}],
initialValue: false
initialValue: 1
})(
<Radio.Group >
<Radio style={radioStyle} value={false}>所有人可见</Radio>
<Radio style={radioStyle} value={true}>私密</Radio>
<Radio style={radioStyle} value={1}>所有人可见</Radio>
<Radio style={radioStyle} value={0}>私密</Radio>
</Radio.Group>
)}
</FormItem>
<Button onClick={() => this.submit()}>赞助{user && user.username}</Button>
<Button type='primary' onClick={() => this.submit()}>赞助{user && user.username}</Button>
</Form>
</div>
</div>

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

@ -35,4 +35,36 @@
.sponsor-inline{
display: inline-block;
}
.tier-Item:last-child{
border-bottom: none !important;
}
.tier-Item{
border-bottom:1px solid rgba(238,238,238,1);
padding:9px 12px;
}
.right{
float: right
}
.btn-border-5{
border-radius: 5px;
}
.description-edit{
min-height:28px;
border:true;
}
.tier-title{
font-size: 16px;
font-weight: 600;
}
.mr10{
margin-right: 10px;
}

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

@ -20,6 +20,7 @@ import "../users/new_user.css";
import "../css/index.scss";
import '../users/Index.scss';
import "./sponsor.css";
import "../Main/list.css";
import Item from "antd/lib/list/Item";
const FormItem = Form.Item;
@ -52,7 +53,10 @@ class extends Component{
{getFieldDecorator(`description`,{
rules: [{
message: '必填字段!',
required: true
required: true,
}, {
max: 255,
message: "长度不能超过255个字符"
}],
initialValue: initValue2 ? initValue2 : undefined
})(
@ -167,9 +171,17 @@ class SponsorTierItem extends Component{
}
}
confirmEdit = (item, key, e) => {
confirmEdit = async (item, key, e) => {
let url;
try {
const values = await this.formRef.props.form.validateFields();
console.log('Success:', values);
} catch (errorInfo) {
message.warn('提交失败，数据不合法');
return false;
}
let values = this.formRef.getItemsValue();
console.log(this.formRef);
const {current_user} = this.props;
if (this.state.new_tier == key){
console.log("new tier");
@ -278,7 +290,7 @@ class SponsorTierItem extends Component{
}
toConformation = (item, key, e) => {
const {user} = this.state
const {user} = this.props;
this.setState({
route_type: undefined
})
@ -287,14 +299,14 @@ class SponsorTierItem extends Component{
visitorTemplate = (item, key) => {
return (
<ul className="list-l-Menu">
<ul className="tier-Item">
<div className="font-15 mr5">
金额：{item.tier}
<Button onClick={(e) => this.toConformation(item, key, e)}>选择</Button>
<div className="tier-title">
{item.tier}&nbsp;&nbsp;硬币
<Button className="right btn-border-5" onClick={(e) => this.toConformation(item, key, e)}>选择</Button>
</div>
<div className="font-15 mr5">
描述：{item.description}
<div>
{item.description}
</div>
</ul>
);
@ -302,13 +314,10 @@ class SponsorTierItem extends Component{
manageTemplate = (item, key) => {
return (
<ul className="list-l-Menu">
<div className="font-15 mr5">
金额：{item.tier}
<i className="iconfont icon-bianji3 font-15 mr5" onClick={e => this.editTier(item, key, e)}></i>
</div>
<div className="font-15 mr5">
描述：{item.description}
<div className="tier-Item">
<div>
<span className="tier-title">{item.tier}&nbsp;&nbsp;硬币</span>
<Popconfirm
title="确认删除?"
onConfirm={e => this.deleteTier(item, key, e)}
@ -316,16 +325,23 @@ class SponsorTierItem extends Component{
okText="是"
cancelText="否"
>
<i className="iconfont icon-shanchu font-15"></i>
<i className="iconfont icon-shanchu font-15 right"></i>
</Popconfirm>
<i className="iconfont icon-bianji3 font-15 mr10 right" onClick={e => this.editTier(item, key, e)}></i>
</div>
</ul>
<div>
{item.description}
</div>
</div>
);
}
editTemplate = (item, key) => {
return (
<ul className="list-l-Menu">
<div className="tier-Item">
<EditTierForm
initValue1={item.tier}
initValue2={item.description}
@ -333,7 +349,7 @@ class SponsorTierItem extends Component{
/>
<Button onClick={e => this.confirmEdit(item, key, e)}>确定</Button>
<Button onClick={e => this.cancelEdit(item, key, e)}>取消</Button>
</ul>
</div>
);
}
@ -342,7 +358,8 @@ class SponsorTierItem extends Component{
const { current_user} = this.props;
const {user} = this.props;
// console.log(tiers);
// console.log("item state tiers:", tiers);
// console.log("item props tiers:", this.props.tiers);
const renderList = (
tiers && tiers.length > 0 ? tiers.map((item, key) => {
@ -383,7 +400,11 @@ class SponsorTierItem extends Component{
);
return (
<div>
<div>{renderList}</div>
<div className="list-l-Menu">
<p className="tier-Item tier-title">选择您的赞助等级</p>
{/* <Divider/> */}
{renderList}
</div>
{current_user && user && user.login === current_user.login ?
( <Button type="primary" onClick={() => this.newTier()}>新增赞助等级</Button>):
""

14
src/forge/users/sponsor/CoinChangeItem.js
View File

@ -11,21 +11,23 @@ class CoinChangeItem extends Component {
})
}
render() {
const { coinChanges } = this.props;
const { coinChanges, current_user } = this.props;
const renderList = (
coinChanges && coinChanges.length > 0 ? coinChanges.map((item, key) => {
let url = current_user && item.to_user_login == current_user.login? `/users/${item.from_user_login}`:`/users/${item.to_user_login}`;
return (
<div className="p-r-Item" key={key}>
<div className="p-r-Infos">
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>金额：{item.amount>0? "收入":"支出"}{Math.abs(item.amount)}硬币</p>
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>变动原因：{item.reasons}</p>
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>备注：{item.description}</p>
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>金额：{current_user && item.to_user_login == current_user.login? "收入":"支出"}{item.amount}硬币</p>
<p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>变动原因：{item.reason}</p>
{/* <p className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>备注：{item.description}</p> */}
<div className="p-r-about">
<span className="p-r-detail">
<span><label>时间：</label>{item.date}</span>
<span><label>{item.amount>0? "金额来源":"金额去向"}：</label><a href='/users/SylorHuang'>{item.to_user}</a></span>
{/* {item.amount>0 ? <span><label>金额来源：</label>{item.to_user}</span>: <span><label>金额去向：</label>{item.to_user}</span>} */}
{current_user && item.to_user_login == current_user.login?
(<span><label>金额来源：</label><a href={url}>{item.from_user}</a></span>):
(<span><label>金额去向：</label><a href={url}>{item.to_user}</a></span>)}
</span>
</div>
</div>

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

@ -13,17 +13,17 @@ import "../../sponsor/sponsor.css";
const Search = Input.Search;
const tempData = [
{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},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: true, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: true, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: true, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "-", amount: 100},
{image_url: "avatars/User/b", username: "万山川", user_id: 1369, visible: 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, visible: 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, visible: 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, visible: 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, visible: 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, visible: false, sponsor: false, login:"alpc104", start_time: "2020-08-01", stop_time: "2020-09-05", amount: 100},
];
@ -38,7 +38,7 @@ class SponsorManagement extends Component{
totalCount: undefined,
isSpin: false,
total: undefined,
category: "all",
category: "sponsoring",
is_sponsor: false,
sponsors: undefined,
displayList: undefined,
@ -46,24 +46,10 @@ class SponsorManagement extends Component{
}
changeCategory = (cate) => {
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({
category: cate.target.value,
displayList: resultList,
});
page: 1,
}, ()=>{this.get_sponsors();});
};
componentDidMount = () => {
@ -71,22 +57,51 @@ class SponsorManagement extends Component{
}
get_sponsors = ()=>{
const user_id = this.props.current_user.user_id;
let url = this.state.is_sponsor? `sponsoring`:`sponsored`;
url = this.state.category === "stopped"? `stopped_` + url: url;
url = `/sponsorships/` + url + `.json`;
const {page, limit} = this.state;
this.setState({
sponsors: tempData,
displayList: tempData,
isSpin: true
})
axios.get(url, {
params: {
id: user_id,
page: page,
limit: limit,
}})
.then((result) => {
// console.log(result);
this.setState({
displayList: result.data.sponsorships,
total: result.data.count,
isSpin: false,
})
})
.catch((error) => {
console.log(error);
this.setState({
isSpin: false,
});
});
// this.setState({
// sponsors: tempData,
// displayList: tempData,
// })
}
//切换页数
changePage = (page) => {
this.state.page = page;
// this.get_coin_changes();
this.setState({
page: page
}, ()=>{this.get_sponsors()})
};
// 排序
ChangeSoryBy = (e) => {
// this.state.sort_by = e.key;
// this.get_coin_changes();
console.log(e.key)
};
@ -108,7 +123,6 @@ class SponsorManagement extends Component{
const button_lists =
user && current_user && user.login === current_user.login
? [
{ type: "all", name: "全部" },
{ type: "sponsoring", name: "赞助中" },
{ type: "stopped", name: "已终止" },
]
@ -144,28 +158,30 @@ class SponsorManagement extends Component{
// this.state.is_sponsor = check_is_sponsor;
this.setState({
is_sponsor: check_is_sponsor,
})
page: 1,
}, ()=>{this.get_sponsors()});
}
render() {
const { current_user, user } = this.props;
const { category , is_sponsor, sponsors, displayList} = this.state;
const {isSpin, total, search, limit, page }= this.state;
console.log(displayList);
// console.log(displayList);
return (
// <div className="list-right boxShandow radius-2" style={{padding:0}}>
<Spin spinning={isSpin}>
<div className="list-r-operation">
<Search
{/* <div className="list-r-operation"> */}
{/* <Search
placeholder="输入关键字进行搜索"
enterButton="搜索"
size="large"
onSearch={this.get_coin_changes}
onSearch={this.get_sponsors}
className="list-r-Search"
value={search}
onChange={this.changeSearchValue}
/>
<div>
/> */}
{/* <div>
<Popover content={this.menu()} trigger={["click"]} placement="bottom">
<a className="ant-dropdown-link">
@ -174,8 +190,8 @@ class SponsorManagement extends Component{
</span>
</a>
</Popover>
</div>
</div>
</div> */}
{/* </div> */}
<div className="infosType">
<div>{this.category_button(category)}</div>
{
@ -190,14 +206,15 @@ class SponsorManagement extends Component{
:""
}
</div>
{displayList && displayList.length > 0 ?
{user && current_user && user.login === current_user.login && displayList && displayList.length > 0 ?
<SponsorList
userClass={"w-33"}
current_user={current_user}
users={displayList}
rerender={this.get_sponsors}
></SponsorList>
:
<Nodata _html={`暂时没有项目`} />
<Nodata _html={`暂时没有数据`} />
}
{
total && total > limit ?
@ -214,6 +231,7 @@ class SponsorManagement extends Component{
""
}
</Spin>
// </div>
);
}
};

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

@ -1,56 +1,89 @@
import React, { Component } from "react";
import { getImageUrl } from "educoder";
import FocusButton from "../../UsersList/focus_button";
import { Button } from "antd";
import { Button, message, Popconfirm } from "antd";
import "../../Main/list.css";
import "../../UsersList/list.css";
import "../../sponsor/sponsor.css";
import "../new_user.css"
import axios from "axios";
import { Link } from "react-router-dom";
class SponsorList extends Component {
stop_sponsorship = (item, key, e)=>{
console.log("before: ", this.state.users);
let url = `/sponsorships/${item.id}.json`;
axios.delete(url)
.then((result) => {
console.log(result);
if(result && result.data.status == 1){
message.success(result.data.message);
this.props.rerender();
}
})
.catch((error) => {
console.log(error);
message.error("失败");
})
}
renderList = (users, userClass, current_user) => {
if (users && users.length > 0) {
return users.map((item, key) => {
return (
<div className="p-r-Item" key={key}>
<div>
{/* <div className="mr10">
<a
href={`/users/${item.login}`}
className="show-user-link"
>
<img className="text-center"
className="avatar-60"
<img className="p-r-photo"
src={getImageUrl(`images/${item.image_url}`)}
alt=""
/>
</a>
</div> */}
<Link to={`/users/${item.login}`} className="show-user-link">
<img className="p-r-photo" src={getImageUrl(`images/${item.image_url}`)} alt="" />
</Link>
<div className="p-r-Infos">
<a className="p-r-name hide-1 color-grey-3 font-18 task-hide " href={`/users/${item.login}`}>{item && item.username}</a>
<div className="mr10">
<span className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>金额：{item.amount}硬币</span>
<span className="break_word task-hide-2 mt10" style={{ maxHeight: "44px",lineHeight:"22px" }}>累计金额：{item.accumulate}硬币</span>
</div>
<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>
<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><label>赞助时间：</label>{item.start_time}&nbsp;-&nbsp;{item.stop_time? item.stop_time:"现在"}</span>
<span><label>{item.visible? "公开":"私有"}</label></span>
</span>
</div>
{item.stop_time ==="-"? (<Button>终止赞助关系</Button>):""}
</div>
{item.stop_time? "":(
<Popconfirm
title="确认终止?"
onConfirm={e => this.stop_sponsorship(item, key, e)}
// onCancel={cancel}
okText="是"
cancelText="否"
>
<Button >终止赞助关系</Button>
</Popconfirm>)}
</div>
);
});
} else{
return null;
}
}
render() {
const { users, userClass, current_user } = this.props;
// console.log(users);
return (
this.renderList(users, userClass, current_user)
<div className="project-list minH-670">{this.renderList(users, userClass, current_user)}</div>
);
}
}

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

@ -25,16 +25,15 @@ class Wallet extends Component {
super(props);
this.state = {
page: 1,
limit: 15,
sort_by: undefined,
totalCount: undefined,
limit: 10,
sort_by: "desc",
isSpin: false,
coinChangeList: undefined,
displayList: undefined,
total: undefined,
category: "all",
is_public: undefined,
balance: 50,
saerch: undefined,
};
}
@ -45,48 +44,77 @@ class Wallet extends Component {
componentDidUpdate = () => {
// this.get_coin_changes()
};
componentWillReceiveProps = () => {
if (this.props.current_user)
this.get_coin_changes();
}
get_coin_changes = () => {
this.setState({
coinChangeList: tempData,
displayList: tempData,
total: tempData.count,
isSpin: false,
});
isSpin: true
})
let url = `/wallets/coin_changes.json`;
const {category, sort_by, page, limit} = this.state;
const {current_user} = this.props;
let user_id = current_user && current_user.user_id;
if (current_user){
axios.get(url, {
params: {
id: user_id,
category: category,
sort_direction: sort_by,
page: page,
limit: limit,
}})
.then((result) => {
// console.log(result);
this.setState({
coinChangeList: result.data.coin_changes,
displayList: result.data.coin_changes,
total: result.data.count,
balance: result.data.balance,
isSpin: false,
})
})
.catch((error) => {
console.log(error);
this.setState({
isSpin: false,
});
});
}
// 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({
category: cate.target.value,
displayList: resultList,
});
page: 1,
}, ()=> {this.get_coin_changes();});
};
//切换页数
changePage = (page) => {
this.state.page = page;
this.get_coin_changes();
this.setState({
page: page
}, ()=>{this.get_coin_changes();})
};
// 排序
ChangeSoryBy = (e) => {
// this.state.sort_by = e.key;
this.setState({
sort_by: e.key,
page: 1,
}, ()=>{this.get_coin_changes();})
// this.get_coin_changes();
console.log(e.key)
console.log(e.key);
};
changeSearchValue = (e) => {
@ -97,8 +125,8 @@ class Wallet extends Component {
menu =()=> (
<Menu onClick={this.ChangeSoryBy}>
<Menu.Item key="time_order">时间从近到远排序</Menu.Item>
<Menu.Item key="reverse_time_order">时间从远到近排序</Menu.Item>
<Menu.Item key="desc">时间从近到远排序</Menu.Item>
<Menu.Item key="asc">时间从远到近排序</Menu.Item>
</Menu>
);
@ -139,13 +167,12 @@ class Wallet extends Component {
render() {
const { current_user, user } = this.props;
const { category , is_public } = this.state;
const { category , sort_by } = this.state;
const { displayList, coinChangeList, isSpin, total, search, limit, page, balance} = this.state;
return (
<Spin spinning={isSpin}>
<div className="list-r-operation">
<Search
{/* <Search
placeholder="输入关键字进行搜索"
enterButton="搜索"
size="large"
@ -153,7 +180,7 @@ class Wallet extends Component {
className="list-r-Search"
value={search}
onChange={this.changeSearchValue}
/>
/> */}
<div>
<Popover content={this.menu()} trigger={["click"]} placement="bottom">
@ -170,7 +197,7 @@ class Wallet extends Component {
<div>{this.category_button(category)}</div>
</div>
{displayList && displayList.length > 0 ?
{user && current_user && user.login === current_user.login && displayList && displayList.length > 0 ?
<CoinChangeItem
{...this.props}
{...this.state}