微信配置保存

src/app/basicVersion/caseShow/UserCustom.js

@@ -71,18 +71,18 @@ class UserCustom extends Component {
                                 <Step title=<Step1/> />
                                 <Step title=<Step2 getCloudDetail={this.getCloudDetail} userID={userID}/> />
                                 <Step title=
-                                      <Step3
-                                          getPrimaryConfigDetail={this.getPrimaryConfigDetail}
-                                          userID={userID}
-                                          bucketName={bucketName}
-                                          secretID={secretID}
-                                          secretKey={secretKey}
-                                          appId={appId}
-                                          cloudID={cloudID}
-                                      />
+                                          <Step3
+                                      getPrimaryConfigDetail={this.getPrimaryConfigDetail}
+                                      userID={userID}
+                                      bucketName={bucketName}
+                                      secretID={secretID}
+                                      secretKey={secretKey}
+                                      appId={appId}
+                                      cloudID={cloudID}
+                                />
                                 />
                                 <Step title=<Step4/> />
-                                <Step title=<Step5/> />
+                                <Step title=<Step5 bucketName={bucketName} userID={userID}/> />
                                 <Step title=<Step6/> />
 
                             </Steps>
@@ -169,7 +169,7 @@ class CloudQueryAndConfig extends Component {
 
     componentWillReceiveProps(next) {
         console.log(111)
-        if(this.props.check !== next.check) {
+        if (this.props.check !== next.check) {
             this.setState({
                 cloudName: next.cloudName,
                 userID: next.userID,
@@ -403,9 +403,9 @@ class NameAndDB extends Component {
 
     storeEdnAndDeploy = (secretID, secretKey, appId, bucketName, dbKind, userID, admin, username, password, db, host, customName, cloudID) => {
         // store *.edn to cos
-        secretID = secretID? secretID: 'AKIDkYBvY0LOJ2bzCDmnMjz4xgFertmVJlVE'
-        secretKey = secretKey? secretKey: 'zwjKk29TdcYP8g2FG5kCSWmz3wcH92lN'
-        appId = appId? appId: '1254337200'
+        secretID = secretID ? secretID : 'AKIDkYBvY0LOJ2bzCDmnMjz4xgFertmVJlVE'
+        secretKey = secretKey ? secretKey : 'zwjKk29TdcYP8g2FG5kCSWmz3wcH92lN'
+        appId = appId ? appId : '1254337200'
         let deployConf = dbKind === 'mongodb' ?
             ` {:secretId "${secretID}"\n` +
             ` :secretKey "${secretKey}"\n` +
@@ -548,11 +548,10 @@ class NameAndDB extends Component {
                         }
 
                         {
-                            disableDeployButton?
+                            disableDeployButton ?
                                 '正在部署...'
                                 :
                                 <Button type='primary' onClick={() => {
-                                    console.log('sssss', secretID)
                                     this.storeEdnAndDeploy(secretID, secretKey, appId, bucketName, dbKind, userID, db, username, password, db, host, customName, cloudID)
                                 }}>开始部署</Button>
 
@@ -626,16 +625,48 @@ const Step4 = (props) => (
     </div>
 );
 
-const Step5 = (props) => (
-    <div className='step-block'>
-        第四步：微信公众号/小程序 后台填写配置
-        <Button style={{marginLeft: 20}}>使用帮助</Button>
-        <div>
-            <Button type='primary'>填写配置</Button>
-        </div>
-    </div>
-);
 
+class Step5 extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            visible: false
+        }
+    }
+
+    handleCancel = () => {
+        this.setState({
+            visible: false
+        })
+    }
+
+    render() {
+        let {visible} = this.state
+        let {userID, bucketName} = this.props
+        return (
+            <div className='step-block'>
+                第四步：微信公众号/小程序 后台填写配置
+                <Button style={{marginLeft: 20}}>使用帮助</Button>
+                <div>
+                    <Button type='primary' onClick={() => {
+                        this.setState({visible: true})
+                    }}>填写配置</Button>
+                    <Modal
+                        title="公众号/小程序配置"
+                        visible={visible}
+                        footer={null}
+                        onCancel={this.handleCancel}
+                    >
+                        <Wechat
+                            userID={userID}
+                            bucketName={bucketName}
+                        />
+                    </Modal>
+                </div>
+            </div>
+        )
+    }
+}
 
 const Step6 = (props) => (
     <div className='step-block'>
@@ -644,4 +675,163 @@ const Step6 = (props) => (
             <Button type='primary'>使用</Button>
         </div>
     </div>
-);
+);
+
+class Wechat extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            appID: '',
+            appSecret: '',
+            token: '',
+            url: '',
+            key: '',
+            appid: '',
+            mch: '',
+            nonce: '',
+            body: '',
+            spbill: '',
+            notify: '',
+            attach: '',
+            dbKind: 'fc-db',
+            saving: false,
+            savingCompleted: false
+        }
+    }
+
+    inputChange = (kind) => {
+        return (e) => {
+            this.setState({
+                [kind]: e.target.value
+            })
+        }
+    };
+
+    storeEdn = () => {
+        // store *.edn to cos
+        let {appID, appSecret, token, url, key, appid, mch, nonce, body, spbill, notify, attach, dbKind} = this.state
+        let {userID, bucketName} = this.props
+        let deployConf = `{
+            :wx-server {
+                 :appID "${appID}"                   
+                 :appsecret "${appSecret}"
+                 :enter-url "${url}"
+                 :token "${token}"
+            }
+            :wx-pay {
+                :PAY-API-KEY "${key}"
+                :appid "${appid}"  
+                :attach "${attach}"
+                :mch_id "${mch}"    
+                :nonce_str "${nonce}"
+                :body "${body}"
+                :spbill_create_ip "${spbill}"
+                :notify_url "${notify}"
+            }
+        }`
+
+        axios.post(storeFile, {
+            'file-name': `${bucketName}/${dbKind}/${userID}/wx-config.edn`,
+            bucket: 'case',
+            cont: deployConf
+        }).then(value => {
+            if (value.status === 200) {
+                console.log('store wx file success');
+                this.setState({
+                    saving: false,
+                    savingCompleted: true
+                })
+            }
+        });
+    }
+
+    render() {
+        let {appID, appSecret, token, url, key, appid, mch, nonce, body, spbill, notify, attach, dbKind, saving, savingCompleted} = this.state
+        return (
+            <div>
+                <div style={{marginTop: 15}}>
+                    <div style={{marginBottom: 15}}>
+                        <div>
+                            <span className='cloud-name'><FormattedMessage id='DB Choose'/></span>
+                            <RadioGroup onChange={(e) => {
+                                this.setState({dbKind: e.target.value})
+                            }} value={dbKind}>
+                                <Radio value='fc-db'>fc-db</Radio>
+                                <Radio value='mongodb'>mongodb</Radio>
+                            </RadioGroup>
+                            <span className='cloud-name'>微信开发者配置</span>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>appID:</span>
+                                <Input style={{width: 250}} value={appID} onChange={this.inputChange('appID')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>appSecret:</span>
+                                <Input type='password' style={{width: 250}} value={appSecret}
+                                       onChange={this.inputChange('appSecret')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>token:</span>
+                                <Input type='password' style={{width: 250}} value={token}
+                                       onChange={this.inputChange('token')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>回调域名:</span>
+                                <Input style={{width: 250}} value={url} onChange={this.inputChange('url')}/>
+                            </div>
+                            <span className='cloud-name'>微信支付配置</span>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>key:</span>
+                                <Input style={{width: 250}} value={key} onChange={this.inputChange('key')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>appid:</span>
+                                <Input style={{width: 250}} value={appid} onChange={this.inputChange('appid')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>attach:</span>
+                                <Input style={{width: 250}} value={attach} onChange={this.inputChange('attach')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>商户 id:</span>
+                                <Input style={{width: 250}} value={mch} onChange={this.inputChange('mch')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>nonce:</span>
+                                <Input style={{width: 250}} value={nonce} onChange={this.inputChange('nonce')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>body:</span>
+                                <Input style={{width: 250}} value={body} onChange={this.inputChange('body')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>机器IP:</span>
+                                <Input style={{width: 250}} value={spbill} onChange={this.inputChange('spbill')}/>
+                            </div>
+                            <div style={{marginBottom: 20}}>
+                                <span className='item-title-cloud'>通知域名:</span>
+                                <Input style={{width: 250}} value={notify} onChange={this.inputChange('notify')}/>
+                            </div>
+
+                        </div>
+                        {
+                            saving?
+                                '保存中，请稍后。。。':
+                                <Button type='primary' onClick={() => {
+                                    this.storeEdn()
+                                    this.setState({
+                                        saving: true
+                                    })
+                                }}>
+                                    <FormattedMessage id="save"/>
+                                </Button>
+                        }
+                        {
+                            savingCompleted?
+                                <Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a"/>:''
+                        }
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}