添加手机端中英文切换

2023-06-02 11:46:16 +08:00
parent a4c9487cc3
commit 03c1767e01
6 changed files with 203 additions and 94 deletions
@@ -1839,4 +1839,26 @@ module.exports = {
  toResubmit:'To Resubmit',
  selectDesignConformanceAsConformance:'Select Design Conformance verification process state as Conformance or Verify conformance verification process state as conformance obtained data',
  submissionProcess:'Submission Process',
+
+  //手机端
+  myCollection:'My Collection',
+  recentBrowsing:'Recent Browsing',
+  mySubscription:'My Subscription',
+  languageSwitching:'Language Switching',
+  phoneSearch:'search',
+  taskStatistics:'Task Statistics',
+  mine:'Mine',
+  regulatoryCertificationProcess:'Regulatory certification process',
+  authenticationParameterCollection:'Authentication parameter collection',
+  regulatoryCertificationProcessData:'Regulatory Certification Process Data',
+  regulationListIssuance:'Regulation list issuance',
+  designTheComplianceProcess:'Design the compliance process',
+  verifyComplianceProcess:'Verify compliance process',
+  thePreHomeProcess:'Pre-Home Process',
+  technicalAssessmentOfRegulations:'Technical Assessment Regulations',
+  legalOpinionCollection:'Legal Opinion Collection',
+  authenticationParameterCollectionData:'Authentication parameter collection data',
+  phoneRelatedItems:'Related items',
+  listHeading:'List heading',
+  phoneVersionNumber:'Version number',
 }
@@ -1940,4 +1940,26 @@ module.exports = {
  toResubmit:'重新提交',
  selectDesignConformanceAsConformance:'请选择设计符合性确认流程状态为符合或验证符合性确认流程状态为符合的数据',
  submissionProcess:'提交流程',
+
+  //手机端
+  myCollection:'我的收藏',
+  recentBrowsing:'最近浏览',
+  mySubscription:'我的订阅',
+  languageSwitching:'语言切换',
+  phoneSearch:'搜索',
+  taskStatistics:'任务统计',
+  mine:'我的',
+  regulatoryCertificationProcess:'法规认证流程',
+  authenticationParameterCollection:'认证参数收集',
+  regulatoryCertificationProcessData:'法规认证流程数据',
+  regulationListIssuance:'法规清单发布',
+  designTheComplianceProcess:'设计符合性流程',
+  verifyComplianceProcess:'验证符合性流程',
+  thePreHomeProcess:'Pre-home流程',
+  technicalAssessmentOfRegulations:'法规技术评估',
+  legalOpinionCollection:'法规意见收集',
+  authenticationParameterCollectionData:'认证参数收集数据',
+  phoneRelatedItems:'相关项目',
+  listHeading:'清单标题',
+  phoneVersionNumber:'版本号',
 }
@@ -15,55 +15,71 @@
    <div class="content-box-top" @click="recentBrowsingClick">
      <img src="~@/assets/icon_eye.png" class="content-box-img" alt="">
      <span class="content-box-text">
-          最近浏览
+          {{$t('recentBrowsing')}}
      </span>
      <van-icon class="icon" name="arrow"/>
    </div>
    <div class="content-box" @click="collectionClick">
      <img src="~@/assets/icon_star.png" class="content-box-img" alt="">
      <span class="content-box-text">
-          我的收藏
+          {{$t('myCollection')}}
      </span>
      <van-icon class="icon" name="arrow"/>
    </div>
    <div class="content-box" @click="subscribeClick">
      <img src="~@/assets/icon_link.png" class="content-box-img" alt="">
      <span class="content-box-text">
-          我的订阅
-      </span>
-      <van-icon class="icon" name="arrow"/>
-    </div>
-    <div class="content-box">
-      <img src="~@/assets/icon_assign.png" class="content-box-img" alt="">
-      <span class="content-box-text">
-          退出登录
+          {{$t('mySubscription')}}
      </span>
      <van-icon class="icon" name="arrow"/>
    </div>
+    <!--    <div class="content-box">-->
+    <!--      <img src="~@/assets/icon_assign.png" class="content-box-img" alt="">-->
+    <!--      <span class="content-box-text">-->
+    <!--          退出登录-->
+    <!--      </span>-->
+    <!--      <van-icon class="icon" name="arrow"/>-->
+    <!--    </div>-->
    <div class="content-box">
      <img src="~@/assets/yuyan.png" class="content-box-img" alt="">
      <span class="content-box-text-one">
-          语言切换
+          {{$t('languageSwitching')}}
      </span>
