GCLS_Page_Personal/src/components/common/Empty.vue

<!--  -->
<template>
  <div class="empty-main" v-if="emptyCon">
    <img :src="emptyCon.url" class="empty-img" />
    <p class="empty-texts">{{ emptyCon.con }}</p>
    <a class="empty-link" :href="emptyCon.link" target="_blank">{{
      emptyCon.linkName
    }}</a>
  </div>
</template>

<script>
import { getContent } from "@/api/ajax";
export default {
  components: {},
  props: ["navType"],
  data() {
    return {};
  },
  computed: {
    emptyCon: function () {
      let _this = this;
      let obj = {};
      //let MethodName = "login_control-CreateAccessCode";
      // let res = await getContent(MethodName, {});
      //let AccessCode = "";
      switch (_this.navType) {
        case "0": //系统通知
          obj = {
            url: require("../../assets/Personalcenter/1.png"),
            con: "没有任何通知",
            link: "",
          };
          break;
        case "1":
          obj = {
            url: require("../../assets/Personalcenter/2.png"),
            con: "您还未购买任何教材",
            linkName: "去查看",
            link: `/GCLS-LC/#/learncenter/ListPage?id=TEXTBOOK`,
          };
          break;
        case "2":
          obj = {
            url: require("../../assets/Personalcenter/2.png"),
            con: this.$t("Key70"), //"您还未购买任何课程",
            linkName: this.$t("Key71"), //"去选课",
            link: `/GCLS-LC/#/learncenter/ListPage?id=COURSE`,
          };
          break;
        case "3":
          obj = {
            url: require("../../assets/Personalcenter/2.png"),
            con: this.$t("Key70"), //"您还未购买任何课程",
            linkName: this.$t("Key71"), //"去选课",
            link: `/GCLS-TRC/#/EnterSys`,
          };
          break;
        case "4":
          obj = {
            url: require("../../assets/Personalcenter/3.png"),
            con: "您还未购买任何资料",
            linkName: "去查看",
            link: `/GCLS-TC/#/EnterSys`,
          };
          break;
        case "5":
          obj = {
            url: require("../../assets/Personalcenter/4.png"),
            con: "没有订单",
            link: "",
          };
          break;
        case "6":
          obj = {
            url: require("../../assets/Personalcenter/5.png"),
            con: "你还未添加任何收藏",
            link: "",
          };
          break;
      }

      return obj;
    },
  },
  watch: {},
  //方法集合
  methods: {
    async handleData() {
      let _this = this;
      let obj = {};
      let MethodName = "login_control-CreateAccessCode";
      let res = await getContent(MethodName, {});
      let AccessCode = res.access_code;
      switch (_this.navType) {
        case "0": //系统通知
          obj = {
            url: require("../../assets/Personalcenter/1.png"),
            con: "没有任何通知",
            link: "",
          };
          break;
        case "1":
          obj = {
            url: require("../../assets/Personalcenter/2.png"),
            con: "您还未购买任何教材",
            linkName: "去查看",
            link: `/GCLS-LC/#/EnterSys?AccessCode=${AccessCode}`,
          };
          break;
        case "2":
          obj = {
            url: require("../../assets/Personalcenter/2.png"),
            con: "您还未购买任何课程",
            linkName: "去选课",
            link: `/GCLS-LC/#/EnterSys?AccessCode=${AccessCode}`,
          };
          break;
        case "3":
          obj = {
            url: require("../../assets/Personalcenter/2.png"),
            con: "您还未购买任何课程",
            linkName: "去选课",
            link: `/GCLS-TRC/#/EnterSys?AccessCode=${AccessCode}`,
          };
          break;
        case "4":
          obj = {
            url: require("../../assets/Personalcenter/3.png"),
            con: "您还未购买任何资料",
            linkName: "去查看",
            link: `/GCLS-TC/#/EnterSys?AccessCode=${AccessCode}`,
          };
          break;
        case "5":
          obj = {
            url: require("../../assets/Personalcenter/4.png"),
            con: "没有订单",
            link: "",
          };
          break;
        case "6":
          obj = {
            url: require("../../assets/Personalcenter/5.png"),
            con: "你还未添加任何收藏",
            link: "",
          };
          break;
      }

      return obj;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.empty-main {
  width: 100%;
  height: 778px;
  box-sizing: border-box;
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .empty-img {
    margin-bottom: 16px;
    width: 160px;
    height: 160px;
  }
  .empty-texts {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #969799;
  }
  .empty-link {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #ff9900;
    cursor: pointer;
    margin-top: 10px;
  }
}
</style>