切换中英文不刷新

src/api/menu.ts

@@ -1,9 +1,7 @@
 import { post } from "@/utils/request";
-import menu from "@/store/modules/menu";
 
-export const getMenu = () => {
-  post<{ tree: IMenu[] }>("/goods/type/treeData").then(
-    ([err, { tree }]) => err || menu.setList(tree)
-  );
-  return [] as IMenu[];
+export const getMenu = async () => {
+  const [err, { tree }] = await post<{ tree: IMenu[] }>("/goods/type/treeData");
+  if (err) return [];
+  return tree;
 };

src/components/loadMore.vue

@@ -44,6 +44,7 @@ import {
   Watch,
   Emit
 } from "vue-property-decorator";
+import { Loading } from "element-ui";
 interface IPageResult {
   rows: any[];
   total: number;
@@ -68,6 +69,7 @@ export default class extends Vue {
   private count: number | null = null;
   private items: any[] = [];
   private loading = false;
+  @Watch("$i18n.locale", { immediate: true })
   @Watch("params", { immediate: true, deep: true })
   reload() {
     if (!this.params) return;
@@ -82,6 +84,11 @@ export default class extends Vue {
   async load(pageNum: number) {
     if (this.loading) return;
     this.loading = true;
+    const loading = Loading.service({
+      fullscreen: true,
+      text: "数据加载中..."
+    });
+    this.items = this.pageType === "increase" ? this.items : [];
     const [err, { rows = [], total = 0 }] = await this.$post<IPageResult>(
       this.url,
       Object.assign(this.params, {
@@ -91,7 +98,9 @@ export default class extends Vue {
     );
     this.count = total;
     this.items = [...(this.pageType === "increase" ? this.items : []), ...rows];
+    loading.close();
     this.loading = false;
+
     return this.items;
   }
 }

src/components/tab.vue

@@ -38,9 +38,15 @@ export default class extends Vue {
   private titles!: any;
   private tabs: HTMLElement[] | null = null;
   mounted() {
-    this.tabs = this.$refs.tab as HTMLElement[];
+    this.mount();
+  }
+  @Watch("$i18n.locale")
+  mount() {
+    this.tabs = null;
+    this.$nextTick(() => {
+      this.tabs = this.$refs.tab as HTMLElement[];
+    });
   }
-
   get currTab() {
     return this.tabs ? this.tabs[this.index] : {};
   }

src/layout/components/LangSelect.vue

@@ -16,8 +16,13 @@
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { setLocale } from "@/lang";
 import { setPageTitle } from "@/utils";
+import menu from "@/store/modules/menu";
 @Component
 export default class extends Vue {
+  created() {
+    menu.getList();
+  }
+
   get language() {
     switch (this.$i18n.locale) {
       case "zh":
@@ -30,14 +35,12 @@ export default class extends Vue {
   private handleSetLanguage(lang: string) {
     setLocale(lang);
     setPageTitle(this.$route.meta.title);
-    if (process.env.NODE_ENV !== "development") {
-      location.reload(); //因为接口得重新请求
-    }
+    menu.getList();
 
-    // this.$message({
-    //   message: `${this.$i18n.t("SLS")}`,
-    //   type: "success"
-    // });
+    this.$message({
+      message: `${this.$i18n.t("SLS")}`,
+      type: "success"
+    });
   }
 }
 </script>

src/store/modules/menu.ts

@@ -7,12 +7,25 @@ import {
 } from "vuex-module-decorators";
 import store from "../index";
 import { getMenu } from "@/api/menu";
+import i18n from "@/lang";
+import vue from "vue";
 @Module({ dynamic: true, store, name: "menu" })
 class Menu extends VuexModule {
-  private list = getMenu();
+  private data: {
+    [index: string]: IMenu[];
+  } = {};
+  @Action
+  public async getList() {
+    if (this.list.length) return;
+    const list = await getMenu();
+    this.setList(list);
+  }
   @Mutation
-  public setList(list: IMenu[]) {
-    this.list = list;
+  private setList(list: IMenu[]) {
+    vue.set(this.data, i18n.locale, list);
+  }
+  get list() {
+    return this.data[i18n.locale] || [];
   }
   get pList() {
     return this.list.filter(({ pId }) => !pId);

src/views/home/index.vue

@@ -298,7 +298,9 @@ export default class extends Vue {
       num: 0,
       text: `page.views.home.fwListText${++index}`
     }));
-  async created() {
+
+  @Watch("$i18n.locale", { immediate: true })
+  async load() {
     const arr = `/goods/info/hotlist,
       /demand/info/getDemandInfoTenList,
       /supply/info/getSupplyInfoTenLsit,

src/views/info/details/buy.vue

@@ -38,11 +38,12 @@ import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 export default class extends Vue {
   private demandInfo = {};
   @Prop(String) private id!: number;
+  @Watch("$i18n.locale")
   @Watch("id", { immediate: true })
-  async load(id: string) {
+  async load() {
     const [err, { demandInfo }] = await this.$post<{ demandInfo: IAny }>(
       "/demand/info/getDemandInfo",
-      { id }
+      { id: this.id }
     );
     this.demandInfo = demandInfo;
   }

src/views/info/details/sell.vue

@@ -50,11 +50,12 @@ import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 export default class extends Vue {
   private noticeSupply: IAny = {};
   @Prop(String) private id!: number;
+  @Watch("$i18n.locale")
   @Watch("id", { immediate: true })
-  async load(id: string) {
+  async load() {
     const [err, { noticeSupply }] = await this.$post<{ noticeSupply: IAny }>(
       "/supply/info/getSupplyInfo",
-      { id }
+      { id: this.id }
     );
     this.noticeSupply = noticeSupply;
   }

src/views/news/details.vue

@@ -23,13 +23,14 @@ import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 export default class extends Vue {
   @Prop(String) private noticeId!: string;
   private detailObj: IAny = {};
+  @Watch("$i18n.locale")
   @Watch("noticeId", { immediate: true })
-  async load(noticeId: string) {
-    if (!noticeId) return;
+  async load() {
+    if (!this.noticeId) return;
     const [err, { sysNotice }] = await this.$post(
       "/interface/notice/getNoticeListById",
       {
-        noticeId
+        noticeId: this.noticeId
       }
     );
     if (err) return;

src/views/shops/details/index.vue

@@ -71,11 +71,12 @@ export default class extends Vue {
   private keyWord = "";
   @Prop(String)
   private sid!: string;
+  @Watch("$i18n.locale")
   @Watch("sid", { immediate: true })
-  async load(id: number) {
+  async load() {
     this.searchVal = this.keyWord = "";
-    if (!id) return;
-    const [err, data] = await this.$post("/company/details", { id });
+    if (!this.sid) return;
+    const [err, data] = await this.$post("/company/details", { id: this.sid });
     if (err) return;
     this.shopInfo = data;
   }
@@ -120,6 +121,7 @@ export default class extends Vue {
         font-size: 18px;
         color: rgb(51, 51, 51);
         margin-bottom: 20px;
+        width: 300px;
       }
       .rz {
         margin-right: 20px;

src/views/shops/details/product.vue

@@ -130,11 +130,14 @@ export default class extends Vue {
   @Prop(String)
   private pid!: string;
   private product: IAny = {};
+  @Watch("$i18n.locale")
   @Watch("pid", { immediate: true })
-  async load(id: number) {
-    if (!id) return;
+  async load() {
+    if (!this.pid) return;
     this.showPhone = false;
-    const [err, data] = await this.$post("/goods/info/details", { id });
+    const [err, data] = await this.$post("/goods/info/details", {
+      id: this.pid
+    });
     if (err) return;
     this.product = data;
   }

src/views/shops/details/profile.vue

@@ -56,7 +56,7 @@
       <div class="x-title">
         {{ $t("page.views.shops.details.profile.businessLicense") }}
       </div>
-      <img :src="`${$basePath}${shopInfo.businessLicenseUrl}`" alt="" />
+      <img v-for="(img, index) in imgs" :key="index" :src="img" />
     </div>
   </div>
 </template>
@@ -73,6 +73,11 @@ export default class extends Vue {
     );
     return x && x.key;
   }
+  get imgs() {
+    return (this.shopInfo.businessLicenseUrl as string)
+      .split(",")
+      .map(img => `${this.$basePath}${img}`);
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -151,6 +156,7 @@ export default class extends Vue {
   }
   > img {
     max-width: 80%;
+    margin-left: 20px;
   }
 }
 </style>