-      <span class="lang">英文</span>
-      <van-switch v-model="checked"/>
+      <span class="lang" v-if="checked">英文</span>
+      <span class="lang" v-else>中文</span>
+      <van-switch @change="checkedChange" :loading="isLoading" v-model="checked"/>
    </div>
    <van-tabbar v-model="active" @change="onChange">
-      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
-      <van-tabbar-item name="toDoCenter" icon="bell">待办中心</van-tabbar-item>
-      <van-tabbar-item name="taskData" icon="underway">任务统计</van-tabbar-item>
-      <van-tabbar-item name="home" icon="manager">我的</van-tabbar-item>
+      <van-tabbar-item name="search" icon="search">{{$t('phoneSearch')}}</van-tabbar-item>
+      <van-tabbar-item name="toDoCenter" icon="bell">{{$t('todocenter')}}</van-tabbar-item>
+      <van-tabbar-item name="taskData" icon="underway">{{$t('taskStatistics')}}</van-tabbar-item>
+      <van-tabbar-item name="home" icon="manager">{{$t('mine')}}</van-tabbar-item>
    </van-tabbar>
  </div>
 </template>

 <script>
+  import Vue from 'vue'
+  import store from '../../store'
+  import router, { resetRouter } from '../../router'
+  import moment from 'moment'
+  import { mapActions, mapGetters, mapState } from 'vuex'
+  import { getFileAccessHttpUrl, getAction } from '@/api/manage'
+  import enUS from 'ant-design-vue/lib/locale/en_US'
+  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+  import { UI_CACHE_DB_DICT_DATA, ACCESS_TOKEN } from '@/store/mutation-types'
+  import { generateIndexRouter } from '@/utils/util'
+
+  moment.locale('zh-cn')
+  const EN = 'en-us'
+  const ZH = 'zh-cn'
  export default {
    name: 'phoneHome',
    data() {
      return {
        active: 'home',
-        checked: false
+        checked: localStorage.getItem('language') == 'en-us' ? true : false,
+        isLoading: false
      }
    },
    methods: {
@@ -96,6 +112,49 @@
        this.$router.push({
          path: '/phoneRecentBrowsing'
        })
+      },
+      checkedChange(value) {
+        if (value) {
+          this.changeLocale('en-us')
+        } else {
+          this.changeLocale('zh-cn')
+        }
+      },
+      changeLocale(localeval) {
+        this.isLoading = true
+        switch (localeval) {
+          case 'zh-cn':
+            localStorage.setItem('language', 'zh-cn')
+            break
+          case 'en-us':
+            localStorage.setItem('language', 'en-us')
+            break
+        }
+        getAction('/sys/dict/queryAllDictItemsByCut', {}).then((res) => {
+          if (res.success) {
+            Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
+            Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
+            store.dispatch('GetPermissionList').then(res => {
+              const menuData = res.result.menu
+              resetRouter()
+              let constRoutes = []
+              constRoutes = generateIndexRouter(menuData)
+              router.addRoutes(constRoutes)
+              this.$root.Bus.$emit('switchLanguage', localeval)
+              this.isLoading = false
+              this.localeval = localeval
+              if (localeval === EN) {
+                moment.locale(EN)
+                this.$i18n.locale = EN
+                this.locale = enUS
+              } else {
+                moment.locale(ZH)
+                this.$i18n.locale = ZH
+                this.locale = zhCN
+              }
+            })
+          }
+        })
      }
    }
  }
@@ -44,10 +44,10 @@
      </div>
    </div>
    <van-tabbar v-model="active" @change="onChange">
-      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
-      <van-tabbar-item name="toDoCenter" icon="bell">待办中心</van-tabbar-item>
-      <van-tabbar-item name="taskData" icon="underway">任务统计</van-tabbar-item>
-      <van-tabbar-item name="home" icon="manager">我的</van-tabbar-item>
+      <van-tabbar-item name="search" icon="search">{{$t('phoneSearch')}}</van-tabbar-item>
+      <van-tabbar-item name="toDoCenter" icon="bell">{{$t('todocenter')}}</van-tabbar-item>
+      <van-tabbar-item name="taskData" icon="underway">{{$t('taskStatistics')}}</van-tabbar-item>
+      <van-tabbar-item name="home" icon="manager">{{$t('mine')}}</van-tabbar-item>
    </van-tabbar>
  </div>
 </template>
@@ -1,20 +1,20 @@
 <template>
  <div class="box">
    <div class="content">
-      <van-tabs v-model="activeTab">
-        <van-tab name="regulatoryCertification" title="法规认证流程"></van-tab>
-        <van-tab name="parametercollection" title="认证参数收集"></van-tab>
+      <van-tabs v-model="activeTab" :ellipsis="false">
+        <van-tab name="regulatoryCertification" :title="$t('regulatoryCertificationProcess')"></van-tab>
+        <van-tab name="parametercollection" :title="$t('authenticationParameterCollection')"></van-tab>
      </van-tabs>
    </div>
    <div class="content-box">
      <div class="regulatory" v-if="activeTab == 'regulatoryCertification'">
        <div class="content-box-text">
