手动切换多语言

src/ibiz-core/components/app-setting/app-setting.vue

@@ -12,7 +12,7 @@
         <template v-for="item in data.top">
           <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
             <div class="content-list-item-content">
-              <div class="content-list-item-content-text">{{item.text}}</div>
+              <div class="content-list-item-content-text">{{item.showtext}}</div>
               <ion-icon
                 v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
                 name="chevron-forward-outline"
@@ -30,7 +30,7 @@
         <template v-for="item in data.center">
           <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
             <div class="content-list-item-content">
-              <div class="content-list-item-content-text">{{item.text}}</div>
+              <div class="content-list-item-content-text">{{item.showtext}}</div>
               <ion-icon
                 v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
                 name="chevron-forward-outline"
@@ -48,7 +48,7 @@
         <template v-for="item in data.bottom">
           <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
             <div class="content-list-item-content">
-              <div class="content-list-item-content-text">{{item.text}}</div>
+              <div class="content-list-item-content-text">{{item.showtext}}</div>
               <ion-icon
                 v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
                 name="chevron-forward-outline"
@@ -75,6 +75,7 @@ import {
   Watch,
 } from "vue-property-decorator";
 import { settingConfig } from "./config";
+import i18n from '@/locale'
 @Component({
   components: {},
 })
@@ -128,6 +129,14 @@ export default class AppSetting extends Vue {
       if (item.position == "bottom") {
         this.data.bottom.push(item);
       }
+      // 多语言处理
+      if (item.entext) {
+        if (i18n.locale == "ZH-CN") {
+          item.showtext = item.text;
+        } else if (i18n.locale == "EN-US"){
+          item.showtext = item.entext;
+        }
+      }
     });
     // 排序规则
     let compare = (property: any) => {
@@ -249,6 +258,44 @@ export default class AppSetting extends Vue {
     }
   }
 
+  /**
+   * 语言列表
+   *
+   */
+  public lanArray:any;
+
+  /**
+   * 切换语言
+   *
+   */
+  public changeLanguage(){
+    let lanarr:any = localStorage.getItem('lanArray');
+    this.lanArray = JSON.parse(lanarr); 
+    this.lanArray = this.lanArray.map( (language:any) => language.indexOf("ZH-CN") > -1 ? language.replace("ZH-CN","EN-US") : language.replace("EN-US","ZH-CN"));
+    i18n.locale = this.lanArray[0];
+    localStorage.setItem('local',this.lanArray[0]);
+    localStorage.setItem('lanArray',JSON.stringify(this.lanArray)) ;
+    // 提示框
+    if (this.lanArray[0] === "ZH-CN") {
+      this.$notice.success('已切换为中文！');
+    } else if (this.lanArray[0] === "EN-US"){
+      this.$notice.success('已切换为英文！');
+    }
+    Object.keys(this.data).forEach((items: any) => {
+      // 多语言处理
+      this.data[items].forEach((item:any)=>{
+        if (item.entext) {
+          if (i18n.locale == "ZH-CN") {
+            item.showtext = item.text;
+          } else if (i18n.locale == "EN-US"){
+            item.showtext = item.entext;
+          }
+        }
+      })
+    });
+    this.$forceUpdate();
+  }
+
   /**
    * item点击事件
    */
@@ -264,6 +311,8 @@ export default class AppSetting extends Vue {
       this.logout();
     } else if (item.name == "clear") {
       this.clear();
+    } else if (item.name == "language"){
+      this.changeLanguage();
     } else {
       // 自定义功能
       if (item.viewName) {

src/ibiz-core/components/app-setting/config.ts

@@ -6,6 +6,7 @@ export const settingConfig = {
       text: "账号信息",
       position: "top",
       sort: "100",
+      entext:'Account information',
     },
     {
       name: "mobilePhoneNumber",
@@ -13,6 +14,7 @@ export const settingConfig = {
       text: "手机号码",
       position: "top",
       sort: "200",
+      entext:'Cellphone number',
     },
     {
       name: "theme",
@@ -20,6 +22,7 @@ export const settingConfig = {
       text: "主题",
       position: "top",
       sort: "300",
+      entext:'Theme',
     },
     {
       name: "layoutStyle",
@@ -28,6 +31,7 @@ export const settingConfig = {
       position: "top",
       sort: "400",
       viewName: "app-mob-select-changeStyle",
+      entext:'Style',
     },
     {
       name: "notification",
@@ -35,6 +39,7 @@ export const settingConfig = {
       text: "消息通知",
       position: "center",
       sort: "100",
+      entext:'Notification',
     },
     {
       name: "privacy",
@@ -42,6 +47,7 @@ export const settingConfig = {
       text: "隐私",
       position: "center",
       sort: "200",
+      entext:'Privacy',
     },
     {
       name: "universal",
@@ -49,6 +55,7 @@ export const settingConfig = {
       text: "通用",
       position: "center",
       sort: "300",
+      entext:'Universal',
     },
     {
       name: "accessibility",
@@ -56,6 +63,7 @@ export const settingConfig = {
       text: "辅助功能",
       position: "center",
       sort: "400",
+      entext:'Accessibility',
     },
     {
       name: "about",
@@ -63,6 +71,8 @@ export const settingConfig = {
       text: "关于",
       position: "center",
       sort: "500",
+      viewName: "app-update-log-list",
+      entext:'About',
     },
     {
       name: "logout",
@@ -70,6 +80,7 @@ export const settingConfig = {
       text: "退出登录",
       position: "bottom",
       sort: "100",
+      entext:'Sign out',
     },
     {
       name: "clear",
@@ -77,6 +88,15 @@ export const settingConfig = {
       text: "清除缓存",
       position: "bottom",
       sort: "200",
+      entext:'Clear cache',
+    },
+    {
+      name: "language",
+      isEnable: true,
+      text: "切换语言",
+      position: "bottom",
+      sort: "200",
+      entext:'Switch language',
     },
   ],
   // 个人中心视图（需用户手动配置）