Dapp 众筹项目（6）

本小节主要实现花费请求实现流程：

1.creatorFundingTab:搭建表单，发起请求，将所有的请求展示出来(拿到所有请求，搭建表单，展示出来)

2.supportFundingTab:复用creatorFundingtab中的表单，批准申请

3.CreatorFundingTab：执行花费动作

一，申请

1.call中指定sender

2.第二个页面支持点击功能(复用代码)

3.搭建创建花费请求表单

创建花费表单

render(){
        let {creatorFundingDetails,selectedFundingDetail,requestDesc,requestAddress,requestBalance}=this.state
        return(
            <div>
            <CardList details={this.state.creatorFundingDetails}
            onCardClick={this.onCardClick}
            />
            <CreateFundingForm/>
                {
                    <div>
                        <h3>发起付款请求</h3>
                        <Segment>
                            <h4>当前项目:{selectedFundingDetail.projectName}, 地址: {selectedFundingDetail.fundingAddress}</h4>
                            <Form onSubmit={this.handleCreateRequest}>
                                <Form.Input type='text' name='requestDesc' required value={requestDesc}
                                            label='请求描述' placeholder='请求描述' onChange={this.handleChange}/>

                                <Form.Input type='text' name='requestBalance' required value={requestBalance}
                                            label='付款金额' labelPosition='left' placeholder='付款金额'
                                            onChange={this.handleChange}>
                                    <Label basic>￥</Label>
                                    <input/>
                                </Form.Input>

                                <Form.Input type='text' name='requestAddress' required value={requestAddress}
                                            label='商家收款地址' labelPosition='left' placeholder='商家地址'
                                            onChange={this.handleChange}>
                                    <Label basic><span role='img' aria-label='location'>?</span></Label>
                                    <input/>
                                </Form.Input>

                                <Form.Button primary content='开始请求'/>
                            </Form>
                        </Segment>
                    </div>
                }

            </div>
        )
    }

俩个方法

 //表单数据变化时触发
    handleChange =(e,{name,value}) =>this.setState({[name]:value})
    handleCreateRequest =()=>{
        let {creatorFundingDetails,selectedFundingDetail,requestDesc,requestAddress,requestBalance}=this.state
        console.log(requestDesc,requestBalance,requestAddress)
    }

修改CreatorFundingTab页面，添加currentFundingDetail、requestDesc、requestBalance、requestAddress状态变量。

state ={
        creatorFundingDetails :[],
        selectedFundingDetail:'',
        requestDesc:'',//purpose,项目方花费目的
        requestBalance:'',//cost,花费金额
        requestAddress:'',//seller,卖家地址

    }

创建花费请求逻辑

在interaction.js中定义一个方法，实现创建请求功能，然后再导出该方法。

// 创建花费请求
const createRequest = (fundingAddress, purpose, cost, seller) => {
    return new Promise(async (resolve, reject) => {
        try { // 调用创建方法
            let accounts = await web3.eth.getAccounts();
            let fundingInstance = newFundingInstance();
            fundingInstance.options.address = fundingAddress;
            // function createRequest(string _purpose, uint256 _cost, address _seller) onlyManager public {
            let result = await fundingInstance.methods.createRequest(purpose, cost, seller).send({
                from: accounts[0],
            })
            resolve(result);
        } catch (e) {
            reject(e);
        }
    })
}

在CreatorFundingTab文件中导入该方法，然后在handleCreate方法中调用上面方法。

搭建花费请求显示页面

在commons目录下新建RequestTable文件，该文件定义了一个表格用来显示请求申请记录。

import React from 'react'
import { Icon, Label, Menu, Table } from 'semantic-ui-react'

const RequestTable = () => (
    <Table celled>
        <Table.Header>
            <Table.Row>
                <Table.HeaderCell>花费描述</Table.HeaderCell>
                <Table.HeaderCell>花费金额</Table.HeaderCell>
                <Table.HeaderCell>商家地址</Table.HeaderCell>
                <Table.HeaderCell>当前赞成人数</Table.HeaderCell>
                <Table.HeaderCell>当前状态</Table.HeaderCell>
                <Table.HeaderCell>操作</Table.HeaderCell>
            </Table.Row>
        </Table.Header>

        <Table.Body>
            <Table.Row>
                <Table.Cell>
                    <Label ribbon>First</Label>
                </Table.Cell>
                <Table.Cell>Cell</Table.Cell>
                <Table.Cell>Cell</Table.Cell>
                <Table.Cell>Cell</Table.Cell>
                <Table.Cell>Cell</Table.Cell>
                <Table.Cell>Cell</Table.Cell>
            </Table.Row>
        </Table.Body>
    </Table>
)
export default RequestTable

在CreatorFundingTab文件中引入表格

返回花费请求打印

在interaction.js文件中定义一个方法，用于获取合约的花费请求记录，并导出该方法。

const showRequests = (fundingAddress) => {
    return new Promise(async (resolve, reject) => {
        try {
            let accounts=await web3.eth.getAccounts();
            // 获取Funding合约实例
            let fundingContract = newFundingInstance()
            fundingContract.options.address = fundingAddress
            // 调用合约方法获取请求总数
            let requestCount = await fundingContract.methods.getRequestCount().call({
                from:accounts[0],
            });
            // 定义一个数组，保存所有请求申请
            let requestDetails = []
            //遍历请求数量，依次获取每一个请求的详情，添加到数组中，最后使用promise返回
            for (let i = 0; i < requestCount; i++) {
                // 调用合约方法，根据索引查询请求申请
                let requestDetail = await fundingContract.methods.getRequestByIndex(i).call({
                    from:accounts[0],
                })
                // 把结果添加到数组中
                requestDetails.push(requestDetail)
            }
            resolve(requestDetails)
        } catch (e) {
            reject(e)
        }
    })
}

创建一个button,在onclick时触发获取动作，打印到控制台



{
                    <Button onClick={this.handleShowRequests}>申请详情</Button>
                    //<RequestTable/>
                }

在CreatorFundingTab中导入该方法，并且定义状态变量requests，记录所有的请求申请。

定义onRequestDetailClick方法，该方法调用showRequests方法获取指定合约的请求申请，并设置到状态变量中。

把状态变量传递到RequestTable中。

在RequestTable获取requests，然后遍历requests，获取每一个request出来。一个request对应着一行数据。

定义RowInfo方法，该方法生成并返回一行数据

结果显示：

4.在我参与界面也能看到花费申请详情

【复制上面的代码】

5.在requestTable添加批准函数按钮

实现批准函数---添加按钮，触发批准请求

批准函数编写：

1.指定合约地址

2.指定选择请求的index

控制按钮显示：
pageKey=2显示支付 3显示批准

实现花费函数--添加按钮，触发花费动作

Dapp 众筹项目（6）

猜你喜欢