add i18n

.env.dev

+projectId=1001
+
+newProjectId=6800243768751554560
+
+baseURL=https://project-api.ezijing.com
+
+loginURL=https://login.ezijing.com/auth
\ No newline at end of file

components/Head.vue

@@ -14,6 +14,9 @@
           <div class="login"><a :href="loginURL">快速登录</a></div>
           <div class="register"><a :href="registerURL">注册</a></div>
         </div>
+        <div class="language">
+          <span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span>
+        </div>
       </div>
     </div>
     <div class="head-nav-content max-width-content">
@@ -38,6 +41,11 @@ export default {
       this.$store.dispatch('logout').then(() => {
         this.$router.replace('/')
       })
+    },
+    switchLocale(locale) {
+      this.$i18n.locale = locale
+      this.$cookies.set('lang', locale)
+      process.client && location.reload()
     }
   },
   computed: {
@@ -45,14 +53,16 @@ export default {
       return this.$store.state.user || {}
     },
     loginURL() {
-      return `${process.env.loginURL}/login/index?redirect_uri=${encodeURIComponent(
-        location.origin + this.$route.fullPath
-      )}`
+      return process.client
+        ? `${process.env.loginURL}/login/index?redirect_uri=${encodeURIComponent(
+            location.origin + this.$route.fullPath
+          )}`
+        : ''
     },
     registerURL() {
-      return `${process.env.loginURL}/register?redirect_uri=${encodeURIComponent(
-        location.origin + this.$route.fullPath
-      )}`
+      return process.client
+        ? `${process.env.loginURL}/register?redirect_uri=${encodeURIComponent(location.origin + this.$route.fullPath)}`
+        : ''
     }
   }
 }
@@ -86,9 +96,9 @@ li {
       }
       .user {
         margin-left: auto;
-        font-size: 18px;
+        font-size: 14px;
         em {
-          font-size: 16px;
+          font-size: 14px;
           font-style: normal;
           padding: 0 14px;
         }
@@ -119,6 +129,12 @@ li {
           border: 1px solid #eaeaea;
         }
       }
+      .language {
+        margin-left: 24px;
+        font-size: 14px;
+        color: #333;
+        cursor: pointer;
+      }
     }
   }
   .max-width-content {

components/home/banner.vue

@@ -39,7 +39,7 @@ export default {
     }
   },
   async fetch() {
-    const params = { project_id: process.env.projectId, type_tag: 'ad_banner' }
+    const params = { project_id: process.env.newProjectId, type_tag: 'ad_banner' }
     this.listData = await this.$axios.get('/api/cms/api/v1/advertisements', { params }).then(res => res.data.data)
   },
   computed: {

components/home/news.vue

@@ -3,7 +3,7 @@
     <m-title :data="titleParams" />
     <div class="content-box" v-if="Object.keys(listData.first).length">
       <div class="news-left">
-        <app-link :item="{ news: {  data: listData.first, path: '/news/hot' } }">
+        <app-link :item="{ news: { data: listData.first, path: '/news/hot' } }">
           <img :src="listData.first.web_img_uri" alt="" />
           <div class="mantle-box">
             <div class="tit">{{ listData.first.title }}</div>
@@ -33,7 +33,7 @@ export default {
     AppLink
   },
   async fetch() {
-    const params = { project_id: process.env.projectId, type_tag: 'article_news_hot', page: 1, limit: 4 }
+    const params = { project_id: process.env.newProjectId, type_tag: 'article_news_hot', page: 1, limit: 4 }
     await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
       this.data = res.data.data || []
     })

components/home/openClass.vue

@@ -52,7 +52,7 @@ export default {
     }
   },
   async fetch() {
-    const params = { project_id: process.env.projectId, type_tag: 'article_publish_class' }
+    const params = { project_id: process.env.newProjectId, type_tag: 'article_publish_class' }
     this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
   },
   computed: {

components/home/presence.vue

@@ -99,7 +99,7 @@ export default {
         name: '',
         phone: '',
         // channel: 19960,
-        project_id: process.env.projectId
+        project_id: process.env.newProjectId
       },
       value: '',
       titleParams: {
@@ -125,7 +125,7 @@ export default {
     }
   },
   async fetch() {
-    const params = { project_id: process.env.projectId, type_tag: 'kelley_alumni_share' }
+    const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
     this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
   },
   computed: {

components/recommend.vue

@@ -7,12 +7,14 @@
       </div>
       <ul class="list-box">
         <li v-for="(item, index) in listData" :key="index">
-          <app-link :item="{
-            news: {
-              data: item,
-              path: '/news/hot'
-            }
-          }">
+          <app-link
+            :item="{
+              news: {
+                data: item,
+                path: '/news/hot'
+              }
+            }"
+          >
             <img :src="item.web_img_uri" alt="" />
             <div class="dec">{{ item.title }}</div>
           </app-link>
