{
 key: "Status"
 texts:[
   {
     "languageName": "en-GB",
     "text": "Status"
   },
   {
     "languageName": "zh-CN",
     "text": "狀態(tài)"
   },
   {
     "languageName": "zh-HK",
     "text": "狀態(tài)"
   }
 ]
}

// ERP | H5 | 微信小程序 用時的查詢
// language_texts 是我們再 SQL Table 中存儲的所有多語言集合
 
language_texts : {
    key : 當前語言的value, // 如何知道當前語言，我們稍后再說
    key : value,
    key : value,
    ... : ...
    ... : ...
}

import axiso from 'axios'
import { getAll } from '@/api/uxretail/application.js'
const format = require('string-format')
 
 
export default class VFrame {
 
    static host;
    static wsUrl;
 
    /**
     * 在vue實例化之前調用異步start方法
     */
    static start() {
        return new Promise((resolve, reject) => {
            axiso.request({
                url: "/static/appconfig.json",
                method: "get",
            }).then(result => {
                VFrame.host = (result.host || window.location.host);
                VFrame.wsUrl = "ws://" + VFrame.host + ":" + result.wsPort + "/ws/notify/";
                VFrame.getAll(resolve);
            }).catch(error => {
                reject(error);
            });
        });
    }
 
    static getAll(resolve) {
        getAll().then(res => {
            VFrame.applicationResource = res
            resolve()
        });
    }
 
 
    static l(key, ...args) {
        if (localStorage.getItem("ux_debug_language")) {
            return `[${key}]`
        }
 
        if (!VFrame.applicationResource) {
            return key
        }
        if (VFrame.applicationResource.language_texts) {
            let res = VFrame.applicationResource.language_texts[key];
            if (res) {
                return format(res, args);
            } else {
                return `[${key}]`
            }
        }
        return key;
    }
}

import Vue from "vue";
import App from "./App";
import store from "./store";
import router from "./router";
import VFrame from "./framework/VFrame";
 
Vue.prototype.l = VFrame.l;
 
// 這個為了方便用 VFrame ，并沒有其他用途
Vue.prototype.$ux = {
  v: VFrame
}
 
// 重要的就是這一步，VFrame 的執(zhí)行時機
VFrame.start().then(() => {
  //set layout to store
  store.commit("dragLayout/initLayout")
  new Vue({
    el: "#app",
    router,
    store,
    render: h => h(App)
  });
});

<div> {{ l('ManyLanguage') }} </div>
 
<el-form :model="item" :rules="tableRules">
    <el-form-item :label="l("ManyLanguage")" prop="language">
        <el-input v-model="item.language"></el-input>
    </el-form-item>
 
</el-form>

export default{
 
  data(){
    return {
        language:this.l("ManyLanguage")
    }
  },
 
  created(){
  
    console.log(this.l("MyLanguage"))
  },
}

import Cookies from "js-cookie";
import axios from "axios";
 
 
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 創(chuàng)建axios實例
const service = axios.create({
  // axios中請求配置有baseURL選項，表示請求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超時
  timeout: 120000
});
 
 
service.interceptors.request.use(
  config => {
 
    var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
    if (cultureName) {
      config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
    }
 
})

import {
	request
} from "util/request.js";
export default class VFrame {
	static applicationResource;
 
	/**
	 * 在vue實例化之前調用異步start方法
	 */
	static start() {
		return new Promise((resolve, reject) => {
			request({
				url: '/application/getAppAll', //activityType=0 查詢全部
				method: 'GET',
				hideLoading: true,
				data: {
					orgId: uni.getStorageSync('companyOrgId')
				}
			}).then(res => {
				VFrame.applicationResource = res.data.result
				resolve(res)
			});
		});
	}
 
	static l(key, args) {
		if (VFrame.applicationResource && VFrame.applicationResource.language_texts) {
			let res = VFrame.applicationResource.language_texts[key];
			if (res) {
				return res;
			} else {
				return `[${key}]`
			}
		}
		return key;
	}
 
	static tabbarLanguage(tabbarList) {
		let language = uni.getStorageSync('language') || 'zh-CN'
		if (language) {
			switch (language) {
				case 'en-GB':
					tabbarList[0].text = "Coupons"
					tabbarList[1].text = "Stamp"
					tabbarList[2].text = "Account"
					tabbarList[3].text = "Discount"
					tabbarList[4].text = "Favourite"
					break
				case 'zh-CN':
					tabbarList[0].text = "電子優(yōu)惠券"
					tabbarList[1].text = "電子印花"
					tabbarList[2].text = "我的賬戶"
					tabbarList[3].text = "優(yōu)惠獎賞"
					tabbarList[4].text = "我的最愛"
					break
				case 'zh-HK':
					tabbarList[0].text = "電子優(yōu)惠券"
					tabbarList[1].text = "電子印花"
					tabbarList[2].text = "我的賬戶"
					tabbarList[3].text = "優(yōu)惠獎賞"
					tabbarList[4].text = "我的最愛"
					break
			}
		}
		return tabbarList
	}
}

<template>
	<view class="preload">fashion-cue</view>
</template>
 
<script>
import { mapMutations } from 'vuex';
import VFrame from '@/util/VFrame';
export default {
	name: 'Preload', // 預加載動畫頁面
	data() {
		return {};
	},
	methods: {
		...mapMutations(['setAppAll'])
	},
	onLoad(e) {
		console.log('onLoad', e);
		VFrame.start().then(res => {
			if (res && res.data.result.brandList && res.data.result.categoryList) {
				this.setAppAll(res.data.result);
			}
			getApp().globalData.isLoaded = true;
			uni.switchTab({
				url: e.redirect ? '/' + e.redirect : '/platforms/mp-weixin/discount/discount'
			});
		});
	}
};
</script>
 
<style>
.preload {
	width: 100%;
	font-weight: bold;
	font-family: 'Arial', 'Microsoft YaHei', '黑體', '宋體', sans-serif;
	font-size: 2.5rem;
	text-align: center;
	background-image: -webkit-linear-gradient(left, black, transparent 25%, black 50%, transparent 75%, black);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-background-size: 200% 100%;
	-webkit-animation: masked-animation 2s infinite linear;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -140%);
}
@-webkit-keyframes masked-animation {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -100% 0;
	}
}
</style>