天蛙tw-pc-component

说明: 天蛙PC端组件库，为了整合现有各个系统的通用功能，也为了方便管理统一的版本，提供了NPM包

安装:

npm install tw-pc-component

组件：SecurityLogin:

import { SecurityLogin } from 'tw-pc-component'

demo:

<template>
  <div id="app" class="wrapper">
    <div style="width:320px;height:366px;position: fixed;left:1418px;top:268px;" ref="login-form">
      这个是系统登录框，点击“登录”调用安全验证
      <button type="button" style="width:100px;height:100px" @click="securityVerifyLogin">登录</button>
    </div>
    <security-login :sourceType="securityVerify.sourceType" :styles="securityVerify.styles" :gateway="securityVerify.gateway" :data="securityVerify.data" :visible="securityVerify.visible" @change="verifyChange" @close="verifyClose"></security-login>
  </div>
</template>

<script>
import { SecurityLogin } from 'tw-pc-component'
export default {
  components:{
    SecurityLogin
  },
  data() {
    return {
      securityVerify:{
        sourceType:'TW_CLOUD_SSO',// TW_CLOUD_BASE(天蛙云基础平台)、TW_CLOUD_CQES(天蛙云综评)、TW_CLOUD_SSO(天蛙云认证中心)、TW_CLOUD_CLASSBRAND(天蛙云班牌)、TW_CLOUD_APP(天蛙云APP)、TW_CLOUD_WECHAT(天蛙云微信)、TW_CLOUD_WINDOWS(天蛙云Windows)
        gateway:'http://sso2-dev.591iq.com.cn', // 网关地址
        styles:{ width: '320px', height: '366px', left: '1418px', top: '268px' }, // 安全验证框位置以及宽和高
        data: { userName: '350000302', userPwd: 'wgm_123456' },// 登录的用户名、密码
        visible:false // 验证状态，true:开始验证，false:关闭验证
      }
    }
  },
  created(){
  },
  mounted(){
    // 初始化安全登录位置和宽高
    this.$nextTick(() => {
      this.initSecurityVerify()
    })
  },
  methods: {
    // 初始化安全登录位置和宽高
    initSecurityVerify(){
      const { offsetWidth,offsetHeight,offsetLeft,offsetTop }=this.$refs['login-form']
      this.securityVerify.styles={ width: `${offsetWidth}px`, height: `${offsetHeight}px`, left: `${offsetLeft}px`, top: `${offsetTop}px` }
    },
    // 点击“登录”时屏蔽原有逻辑，调用此方法
    securityVerifyLogin(){
      this.securityVerify.visible=true
    },
    // 验证完成后回调方法
    verifyChange(res){
      // res:{
      //   accessToken:'09841ECCFB3128AD08D2015F06BBFB57',
      //   service:'http://web-dev.591iq.com.cn/saas/#/',
      //   userName: "350000304"
      //   userRefId: 38774
      //   userType: 1
      //   ...
      // }
    },
    // 关闭验证回调方法
    verifyClose(){
      this.securityVerify.visible=false
    }
  }
}
</script>

组件：WebSocketMessage:

import { WebSocketMessage } from 'tw-pc-component'

demo:

  <template>
    <div style="height: 100vh; width: 100%;" >
      <div v-for="item in messages" :key="item" v-html="item"></div>
    </div>
  </template>
  <script>
  import { WebSocketMessage } from 'tw-pc-component'
  export default {
    data() {
      return {
        websocket: null,
        messages:[]
      }
    },
    created() {
      this.initSocket()
    },
    beforeDestroy() {
      // 销毁websocket
      if(this.websocket){
        this.websocket.destroy()
      }

      this.websocket = null
    },
    methods: {
      initSocket(){
        const obj={ userId:"d3fd15177255317422457122c6c117f9",userName:"张三",token:"d3fd15177255317422457122c6c117f9",roomId:"2D9201AE6961DD4E557EEA105A499856",socketUrl:"ws://192.168.31.18:9901" }
        const websocket = new WebSocketMessage(obj.userId, obj.userName, obj.token, obj.roomId, obj.socketUrl)
        // 新消息
        websocket.onMessgae((res) => {
          this.onMessage(res)
        })
      },
      onMessage(res){
        // messageType('join':'加入房间', 'chat':'聊天消息', 'gift':'送礼物', 'handsup':'举手', 'good':'点赞', 'notice':'公告', 'room':'房间信息')
        if(res.messageType==='chat') {
          // 将聊天消息展示到页面上
          this.messages.push(`<span>${res.message}</span>`)
        }

      }
    }
  }
  </script>