GCLS_Page_Personal/src/views/Personalcenter.vue

<template>
  <!-- 个人中心 -->
  <div class="Personalcenter">
    <div class="Nav">
      <Header />
    </div>
    <div class="main">
      <div class="content">
        <div class="left">
          <!-- 头像 -->
          <div class="headPortrait" v-if="userMessage">
            <div class="shade">
              <div class="photo">
                <div>
                  <img :src="userMessage.image_url" alt="" />
                  <img
                    class="edit-avator"
                    src="../assets/Personalcenter/edit-avator.png"
                    @click="toggleShow"
                  />
                </div>
              </div>
              <div class="name">
                <p>{{ userMessage.user_real_name }}</p>
              </div>
            </div>
          </div>
          <!-- 导航 -->
          <div class="navList">
            <div
              :class="SeleNavId == item.id ? 'select' : ''"
              v-for="(item, i) in navList"
              :key="i"
              @click="selectNav(item.id)"
            >
              <img
                v-if="SeleNavId != item.id"
                :src="
                  require('../assets/Personalcenter/' + item.imgSrc + '.png')
                "
                alt=""
              />
              <img
                v-else
                :src="
                  require('../assets/Personalcenter/' + item.selectSrc + '.png')
                "
                alt=""
              />
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <Mymessage v-if="SeleNavId == 0" />
          <Mytextbook v-if="SeleNavId == 1" />
          <Teachcourse v-if="SeleNavId == 2" :userType="userMessage.user_type" />
          <Traincourse v-if="SeleNavId == 3" />
          <TeachMaterial v-if="SeleNavId == 4" />
          <OrderManage v-if="SeleNavId == 5" />
          <Mycollect v-if="SeleNavId == 6" :userType="userMessage.user_type" />
          <AccountSet v-if="SeleNavId == 7" />
        </div>
      </div>
    </div>
    <my-upload
      field="img"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
      v-model="show"
      :width="100"
      :height="100"
      :url="url"
      img-format="png"
      :noCircle="true"
      :noSquare="true"
      :noRotate="true"
    ></my-upload>
  </div>
</template>

<script>
import Header from "@/components/common/Header";
//import Uploadavator from "@/components/common/Uploadavator"; //上传头像
import Mymessage from "@/components/Personalcenter/Mymessage"; //通知消息
import Mytextbook from "@/components/Personalcenter/Mytextbook"; //我的教材
import Teachcourse from "@/components/Personalcenter/Teachcourse"; //教学课程
import Traincourse from "@/components/Personalcenter/Traincourse"; //教培课程
import TeachMaterial from "@/components/Personalcenter/TeachMaterial"; //教研资料
import OrderManage from "@/components/Personalcenter/OrderManage"; //订单管理
import Mycollect from "@/components/Personalcenter/Mycollect"; //我的收藏
import AccountSet from "@/components/Personalcenter/AccountSet"; //账户设置

import { getToken, setToken } from "@/utils/auth";

import "babel-polyfill"; // es6 shim
import myUpload from "@/components/vue-image-crop-upload/upload-2.vue";

import { getContent, getLearnWebContent } from "@/api/ajax";