-          法规认证流程数据
+          {{$t('regulatoryCertificationProcessData')}}
        </div>
        <div class="regulatory-box">
          <div class="content-box-data">
            <div class="content-box-data-text">
-              法规清单发布dasfkj hdskjf hgkjdhfgdfkjghdfkjgdfhgkdfjghdfkjgdfhgkjdfdhfk
+              {{$t('regulationListIssuance')}}
            </div>
            <div class="content-box-data-num">
              24
@@ -22,7 +22,7 @@
          </div>
          <div class="content-box-data">
            <div class="content-box-data-text">
-              法规清单发布
+              {{$t('designTheComplianceProcess')}}
            </div>
            <div class="content-box-data-num">
              24
@@ -30,7 +30,7 @@
          </div>
          <div class="content-box-data">
            <div class="content-box-data-text">
-              法规清单发布
+              {{$t('verifyComplianceProcess')}}
            </div>
            <div class="content-box-data-num">
              24
@@ -38,7 +38,7 @@
          </div>
          <div class="content-box-data">
            <div class="content-box-data-text">
-              法规清单发布
+              {{$t('thePreHomeProcess')}}
            </div>
            <div class="content-box-data-num">
              24
@@ -46,7 +46,7 @@
          </div>
          <div class="content-box-data">
            <div class="content-box-data-text">
-              法规清单发布
+              {{$t('technicalAssessmentOfRegulations')}}
            </div>
            <div class="content-box-data-num">
              24
@@ -54,7 +54,7 @@
          </div>
          <div class="content-box-data">
            <div class="content-box-data-text">
-              法规清单发布
+              {{$t('legalOpinionCollection')}}
            </div>
            <div class="content-box-data-num">
              24
@@ -65,61 +65,37 @@

      <div class="parameter" v-else-if="activeTab == 'parametercollection'">
        <div class="content-box-text">
-          认证参数收集数据
+          {{$t('authenticationParameterCollectionData')}}
        </div>
-        <div class="parame-box">
+        <div class="parame-box" v-for="item in 4">
          <div class="parame-box-top">
-            <span class="parame-box-top-text-left">相关项目：</span>
-            <span class="parame-box-top-text-right">Orion-G1.1-英国-00</span>
+            <span class="parame-box-top-text-left"
+                  :class="{'parame-box-top-text-left-one':language == 'en-us'? true : false}">
+              {{$t('phoneRelatedItems')}}：</span>
+            <span class="parame-box-top-text-right"
+                  :class="{'parame-box-top-text-right-one':language == 'en-us'? true : false}">
+              Orion-G1.1-英国-00撒旦发射点
+            </span>
          </div>
          <div class="parame-box-top">
-            <span class="parame-box-top-text-left">清单标题：</span>
-            <span class="parame-box-top-text-right">认证参数收集模板</span>
+            <span class="parame-box-top-text-left"
+                  :class="{'parame-box-top-text-left-one':language == 'en-us'? true : false}">
+              {{$t('listHeading')}}：
+            </span>
+            <span class="parame-box-top-text-right"
+                  :class="{'parame-box-top-text-right-one':language == 'en-us'? true : false}">
+              认证参数收集模板
+            </span>
          </div>
          <div class="parame-box-top">
-            <span class="parame-box-top-text-left">版本号：</span>
-            <span class="parame-box-top-text-right">03</span>
-          </div>
-          <div class="parame-box-bottom">
-            <div class="parame-box-bottom-box">
-              <div class="parame-box-bottom-box-text-top">
-                待填写
-              </div>
-              <div class="parame-box-bottom-box-text-num">
-                15
-              </div>
-            </div>
-            <div class="parame-box-bottom-box">
-              <div class="parame-box-bottom-box-text-top">
-                待分配填写人
-              </div>
-              <div class="parame-box-bottom-box-text-num">
-                15
-              </div>
-            </div>
-            <div class="parame-box-bottom-box">
-              <div class="parame-box-bottom-box-text-top">
-                参数待发起
-              </div>
-              <div class="parame-box-bottom-box-text-num">
-                15
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="parame-box">
-          <div class="parame-box-top">
-            <span class="parame-box-top-text-left">相关项目：</span>
-            <span class="parame-box-top-text-right">Orion-G1.1-英国-00</span>
-          </div>
-          <div class="parame-box-top">
-            <span class="parame-box-top-text-left">清单标题：</span>
-            <span class="parame-box-top-text-right">认证参数收集模板</span>
-          </div>
-          <div class="parame-box-top">
-            <span class="parame-box-top-text-left">版本号：</span>
-            <span class="parame-box-top-text-right">03</span>
+            <span class="parame-box-top-text-left"
+                  :class="{'parame-box-top-text-left-one':language == 'en-us'? true : false}">
+              {{$t('phoneVersionNumber')}}：
+            </span>
+            <span class="parame-box-top-text-right"
+                  :class="{'parame-box-top-text-right-one':language == 'en-us'? true : false}">
+              03
+            </span>
          </div>
          <div class="parame-box-bottom">
            <div class="parame-box-bottom-box">
