第一次提交

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tencentcloud/call-uikit-vue2.6": "^3.3.9",
+    "@vue/composition-api": "^1.7.2",
     "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
     "register-service-worker": "^1.7.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
@@ -31,6 +34,7 @@
     "prettier": "^2.4.1",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
+    "unplugin-vue2-script-setup": "^0.11.4",
     "vue-template-compiler": "^2.6.14"
   },
   "gitHooks": {

src/App.vue

@@ -1,32 +1,12 @@
 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
     <router-view />
   </div>
 </template>
 
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+  padding: 0;
+  margin: 0;
 }
 </style>

src/debug/GenerateTestUserSig-es.js

@@ -0,0 +1,26 @@
+import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min.js";
+
+let SDKAPPID = 0;
+
+let SECRETKEY = "";
+
+/**
+ * Expiration time for the signature, it is recommended not to set it too short.
+ * Time unit: seconds
+ * Default time: 7 x 24 x 60 x 60 = 604800 = 7 days
+ */
+const EXPIRETIME = 604800;
+
+export function genTestUserSig({ userID, SDKAppID, SecretKey }) {
+  if (SDKAppID) SDKAPPID = SDKAppID;
+  if (SecretKey) SECRETKEY = SecretKey;
+  const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
+  const userSig = generator.genTestUserSig(userID);
+
+  return {
+    SDKAppID: SDKAPPID,
+    userSig,
+  };
+}
+
+export default genTestUserSig;

src/main.js

@@ -3,8 +3,13 @@ import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
 import store from "./store";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import VueCompositionAPI from "@vue/composition-api";
+Vue.use(VueCompositionAPI);
 
 Vue.config.productionTip = false;
+Vue.use(ElementUI);
 
 new Vue({
   router,

src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import HomeView from "../views/HomeView.vue";
+import AboutView from "@/views/AboutView.vue";
+import TelView from "@/views/TelView.vue";
 
 Vue.use(VueRouter);
 
@@ -16,8 +18,15 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+    component: AboutView,
+  },
+  {
+    path: "/tel",
+    name: "tel",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: TelView,
   },
 ];
 

src/views/AboutView.vue

@@ -1,5 +1,39 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <div>
+      <el-button @click="toLink">返回</el-button>
+      <div>{{ this.$route.query.name }}</div>
+    </div>
+    <img src="/img/流程.png" alt="图片" style="width: 100vw; height: 90vh" />
+    <el-button type="primary" style="float: right" @click="toLink2"
+      >语音通话</el-button
+    >
   </div>
 </template>
