react_hsbc_teller 0.9.9 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.9.9",
+  "version": "1.0.3",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/demo/demo.js

@@ -1,27 +1,197 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
+import HSBC from "../pages/index";
 
 class Demo extends Component {
-  constructor(props) {
-    super(props);
+  state = {
+    // imRoomId: "9K9ea1vOM@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
+    // sessionId: "9K9ea1vOM",
+    // mtoken: "d4e648858b03",
+    // roomId: "645110140224386",
+    roomId: '645515863322767',
+    mtoken: 'bae147019f8a',
+    imRoomId: 'Ma9XWgf2k@conference.openfire2.leimondata.cn',
+    sessionId: 'Ma9XWgf2k',
+    isVideo: false,
+    tellerAccount: '00000000',
+    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+    businessNumber: '',
+    lang: 'zh',
+    roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+    baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
+    resourcePath: 'https://counter-web.leimondata.cn:7199',
+    // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws',
+    // baseURL:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/zuul/api/leimon-counter-api',
+    // resourcePath:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
+    prohibitPrompt: '无客户',
+  voiceColor: '#333',
+  titleBackground: '#40a9ff',
+  titleColor: '#faad14',
+  microphoneSize: 50,
+  fontSize: 14,
+  fontFamily: 'auto'
+}
+componentWillMount() {
+    if(window.localStorage.getItem('roomId')) {
+        this.setState({roomId: window.localStorage.getItem('roomId')});
+    }
+    if(window.localStorage.getItem('mtoken')) {
+        this.setState({mtoken: window.localStorage.getItem('mtoken')});
+    }
+    if(window.localStorage.getItem('sessionId')) {
+        this.setState({sessionId: window.localStorage.getItem('sessionId')});
+    }
+    if(window.localStorage.getItem('imRoomId')) {
+        this.setState({imRoomId: window.localStorage.getItem('imRoomId')});
+        this.startVideo()
+    }
+    
+}
+handleChangeRoomId = (event) => {
+    this.setState({roomId: event.target.value});
+    window.localStorage.setItem('roomId', event.target.value)
+  }
+  handleChangeRToken = (event) => {
+    this.setState({mtoken: event.target.value});
+    window.localStorage.setItem('mtoken', event.target.value)
   }
+  handleChangeSessionId = (event) => {
+    this.setState({sessionId: event.target.value});
+    window.localStorage.setItem('sessionId', event.target.value)
+  }
+  handleChangeImRoomId = (event) => {
+    this.setState({imRoomId: event.target.value});
+    window.localStorage.setItem('imRoomId', event.target.value)
+  }
+startVideo = () => {
+    this.setState({
+        isVideo: true
+    })
+}
+onLeaveRoom = (val) => {
+    console.log(val)
+    this.setState({
+        isVideo: false
+    })
+}
+handleChangeTeller = (event) => {
+    this.setState({
+        tellerAccount: event.target.value
+    })
+}
+handleChangeCall = (event) => {
+    this.setState({
+        callbackUrl: event.target.value
+    })
+}
+handleChangeBysiness = (event) => {
+    this.setState({
+        businessNumber: event.target.value
+    })
+}
+
+handleRoomServerUrl = (event) => {
+    this.setState({
+        roomServerUrl: event.target.value
+    })
+}
+handleBaseURL = (event) => {
+    this.setState({
+        baseURL: event.target.value
+    })
+}
+handleResourcePath = (event) => {
+    this.setState({
+        resourcePath: event.target.value
+    })
+}
+createRoomCallback=(data)=>{
+    console.log('createRoomCallback', data)
+    this.setState({roomId: data.data.roomId});
+    window.localStorage.setItem('roomId', data.data.roomId)
+    this.setState({mtoken: data.data.mtoken});
+    window.localStorage.setItem('mtoken', data.data.mtoken)
+    this.setState({sessionId:data.data.sessionId});
+    window.localStorage.setItem('sessionId',data.data.sessionId)
+    this.setState({imRoomId: data.data.imRoomId});
+    window.localStorage.setItem('imRoomId', data.data.imRoomId)
+
+}
+joinRoomCallback=(data)=>{
+    console.log('joinRoomCallback', data)
+}
   render() {
     return (
-      <div>
-        演示文件1
-      </div>
+      <div className="test">
+                {
+                    this.state.isVideo ?
+                        <HSBC
+                        roomId={this.state.roomId} 
+            mtoken={this.state.mtoken}
+            sessionId={this.state.sessionId}
+            imRoomId={this.state.imRoomId}
+                            prohibitPrompt={this.state.prohibitPrompt}
+                            voiceColor={this.state.voiceColor}
+                            titleBackground={this.state.titleBackground}
+                            titleColor={this.state.titleColor}
+                            microphoneSize={this.state.microphoneSize}
+                            fontSize={this.state.fontSize}
+                            fontFamily={this.state.fontFamily}
+                            tellerAccount={this.state.tellerAccount}
+                            callbackUrl={this.state.callbackUrl}
+                            businessNumber={this.state.businessNumber}
+                            lang={this.state.lang}
+                            roomServerUrl={this.state.roomServerUrl}
+                            baseURL={this.state.baseURL}
+                            resourcePath={this.state.resourcePath}
+                            onLeaveRoom={this.onLeaveRoom}
+                            createRoomCallback={this.createRoomCallback}
+                            joinRoomCallback={this.joinRoomCallback}>
+                                {/* <Pdf></Pdf> */}
+                        </HSBC>
+                        :
+                        <div>
+                            坐席账号：<input placeholder="请输入坐席账号" value={this.state.tellerAccount} onChange={e => this.handleChangeTeller(e)}></input>
+                            回调地址：<input placeholder="请输入回调地址" value={this.state.callbackUrl} onChange={e => this.handleChangeCall(e)}></input>
+                            全局流水号：<input placeholder="请输入全局流水号" value={this.state.businessNumber} onChange={e => this.handleChangeBysiness(e)}></input>
+                            阿里服务器地址：<input placeholder="请输入阿里服务器地址" value={this.state.roomServerUrl} onChange={e => this.handleRoomServerUrl(e)}></input>
+                            接口地址：<input placeholder="请输入接口地址" value={this.state.baseURL} onChange={e => this.handleBaseURL(e)}></input>
+                            阿里资源服务地址：<input placeholder="请输入阿里资源服务地址" value={this.state.resourcePath} onChange={e => this.handleResourcePath(e)}></input>
+
+
+                            <div>roomId：  <input type="text" value={this.state.roomId} onChange={this.handleChangeRoomId} /></div>
+          <div>rtoken：  <input type="text" value={this.state.mtoken} onChange={this.handleChangeRToken} /></div>
+          <div>sessionId：  <input type="text" value={this.state.sessionId} onChange={this.handleChangeSessionId} /></div>
+          <div>imRoomId：  <input type="text" value={this.state.imRoomId} onChange={this.handleChangeImRoomId} /></div>
+                            <button className="button" onClick={this.startVideo.bind(this)}>开启视频</button>
+                        </div>
+                }
+            </div>
+      // <div>
+      //  { this.state.isPlay? 
+      //     <HSBC
+      //       tellerAccount={this.state.tellerAccount} 
+      //       roomId={this.state.roomId} 
+      //       mtoken={this.state.mtoken}
+      //       sessionId={this.state.sessionId}
+      //       imRoomId={this.state.imRoomId}
+      //       name={this.state.name}
+      //       lang={this.state.lang}
+      //       onLeaveRoom={this.exitRoom}
+      //     />
+      //   : 
+      //   <div style={{padding: '20px'}}>
+      //     <div>账号：  <input type="text" value={this.state.tellerAccount} onChange={this.handleChangeAccount} /></div>
+      //     <div>roomId：  <input type="text" value={this.state.roomId} onChange={this.handleChangeRoomId} /></div>
+      //     <div>rtoken：  <input type="text" value={this.state.mtoken} onChange={this.handleChangeRToken} /></div>
+      //     <div>sessionId：  <input type="text" value={this.state.sessionId} onChange={this.handleChangeSessionId} /></div>
+      //     <div>imRoomId：  <input type="text" value={this.state.imRoomId} onChange={this.handleChangeImRoomId} /></div>
+      //     <div>姓名（非必填）：  <input type="text" value={this.state.name} onChange={this.handleChangeName} /></div>
+      //     <div>系统语言：  <input type="text" value={this.state.lang} onChange={this.handleChangeLang} /></div>
+      //     <div><button onClick={this.joinRoom} >加入房间</button></div>
+      //   </div>}
+      // </div>
     );
   }
 }
 
-// 指定 props 的默认值：
-Demo.defaultProps = {
-  type: "default",
-};
-
-Demo.propTypes = {
-  type: PropTypes.string,
-  onClick: PropTypes.func,
-};
-
 export default Demo;

package/packages/index.js

@@ -1,2 +1,3 @@
 import "./style/index.less";
 export { default as HSBC } from "./pages/index";
+// export { default as HSBC } from "./demo/demo";