export default {
  name: "Personalcenter",
  components: {
    Header,
    Mymessage,
    Mytextbook,
    Teachcourse,
    Traincourse,
    TeachMaterial,
    OrderManage,
    Mycollect,
    AccountSet,
    "my-upload": myUpload,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      userInfor: null,
      userMessage: null, //登录信息
      SeleNavId: 0,
      navList: [],
      teachList: [
        {
          id: 0,
          name: "系统通知",
          imgSrc: "nav1",
          selectSrc: "nav1-1",
        },
        {
          id: 1,
          name: "我的教材",
          imgSrc: "nav2",
          selectSrc: "nav2-1",
        },
        {
          id: 2,
          name: "教学课程",
          imgSrc: "nav3",
          selectSrc: "nav3-1",
        },
        {
          id: 3,
          name: "教培课程",
          imgSrc: "nav4",
          selectSrc: "nav4-1",
        },
        {
          id: 4,
          name: "教研材料",
          imgSrc: "nav5",
          selectSrc: "nav5-1",
        },
        {
          id: 5,
          name: "订单管理",
          imgSrc: "nav6",
          selectSrc: "nav6-1",
        },
        {
          id: 6,
          name: "我的收藏",
          imgSrc: "nav7",
          selectSrc: "nav7-1",
        },
        {
          id: 7,
          name: "账户设置",
          imgSrc: "nav8",
          selectSrc: "nav8-1",
        },
      ],
      stuList: [
        {
          id: 0,
          name: "系统通知",
          imgSrc: "nav1",
          selectSrc: "nav1-1",
        },
        {
          id: 1,
          name: "我的教材",
          imgSrc: "nav2",
          selectSrc: "nav2-1",
        },
        {
          id: 2,
          name: "教学课程",
          imgSrc: "nav3",
          selectSrc: "nav3-1",
        },
        {
          id: 5,
          name: "订单管理",
          imgSrc: "nav6",
          selectSrc: "nav6-1",
        },
        {
          id: 6,
          name: "我的收藏",
          imgSrc: "nav7",
          selectSrc: "nav7-1",
        },
        {
          id: 7,
          name: "账户设置",
          imgSrc: "nav8",
          selectSrc: "nav8-1",
        },
      ],
      show: false,
      params: {
        token: "123456798",
        name: "avatar",
      },
      headers: {
        smail: "*_~",
      },
      imgDataUrl: "",
    };
  },
  //计算属性 类似于data概念
  computed: {
    url() {
      let UserCode = "",
        UserType = "",
        SessionID = "";
      if (this.userMessage) {
        UserCode = this.userMessage.user_code;
        UserType = this.userMessage.user_type;
        SessionID = this.userMessage.session_id;
      }
      return (
        process.env.VUE_APP_BASE_API +
        "/GCLSFileServer/WebFileUpload?UserCode=" +
        UserCode +
        "&UserType=" +
        UserType +
        "&SessionID=" +
        SessionID +
        "&SecurityLevel=Mid"
      );
    },
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //得到我的用户信息
    GetMyUserInfo() {
      let _this = this;
      let MethodName = "user_manager-GetMyUserInfo";
      let data = {};
      getContent(MethodName, data).then((res) => {
        this.userInfor = res;
      });
    },
    //   选择导航
    selectNav(index) {
      this.SeleNavId = index;
      this.backtop();
    },
    backtop() {
      var timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 3);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },
    toggleShow() {
      this.show = !this.show;
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field) {
      this.imgDataUrl = imgDataUrl;
    },
    /**
     * upload success
     *
     * [param] jsonData   服务器返回数据，已进行json转码
     * [param] field
     */
    cropUploadSuccess(jsonData, field) {
      this.show = false;
      if (jsonData) {
        let image_id = jsonData.file_info_list[0].file_id;
        this.uploadAvator(image_id);
      } else {
        this.$message.warning("上传失败");
      }
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field) {
      this.$message.warning("上传失败，请重新上传");
    },
    uploadAvator(image_id) {
      let MethodName = "user_manager-UpdateMyUserImage";
      let data = {
        image_id: image_id,
      };
      getContent(MethodName, data).then((res) => {
        this.$message.success("上传成功");
        this.userMessage.image_id = image_id;
        this.userMessage.image_url = res.image_url;
        console.log(this.userMessage);
        setToken(JSON.stringify(this.userMessage));
        setTimeout(() => {
          this.$router.go(0);
        }, 100);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let userInfor = getToken();

    if (userInfor) {
      let user = JSON.parse(getToken());
      this.userMessage = user;
      if (user.user_type == "TEACHER") {
        this.navList = this.teachList;
      } else {
        this.navList = this.stuList;
      }
    }
    if(this.$route.query.SeleNavId){
        this.SeleNavId = this.$route.query.SeleNavId
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //this.GetMyUserInfo();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Personalcenter {
  .main {
    background: #e5e5e5;
    padding-top: 24px;
    padding-bottom: 60px;
    .content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      .left {
        width: 240px;
        height: 900px;
        background: #ffffff;
        .headPortrait {
          width: 240px;
          height: 240px;
          background: url("../assets/Personalcenter/headbg.png");
          background-size: 100% 100%;
          position: relative;
          .shade {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.25);
            padding-top: 46px;
          }
          .photo {
            text-align: center;
            > div {
              margin: 0 auto;
              width: 110px;
              height: 110px;
              background: rgba(#c4c4c4, 0.3);
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
              position: relative;
            }
            img {
              width: 100px;
              height: 100px;
              border-radius: 50%;
            }
            .edit-avator {
              width: 24px;
              height: 24px;
              position: absolute;
              right: 0px;
              bottom: 0px;
              cursor: pointer;
            }
          }
          .name {
            margin-top: 8px;
            text-align: center;
            p {
              margin: 0;
              font-weight: 600;
              font-size: 20px;
              color: #ffffff;
            }
          }
        }
        .navList {
          margin-top: 8px;
          > div {
            margin-top: 8px;
            height: 46px;
            display: flex;
            align-items: center;
            img {
              width: 24px;
              margin-left: 18px;
              margin-right: 16px;
            }
            cursor: pointer;
          }
          .select {
            background: #ff9900;
            color: white;
          }
        }
      }
      .right {
        width: 944px;
        min-height: 900px;
        margin-left: 16px;
        background: #ffffff;
        box-sizing: border-box;
        padding-bottom: 20px;
      }
    }
  }
}
</style>