lanxin/js/product.js

import Service from "./common/service.js";
import language from "./common/language.js";
new Vue({
  el: "#app",
  data: {
    current_index: 0,
    tab_list: [],
    list: [],
    total: 0,
  },
  computed: {
    current_tab() {
      return `calc((100% - ${this.tab_list.length * 15}rem) / 2 + ${
        (this.current_index + 0.5) * 15
      }rem - 1.75rem)`;
    },
  },
  mounted() {
    this.getTabList();
  },
  methods: {
    text(val) {
      return language[val][localStorage.getItem("language")];
    },
    lan_key(val) {
      return `${val}${localStorage.getItem("language") == "en" ? "_en" : ""}`;
    },
    getTabList() {
      Service.get_product_cate()
        .then((res) => {
          this.tab_list = res;
          this.getList(0);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getList(index) {
      this.current_index = index;
      Service.get_product({
        page: 1,
        cate_id: this.tab_list[this.current_index].id,
      })
        .then((res) => {
          this.list = res.data;
          this.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
});