1. 添加了 i18n 国际化

2. 调整 axios baseURL
3. 添加直播页面

.env

@@ -0,0 +1,5 @@
+# file serve
+VUE_APP_FILE_SERVE = '/GCLSFileServer/ServiceInterface'
+
+# WebSI
+VUE_APP_WEB_SI = '/GCLSLearnWebSI/ServiceInterface'

.env.staging

@@ -4,4 +4,4 @@ NODE_ENV = production
 ENV = 'staging'
 
 # base api
-VUE_APP_BASE_API = ''
+VUE_APP_BASE_API = '/api'

package-lock.json

@@ -16943,6 +16943,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.24.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.24.0.tgz",
+      "integrity": "sha512-tRVmPN36Dv+fLeZW5AzoNsZwjV2y2+UdHROaTewUgSG2YLjOj4dFmai4T5PPZtIdRnDnUdwbAwdufCG6fPSegA=="
+    },
     "vue-jest": {
       "version": "3.0.7",
       "resolved": "https://registry.npm.taobao.org/vue-jest/download/vue-jest-3.0.7.tgz?cache=0&sync_timestamp=1615007403148&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-jest%2Fdownload%2Fvue-jest-3.0.7.tgz",

package.json

@@ -18,6 +18,7 @@
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "vue": "^2.6.12",
+    "vue-i18n": "^8.24.0",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

public/index.html

@@ -12,6 +12,6 @@
       <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>
-    <script src="https://class.csslcloud.net/static/dist/js/websdk_4.0.js"></script>
+    <!-- <script src="https://class.csslcloud.net/static/dist/js/websdk_4.0.js"></script> -->
   </body>
 </html>

src/api/app.js

@@ -0,0 +1,39 @@
+import { request, getRequestParameter } from '@/utils/request';
+import qs from 'qs';
+
+/**
+ * @description 得到语言列表
+ */
+export function GetLanguageList() {
+  let params = getRequestParameter('language_manager-GetLanguageList');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_FILE_SERVE,
+    params
+  });
+}
+
+/**
+ * @description 获取词汇包
+ * @param { object } language_type 语言类型 word_key_list 词汇键值列表
+ */
+export function GetWordPack(Parameter) {
+  let data = {
+    MethodName: 'language_manager-GetWordPack',
+    Parameter: JSON.stringify(Parameter)
+  };
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_FILE_SERVE,
+    data,
+    transformRequest: [
+      function (data) {
+        return qs.stringify(data);
+      }
+    ],
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+    }
+  });
+}

src/api/live.js

@@ -12,6 +12,7 @@ export function createEnterLiveRoomLink(Parameter) {
 
   return request({
     method: 'post',
+    url: process.env.VUE_APP_WEB_SI,
     params
   });
 }

src/api/table.js

@@ -9,6 +9,7 @@ export function getMyCsItemsDateTeacher(Parameter) {
 
   return request({
     method: 'post',
+    url: process.env.VUE_APP_WEB_SI,
     params
   });
 }
@@ -22,6 +23,7 @@ export function getCSItemInfoBox(Parameter) {
 
   return request({
     method: 'post',
+    url: process.env.VUE_APP_WEB_SI,
     params
   });
 }

src/api/user.js

