このセクションでは、主にコスト要求の実装プロセスを実装します。
1.creatorFundingTab：フォームを作成し、リクエストを開始して、すべてのリクエストを表示します（すべてのリクエストを取得し、フォームを作成して表示します）
2.supportFundingTab：creatorFundingtabでフォームを再利用し、アプリケーションを承認します
3.CreatorFundingTab：支出アクションを実行します
1.アプリケーション
1.通話中の送信者を指定します
2. 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>
)
}2つの方法
//表单数据变化时触发
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 RequestTableCreatorFundingTabファイルにテーブルを導入します
支出要求の印刷に戻る
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)
}
})
}ボタンを作成し、onclick時にgetアクションをトリガーして、コンソールに出力します
{
<Button onClick={this.handleShowRequests}>申请详情</Button>
//<RequestTable/>
}このメソッドをCreatorFundingTabにインポートし、状態変数リクエストを定義して、すべてのリクエストを記録します。
onRequestDetailClickメソッドを定義します。このメソッドは、showRequestsメソッドを呼び出して、指定された契約の要求アプリケーションを取得し、それを状態変数に設定します。
状態変数をRequestTableに渡します。
RequestTableでリクエストを取得してから、リクエストをトラバースし、各リクエストを取得します。リクエストはデータの行に対応します。
データの行を生成して返すRowInfoメソッドを定義します
結果は次のことを示しています。
4.インターフェースに参加しているので、コスト申請の詳細も確認できます。
[上記のコードをコピー]
5.承認機能ボタンをrequestTableに追加します
承認機能を実装する-承認リクエストをトリガーするボタンを追加する
承認関数の記述：
1.契約住所を指定します
2.選択要求のインデックスを指定します
コントロールボタンの表示：
pageKey = 2は支払いを示します3は承認を示します
コスト機能の実装-コストアクションをトリガーするボタンを追加