@@ -36,7 +38,7 @@ export default {
   },
   async fetch() {
     const params = {
-      project_id: process.env.projectId,
+      project_id: process.env.newProjectId,
       type_tag: 'article_news_hot',
       is_recommend: 1,
       page: 1,

components/rightAside.vue

@@ -21,18 +21,24 @@
       enter-active-class="animated tada"
       leave-active-class="animated bounceOutRight"
     >
-      <div id="show-enroll" v-show="tabBtnActive" class="tab_cont" @mouseover="handleMsOver('')" @mouseout="handleMsOut">
+      <div
+        id="show-enroll"
+        v-show="tabBtnActive"
+        class="tab_cont"
+        @mouseover="handleMsOver('')"
+        @mouseout="handleMsOut"
+      >
         <div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
           <h5>报名咨询</h5>
           <p><el-input v-model="formInfo.name" placeholder="请输入您的姓名" size="small"></el-input></p>
           <p><el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input></p>
           <!-- <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p> -->
           <p>
-            <select name="" id="" v-model="formInfo.projectId" disabled>
+            <select name="" id="" v-model="formInfo.newProjectId" disabled>
               <option :value="item.value" v-for="(item, index) in projectList" :key="index">{{ item.label }}</option>
             </select>
             <span class="icon el-icon-arrow-down"></span>
-            <!-- <el-select v-model="formInfo.projectId" placeholder="请选择" size="small">
+            <!-- <el-select v-model="formInfo.newProjectId" placeholder="请选择" size="small">
               <el-option
                 v-for="item in projectList"
                 :key="item.value"
@@ -42,7 +48,10 @@
             </el-select> -->
           </p>
           <p class="sendcode">
-            <el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">获取验证码</el-button>
+            <el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input
+            ><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode"
+              >获取验证码</el-button
+            >
           </p>
           <p><el-button style="width: 100%" @click="submitEnroll">立即报名</el-button></p>
         </div>
@@ -68,15 +77,15 @@ export default {
       formInfo: {
         name: '',
         phone: '',
-        projectId: '1001'
+        newProjectId: '1001'
       },
       projectList: [
-        {label:'金融工商管理硕士', value: '1000'},
-        {label:'酒店及旅游业工商管理硕士', value: '1008'},
-        {label:'金融硕士', value: '1001'},
-        {label:'应用心理学硕士', value: '1006'},
-        {label:'教育学硕士', value: '1005'},
-        {label:'中国未来金融领袖计划', value: '1007'},
+        { label: '金融工商管理硕士', value: '1000' },
+        { label: '酒店及旅游业工商管理硕士', value: '1008' },
+        { label: '金融硕士', value: '1001' },
+        { label: '应用心理学硕士', value: '1006' },
+        { label: '教育学硕士', value: '1005' },
+        { label: '中国未来金融领袖计划', value: '1007' }
       ]
     }
   },
@@ -122,26 +131,25 @@ export default {
     enrollQuery() {
       const params = {
         channel: 19960,
-        project_id: this.formInfo.projectId,
+        project_id: this.formInfo.newProjectId,
         name: this.formInfo.name,
         phone: this.formInfo.phone
       }
       return new Promise((resolve, reject) => {
-        postNes(params)
-          .then(res => {
-            if (res && res.status === 200 && res.error === 0) {
-              resolve({
-                type: 'enroll',
-                state: 'success'
-              })
-            } else {
-              reject({
-                type: 'enroll',
-                state: 'fail',
-                msg: res.message || '报名提交失败'
-              })
-            }
-          })
+        postNes(params).then(res => {
+          if (res && res.status === 200 && res.error === 0) {
+            resolve({
+              type: 'enroll',
+              state: 'success'
+            })
+          } else {
+            reject({
+              type: 'enroll',
+              state: 'fail',
+              msg: res.message || '报名提交失败'
+            })
+          }
+        })
       })
     },
     getSendCode() {
@@ -166,7 +174,7 @@ export default {
     checkSendcode() {
       const checkCodeParam = {
         account: this.formInfo.phone,
-        code:this.sendCode
+        code: this.sendCode
       }
       return new Promise((resolve, reject) => {
         checkCode(checkCodeParam).then(res => {
@@ -195,7 +203,7 @@ export default {
         if (count < 1) {
           clearInterval(timer)
           this.isBtnDisabled = false
-          document.querySelector('#checkedCode').innerHTML  = '获取验证码'
+          document.querySelector('#checkedCode').innerHTML = '获取验证码'
         } else {
           document.querySelector('#checkedCode').innerHTML = count + '秒后重发'
         }
@@ -210,7 +218,7 @@ export default {
   top: 50%;
   right: 10px;
   z-index: 2000;
-  transform:translateY(-50%);
+  transform: translateY(-50%);
   .tab_btns {
     width: 100px;
     // height: 136px;
@@ -289,10 +297,10 @@ export default {
           line-height: 44px;
           height: 44px;
         }
-        ::v-deep.el-select{
+        ::v-deep.el-select {
           width: 100%;
         }
-        select{
+        select {
           width: 100%;
           height: 44px;
           border-radius: 5px;
@@ -304,11 +312,11 @@ export default {
           color: #606266;
           padding: 0 12px;
           box-sizing: border-box;
-          appearance:none;
-          -moz-appearance:none;
-          -webkit-appearance:none;
+          appearance: none;
+          -moz-appearance: none;
+          -webkit-appearance: none;
         }
-        .icon{
+        .icon {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
@@ -317,8 +325,8 @@ export default {
         }
         ::v-deep.el-button {
           background-color: #ff8e1a;
-          border:#ff8e1a 1px solid;
-          color:rgba(255,255,255,.9);
+          border: #ff8e1a 1px solid;
+          color: rgba(255, 255, 255, 0.9);
         }
       }
       .sendcode {
@@ -333,7 +341,7 @@ export default {
           padding: 12px 0;
           text-align: center;
         }
-        ::v-deep.is-disabled{
+        ::v-deep.is-disabled {
           color: #c0c4cc;
           cursor: not-allowed;
           background-image: none;

langs/en-US.js

+export default {
+  menu: {
+    about: 'About'
+  }
+}

langs/zh-CN.js

+export default {
+  menu: {
+    about: '关于紫荆'
+  }
+}

middleware/device.js

+export default function(context) {
+  const UA = process.server ? context.req.headers['user-agent'] : navigator.userAgent
+  const isMobile = /iphone/i.test(UA) || (/android/i.test(UA) && /mobile/i.test(UA))
+  isMobile && context.redirect('https://h5.ezijing.com/')
+}

middleware/i18n.js

+export default function({ app }) {
+  const defaultLocale = app.i18n.fallbackLocale
+  const locale = app.$cookies.get('lang') || defaultLocale
+  app.i18n.locale = locale
+}

nuxt.config.js

@@ -2,23 +2,11 @@ import path from 'path'
 import fs from 'fs'
 import routes from './router/routes'
 
-let config = {}
-if (process.env.NODE_ENV === 'production') {
-  config = {
-    env: {
-      projectId: '6800243768751554560',
-      baseURL: 'https://project-api.ezijing.com',
-      loginURL: 'https://login.ezijing.com/auth'
-    },
-    server: { port: 2048, host: '0.0.0.0' }
-  }
-} else {
-  config = {
-    env: {
-      projectId: '6800243768751554560',
-      baseURL: 'https://project-api.ezijing.com',
-      loginURL: 'https://login.ezijing.com/auth'
-    },
+export default {
+  ssr: false,
+  env: process.env,
+  server: { port: 2048, host: '0.0.0.0' },
+  ...(process.env.NODE_ENV === 'development' && {
     server: {
       host: 'dev.ezijing.com',
       https: {
@@ -26,12 +14,7 @@ if (process.env.NODE_ENV === 'production') {
         cert: fs.readFileSync(path.resolve(__dirname, 'dev.ezijing.com.pem'))
       }
     }
-  }
-}
-
-export default {
-  ...config,
-  ssr: false,
+  }),
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     title: '紫荆教育-在线MBA课程-MBA在线课程-专业金融在线教育品牌',
@@ -66,6 +49,7 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
+    '@/plugins/i18n',
     '@/plugins/router',
     '@/plugins/axios',
     '@/plugins/element-ui',
@@ -83,13 +67,14 @@ export default {
   buildModules: [],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [],
+  modules: ['cookie-universal-nuxt'],
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
     transpile: [/^element-ui/]
   },
   router: {
-    extendRoutes: routes
+    extendRoutes: routes,
+    middleware: ['device', 'i18n']
   }
 }

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "nuxt --open",
+    "dev": "nuxt --open --dotenv .env.dev",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate"
@@ -11,6 +11,7 @@
   "dependencies": {
     "@ezijing/vue-form": "^2.2.1",
     "axios": "^0.21.1",
+    "cookie-universal-nuxt": "^2.1.4",
     "core-js": "^3.9.1",
     "driver.js": "^0.9.8",
     "element-ui": "^2.15.1",
@@ -19,7 +20,8 @@
     "qs": "^6.10.1",
     "swiper": "^5.4.5",
     "viewerjs": "^1.9.0",
-    "vue-awesome-swiper": "^4.1.1"
+    "vue-awesome-swiper": "^4.1.1",
+    "vue-i18n": "^8.24.4"
   },
   "devDependencies": {
     "sass": "^1.32.11",

pages/alumni/sharing/index.vue

@@ -15,7 +15,7 @@ export default {
     newsItem
   },
   async fetch() {
-    const params = { project_id: process.env.projectId, type_tag: 'kelley_alumni_share' }
+    const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
     this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
   },
   data() {

pages/news/hot/index.vue

@@ -15,7 +15,7 @@ export default {
     newsItem
   },
   async fetch() {
-    const params = { project_id: process.env.projectId, type_tag: this.$route.query.type || 'article_news_hot' }
+    const params = { project_id: process.env.newProjectId, type_tag: this.$route.query.type || 'article_news_hot' }
     this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
   },
   data() {

pages/news/interview/index.vue

@@ -16,7 +16,7 @@ export default {
     newsItem
   },
   async fetch() {
-    const params = { project_id: process.env.projectId, type_tag: 'kelley_interview' }
+    const params = { project_id: process.env.newProjectId, type_tag: 'kelley_interview' }
     this.newsList = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
   },
   data() {

plugins/i18n.js

+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import zhCN from '@/langs/zh-CN'
+import enUS from '@/langs/en-US'
+
+Vue.use(VueI18n)
+
+export default ({ app, store }) => {
+  app.i18n = new VueI18n({
+    locale: store.state.locale,
+    fallbackLocale: 'zh-CN',
+    messages: { 'zh-CN': zhCN, 'en-US': enUS }
+  })
+}

utils/httpRequest.js

@@ -14,29 +14,31 @@ const httpRequest = axios.create({
 // 请求拦截
 httpRequest.interceptors.request.use(
   function(config) {
-    const defaultParams = {
-      timestamp: parseInt(Date.now() / 1000),
-      nonce: Math.random()
-        .toString(36)
-        .slice(-8)
-    }
-    // 接口请求参数
-    let params = config.params || config.data
-    // 排序
-    function alphabeticalSort(a, b) {
-      return a.localeCompare(b)
-    }
-    params = Object.assign({}, defaultParams, params)
-    const str = qs.stringify(Object.assign({}, params, { salt: 'n7xAav2tSjn9Ysnr' }), { sort: alphabeticalSort })
-    const strs = qs.parse(str)
-    Object.keys(strs).map(item => {
-      strs[item] = Array.isArray(strs[item]) ? JSON.stringify(strs[item]) : strs[item]
-    })
-    params.signature = 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d'
-    if (config.method === 'post') {
-      config.data = params
-    } else {
-      config.params = params
+    if (config.url.includes('/api/cms')) {
+      const defaultParams = {
+        timestamp: parseInt(Date.now() / 1000),
+        nonce: Math.random()
+          .toString(36)
+          .slice(-8)
+      }
+      // 接口请求参数
+      let params = config.params || config.data
+      // 排序
+      function alphabeticalSort(a, b) {
+        return a.localeCompare(b)
+      }
+      params = Object.assign({}, defaultParams, params)
+      const str = qs.stringify(Object.assign({}, params, { salt: 'n7xAav2tSjn9Ysnr' }), { sort: alphabeticalSort })
+      const strs = qs.parse(str)
+      Object.keys(strs).map(item => {
+        strs[item] = Array.isArray(strs[item]) ? JSON.stringify(strs[item]) : strs[item]
+      })
+      params.signature = 'UG7wBenexQhiuD2wpCwuxkU0jqcj006d'
+      if (config.method === 'post') {
+        config.data = params
+      } else {
+        config.params = params
+      }
     }
     // if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
     //   config.data = qs.stringify(config.data)