@@ -7,6 +7,7 @@ import { request } from '@/utils/request';
 export function login(Parameter) {
   return request({
     method: 'post',
+    url: process.env.VUE_APP_WEB_SI,
     params: {
       MethodName: 'login_control-Login',
       Parameter: Parameter

src/layouts/components/Header.vue

@@ -5,7 +5,23 @@
         <el-col :span="1">
           <span>logo</span>
         </el-col>
-        <el-col :span="1" :push="22">
+        <el-col :span="2" :push="20">
+          <el-dropdown @command="setI18nLang">
+            <span class="el-dropdown-link">
+              切换语言<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="list in languageList"
+                :key="list.language_type"
+                :command="list.language_type"
+              >
+                {{ list.language_name }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+        <el-col :span="1" :push="20">
           <div class="sign-out" @click="signOut">{{ userType }}退出</div>
         </el-col>
       </el-row>
@@ -14,6 +30,9 @@
 </template>
 
 <script>
+import { GetLanguageList } from '@/api/app';
+import { setI18nLang } from '@/utils/i18n';
+
 export default {
   props: {
     userType: {
@@ -21,10 +40,24 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {
+      languageList: []
+    };
+  },
+  mounted() {
+    const that = this;
+    GetLanguageList().then(function (data) {
+      that.languageList = data.language_list;
+    });
+  },
   methods: {
     async signOut() {
       await this.$store.dispatch('user/signOut');
       this.$router.push(`/login?redirect=${this.$route.fullPath}`);
+    },
+    setI18nLang(lang) {
+      setI18nLang(lang);
     }
   }
 };

src/main.js

@@ -11,6 +11,7 @@ import '@/icons';
 import '@/styles/index.scss'; // global css
 import 'normalize.css/normalize.css';
 
+import { i18n } from '@/utils/i18n';
 import '@/permission'; // 权限控制
 
 Vue.use(ElementUI);
@@ -18,6 +19,7 @@ Vue.use(ElementUI);
 Vue.config.productionTip = false;
 
 new Vue({
+  i18n,
   router,
   store,
   render: h => h(App)

src/router/index.js

@@ -40,6 +40,18 @@ const routes = [
     ]
   },
   {
+    path: '/live',
+    component: Layout,
+    redirect: '/live/teacher',
+    children: [
+      {
+        path: '/live/teacher',
+        name: 'TeacherLive',
+        component: () => import('@/views/live')
+      }
+    ]
+  },
+  {
     path: '*',
     redirect: '/404'
   }

src/store/getters.js

@@ -1,5 +1,5 @@
 const getters = {
-  token: state => state.user.state
+  state: state => state.user.state
 };
 
 export default getters;

src/styles/mixin.scss

@@ -1,4 +1,4 @@
-@mixin contanier {
+@mixin container {
   width: 1000px;
   margin: 0 auto;
   padding: 30px 0 4px;

src/utils/i18n.js

@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import Cookies from 'js-cookie';
+import { GetWordPack } from '@/api/app';
+
+Vue.use(VueI18n);
+
+export const i18n = new VueI18n({
+  locale: Cookies.get('lang') || 'zh',
+  messages: {},
+  silentTranslationWarn: true
+});
+
+export function setI18nLang(lang) {
+  Cookies.set('lang', lang);
+  i18n.locale = lang;
+}
+
+/**
+ * @description 更新语言列表
+ * @param {Object} Parameter word_key_list 需要读取的词汇
+ */
+export function updateLanguageList(Parameter) {
+  Parameter.language_type = i18n.locale;
+
+  GetWordPack(Parameter).then(data => {
+    i18n.setLocaleMessage(data.language_type, data.word_pack);
+  });
+}

src/utils/request.js

@@ -10,7 +10,7 @@ axios.defaults.headers['Content-Type'] = 'application/json';
 axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';
 
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API + '/GCLSLearnWebSI/ServiceInterface',
+  baseURL: process.env.VUE_APP_BASE_API,
   // withCredentials: true, // 跨域请求时发送 cookies
   timeout: 5000
 });
@@ -18,7 +18,7 @@ const service = axios.create({
 // 请求拦截器
 service.interceptors.request.use({});
 
-//响应拦截器
+// 响应拦截器
 service.interceptors.response.use(
   response => {
     const res = response.data;
@@ -60,7 +60,7 @@ service.interceptors.response.use(
  *
  * @returns {Object} 返回必需的请求参数
  * */
-export function getRequestParameter(MethodName, Parameter) {
+export function getRequestParameter(MethodName, Parameter = {}) {
   return {
     MethodName,
     UserCode: store.state.user.user_code,

src/views/404.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="http-404">
     <h1>404</h1>
+    <router-link to="/live">直播</router-link>
   </div>
 </template>
 

src/views/live/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="live-container">
     <div>
       <div class="page-title">直播间</div>
       <div class="title"></div>
@@ -16,23 +16,54 @@ export default {
   name: 'Live',
   data() {
     return {
-      userid: '',
-      roomid: '',
-      sessionid: '',
+      userid: '53A22FC29AD2216D',
+      roomid: 'DCDD385394BFEDEB9C33DC5901307461',
+      sessionid: 'C94A8844123446A560B4B9BAD28543A1C206D3CB38AEB9A330590FFD7863F3D3',
       rtc: null,
-      roomData: null
+      roomData: null,
+      loadedNumber: 0
     };
   },
-  mounted() {
-    common.initSDK({
-      userid: this.userid,
-      roomid: this.roomid,
-      sessionid: this.sessionid
-    });
-    common.initListener(); // 注册监听事件
-    window.rtc = this.rtc;
+  created() {
+    this.downloadWebSDK();
+  },
+  watch: {
+    loadedNumber(newValue) {
+      if (newValue === 2) {
+        this.initSDK();
+      }
+    }
   },
   methods: {
+    downloadWebSDK() {
+      let script = this.createScript('https://class.csslcloud.net/static/dist/js/websdk_4.0.js');
+
+      script.onload = () => {
+        this.loadedNumber = this.loadedNumber + 1;
+        let classMode = this.createScript(
+          'https://class.csslcloud.net/static/dist/js/classMode.js'
+        );
+        classMode.onload = () => {
+          this.loadedNumber = this.loadedNumber + 1;
+        };
+      };
+    },
+    createScript(url) {
+      let script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = url;
+      document.getElementsByTagName('body')[0].appendChild(script);
+      return script;
+    },
+    initSDK() {
+      common.initSDK({
+        userid: this.userid,
+        roomid: this.roomid,
+        sessionid: this.sessionid
+      });
+      common.initListener(); // 注册监听事件
+      window.rtc = this.rtc;
+    },
     startLive() {
       common.startLive(); // 开启直播
     },
@@ -42,15 +73,21 @@ export default {
     createLocalStream() {
       common.createLocalStream(); // 创建本地流
     },
-    publistStream() {
-      common.publistStream(); // 推流
+    publishStream() {
+      common.publishStream(); // 推流
     }
   }
 };
 </script>
 
 <style lang="scss">
-.page-title {
-  font-size: 12px;
+@import '~@/styles/mixin.scss';
+
+.live-container {
+  @include container;
+
+  .page-title {
+    font-size: 12px;
+  }
 }
 </style>

src/views/live/live.js

@@ -87,11 +87,11 @@ export function startLive() {
 }
 
 /**
- * @method endLive
+ * @method stopLive
  * @description 结束直播
  */
-export function endLive() {
-  rtc.endLive({
+export function stopLive() {
+  rtc.stopLive({
     success(data) {
       alert('结束直播成功：' + JSON.stringify(data));
     },

src/views/login/index.vue

@@ -9,7 +9,7 @@
       label-position="left"
     >
       <div class="title-container">
-        <h3 class="title">系统登录</h3>
+        <h3 class="title">{{ $t('login') }}</h3>
       </div>
 
       <el-form-item prop="user_name">
@@ -19,7 +19,7 @@
           ref="user_name"
           name="user_name"
           auto-complete="on"
-          placeholder="用户名"
+          :placeholder="$t('username')"
         />
       </el-form-item>
 
@@ -29,7 +29,7 @@
           v-model="loginForm.password"
           ref="password"
           name="password"
-          placeholder="密码"
+          :placeholder="$t('password')"
           auto-complete="on"
           @keyup.enter.native="handleLogin"
         />
@@ -42,8 +42,9 @@
             type="primary"
             :loading="loading"
             @click.native.prevent="handleLogin('TEACHER')"
-            >教师登录</el-button
           >
+            {{ $t('Learn_TLogin') }}
+          </el-button>
         </el-col>
 
         <el-col :span="12">
@@ -52,8 +53,9 @@
             type="primary"
             :loading="loading"
             @click.native.prevent="handleLogin('STUDENT')"
-            >学员登录</el-button
           >
+            {{ $t('Learn_SLogin') }}
+          </el-button>
         </el-col>
       </el-row>
     </el-form>
@@ -61,18 +63,20 @@
 </template>
 
 <script>
+import { updateLanguageList } from '@/utils/i18n';
+
 export default {
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!value) {
-        callback(new Error('请填写用户名！'));
+        callback(new Error(this.$i18n.tc('Learn_Login_user_warning')));
       } else {
         callback();
       }
     };
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('密码不能少于六位'));
+        callback(new Error(this.$i18n.tc('Learn_Login_password_warning')));
       } else {
         callback();
       }
@@ -99,6 +103,19 @@ export default {
       }
     }
   },
+  created() {
+    updateLanguageList({
+      word_key_list: [
+        'login',
+        'password',
+        'username',
+        'Learn_TLogin',
+        'Learn_SLogin',
+        'Learn_Login_user_warning',
+        'Learn_Login_password_warning'
+      ]
+    });
+  },
   methods: {
     handleLogin(user_type) {
       this.$refs.loginForm.validate(valid => {
@@ -153,7 +170,8 @@ export default {
   }
 
   .login-button {
-    margin: 0 81px;
+    display: block;
+    margin: 0 auto;
   }
 }
 </style>

src/views/teacher/cs_item_detail/index.vue

@@ -98,7 +98,7 @@ export default {
 @import '~@/styles/mixin.scss';
 
 .cs-item-detail-container {
-  @include contanier;
+  @include container;
 
   .cs-item-info {
     width: 100%;
@@ -130,7 +130,7 @@ export default {
   &-tag {
     @include el-tag;
 
-    margin-top: 16px;
+    margin: 16px 12px 0 0;
     height: 40px;
     line-height: 40px;
   }

src/views/teacher/main/index.vue

@@ -54,7 +54,7 @@ export default {
 @import '~@/styles/mixin.scss';
 
 .main-container {
-  @include contanier;
+  @include container;
 
   height: calc(100% - 19px);
 

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
   productionSourceMap: false,
   devServer: {
     port: port,
-    open: true, //默认false   true自动打开网页
+    open: true, // 默认false true自动打开网页
     overlay: {
       warnings: false,
       errors: true