+
+<script>
+export default {
+  name: "AboutView",
+  data() {
+    return {
+      routeParams: {},
+    };
+  },
+  created() {
+    console.log();
+    this.routeParams = this.$route.params;
+  },
+  methods: {
+    toLink() {
+      this.$router.push({ path: "/" });
+    },
+    toLink2() {
+      this.$router.push({ path: "/tel" });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 添加自定义样式 */
+</style>

src/views/HomeView.vue

@@ -1,18 +1,261 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+  <div class="portal-container">
+    <el-row class="full-height" :gutter="20">
+      <el-col :span="12" class="full-height">
+        <el-card class="service-guide full-height">
+          <div class="guide-header">
+            <i class="el-icon-guide"></i>
+            办事指南
+            <span class="all-text">全部>></span>
+          </div>
+          <el-menu class="guide-menu">
+            <el-menu-item index="1" @click="toLink('企业登记服务')">
+              <i class="el-icon-office-building" style="font-size: 3vh"></i>
+              <span style="font-size: 3vh"> 企业登记服务</span>
+              <span style="float: right; font-size: 3vh">{{ ">" }}</span>
+            </el-menu-item>
+            <el-menu-item index="2" @click="toLink('人才政策申报')">
+              <i class="el-icon-document" style="font-size: 3vh"></i>
+              <span style="font-size: 3vh"> 人才政策申报</span>
+              <span style="float: right; font-size: 3vh">{{ ">" }}</span>
+            </el-menu-item>
+            <el-menu-item index="3" @click="toLink('技术合同登记')">
+              <i class="el-icon-document-checked" style="font-size: 3vh"></i>
+              <span style="font-size: 3vh"> 技术合同登记</span>
+              <span style="float: right; font-size: 3vh">{{ ">" }}</span>
+            </el-menu-item>
+            <el-menu-item index="4" @click="toLink('大学生入社申请')">
+              <i class="el-icon-reading" style="font-size: 3vh"></i>
+              <span style="font-size: 3vh"> 大学生入社申请</span>
+              <span style="float: right; font-size: 3vh">{{ ">" }}</span>
+            </el-menu-item>
+            <el-menu-item index="5" @click="toLink('企业档案阅取申请')">
+              <i class="el-icon-folder" style="font-size: 3vh"></i>
+              <span style="font-size: 3vh"> 企业档案阅取申请</span>
+              <span style="float: right; font-size: 3vh">{{ ">" }}</span>
+            </el-menu-item>
+          </el-menu>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="full-height">
+        <el-row :gutter="20" class="right-cards">
+          <el-col :span="24" class="card-wrapper" :style="{ height: '25vh' }">
+            <el-card class="orange-card full-height">
+              <div class="card-content">
+                <i class="el-icon-check"></i>
+                会议预定
+              </div>
+            </el-card>
+          </el-col>
+
+          <el-col
+            :span="12"
+            class="card-wrapper"
+            :style="{ height: '65vh', marginTop: '2vh' }"
+          >
+            <el-card class="green-card full-height">
+              <div class="card-content">
+                <div class="info-header" style="font-size: 4vh">
+                  <i class="el-icon-bell" style="font-size: 8vh"></i>
+                  信息公开
+                </div>
+                <el-divider />
+                <div class="info-items">
+                  <div class="info-item" style="font-size: 3vh">
+                    <i class="el-icon-document" style="font-size: 5vh"></i>
+                    通知公告
+                  </div>
+                  <el-divider />
+                  <div class="info-item" style="font-size: 3vh">
+                    <i class="el-icon-news" style="font-size: 5vh"></i>
+                    政策查询
+                  </div>
+                  <el-divider />
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+
+          <el-col
+            :span="12"
+            class="card-wrapper"
+            :style="{ height: '65vh', marginTop: '2vh' }"
+          >
+            <div class="stacked-cards full-height">
+              <el-card class="blue-card">
+                <div class="card-content">
+                  <i class="el-icon-location" style="font-size: 8vh"></i>
+                  园区导览
+                </div>
+              </el-card>
+              <el-card class="orange-card" :style="{ marginTop: '2vh' }">
+                <div class="card-content">
+                  <i class="el-icon-service" style="font-size: 8vh"></i>
+                  语音咨询
+                </div>
+              </el-card>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
 export default {
-  name: "HomeView",
-  components: {
-    HelloWorld,
+  name: "ServicePortal",
+  methods: {
+    toLink(name) {
+      this.$router.push({ path: "/about", query: { name: name } });
+    },
   },
 };
 </script>
+
+<style scoped>
+i {
+  font-size: 5vh;
+}
+.portal-container {
+  width: 100vw;
+  height: 100vh;
+  background-color: #f5f7fa;
+  padding: 2vh 2vw;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.full-height {
+  height: 90%;
+}
+
+.service-guide {
+  background-color: #409eff;
+  color: white;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.guide-header {
+  font-size: 3vh;
+  padding: 2vh;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  gap: 1vw;
+}
+
+.all-text {
+  margin-left: auto;
+  font-size: 3vh;
+}
+
+.guide-menu {
+  border: none;
+  background-color: transparent;
+  flex: 1;
+}
+
+.el-menu-item {
+  color: white;
+  height: 7vh;
+  line-height: 7vh;
+  font-size: 1.8vh;
+}
+
+.right-cards {
+  height: 90vh;
+}
+
+.card-wrapper {
+  padding-bottom: 2vh;
+}
+
+.card-content {
+  margin-top: 5vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1vw;
+  font-size: 5vh;
+  height: 100%;
+  justify-content: center;
+}
+
+.stacked-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 2vh;
+}
+
+.stacked-cards .el-card {
+  height: calc(50% - 1vh);
+}
+
+.orange-card {
+  background-color: #f7ba2a;
+  color: white;
+  height: 100%;
+}
+
+.green-card {
+  background-color: #67c23a;
+  color: white;
+  height: 100%;
+}
+
+.blue-card {
+  background-color: #409eff;
+  color: white;
+  height: 100%;
+}
+
+.info-header {
+  margin-bottom: 2vh;
+  font-size: 1.8vh;
+  display: flex;
+  align-items: center;
+  gap: 1vw;
+}
+
+.info-items {
+  padding-left: 1vw;
+}
+
+.info-item {
+  margin: 2vh 0;
+  display: flex;
+  align-items: center;
+  gap: 1vw;
+  font-size: 1.6vh;
+}
+
+/* Override Element UI default styles */
+.el-card {
+  border: none;
+  border-radius: 8px;
+}
+
+.el-menu {
+  background-color: transparent;
+}
+
+.el-menu-item i {
+  color: white;
+}
+
+/* Remove default padding from el-card */
+.el-card__body {
+  height: 100%;
+  padding: 2vh 2vw;
+}
+
+/* Fix for row gutter */
+.el-row {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+</style>

src/views/TelView.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <el-button @click="back">返回</el-button>
+    <div style="height: 20px"></div>
+    <div>
+      <el-row>
+        <el-col :span="2">
+          <div>请输入用户名以登录</div>
+        </el-col>
+        <el-col :span="8">
+          <el-input type="text" v-model="callerUserID" />
+        </el-col>
+        <el-col :span="2">
+          <el-button @click="init">登录</el-button>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="2">
+          <div>请输入呼叫的用户名</div>
+        </el-col>
+        <el-col :span="8">
+          <el-input type="text" v-model="calleeUserID" />
+        </el-col>
+        <el-col :span="2">
+          <el-button @click="call">呼叫</el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <TUICallKit style="width: 650px; height: 500px" />
+  </div>
+</template>
+<script>
+import {
+  TUICallKit,
+  TUICallKitServer,
+  TUICallType,
+} from "@tencentcloud/call-uikit-vue2.6";
+import * as GenerateTestUserSig from "@/debug/GenerateTestUserSig-es";
+
+export default {
+  methods: {
+    back() {
+      this.$router.go(-1);
+    },
+    async init() {
+      try {
+        const { userSig } = GenerateTestUserSig.genTestUserSig({
+          userID: this.callerUserID,
+          SDKAppID: Number(this.SDKAppID),
+          SecretKey: this.SecretKey,
+        });
+        await TUICallKitServer.init({
+          SDKAppID: Number(this.SDKAppID),
+          userID: this.callerUserID,
+          userSig,
+          // tim: this.tim     // 如果工程中已有 tim 实例，需在此处传入
+        });
+        alert("登录成功");
+      } catch (error) {
+        alert(`登录失败${error}`);
+      }
+    },
+    async call() {
+      await TUICallKitServer.call({
+        userID: this.calleeUserID,
+        type: TUICallType.VIDEO_CALL,
+      });
+    },
+  },
+  data() {
+    return {
+      callerUserID: "",
+      calleeUserID: "",
+      SDKAppID: 1600070519, // TODO: Replace with your SDKAppID
+      SecretKey:
+        "c3100b8b932a1ffed2e2ab8172db85e5f8ed2577a015747b333759a1117af4df", // TODO: Replace with your SecretKey
+    };
+  },
+  components: {
+    // eslint-disable-next-line vue/no-unused-components
+    TUICallKit,
+  },
+};
+</script>