@@ -152,10 +128,10 @@
    </div>

    <van-tabbar v-model="active" @change="onChange">
-      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
-      <van-tabbar-item name="toDoCenter" icon="bell">待办中心</van-tabbar-item>
-      <van-tabbar-item name="taskData" icon="underway">任务统计</van-tabbar-item>
-      <van-tabbar-item name="home" icon="manager">我的</van-tabbar-item>
+      <van-tabbar-item name="search" icon="search">{{$t('phoneSearch')}}</van-tabbar-item>
+      <van-tabbar-item name="toDoCenter" icon="bell">{{$t('todocenter')}}</van-tabbar-item>
+      <van-tabbar-item name="taskData" icon="underway">{{$t('taskStatistics')}}</van-tabbar-item>
+      <van-tabbar-item name="home" icon="manager">{{$t('mine')}}</van-tabbar-item>
    </van-tabbar>
  </div>
 </template>
@@ -166,7 +142,8 @@
    data() {
      return {
        active: 'taskData',
-        activeTab: 'regulatoryCertification'
+        activeTab: 'regulatoryCertification',
+        language: localStorage.getItem('language')
      }
    },
    methods: {
@@ -194,9 +171,19 @@
    color: #00B3BE;
  }

+  .box {
+    padding-top: 1.32rem;
+    overflow: hidden;
+  }
+
  .content {
-    padding-top: 0.18rem;
-    position: relative;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    background: #fff;
+    padding-top: 0.16rem;
  }

  ::v-deep .van-tabs__line {
@@ -209,7 +196,7 @@
    font-weight: 400;
    color: #868A9A;
    flex: none;
-    margin-right: 0.2rem;
+    margin-right: 0.6rem;
  }

  ::v-deep .van-tab--active {
@@ -247,6 +234,7 @@
    width: 100%;
    padding: 0.4rem;
    background: #F7F7F8;
+    margin-bottom: 1.3rem;
  }

  .content-box-text {
@@ -296,9 +284,11 @@
    border-radius: 0.2rem;
    margin-bottom: 0.3rem;
  }
-  .parame-box:last-child{
+
+  .parame-box:last-child {
    margin-bottom: 0;
  }
+
  .parame-box-top {
    display: flex;
    margin-bottom: 0.12rem;
@@ -315,6 +305,10 @@
    word-break: break-all;
  }

+  .parame-box-top-text-left-one {
+    flex: 1.4;
+  }
+
  .parame-box-top-text-right {
    font-size: 0.36rem;
    font-family: PingFang SC-Regular, PingFang SC;
@@ -324,6 +318,10 @@
    word-break: break-all;
  }

+  .parame-box-top-text-right-one {
+    flex: 2;
+  }
+
  .parame-box-bottom {
    display: flex;
    justify-content: space-between;
@@ -355,4 +353,12 @@
    color: #01A0AC;
    margin-top: 0.12rem;
  }
+
+  ::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
+    padding-left: 0;
+  }
+
+  ::v-deep .van-tabs__wrap--scrollable .van-tab {
+    padding: 0 0.1rem;
+  }
 </style>
@@ -43,10 +43,10 @@
      </div>
    </div>
    <van-tabbar v-model="active" @change="onChange">
-      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
-      <van-tabbar-item name="toDoCenter" icon="bell">待办中心</van-tabbar-item>
-      <van-tabbar-item name="taskData" icon="underway">任务统计</van-tabbar-item>
-      <van-tabbar-item name="home" icon="manager">我的</van-tabbar-item>
+      <van-tabbar-item name="search" icon="search">{{$t('phoneSearch')}}</van-tabbar-item>
+      <van-tabbar-item name="toDoCenter" icon="bell">{{$t('todocenter')}}</van-tabbar-item>
+      <van-tabbar-item name="taskData" icon="underway">{{$t('taskStatistics')}}</van-tabbar-item>
+      <van-tabbar-item name="home" icon="manager">{{$t('mine')}}</van-tabbar-item>
    </van-tabbar>
  </div>
 </template>