feat(onlineChat): 新增在线交流模块

BoBoooooo · Dec 23, 2020 · e8406c2 · e8406c2
1 parent 1525362
commit e8406c2
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 1 deletion.
diff --git a/.env.dev b/.env.dev
@@ -15,3 +15,6 @@ PORT=8888
 
 #公共组件使用cdn加速
 VUE_APP_CDN=false
+
+#即时通讯项目地址
+VUE_APP_CHAT_URL=http://server.boboooooo.top:9999
diff --git a/.env.out b/.env.out
@@ -15,3 +15,6 @@ VUE_APP_HOST_URL=http://47.100.164.86:7788/
 
 #后端接口地址
 VUE_APP_API_URL=/
+
+#即时通讯项目地址
+VUE_APP_CHAT_URL=http://server.boboooooo.top:9999
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,12 @@
       window.__PREFIX__URL__ = '<%= htmlWebpackPlugin.options.PREFIX_URL%>';
     </script>
     <% } %>
+    <!-- IM地址 -->
+    <% if (htmlWebpackPlugin.options.CHAT_URL) { %>
+    <script>
+      window.__CHAT__URL__ = '<%= htmlWebpackPlugin.options.CHAT_URL%>';
+    </script>
+    <% } %>
   </head>
   <body>
     <noscript>

diff --git a/src/components/OnlineChat/OnlineChat.vue b/src/components/OnlineChat/OnlineChat.vue
@@ -0,0 +1,52 @@
+<!--
+ * @file: OnlineChat
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年11月16 16:29:48
+-->
+
+<template>
+  <el-tooltip content="在线交流" placement="bottom">
+    <i class="chat-icon el-icon el-icon-chat-dot-round" @click="redirectToChat"></i>
+  </el-tooltip>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { mapGetters } from 'vuex';
+import { Getter } from 'vuex-class';
+
+@Component({
+  name: 'OnlineChat',
+})
+export default class OnlineChat extends Vue {
+  @Getter userid!: string;
+
+  @Getter realname!: string;
+
+  redirectToChat() {
+    this.openwindow(`${this.CHAT_URL}?userId=${this.userid}&username=${this.realname}`, '在线交流', 1024, 680);
+  }
+
+  openwindow(url, name, iWidth, iHeight) {
+    const iTop = (window.screen.availHeight - 30 - iHeight) / 2; // 获得窗口的垂直位置;
+    const iLeft = (window.screen.availWidth - 10 - iWidth) / 2; // 获得窗口的水平位置;
+    window.open(
+      url,
+      name,
+      `height=${iHeight},,innerHeight=${iHeight},width=${iWidth},innerWidth=${iWidth},top=${iTop},left=${iLeft},
+      toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no`,
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chat-icon {
+  position: absolute;
+  cursor: pointer;
+  right: 280px;
+  top: 20px;
+  font-size: 26px;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
@@ -36,6 +36,7 @@ Vue.config.productionTip = false;
 // 注入全局HOST_URL地址
 Vue.prototype.HOST_URL = window.__HOST__URL__;
 Vue.prototype.API_URL = window.__HOST__URL__ + window.__PREFIX__URL__;
+Vue.prototype.CHAT_URL = window.__CHAT__URL__;
 
 new Vue({
   router,

diff --git a/src/types/shims-vue-expand.d.ts b/src/types/shims-vue-expand.d.ts
@@ -21,13 +21,15 @@ declare module 'vue/types/vue' {
     $pinyinmatch: any;
     HOST_URL: any;
     API_URL: any;
+    CHAT_URL: any;
   }
 }
 
 declare global {
   interface Window  {
     __HOST__URL__: string;
     __PREFIX__URL__: string;
+    __CHAT__URL__: string;
   }
 }
 
diff --git a/src/views/layout/components/Header.vue b/src/views/layout/components/Header.vue
@@ -25,6 +25,8 @@
                  :class="{
                    isActive:!sidebar
                  }" />
+      <!-- 即时通讯 -->
+      <OnlineChat></OnlineChat>
       <!-- 姓名及下拉菜单 -->
       <div class="user-container">
         <img :src="photo"
@@ -49,13 +51,15 @@ import { Component, Vue, Prop } from 'vue-property-decorator';
 import { Getter } from 'vuex-class';
 import Hamburger from '@/components/Hamburger/Hamburger.vue';
 import themeColor from '@/styles/theme';
+import OnlineChat from '@/components/OnlineChat/OnlineChat.vue';
 import PersonInfoCard from './PersonInfoCard.vue';
 
 @Component({
   name: 'Header',
   components: {
     Hamburger,
     PersonInfoCard,
+    OnlineChat,
   },
 })
 export default class Header extends Vue {
@@ -128,7 +132,7 @@ export default class Header extends Vue {
     display: block;
     position: absolute;
     top: 22px;
-    right: 280px;
+    right: 240px;
   }
   .logo {
     width: 2em;

diff --git a/vue.config.js b/vue.config.js
@@ -74,6 +74,7 @@ module.exports = {
       // 向html模板注入 服务端URL地址,用于生产环境动态修改
       options[0].HOST_URL = process.env.VUE_APP_HOST_URL;
       options[0].PREFIX_URL = process.env.VUE_APP_API_URL;
+      options[0].CHAT_URL = process.env.VUE_APP_CHAT_URL;
       return options;
     });
     // 是否在打包时输出分析报告