Initial commit

src/App.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="app">
+    <van-nav-bar
+      v-if="hasNavBar"
+      :title="pageTitle"
+      :left-text="hasBack ? $t('back') : ''"
+      :left-arrow="hasBack"
+      :right-text="isChinese ? $t('chinese') : $t('english')"
+      @click-left="handleBack"
+      @click-right="handleChangeLang"
+    />
+    <router-view />
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import { Locale } from 'vant'
+import zhCN from 'vant/es/locale/lang/zh-CN'
+import enUS from 'vant/es/locale/lang/en-US'
+
+const ZH = 'zh-CN'
+const EN = 'en-US'
+
+export default {
+  name: 'App',
+  data () {
+    return {
+      currentLang: ZH
+    }
+  },
+  created () {
+    // 默认中文
+    Vue.ls.set('language', ZH, 7 * 24 * 60 * 60 * 1000)
+    Locale.use('zh-CN', zhCN)
+    this.$i18n.locale = ZH
+  },
+  computed: {
+    // 是否中文
+    isChinese () {
+      return this.currentLang === ZH
+    },
+    // 是否显示导航
+    hasNavBar () {
+      return this.$route.meta.hasNavBar
+    },
+    // 是否显示返回
+    hasBack () {
+      return this.$route.meta.hasBack
+    },
+    // 导航标题（国际化）
+    pageTitle () {
+      if (!this.$route.meta.pageTitle) {
+        return ''
+      }
+      return this.$t('pageTitle.' + this.$route.meta.pageTitle)
+    }
+  },
+  methods: {
+    // 返回上一层
+    handleBack () {
+      this.$router.go(-1)
+    },
+    // 切换语言
+    handleChangeLang () {
+      // 如果是中文就切换英文，否则切换中文
+      const targetLang = this.isChinese ? EN : ZH
+      const vantLang = this.isChinese ? enUS : zhCN
+      // 更新响应式
+      this.currentLang = targetLang
+      // 更新本地存储
+      Vue.ls.set('language', targetLang, 7 * 24 * 60 * 60 * 1000)
+      // 更新vant语言
+      Locale.use(targetLang, vantLang)
+      // 更新i18n语言
+      this.$i18n.locale = targetLang
+    }
+  }
+}
+</script>
+
+<style lang="less">
+</style>