react_hsbc_teller 1.0.1 → 1.0.4

package/package.json

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

package/packages/demo/demo.js

@@ -1,27 +1,212 @@
 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: '',
+    mtoken: '',
+    imRoomId: '',
+    sessionId: '',
+    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',
+  isTranscribing: false
+}
+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
+    })
+}
+handleChangeisTranscribing = (event) => {
+    this.setState({
+        isTranscribing: event.target.value
+    })
+}
+handleResourcePath = (event) => {
+    this.setState({
+        resourcePath: event.target.value
+    })
+}
+imgCallback=(file)=>{
+    console.log(file)
+}
+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}
+                            isTranscribing={this.state.isTranscribing}
+                            onLeaveRoom={this.onLeaveRoom}
+                            createRoomCallback={this.createRoomCallback}
+                            joinRoomCallback={this.joinRoomCallback}
+                            imgCallback={this.imgCallback}
+                            >
+                                
+                                {/* <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>
+          <div>isTranscribing:  <input type="text" value={this.state.isTranscribing} onChange={this.handleChangeisTranscribing} /></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";

package/packages/pages/foot/foot.jsx

@@ -50,8 +50,11 @@ export default class foot extends Component {
       inspection = ()=>{
           this.props.inspection()
       }
+      screenSwitching =()=>{
+          this.props.screenSwitching()
+      }
     render() {
-        const {clickedOcr,clickedFacial,isTranscribing,img,cameraImg,screenName,suspendName,customerList,menus,voiceName} = this.props
+        const {clickedOcr,clickedFacial,img,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName} = this.props
         const content = (
             <div>
               {customerList.map((item,index)=>{
@@ -69,7 +72,7 @@ export default class foot extends Component {
                   {
                       menus.map((item,index)=>{
                           return <div key={index}className='footHover'>
-                          {
+                          {/* {
                                   isTranscribing &&
                                   <div className="one" onClick={this.transcribingClick.bind(this)}>
                                   <img className="imgClass"src={require("../../assets/img/icon_copy.png").default} alt="" />
@@ -77,7 +80,7 @@ export default class foot extends Component {
                                       签字
                                   </div>
                               </div>
-                              }
+                              } */}
                               {
                                  item == 'SHARE' && <div className="one" onClick={this.sharedScreen.bind(this)}>
                                   <img className="imgClass" src={require("../../assets/img/Projection_screen.png").default} alt="" />
@@ -150,6 +153,14 @@ export default class foot extends Component {
                         </div>
                     </div>
                     </div>
+                    {/* <div className='footHover' onClick={this.screenSwitching.bind(this)}>
+                    <div className="one">
+                        <img className="imgClass" src={require("../../assets/img/inspection.png").default} alt="" />
+                        <div className="text">
+                            切换投屏
+                        </div>
+                    </div>
+                    </div> */}
                 </div>
                 {defaultList}