first commit

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+.history/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,220 @@
+本文主要介绍如何快速跑通 Web 版本的 TRTCCalling Demo，Demo 中包括语音通话和视频通话场景：
+
+\- 语音通话：纯语音交互，支持多人互动语音聊天。
+
+\- 视频通话：视频通话，面向在线客服等需要面对面交流的沟通场景。
+
+### 环境要求
+* 请使用最新版本的 Chrome 浏览器。
+* TRTCCalling 依赖以下端口进行数据传输，请将其加入防火墙白名单，配置完成后，您可以通过访问并体验 [官网 Demo](https://web.sdk.qcloud.com/component/trtccalling/demo/web/latest/index.html) 检查配置是否生效。
+  - TCP 端口：8687
+  - UDP 端口：8000，8080，8800，843，443，16285
+  - 域名：qcloud.rtc.qq.com
+
+> 
+>- 一般情况下体验 Demo 需要部署至服务器，通过 https://域名/xxx 访问，或者直接在本地搭建服务器，通过 localhost:端口访问。
+>- 目前桌面端 Chrome 浏览器支持 TRTC 桌面浏览器 SDK 的相关特性比较完整，因此建议使用 Chrome 浏览器进行体验。
+
+### 前提条件
+
+您已 [注册腾讯云](https://cloud.tencent.com/document/product/378/17985) 账号，并完成 [实名认证](https://cloud.tencent.com/document/product/378/3629)。
+
+### 复用 Demo 的 UI 界面
+
+<span id="step1"></span>
+
+#### 步骤1：创建新的应用
+
+1. 登录实时音视频控制台，选择【开发辅助】>【[快速跑通Demo](https://console.cloud.tencent.com/trtc/quickstart)】。
+
+2. 单击【立即开始】，输入应用名称，例如`TestTRTC`，单击【创建应用】。
+
+<span id="step2"></span>
+
+#### 步骤2：下载 SDK 和 Demo 源码
+2. 鼠标移动至对应卡片，单击【[Github](https://github.com/tencentyun/TRTCSDK/tree/master/Web/TRTCScenesDemo/trtc-calling-web)】跳转至 Github（或单击【[ZIP](https://web.sdk.qcloud.com/trtc/webrtc/download/webrtc_latest.zip)】），下载相关 SDK 及配套的 Demo 源码。
+ ![](https://main.qcloudimg.com/raw/0f35fe3bafe9fcdbd7cc73f991984d1a.png)
+2. 下载完成后，返回实时音视频控制台，单击【我已下载，下一步】，可以查看 SDKAppID 和密钥信息。
+
+<span id="step3"></span>
+
+#### 步骤3：配置 Demo 工程文件
+
+1. 解压 [步骤2](#step2) 中下载的源码包。
+
+2. 找到并打开`Web/TRTCScenesDemo/TRTCCalling/public/debug/GenerateTestUserSig.js`文件。
+
+3. 设置`GenerateTestUserSig.js`文件中的相关参数：
+
+  <ul><li>SDKAPPID：默认为0，请设置为实际的 SDKAppID。</li>
+
+  <li>SECRETKEY：默认为空字符串，请设置为实际的密钥信息。</li></ul> 
+
+  <img src="https://main.qcloudimg.com/raw/0ae7a197ad22784384f1b6e111eabb22.png">
+
+4. 返回实时音视频控制台，单击【粘贴完成，下一步】。
+
+5. 单击【关闭指引，进入控制台管理应用】。
+
+>本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此****该方法仅适合本地跑通 Demo 和功能调试****。
+
+>正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/647/17275#Server)。
+
+#### 步骤4：运行 Demo
+>- 同步依赖： npm install
+>- 启动项目： npm run serve
+>- 浏览器中打开链接：http://localhost:8080/
+
+- Demo 运行界面如图所示：
+![](https://main.qcloudimg.com/raw/90118deded971621db7bb14b55073bcc.png)
+- 输入用户 userid，点击【登录】
+![](https://main.qcloudimg.com/raw/f430fb067cddbb52ba32e4d0660cd331.png)
+- 输入呼叫用户 userid，即可视频通话
+![](https://main.qcloudimg.com/raw/66562b4c14690de4eb6f2da58ee6f4df.png)
+- 视频通话
+![](https://main.qcloudimg.com/raw/592189d0f18c91c51cdf7184853c6437.png)
+
+
+### 实现自定义 UI 界面
+#### 步骤1：集成 SDK
+NPM 集成
+> 从v0.6.0起，需要手动安装依赖 [trtc-js-sdk](https://www.npmjs.com/package/trtc-js-sdk) 和 [tim-js-sdk](https://www.npmjs.com/package/tim-js-sdk) 以及 [tsignaling](https://www.npmjs.com/package/tsignaling)
+>- 为了减小 trtc-calling-js.js 的体积，避免和接入侧已使用的 trtc-js-sdk 和 tim-js-sdk 以及 tsignaling 发生版本冲突，trtc-js-sdk 和 tim-js-sdk 以及 tsignaling 不再被打包到 trtc-calling-js.js，在使用前您需要手动安装依赖。
+```javascript
+  npm i trtc-js-sdk --save
+  npm i tim-js-sdk --save
+  npm i tsignaling --save
+  npm i trtc-calling-js --save
+ 
+  // 如果您通过 script 方式使用 trtc-calling-js，需要按顺序先手动引入 trtc.js
+  <script src="./trtc.js"></script>
+  
+  // 接着手动引入 tim-js.js
+  <script src="./tim-js.js"></script>
+  
+  // 然后再手动引入 tsignaling.js
+  <script src="./tsignaling.js"></script>
+
+  // 最后再手动引入 trtc-calling-js.js
+  <script src="./trtc-calling-js.js"></script>
+```
+在项目脚本里引入模块
+```javascript
+import TrtcCalling from 'trtc-calling-js';
+```
+#### 步骤2：创建 trtcCalling 对象
+>- sdkAppID: 您从腾讯云申请的 sdkAppID
+```javascript
+let options = {
+  SDKAppID: 0 // 接入时需要将0替换为您的云通信应用的 SDKAppID
+};
+const trtcCalling = new TRTCCalling(options);
+```
+
+#### 步骤3：登录
+>- userID: 用户 ID
+>- userSig: 用户签名，计算方式参见[如何计算 userSig](https://cloud.tencent.com/document/product/647/17275)
+```javascript
+trtcCalling.login({
+  userID,
+  userSig
+});
+```
+
+#### 步骤4：实现 1v1 通话
+>#### 拨打：
+>- userID: 用户 ID
+>- type: 通话类型，0-未知， 1-语音通话，2-视频通话
+>- timeout: 邀请超时, 单位 s(秒)
+```javascript
+trtcCalling.call({
+  userID,
+  type: 2,
+  timeout
+});
+```
+>#### 接听
+>- inviteID: 邀请 ID, 标识一次邀请
+>- roomID: 通话房间号 ID
+>- callType: 0-未知， 1-语音通话，2-视频通话
+```javascript
+trtcCalling.accept({
+  inviteID,
+  roomID,
+  callType
+});
+```
+>#### 打开本地摄像头
+```javascript
+trtcCalling.openCamera()
+```
+>#### 展示远端画面
+>- userID: 远端用户 ID
+>- videoViewDomID: 该用户数据将渲染到该 DOM ID 节点里
+```javascript
+trtcCalling.startRemoteView({
+  userID,
+  videoViewDomID
+})
+```
+
+>#### 展示本地画面
+>- userID: 本地用户 ID
+>- videoViewDomID: 该用户数据将渲染到该 DOM ID 节点里
+```javascript
+trtcCalling.startLocalView({
+  userID,
+  videoViewDomID
+})
+```
+
+>#### 挂断/拒接
+```javascript
+trtcCalling.hangup()
+```
+>- inviteID: 邀请 id，标识一次邀请
+>- isBusy: 是否是忙线中， 0-未知， 1-语音通话，2-视频通话
+```javascript
+trtcCalling.reject({ 
+  inviteID,
+  isBusy
+  })
+```
+
+### 支持的平台
+
+| 操作系统 |      浏览器类型      | 浏览器最低版本要求 |
+| :------: | :------------------: | :----------------: |
+|  Mac OS  | 桌面版 Safari 浏览器 |        11+         |
+|  Mac OS  | 桌面版 Chrome 浏览器 |        56+         |
+| Windows  | 桌面版 Chrome 浏览器 |        56+         |
+| Windows  |   桌面版 QQ 浏览器   |        10.4        |
+
+### 常见问题
+
+#### 1. 查看密钥时只能获取公钥和私钥信息，该如何获取密钥？
+TRTC SDK 6.6 版本（2019年08月）开始启用新的签名算法 HMAC-SHA256。在此之前已创建的应用，需要先升级签名算法才能获取新的加密密钥。如不升级，您也可以继续使用 老版本算法 ECDSA-SHA256，如已升级，您按需切换为新旧算法。
+
+升级/切换操作：
+
+1. 登录 实时音视频控制台。
+
+2. 在左侧导航栏选择【应用管理】，单击目标应用所在行的【应用信息】。
+
+3. 选择【快速上手】页签，单击【第二步 获取签发 UserSig 的密钥】区域的【点此升级】、【非对称式加密】或【HMAC-SHA256】。
+
+- 升级：
+
+   ![](https://main.qcloudimg.com/raw/69bd0957c99e6a6764368d7f13c6a257.png)
+
+- 切换回老版本算法 ECDSA-SHA256：
+
+   ![](https://main.qcloudimg.com/raw/f89c00f4a98f3493ecc1fe89bea02230.png)
+
+- 切换为新版本算法 HMAC-SHA256：
+
+   ![](https://main.qcloudimg.com/raw/b0412153935704abc9e286868ad8a916.png)
+
+#### 2. 防火墙有什么限制？
+
+由于 SDK 使用 UDP 协议进行音视频传输，所以对 UDP 有拦截的办公网络下无法使用，如遇到类似问题，请参考文档：[应对公司防火墙限制](https://cloud.tencent.com/document/product/647/34399)。

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ]
+}

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "veterans",
+  "version": "0.2.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "EventEmitter": "^1.0.0",
+    "axios": "^0.21.1",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.13.2",
+    "qs": "^6.9.4",
+    "tim-js-sdk": "^2.15.0",
+    "trtc-calling-js": "^0.6.0",
+    "trtc-js-sdk": "^4.11.8",
+    "tsignaling": "^0.8.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.3.4",
+    "vuex": "^3.5.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "generator-star-spacing": "off",
+      "no-tabs": "off",
+      "no-unused-vars": "off",
+      "no-console": "off",
+      "no-irregular-whitespace": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "_id": "trtc-calling-webrtc-demo@0.1.0"
+}

public/debug/GenerateTestUserSig.js

@@ -0,0 +1,59 @@
+import * as LibGenerateTestUserSig from './lib-generate-test-usersig.min.js'
+
+/**
+ * 腾讯云 SDKAppId，需要替换为您自己账号下的 SDKAppId。
+ *
+ * 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到 SDKAppId，
+ * 它是腾讯云用于区分客户的唯一标识。
+ */
+const SDKAPPID = 1400594521
+
+
+/**
+ * 签名过期时间，建议不要设置的过短
+ * <p>
+ * 时间单位：秒
+ * 默认时间：7 x 24 x 60 x 60 = 604800 = 7 天
+ */
+const EXPIRETIME = 604800
+
+
+/**
+ * 计算签名用的加密密钥，获取步骤如下：
+ *
+ * step1. 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav )，如果还没有应用就创建一个，
+ * step2. 单击“应用配置”进入基础配置页面，并进一步找到“帐号体系集成”部分。
+ * step3. 点击“查看密钥”按钮，就可以看到计算 UserSig 使用的加密的密钥了，请将其拷贝并复制到如下的变量中
+ *
+ * 注意：该方案仅适用于调试Demo，正式上线前请将 UserSig 计算代码和密钥迁移到您的后台服务器上，以避免加密密钥泄露导致的流量盗用。
+ * 文档：https://cloud.tencent.com/document/product/647/17275#Server
+ */
+const SECRETKEY = 'd643bc248fd0c49a041ef7551962fe639abfbb9db660dd1c6d7e868f8193f704'
+
+/*
+ * Module:   GenerateTestUserSig
+ *
+ * Function: 用于生成测试用的 UserSig，UserSig 是腾讯云为其云服务设计的一种安全保护签名。
+ *           其计算方法是对 SDKAppID、UserID 和 EXPIRETIME 进行加密，加密算法为 HMAC-SHA256。
+ *
+ * Attention: 请不要将如下代码发布到您的线上正式版本的 App 中，原因如下：
+ *
+ *            本文件中的代码虽然能够正确计算出 UserSig，但仅适合快速调通 SDK 的基本功能，不适合线上产品，
+ *            这是因为客户端代码中的 SECRETKEY 很容易被反编译逆向破解，尤其是 Web 端的代码被破解的难度几乎为零。
+ *            一旦您的密钥泄露，攻击者就可以计算出正确的 UserSig 来盗用您的腾讯云流量。
+ *
+ *            正确的做法是将 UserSig 的计算代码和加密密钥放在您的业务服务器上，然后由 App 按需向您的服务器获取实时算出的 UserSig。
+ *            由于破解服务器的成本要高于破解客户端 App，所以服务器计算的方案能够更好地保护您的加密密钥。
+ *
+ * Reference：https://cloud.tencent.com/document/product/647/17275#Server
+ */
+export function genTestUserSig(userID) {
+  const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME)
+  const userSig = generator.genTestUserSig(userID)
+
+  return {
+    sdkAppID: SDKAPPID,
+    userSig: userSig,
+  }
+}
+

public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="https://cloud.tencent.com/favicon.ico" />
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
+<script src="./debug/GenerateTestUserSig.js" type="module"></script>
+<script src="./debug/lib-generate-test-usersig.min.js"></script>

src/App.vue

@@ -0,0 +1,422 @@
+<template>
+  <div id="app">
+    <header-nav></header-nav>
+    <transition name="fade" mode="out-in">
+      <router-view class="view"></router-view>
+    </transition>
+    <el-dialog
+      :title="callTypeDisplayName"
+      :visible.sync="isShowNewInvitationDialog"
+      width="400px"
+    >
+      <span>{{ this.getNewInvitationDialogContent() }}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleRejectCall">拒绝</el-button>
+        <el-button type="primary" @click="handleAccept">接听</el-button>
+      </span>
+    </el-dialog>
+    <!--Waves Container-->
+	<div class="page-bottom">
+	<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+	<defs>
+	<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+	</defs>
+	<g class="parallax">
+	<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
+	<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
+	<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
+	<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
+	</g>
+	</svg>
+  <div class="content-wrap">
+    <div class="content">
+      提示：退役军人用"veteMemberId",企业使用用户名登录。
+    </div>
+  </div>
+	</div>
+	<!--Waves end-->
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { log } from "./utils";
+import { getUsernameByUserid } from "./service";
+import HeaderNav from "./components/header-nav";
+let timeout;
+
+export default {
+  name: "App",
+  components: {
+    HeaderNav,
+  },
+  watch: {
+    isLogin: function (newIsLogin, oldIsLogin) {
+      if (newIsLogin !== oldIsLogin) {
+        if (newIsLogin) {
+          if (this.$router.history.current.path === "/login") {
+            // 防止已在 '/' 路由下再次 push
+            this.$router.push("/");
+          }
+        } else {
+          this.$router.push("/login");
+        }
+      }
+    },
+  },
+  computed: mapState({
+    isLogin: (state) => state.isLogin,
+    loginUserInfo: (state) => state.loginUserInfo,
+    callStatus: (state) => state.callStatus,
+    isAccepted: (state) => state.isAccepted,
+    meetingUserIdList: (state) => state.meetingUserIdList,
+    muteVideoUserIdList: (state) => state.muteVideoUserIdList,
+    muteAudioUserIdList: (state) => state.muteAudioUserIdList,
+  }),
+  async created() {
+    console.log("this.$route.query", this.$route.query);
+    //===========================下面是解决刷新页面丢失vuex数据
+    //在页面加载时读取sessionStorage里的状态信息
+    if (sessionStorage.getItem("store")) {
+      this.$store.replaceState(
+        Object.assign(
+          {},
+          this.$store.state,
+          JSON.parse(sessionStorage.getItem("store"))
+        )
+      );
+    }
+    //在页面刷新时将vuex里的信息保存到sessionStorage里
+    window.addEventListener("beforeunload", () => {
+      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
+    });
+
+    this.initListener();
+    await this.handleAutoLogin();
+  },
+  data() {
+    return {
+      isInviterCanceled: false,
+      isShowNewInvitationDialog: false,
+      inviterName: "",
+      callTypeDisplayName: "",
+      inviteData: {},
+      inviteID: "",
+    };
+  },
+  destroyed() {
+    this.removeListener();
+  },
+  methods: {
+    handleAutoLogin: async function () {},
+    initListener: function () {
+      this.$trtcCalling.on(this.TrtcCalling.EVENT.ERROR, this.handleError);
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.INVITED,
+        this.handleNewInvitationReceived
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.USER_ACCEPT,
+        this.handleUserAccept
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.USER_ENTER,
+        this.handleUserEnter
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.USER_LEAVE,
+        this.handleUserLeave
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.REJECT,
+        this.handleInviteeReject
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.LINE_BUSY,
+        this.handleInviteeLineBusy
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.CALLING_CANCEL,
+        this.handleInviterCancel
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.KICKED_OUT,
+        this.handleKickedOut
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.CALLING_TIMEOUT,
+        this.handleCallTimeout
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.NO_RESP,
+        this.handleNoResponse
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.CALLING_END,
+        this.handleCallEnd
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.USER_VIDEO_AVAILABLE,
+        this.handleUserVideoChange
+      );
+      this.$trtcCalling.on(
+        this.TrtcCalling.EVENT.USER_AUDIO_AVAILABLE,
+        this.handleUserAudioChange
+      );
+    },
+    removeListener: function () {
+      this.$trtcCalling.off(this.TrtcCalling.EVENT.ERROR, this.handleError);
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.INVITED,
+        this.handleNewInvitationReceived
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.USER_ACCEPT,
+        this.handleUserAccept
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.USER_ENTER,
+        this.handleUserEnter
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.USER_LEAVE,
+        this.handleUserLeave
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.REJECT,
+        this.handleInviteeReject
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.LINE_BUSY,
+        this.handleInviteeLineBusy
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.CALLING_CANCEL,
+        this.handleInviterCancel
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.KICKED_OUT,
+        this.handleKickedOut
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.CALLING_TIMEOUT,
+        this.handleCallTimeout
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.NO_RESP,
+        this.handleNoResponse
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.CALLING_END,
+        this.handleCallEnd
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.USER_VIDEO_AVAILABLE,
+        this.handleUserVideoChange
+      );
+      this.$trtcCalling.off(
+        this.TrtcCalling.EVENT.USER_AUDIO_AVAILABLE,
+        this.handleUserAudioChange
+      );
+    },
+    handleError: function () {},
+    handleNewInvitationReceived: async function (payload) {
+      const { inviteID, sponsor, inviteData } = payload;
+      log(`handleNewInvitationReceived ${JSON.stringify(payload)}`);
+      if (inviteData.callEnd) {
+        // 最后一个人发送 invite 进行挂断
+        this.$store.commit("updateCallStatus", "idle");
+        return;
+      }
+      if (sponsor === this.loginUserInfo.userId) {
+        // 邀请人是自己, 同一个账号有可能在多端登录
+        return;
+      }
+      // 这里需要考虑忙线的情况
+      if (this.callStatus === "calling" || this.callStatus === "connected") {
+        await this.$trtcCalling.reject({ inviteID, isBusy: true });
+        return;
+      }
+
+      const { callType } = inviteData;
+      this.inviteData = inviteData;
+      this.inviteID = inviteID;
+      this.isInviterCanceled = false;
+      this.$store.commit("updateIsInviter", false);
+      this.$store.commit("updateCallStatus", "calling");
+      const userName = sponsor;
+      this.inviterName = userName;
+      this.callTypeDisplayName =
+        callType === this.TrtcCalling.CALL_TYPE.AUDIO_CALL
+          ? "语音通话"
+          : "视频通话";
+      this.isShowNewInvitationDialog = true;
+    },
+    getNewInvitationDialogContent: function () {
+      return `来自${this.inviterName}的${this.callTypeDisplayName}`;
+    },
+    handleRejectCall: async function () {
+      try {
+        const { callType } = this.inviteData;
+        await this.$trtcCalling.reject({
+          inviteID: this.inviteID,
+          isBusy: false,
+          callType,
+        });
+        this.dissolveMeetingIfNeed();
+      } catch (e) {
+        this.dissolveMeetingIfNeed();
+      }
+    },
+
+    handleAccept: function () {
+      this.handleDebounce(this.handleAcceptCall(), 500);
+    },
+
+    handleDebounce: function (func, wait) {
+      let context = this;
+      let args = arguments;
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        func.apply(context, args);
+      }, wait);
+    },
+
+    handleAcceptCall: async function () {
+      try {
+        const { callType, roomID } = this.inviteData;
+        this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
+        await this.$trtcCalling.accept({
+          inviteID: this.inviteID,
+          roomID,
+          callType,
+        });
+        this.isShowNewInvitationDialog = false;
+        if (
+          callType === this.TrtcCalling.CALL_TYPE.AUDIO_CALL &&
+          this.$router.history.current.fullPath !== "/audio-call"
+        ) {
+          this.$router.push("/audio-call");
+        } else if (
+          callType === this.TrtcCalling.CALL_TYPE.VIDEO_CALL &&
+          this.$router.history.current.fullPath !== "/video-call"
+        ) {
+          this.$router.push("/video-call");
+        }
+      } catch (e) {
+        this.dissolveMeetingIfNeed();
+      }
+    },
+    handleUserAccept: function ({ userID }) {
+      this.$store.commit("userAccepted", true);
+      console.log(userID, "accepted");
+    },
+    handleUserEnter: function ({ userID }) {
+      // 建立连接
+      this.$store.commit("userJoinMeeting", userID);
+      if (this.callStatus === "calling") {
+        // 如果是邀请者, 则建立连接
+        this.$nextTick(() => {
+          // 需要先等远程用户 id 的节点渲染到 dom 上
+          this.$store.commit("updateCallStatus", "connected");
+        });
+      } else {
+        // 第n (n >= 3)个人被邀请入会, 并且他不是第 n 个人的邀请人
+        this.$nextTick(() => {
+          // 需要先等远程用户 id 的节点渲染到 dom 上
+          this.$trtcCalling.startRemoteView({
+            userID: userID,
+            videoViewDomID: `video-${userID}`,
+          });
+        });
+      }
+    },
+    handleUserLeave: function ({ userID }) {
+      if (this.meetingUserIdList.length == 2) {
+        this.$store.commit("updateCallStatus", "idle");
+      }
+      this.$store.commit("userLeaveMeeting", userID);
+    },
+    handleInviteeReject: async function ({ userID }) {
+      const userName = await getUsernameByUserid(userID);
+      this.$message.warning(`${userName}拒绝通话`);
+      this.dissolveMeetingIfNeed();
+    },
+    handleInviteeLineBusy: async function ({ userID }) {
+      const userName = await getUsernameByUserid(userID);
+      this.$message.warning(`${userName}忙线`);
+      this.dissolveMeetingIfNeed();
+    },
+    handleInviterCancel: function () {
+      // 邀请被取消
+      this.isShowNewInvitationDialog = false;
+      this.$message.warning("通话已取消");
+      this.dissolveMeetingIfNeed();
+    },
+    handleKickedOut: function () {
+      //重复登陆，被踢出房间
+      this.$store.commit("userAccepted", false);
+      this.$trtcCalling.logout();
+      this.$store.commit("userLogoutSuccess");
+    },
+    // 作为被邀请方会收到，收到该回调说明本次通话超时未应答
+    handleCallTimeout: function () {
+      this.isShowNewInvitationDialog = false;
+      this.$message.warning("通话超时未应答");
+      this.dissolveMeetingIfNeed();
+    },
+    handleCallEnd: function () {
+      this.$message.success("通话已结束");
+      this.$trtcCalling.hangup();
+      this.dissolveMeetingIfNeed();
+      this.$router.push("/");
+      this.$store.commit("userAccepted", false);
+    },
+    handleNoResponse: async function ({ userID }) {
+      const userName = await getUsernameByUserid(userID);
+      this.$message.warning(`${userName}无应答`);
+      this.dissolveMeetingIfNeed();
+    },
+    handleUserVideoChange: function ({ userID, isVideoAvailable }) {
+      log(
+        `handleUserVideoChange userID, ${userID} isVideoAvailable ${isVideoAvailable}`
+      );
+      if (isVideoAvailable) {
+        const muteUserList = this.muteAudioUserIdList.filter(
+          (currentID) => currentID !== userID
+        );
+        this.$store.commit("updateMuteVideoUserIdList", muteUserList);
+      } else {
+        const muteUserList = this.muteAudioUserIdList.concat(userID);
+        this.$store.commit("updateMuteVideoUserIdList", muteUserList);
+      }
+    },
+    handleUserAudioChange: function ({ userID, isAudioAvailable }) {
+      log(
+        `handleUserAudioChange userID, ${userID} isAudioAvailable ${isAudioAvailable}`
+      );
+      if (isAudioAvailable) {
+        const muteUserList = this.muteAudioUserIdList.filter(
+          (currentID) => currentID !== userID
+        );
+        this.$store.commit("updateMuteAudioUserIdList", muteUserList);
+      } else {
+        const muteUserList = this.muteAudioUserIdList.concat(userID);
+        this.$store.commit("updateMuteAudioUserIdList", muteUserList);
+      }
+    },
+    dissolveMeetingIfNeed() {
+      this.$store.commit("updateCallStatus", "idle");
+      this.isShowNewInvitationDialog = false;
+      if (this.meetingUserIdList.length < 2) {
+        this.$store.commit("dissolveMeeting");
+      }
+    },
+  },
+};
+</script>
+
+<style>
+@import url(../static/css/style.css);
+</style>

src/api/index.js

@@ -0,0 +1,72 @@
+import axios from 'axios';
+import qs from 'qs';
+
+const API_DOMAIN = 'https://service-c2zjvuxa-1252463788.gz.apigw.tencentcs.com';
+
+export async function getSmsVerifyCode(phoneNum) {
+  let data = {
+    method: 'getSms',
+    phone: phoneNum
+  };
+  const options = buildOptions(data, '/release/sms')
+  return axios(options);
+}
+
+export async function loginSystemByVerifyCode(loginInfo) {
+  const {phoneNum, sessionId, verifyCode} = loginInfo;
+  let data = {
+    method: 'login',
+    phone: phoneNum,
+    code: verifyCode,
+    sessionId
+  };
+  const options = buildOptions(data, '/release/sms');
+  return axios(options);
+}
+
+export async function loginSystemByToken(phoneNum, token) {
+  let data = {
+    method: 'login',
+    phone: phoneNum,
+    token
+  };
+  const options = buildOptions(data, '/release/sms');
+  return axios(options);
+}
+
+export async function fetchUserInfoByPhone(phone, token) {
+  let data = {
+    phone,
+    token
+  };
+  const options = buildOptions(data, '/release/getUserInfo');
+  return axios(options);
+}
+
+export async function fetchUserInfoByUserId(userId, token) {
+  let data = {
+    userId,
+    token
+  };
+  const options = buildOptions(data, '/release/getUserInfo');
+  return axios(options);
+}
+
+export async function updateUserName(name, userId, token) {
+  let data = {
+    userId,
+    name,
+    token
+  };
+  const options = buildOptions(data, '/release/setNickname');
+  return axios(options);
+}
+
+function buildOptions(data, apiPath) {
+  return {
+    method: 'POST',
+    headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    data: qs.stringify(data),
+    url: `${API_DOMAIN}${apiPath}`,
+  }
+}

src/components/audio-call/index.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="audio-call-section">
+    <div
+      class="audio-call-section-header"
+    >Welcome {{loginUserInfo && (loginUserInfo.name || loginUserInfo.userId)}}</div>
+    <div class="audio-call-section-title">语音通话</div>
+    <search-user  :callFlag="callFlag" :cancelFlag="cancelFlag" @callUser="handleCallUser" @cancelCallUser="handleCancelCallUser"></search-user>
+    <div :class="{ 'audio-conference': true, 'is-show': isShowAudioCall }">
+      <div class="audio-conference-header">语音通话区域</div>
+
+      <div class="audio-conference-list">
+        <div
+          v-for="userId in meetingUserIdList"
+          :key="`audio-${userId}`"
+          :class="{'user-audio-container': true, 'is-me': userId === loginUserInfo.userId}"
+        >
+          <div class="user-status">
+            <div
+              :class="{'user-audio-status': true, 'is-mute': isUserMute(muteAudioUserIdList, userId)}"
+            ></div>
+          </div>
+          <div class="audio-item-username">{{userId2User[userId] && userId2User[userId].name}}</div>
+        </div>
+      </div>
+      <div class="audio-conference-action">
+        <el-button
+          class="action-btn"
+          type="success"
+          @click="toggleAudio"
+        >{{isAudioOn ? '关闭麦克风' : '打开麦克风'}}</el-button>
+
+        <el-button class="action-btn" type="danger" @click="handleHangup">挂断</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import SearchUser from "../search-user";
+import { getUserDetailInfoByUserid } from "../../service";
+
+export default {
+  name: "AudioCall",
+  components: {
+    SearchUser
+  },
+  computed: {
+    ...mapState({
+      loginUserInfo: state => state.loginUserInfo,
+      callStatus: state => state.callStatus,
+      isInviter: state => state.isInviter,
+      meetingUserIdList: state => state.meetingUserIdList,
+      muteAudioUserIdList: state => state.muteAudioUserIdList
+    })
+  },
+  data() {
+    return {
+      isShowAudioCall: false,
+      isAudioOn: true,
+      userId2User: {},
+      callFlag: false,
+      cancelFlag: false,
+    };
+  },
+  mounted() {
+    if (this.callStatus === "connected" && !this.isInviter) {
+      this.startMeeting();
+      this.updateUserId2UserInfo(this.meetingUserIdList);
+    }
+  },
+  destroyed() {
+    this.$store.commit("updateMuteVideoUserIdList", []);
+    this.$store.commit("updateMuteAudioUserIdList", []);
+    if (this.callStatus === "connected") {
+      this.$trtcCalling.hangup();
+      this.$store.commit("updateCallStatus", "idle");
+    }
+  },
+  watch: {
+    callStatus: function(newStatus, oldStatus) {
+      // 建立通话连接
+      if (newStatus !== oldStatus && newStatus === "connected") {
+        this.startMeeting();
+        this.updateUserId2UserInfo(this.meetingUserIdList);
+      }
+    },
+    meetingUserIdList: function(newList, oldList) {
+      if (newList !== oldList || newList.length !== oldList.length) {
+        this.updateUserId2UserInfo(newList);
+      }
+    }
+  },
+  methods: {
+    handleCallUser: function({ param }) {
+      this.callFlag = true
+      this.$trtcCalling.call({
+        userID: param,
+        type: this.TrtcCalling.CALL_TYPE.VIDEO_CALL
+      }).then(()=>{
+        this.callFlag = false
+        this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
+        this.$store.commit("updateCallStatus", "calling");
+        this.$store.commit("updateIsInviter", true);
+      })
+      
+    },
+    handleCancelCallUser: function() {
+      this.cancelFlag = true
+      this.$trtcCalling.hangup().then(()=>{
+        this.cancelFlag = false
+        this.$store.commit("dissolveMeeting");
+        this.$store.commit("updateCallStatus", "idle");
+      })
+    },
+    toggleAudio: function() {
+      this.isAudioOn = !this.isAudioOn;
+      this.$trtcCalling.setMicMute(!this.isAudioOn);
+      if (this.isAudioOn) {
+        const muteUserList = this.muteAudioUserIdList.filter(
+          userId => userId !== this.loginUserInfo.userId
+        );
+        this.$store.commit("updateMuteAudioUserIdList", muteUserList);
+      } else {
+        const muteUserList = this.muteAudioUserIdList.concat(
+          this.loginUserInfo.userId
+        );
+        this.$store.commit("updateMuteAudioUserIdList", muteUserList);
+      }
+    },
+    handleHangup: function() {
+      this.$trtcCalling.hangup();
+      this.isShowVideoCall = false;
+      this.$store.commit("updateCallStatus", "idle");
+      this.$router.push("/");
+    },
+    isUserMute: function(muteUserList, userId) {
+      return muteUserList.indexOf(userId) !== -1;
+    },
+    startMeeting: function() {
+      this.isShowAudioCall = true;
+    },
+    updateUserId2UserInfo: async function(userIdList) {
+      let userId2UserInfo = {};
+      let loginUserId = this.loginUserInfo.userId;
+      for (let i = 0; i < userIdList.length; i++) {
+        const userId = userIdList[i];
+        const userInfo = await getUserDetailInfoByUserid(userId);
+        userId2UserInfo[userId] = userInfo;
+        if (loginUserId === userId) {
+          userId2UserInfo[userId].name += "(me)";
+        }
+      }
+      this.userId2User = {
+        ...this.userId2User,
+        ...userId2UserInfo
+      };
+    },
+    goto: function(path) {
+      this.$router.push(path);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.audio-call-section {
+  padding-top: 50px;
+  width: 800px;
+  margin: 0 auto;
+}
+.audio-call-section-header {
+  font-size: 24px;
+}
+.audio-call-section-title {
+  margin-top: 30px;
+  font-size: 20px;
+}
+.audio-conference {
+  display: none;
+  margin-top: 20px;
+}
+.audio-conference.is-show {
+  display: block;
+}
+
+.audio-conference-list {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  justify-content: center;
+}
+
+.user-audio-container {
+  background-color: #333;
+  position: relative;
+  text-align: left;
+  width: 360px;
+  height: 240px;
+  margin-right: 10px;
+  background: black;
+}
+
+.audio-conference-action {
+  margin-top: 10px;
+}
+
+.user-audio-status {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  width: 22px;
+  height: 27px;
+  z-index: 10;
+  background-image: url("../../assets/mic-on.png");
+  background-size: cover;
+}
+
+.audio-item-avatar-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 80px;
+  height: 80px;
+  z-index: 20;
+}
+
+.audio-item-avatar-wrapper img {
+  width: 80px;
+  height: 80px;
+}
+
+.user-audio-status.is-mute {
+  background-image: url("../../assets/mic-off.png");
+}
+
+.audio-item-username {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 10;
+  color: #ffffff;
+}
+@media screen and (max-width: 767px) {
+  .audio-call-section {
+    width: 100%;
+  }
+  .audio-conference-list {
+    padding: 0 10px;
+  }
+  .user-audio-container {
+    margin: 5px;
+    width: 180px;
+    height: 120px;
+  }
+}
+</style>

src/components/header-nav/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="header-nav">
+    <div class="header-nav-left">
+      <div class="header-nav-title">退役军人视频服务</div>
+      <div class="header-nav-homepage" @click="gotoHomePage">首页</div>
+    </div>
+    <div class="header-nav-help">
+      <el-dropdown @command="handleCommand">
+        <span class="el-dropdown-link">
+          更多
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="command-detect">设备检测</el-dropdown-item>
+          <el-dropdown-item command="command-logout">登出</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setUserLoginInfo } from "../../utils";
+export default {
+  name: "HeaderNav",
+  methods: {
+    handleCommand: function (command) {
+      if (command === "command-detect") {
+        window.open(
+          "https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html",
+          "__blank"
+        );
+        return;
+      }
+
+      if (command === "command-logout") {
+        this.$trtcCalling.logout();
+        this.$store.commit("userLogoutSuccess");
+        setUserLoginInfo({
+          token: "",
+          phoneNum: "",
+        });
+      }
+    },
+    gotoHomePage: function () {
+      if (this.$router.currentRoute.fullPath !== "/") {
+        this.$router.push("/");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.header-nav {
+  background: #041d39;
+  height: 80px;
+  display: flex;
+  padding: 0 20%;
+  justify-content: space-around;
+  color: #ffffff;
+}
+.header-nav-left {
+  display: flex;
+  flex-direction: row;
+}
+.header-nav-title {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+}
+.header-nav-homepage {
+  margin-left: 50px;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.header-nav-help {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+}
+.el-dropdown-link {
+  color: #ffffff;
+  font-size: 20px;
+  cursor: pointer;
+}
+@media screen and (max-width: 767px) {
+  .header-nav {
+    padding: 0;
+  }
+  .header-nav-left {
+    justify-content: space-around;
+    width: 75%;
+  }
+  .header-nav-title,
+  .el-dropdown-link {
+    font-size: 18px;
+  }
+  .header-nav-homepage {
+    font-size: 18px;
+    margin-left: 10px;
+  }
+}
+</style>

src/components/home-page/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="home-page-container">
+    <div class="home-page-header">
+      <img class="portrait" src="../../../static/images/avatar15.png" alt="" />
+      {{ loginUserInfo && (loginUserInfo.name || loginUserInfo.userId) }}
+      欢迎您！
+    </div>
+    <div class="home-page-section-list">
+      <div class="video-main">
+        <div class="promo-video">
+          <div class="waves-button-block">
+            <div class="waves-button wave-1"></div>
+            <div class="waves-button wave-2"></div>
+            <div class="waves-button wave-3"></div>
+            <div class="video" @click="goto('/video-call')">
+              <i class="el-icon-video-play" style="font-size: 50px"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="home-page-section" @click="goto('/video-call')">视频通话</div> -->
+      <!-- <div class="home-page-section" @click="goto('/audio-call')">语音通话</div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "HomePage",
+  computed: mapState({
+    isLogin: (state) => state.isLogin,
+    loginUserInfo: (state) => state.loginUserInfo,
+    veteMemberId: (state) => state.veteMemberId,
+  }),
+  data() {
+    return {
+      enableEditName: true,
+    };
+  },
+  watch: {
+    isLogin: function (newIsLogin) {
+      return newIsLogin;
+    },
+  },
+  created() {
+    // console.log("this.veteMemberId", this.veteMemberId);
+    // console.log("loginUserInfo", this.loginUserInfo);
+    if (this.veteMemberId && this.isLogin) {
+      this.goto("/video-call");
+    }
+  },
+  methods: {
+    goto: function (path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.home-page-header {
+  padding: 30px 0 10px;
+  font-size: 24px;
+  color: #fff;
+}
+.home-page-section {
+  background-image: linear-gradient(155deg, #0d2c5b 7%, #122755 93%);
+  border-radius: 6px;
+  color: #ffffff;
+  width: 300px;
+  height: 100px;
+  margin: 10px auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.home-page-section:hover {
+  cursor: pointer;
+}
+.change-name {
+  margin-left: 10px;
+  text-decoration: underline;
+  color: #5f6368;
+  font-size: 16px;
+  cursor: pointer;
+}
+/* 按钮 */
+.video-main {
+  position: relative;
+  display: inline-block;
+  margin-top: 80px;
+}
+
+.video {
+  position: relative;
+  height: 50px;
+  width: 50px;
+  line-height: 50px;
+  text-align: center;
+  border-radius: 100%;
+  background: transparent;
+  color: #fff;
+  display: inline-block;
+  background: #112856;
+  z-index: 999;
+  cursor: pointer;
+}
+
+@keyframes waves-button {
+  0% {
+    -webkit-transform: scale(0.2, 0.2);
+    transform: scale(0.2, 0.2);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  }
+
+  50% {
+    opacity: 0.9;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  }
+
+  100% {
+    -webkit-transform: scale(0.9, 0.9);
+    transform: scale(0.9, 0.9);
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  }
+}
+
+.waves-button {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  background: rgba(255, 255, 255, 0.3);
+  opacity: 0;
+  /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; */
+  border-radius: 100%;
+  right: -50px;
+  bottom: -50px;
+  z-index: 1;
+  -webkit-animation: waves-button 3s ease-in-out infinite;
+  animation: waves-button 3s ease-in-out infinite;
+}
+
+.wave-1 {
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+.wave-2 {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.wave-3 {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+/* 按钮 */
+</style>

src/components/login/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="user-login">
+    <el-input
+      placeholder="用户ID"
+      v-model="UserID"
+      maxlength="11"
+      class="phone-num"
+    ></el-input>
+    <el-button class="user-login-btn" @click="handleLogin">登陆</el-button>
+  </div>
+</template>
+
+<script>
+import { genTestUserSig } from "../../../public/debug/GenerateTestUserSig";
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      UserID: "",
+      verifyCode: "",
+      disableFetchCodeBtn: false,
+    };
+  },
+  created() {
+    console.log("this.$route.query", this.$route.query);
+    this.UserID = this.$route.query.inviterId;
+    if (this.UserID) {
+      this.handleLogin();
+    }
+  },
+  methods: {
+    handleLogin: async function () {
+      console.log("userid");
+      if (!this.UserID) {
+        this.$message.error("请输入用户ID");
+        return;
+      }
+
+      const userSig = genTestUserSig(this.UserID).userSig;
+      const userId = this.UserID;
+      this.$store.commit("userLoginSuccess");
+      this.$store.commit("setLoginUserInfo", {
+        userId,
+        userSig,
+      });
+
+      // 登录 trtcCalling
+      this.$trtcCalling.login({
+        userID: this.UserID,
+        userSig,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.user-login {
+  font-size: 16px;
+  width: 400px;
+  margin: 0 auto;
+  padding-top: 50px;
+}
+.phone-num {
+  margin-bottom: 5px;
+}
+.user-login-btn {
+  margin-top: 10px;
+  width: 100%;
+}
+@media screen and (max-width: 767px) {
+  .user-login {
+    font-size: 16px;
+    width: 90%;
+    min-width: 300px;
+    margin: 0 auto;
+    padding-top: 50px;
+  }
+}
+</style>

src/components/search-user/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="search-user-container" v-if="callStatus !== 'connected'">
+    <div class="search-section">
+      <el-input
+        class="inline-input"
+        v-model="searchInput"
+        maxlength="11"
+        placeholder="请输入用户ID"
+      ></el-input>
+    </div>
+
+    <div v-show="callStatus !== 'connected'" class="search-user-list">
+      <div
+        v-if="callStatus === 'calling' && isInviter"
+        class="calling-user-footer"
+      >
+        <el-button class="user-item-join-btn calling">呼叫中...</el-button>
+        <el-button
+          class="user-item-cancel-join-btn"
+          :disabled="cancel"
+          :loading="cancel"
+          @click="handleCancelCallBtnClick"
+          >取消</el-button
+        >
+      </div>
+      <el-button
+        v-else
+        @click="handleCallBtnClick(searchInput)"
+        :disabled="call"
+        class="user-item-join-btn"
+        >呼叫</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { getSearchHistory } from "../../utils";
+
+export default {
+  name: "SearchUser",
+  props: {
+    callFlag: {
+      type: Boolean,
+    },
+    cancelFlag: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      searchInput: "",
+      callUserId: "",
+      searchResultList: [],
+      searchHistoryUser: getSearchHistory(),
+      call: false,
+      cancel: false,
+    };
+  },
+  computed: {
+    ...mapState({
+      loginUserInfo: (state) => state.loginUserInfo,
+      meetingUserIdList: (state) => state.meetingUserIdList,
+      callStatus: (state) => state.callStatus,
+      isAccepted: (state) => state.isAccepted,
+      isInviter: (state) => state.isInviter,
+      veteMemberId: (state) => state.veteMemberId,
+    }),
+    userList: function () {
+      if (this.searchInput === "" && this.searchHistoryUser.length !== 0) {
+        return this.searchHistoryUser;
+      }
+      return this.searchResultList;
+    },
+  },
+  watch: {
+    callStatus: function (newStatus, oldStatus) {
+      if (newStatus !== oldStatus && newStatus === "connected") {
+        this.searchInput = "";
+        this.searchResultList = [];
+      }
+      if (newStatus === "idle") {
+        this.callUserId = "";
+      }
+    },
+    callFlag(newVal) {
+      this.call = newVal;
+    },
+    cancelFlag(newVal) {
+      this.cancel = newVal;
+    },
+  },
+  created() {
+    console.log("veteMemberId", this.veteMemberId);
+    this.searchInput = this.veteMemberId;
+  },
+  methods: {
+    handleCallBtnClick: function (param) {
+      if (param === this.loginUserInfo.userId) {
+        this.$message("请输入正确用户ID");
+        return;
+      }
+      this.call = true;
+      this.callUserId = param;
+      this.$emit("callUser", { param });
+    },
+    handleCancelCallBtnClick: function () {
+      // 对方刚接受邀请，但进房未成功
+      this.cancel = true;
+      this.$emit("cancelCallUser");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.search-user-container {
+  width: 400px;
+  margin: 10px auto 0;
+}
+.search-section {
+  display: flex;
+  flex-direction: row;
+}
+.search-user-btn {
+  margin-left: 10px;
+}
+.search-user-list {
+  padding-top: 20px;
+}
+.search-user-list-title {
+  margin-top: 20px;
+  font-size: 18px;
+  text-align: left;
+}
+.user-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+.user-item-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.user-item-avatar-wrapper img {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+.user-item-username {
+  margin-left: 20px;
+}
+@media screen and (max-width: 767px) {
+  .search-user-container {
+    width: 90%;
+  }
+}
+</style>

src/components/video-call/index.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="video-call-section">
+    <div class="video-call-section-header">
+      <img class="portrait" src="../../../static/images/avatar15.png" alt="" />
+      {{ loginUserInfo && (loginUserInfo.name || loginUserInfo.userId) }}
+      欢迎您！
+    </div>
+    <!-- <div class="video-call-section-title" v-if="!isShowVideoCall">视频通话</div> -->
+    <search-user
+      v-if="!isShowVideoCall"
+      :callFlag="callFlag"
+      :cancelFlag="cancelFlag"
+      @callUser="handleCallUser"
+      @cancelCallUser="handleCancelCallUser"
+    ></search-user>
+    <div :class="{ 'video-conference': true, 'is-show': isShowVideoCall }">
+      <!-- <div class="video-conference-header">视频通话区域</div> -->
+
+      <div class="video-conference-list">
+        <div
+          v-for="userId in meetingUserIdList"
+          :key="`video-${userId}`"
+          :id="`video-${userId}`"
+          :class="{
+            'user-video-container': true,
+            'is-me': userId === loginUserInfo.userId,
+          }"
+        >
+          <div class="user-status">
+            <div
+              :class="{
+                'user-video-status': true,
+                'is-mute': isUserMute(muteVideoUserIdList, userId),
+              }"
+            ></div>
+            <div
+              :class="{
+                'user-audio-status': true,
+                'is-mute': isUserMute(muteAudioUserIdList, userId),
+              }"
+            ></div>
+          </div>
+          <div class="video-item-username">
+            {{ userId2Name[userId] || userId }}
+          </div>
+        </div>
+      </div>
+      <div class="video-conference-action">
+        <el-button class="action-btn" type="success" @click="toggleVideo">{{
+          isVideoOn ? "关闭摄像头" : "打开摄像头"
+        }}</el-button>
+
+        <el-button class="action-btn" type="success" @click="toggleAudio">{{
+          isAudioOn ? "关闭麦克风" : "打开麦克风"
+        }}</el-button>
+
+        <el-button class="action-btn" type="danger" @click="handleHangup"
+          >挂断</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import SearchUser from "../search-user";
+import { getUsernameByUserid } from "../../service";
+
+export default {
+  name: "VideoCall",
+  components: {
+    SearchUser,
+  },
+  computed: {
+    ...mapState({
+      loginUserInfo: (state) => state.loginUserInfo,
+      callStatus: (state) => state.callStatus,
+      isInviter: (state) => state.isInviter,
+      meetingUserIdList: (state) => state.meetingUserIdList,
+      muteVideoUserIdList: (state) => state.muteVideoUserIdList,
+      muteAudioUserIdList: (state) => state.muteAudioUserIdList,
+    }),
+  },
+  data() {
+    return {
+      isShowVideoCall: false,
+      isVideoOn: true,
+      isAudioOn: true,
+      userId2Name: {},
+      callFlag: false,
+      cancelFlag: false,
+    };
+  },
+  mounted() {
+    if (this.callStatus === "connected" && !this.isInviter) {
+      this.startMeeting();
+      this.updateUserId2Name(this.meetingUserIdList);
+    }
+  },
+  destroyed() {
+    this.$store.commit("updateMuteVideoUserIdList", []);
+    this.$store.commit("updateMuteAudioUserIdList", []);
+    if (this.callStatus === "connected") {
+      this.$trtcCalling.hangup();
+      this.$store.commit("updateCallStatus", "idle");
+    }
+  },
+  watch: {
+    callStatus: function (newStatus, oldStatus) {
+      // 作为被邀请者, 建立通话连接
+      if (newStatus !== oldStatus && newStatus === "connected") {
+        this.startMeeting();
+        this.updateUserId2Name(this.meetingUserIdList);
+      }
+    },
+    meetingUserIdList: function (newList, oldList) {
+      if (newList !== oldList || newList.length !== oldList) {
+        this.updateUserId2Name(newList);
+      }
+    },
+  },
+  methods: {
+    handleCallUser: function ({ param }) {
+      this.callFlag = true;
+      this.$trtcCalling
+        .call({
+          userID: param,
+          type: this.TrtcCalling.CALL_TYPE.VIDEO_CALL,
+        })
+        .then(() => {
+          this.callFlag = false;
+          this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
+          this.$store.commit("updateCallStatus", "calling");
+          this.$store.commit("updateIsInviter", true);
+        })
+        .catch((err) => {
+          let that = this;
+          this.$message.warning({
+            showClose: true,
+            message: err,
+            duration: 3000,
+            onClose: function () {
+              if (
+                err ==
+                "Error: sendMessage 接口需要 SDK 处于 ready 状态后才能调用。"
+              ) {
+                that.$store.commit("userLogoutSuccess");
+              } else {
+                that.$store.commit("setVeteMemberId", "");
+                that.$router.push("/");
+              }
+            },
+          });
+        });
+    },
+    handleCancelCallUser: function () {
+      this.cancelFlag = true;
+      this.$trtcCalling.hangup().then(() => {
+        this.cancelFlag = false;
+        this.$store.commit("dissolveMeeting");
+        this.$store.commit("updateCallStatus", "idle");
+      });
+    },
+    startMeeting: function () {
+      if (this.meetingUserIdList.length >= 3) {
+        // 多人通话
+        const lastJoinUser =
+          this.meetingUserIdList[this.meetingUserIdList.length - 1];
+        this.$trtcCalling.startRemoteView({
+          userID: lastJoinUser,
+          videoViewDomID: `video-${lastJoinUser}`,
+        });
+        return;
+      }
+      this.isShowVideoCall = true;
+      this.$trtcCalling.startLocalView({
+        userID: this.loginUserInfo.userId,
+        videoViewDomID: `video-${this.loginUserInfo.userId}`,
+      });
+      const otherParticipants = this.meetingUserIdList.filter(
+        (userId) => userId !== this.loginUserInfo.userId
+      );
+      otherParticipants.forEach((userId) => {
+        this.$trtcCalling.startRemoteView({
+          userID: userId,
+          videoViewDomID: `video-${userId}`,
+        });
+      });
+    },
+    handleHangup: function () {
+      this.$trtcCalling.hangup();
+      this.isShowVideoCall = false;
+      this.$store.commit("updateCallStatus", "idle");
+      this.$router.push("/");
+    },
+    toggleVideo: function () {
+      this.isVideoOn = !this.isVideoOn;
+      if (this.isVideoOn) {
+        this.$trtcCalling.openCamera();
+        const muteUserList = this.muteVideoUserIdList.filter(
+          (userId) => userId !== this.loginUserInfo.userId
+        );
+        this.$store.commit("updateMuteVideoUserIdList", muteUserList);
+      } else {
+        this.$trtcCalling.closeCamera();
+        const muteUserList = this.muteVideoUserIdList.concat(
+          this.loginUserInfo.userId
+        );
+        this.$store.commit("updateMuteVideoUserIdList", muteUserList);
+      }
+    },
+    toggleAudio: function () {
+      this.isAudioOn = !this.isAudioOn;
+      this.$trtcCalling.setMicMute(!this.isAudioOn);
+      if (this.isAudioOn) {
+        const muteUserList = this.muteAudioUserIdList.filter(
+          (userId) => userId !== this.loginUserInfo.userId
+        );
+        this.$store.commit("updateMuteAudioUserIdList", muteUserList);
+      } else {
+        const muteUserList = this.muteAudioUserIdList.concat(
+          this.loginUserInfo.userId
+        );
+        this.$store.commit("updateMuteAudioUserIdList", muteUserList);
+      }
+    },
+    isUserMute: function (muteUserList, userId) {
+      return muteUserList.indexOf(userId) !== -1;
+    },
+    updateUserId2Name: async function (userIdList) {
+      let userId2Name = {};
+      let loginUserId = this.loginUserInfo.userId;
+      for (let i = 0; i < userIdList.length; i++) {
+        const userId = userIdList[i];
+        if (!this.userId2Name[userId]) {
+          const userName = await getUsernameByUserid(userId);
+          userId2Name[userId] = userName;
+          if (loginUserId === userId) {
+            userId2Name[userId] += "(me)";
+          }
+        }
+      }
+      this.userId2Name = {
+        ...this.userId2Name,
+        ...userId2Name,
+      };
+    },
+    goto: function (path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.video-call-section {
+  padding-top: 50px;
+  width: 800px;
+  margin: 0 auto;
+}
+.video-call-section-header {
+  font-size: 24px;
+  color: #fff;
+}
+.video-call-section-title {
+  margin-top: 30px;
+  font-size: 20px;
+}
+.video-conference {
+  display: none;
+  margin-top: 20px;
+}
+.video-conference.is-show {
+  display: block;
+}
+
+.video-conference-list {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+.user-video-container {
+  position: relative;
+  text-align: left;
+  width: 360px;
+  height: 240px;
+  margin: 10px;
+}
+
+.user-video-status {
+  position: absolute;
+  right: 50px;
+  bottom: 20px;
+  width: 24px;
+  height: 27px;
+  z-index: 10;
+  background-image: url("../../assets/camera-on.png");
+  background-size: cover;
+}
+.user-video-status.is-mute {
+  background-image: url("../../assets/camera-off.png");
+}
+
+.user-audio-status {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  width: 22px;
+  height: 27px;
+  z-index: 10;
+  background-image: url("../../assets/mic-on.png");
+  background-size: cover;
+}
+
+.user-audio-status.is-mute {
+  background-image: url("../../assets/mic-off.png");
+}
+
+.video-conference-action {
+  margin-top: 10px;
+}
+
+.video-item-username {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  z-index: 10;
+  color: #ffffff;
+}
+@media screen and (max-width: 767px) {
+  .video-call-section {
+    width: 100%;
+  }
+  .video-conference-list {
+    margin: 0;
+    padding: 10px;
+  }
+  .user-video-container {
+    margin: 5px;
+  }
+}
+</style>

src/config/index.js

@@ -0,0 +1,6 @@
+import { genTestUserSig } from '../../public/debug/GenerateTestUserSig'
+const SDKAPPID = genTestUserSig('').sdkAppID;
+export default {
+  SDKAppID: SDKAPPID,
+  CallTimeout: 30
+}

src/main.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import 'element-ui/lib/theme-chalk/index.css';
+import {
+  Input, Button, Message, MessageBox, Autocomplete, Dialog,
+  DropdownItem, DropdownMenu, Dropdown
+} from 'element-ui';
+import store from './store';
+import {createRouter} from './router'
+import {createTrtcCalling} from './trtc-calling';
+import TRTCCalling from 'trtc-calling-js';
+import App from './App.vue'
+
+Vue.use(Input);
+Vue.use(Button);
+Vue.use(Autocomplete);
+Vue.use(Dialog);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+
+Vue.prototype.$message = Message;
+Vue.prototype.$confirm = MessageBox.confirm;
+
+Vue.prototype.$trtcCalling = createTrtcCalling();
+Vue.prototype.TrtcCalling = TRTCCalling;
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+  store,
+  router: createRouter()
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,66 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+
+import store from '../store';
+import HomePage from '../components/home-page';
+import Login from '../components/login';
+import AudioCall from '../components/audio-call';
+import VideoCall from '../components/video-call';
+
+function toQueryPair(key, value) {
+  if (typeof value == 'undefined') {
+    return `&${key}=`;
+  }
+  return `&${key}=${value}`;
+}
+
+function objToParam(param) {
+  if (Object.prototype.toString.call(param) !== '[object Object]') {
+    return '';
+  }
+  let queryParam = '';
+  for (let key in param) {
+    if (Object.prototype.hasOwnProperty.call(param, key)) {
+      let value = param[key];
+      queryParam += toQueryPair(key, value);
+    }
+  }
+  return queryParam;
+}
+
+Vue.use(Router);
+
+export function createRouter() {
+  const router = new Router({
+    mode: 'hash',
+    fallback: false,
+    routes: [
+      { path: '/', component: HomePage },
+      { path: '/login', component: Login },
+      { path: '/audio-call', component: AudioCall },
+      { path: '/video-call', component: VideoCall }
+    ]
+  });
+  router.beforeEach((to, from, next) => {
+    if (!store.state.isLogin) {
+      // console.log('to', objToParam(to.query));
+      // console.log('to', to);
+      if (Object.prototype.hasOwnProperty.call(to.query, 'veteMemberId')) {
+        store.commit("setVeteMemberId", to.query.veteMemberId);
+      }
+      if (to.path !== '/login') {
+        if (from.path !== '/login') {
+          next('/login?' + objToParam(to.query));
+        }
+        return;
+      }
+    }
+    next();
+  })
+  return router;
+}
+
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}

src/service/index.js

@@ -0,0 +1,13 @@
+
+
+export async function getUsernameByUserid(userId) {
+  return userId;
+}
+
+export async function getUserDetailInfoByUserid(userId) {
+  return {
+    name: userId,
+    avatar: '',
+    userId: userId
+  };
+}

src/store/index.js

@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+function createStore() {
+  return new Vuex.Store({
+    state: {
+      isLogin: false,
+      loginUserInfo: null,
+      // trtc 相关
+      callStatus: '', // 状态, idle, calling, connected
+      isInviter: false, // c2c 通话，说不定一开始不是 inviter, 后面邀请了别人就是 inviter 了
+      isAccepted: false,
+      meetingUserIdList: [],
+      muteVideoUserIdList: [],
+      muteAudioUserIdList: [],
+      veteMemberId: '',
+    },
+    mutations: {
+      setVeteMemberId(state, veteMemberId) {
+        state.veteMemberId = veteMemberId
+      },
+      userLoginSuccess(state) {
+        state.isLogin = true;
+      },
+      userLogoutSuccess(state) {
+        state.isLogin = false;
+        state.loginUserInfo = null;
+      },
+      setLoginUserInfo(state, payload) {
+        const { userId, userSig } = payload;
+        state.loginUserInfo = {
+          userId, userSig
+        }
+      },
+      updateIsInviter(state, isInviter) {
+        state.isInviter = isInviter;
+      },
+      updateCallStatus(state, callStatus) {
+        state.callStatus = callStatus;
+      },
+      userJoinMeeting(state, userId) {
+        if (state.meetingUserIdList.indexOf(userId) === -1) {
+          state.meetingUserIdList.push(userId);
+        }
+      },
+      userAccepted(state, isAccepted) {
+        state.isAccepted = isAccepted;
+      },
+      userLeaveMeeting(state, userId) {
+        const index = state.meetingUserIdList.findIndex(item => item === userId);
+        if (index >= 0) {
+          state.meetingUserIdList.splice(index, 1);
+        }
+      },
+      dissolveMeeting(state) {
+        state.meetingUserIdList = [];
+        state.isMuteVideoUserIdList = [];
+        state.isMuteAudioUserIdList = [];
+      },
+      updateMuteVideoUserIdList(state, userIdList) {
+        state.muteVideoUserIdList = userIdList;
+      },
+      updateMuteAudioUserIdList(state, userIdList) {
+        state.muteAudioUserIdList = userIdList;
+      }
+    }
+  });
+}
+
+const store = createStore();
+export default store;

src/trtc-calling/index.js

@@ -0,0 +1,8 @@
+import TRTCCalling from 'trtc-calling-js';
+import config from '../config';
+
+export function createTrtcCalling() {
+  return new TRTCCalling({
+    SDKAppID: config.SDKAppID
+  });
+}

src/utils/index.js

@@ -0,0 +1,47 @@
+const LOG_PREFIX = 'trtc-callling-webrtc-demo:';
+
+export function isValidatePhoneNum(phoneNum) {
+  const reg = new RegExp('^1[0-9]{10}$', 'gi');
+  return phoneNum.match(reg);
+}
+
+export function isUserNameValid(username) {
+  return username && username.length <= 20;
+}
+
+export function setUserLoginInfo({token, phoneNum}) {
+  localStorage.setItem('userInfo', JSON.stringify({token, phoneNum}));
+}
+
+export function addToSearchHistory(searchUser) {
+  const MAX_HISTORY_NUM = 3;
+  let searchUserList = getSearchHistory();
+  const found = searchUserList.find(user => user.userId === searchUser.userId);
+  if (!found) {
+    searchUserList.push(searchUser);
+  }
+  if (searchUserList.length > MAX_HISTORY_NUM) {
+    searchUserList = searchUserList.slice(-MAX_HISTORY_NUM);
+  }
+  localStorage.setItem('searchHistory', JSON.stringify(searchUserList));
+}
+
+export function getSearchHistory() {
+  try {
+    return JSON.parse(localStorage.getItem('searchHistory') || '[]');
+  } catch (e) {
+    return [];
+  }
+}
+
+export function getUserLoginInfo() {
+  try {
+    return JSON.parse(localStorage.getItem('userInfo') || '{}');
+  } catch (e) {
+    return {};
+  }
+}
+
+export function log(content) {
+  console.log(`${LOG_PREFIX} ${content}`)
+}

static/css/style.css

@@ -0,0 +1,112 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+#app{
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin: 0;
+  padding: 0;
+  /* background: rgb(4, 22, 43); */
+  height: 100%;
+    background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
+}
+.el-button.red {
+    background-color: rgb(192, 36, 40);
+    border: 0;
+    color: #fff;
+  }
+  .el-button.red:hover {
+    background-color: rgb(173, 32, 36);
+  }
+  .el-input {
+    /* box-shadow: 0px 0px 10px 0px #0d79f7; */
+    border: 0;
+    border-bottom: 1px solid #fff;
+    
+  }
+  .el-input input {
+    font-size: 20px;
+    letter-spacing:1px;
+    background:transparent;
+    border: 0;
+    color:#fff;
+  }
+  .portrait {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    display: block;
+    margin: 0 auto 10px;
+  }
+  @media screen and (max-width: 767px) {
+    .el-message {
+      min-width: 180px;
+    }
+  }
+
+/* 水波 */
+.page-bottom{
+    position:fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+.page-bottom .content-wrap{
+    background-color: #fff;
+}
+.page-bottom .content{
+    max-width: 1200px;
+    padding:0 24px;
+    margin: 0 auto;
+    padding: 24px 0;
+}
+.waves {
+    position:relative;
+    width: 100%;
+    height:15vh;
+    margin-bottom:-7px; /*Fix for safari gap*/
+    min-height:100px;
+    max-height:150px;
+  }
+
+.parallax > use {
+    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
+  }
+  .parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+  }
+  .parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+  }
+  .parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+  }
+  .parallax > use:nth-child(4) {
+    animation-delay: -5s;
+    animation-duration: 20s;
+  }
+  @keyframes move-forever {
+    0% {
+     transform: translate3d(-90px,0,0);
+    }
+    100% { 
+      transform: translate3d(85px,0,0);
+    }
+  }
+  /*Shrinking for mobile*/
+  @media (max-width: 768px) {
+    .waves {
+      height:40px;
+      min-height:40px;
+    }
+
+  }

vue.config.js

@@ -0,0 +1,4 @@
+// vue.config.js
+module.exports = {
+  publicPath: './'
+}