HM21St_Page_User/src/views/personalCenter/index.vue

<template>
  <div class="peraonal">
    <Header
      :headerBg="'#fff'"
      :headerBorder="'#5C5C5C'"
      :userBg="'rgba(0, 0, 0, 0.24)'"
      :type="'black'"
      :touxiang="newTouxiang"
    />
    <div class="main">
        <ul class="main-left">
            <li v-for="(itemM,indexM) in menuList" :key="indexM" :class="[menuType===itemM.type?'active':'']" @click="handleChangeMenu(itemM.type)">
                <svg-icon :icon-class="itemM.icon"></svg-icon>
                <span>{{itemM.label}}</span>
            </li>
        </ul>
        <div class="main-right">
            <!-- 个人中心 -->
            <personal-info v-if="menuType==='user'"></personal-info>
            <!-- 收藏夹 -->
            <collect v-if="menuType==='like'"></collect>
            <!-- 兑换码 -->
            <conversion-code v-if="menuType==='duihuanma'"></conversion-code>
            <!-- 我的分享 -->
            <my-share :data="myShare.data" v-if="menuType==='share'"></my-share>
            <!-- 我的订单 -->
            <order-list :data="myShare.data" v-if="menuType==='order'"></order-list>
            <!-- 个人设置 -->
            <setting v-if="menuType==='setting'" @changeTouxiang="changeTouxiang"></setting>
        </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import PersonalInfo from "./components/PersonalInfo.vue"
import MyShare from "./components/MyShare.vue"
import ConversionCode from "./components/ConversionCode.vue"
import Collect from "./components/Collect.vue"
import OrderList from "./components/OrderList.vue"
import Setting from "./components/Setting.vue"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, PersonalInfo, MyShare, ConversionCode, Collect, OrderList, Setting},
  props: {},
  data() {
    //这里存放数据
    return {
      menuList:[
        {
            icon: 'read-record',
            label: '我的阅读记录',
            type: 'user'
        },
        {
            icon: 'like-line',
            label: '我的收藏',
            type: 'like'
        },
        {
            icon: 'duihuanma',
            label: '我的兑换码',
            type: 'duihuanma'
        },
        {
            icon: 'share-box-line',
            label: '我的分享',
            type: 'share'
        },
        {
            icon: 'order-personal',
            label: '订单管理',
            type: 'order'
        },
        {
            icon: 'setting',
            label: '个人设置',
            type: 'setting'
        }
      ],
      menuType: this.$route.query.type?decodeURIComponent(this.$route.query.type):'user', // 菜单类型
      personalInfo: {
        name:'张平方',
        school:'北京市第二中学',
        class:'3年1班',
        avatar: require('../../assets/avatar.png'),
        totalArticle: '416', // 共阅读文章
        totalTime: '237', // 累计阅读时长
        totalWords: '4621', // 共阅读词数
        totalLength: '23768' //累计阅读长度
      },
      myShare:{
        data:[
            {
                number:'461',
                title:'Making room for the pet boom',
                study:'高一',
                source:'第865期',
                useTimes:'1',
                totalTimes:'3',
                deadline:'2021.3.12 15:23',
                status:'sharing'
            },
            {
                number:'460',
                title:'KEY NOTIONS IN 2023 GOVERNMENT WORK REPORT',
                study:'高一',
                source:'第865期',
                useTimes:'3',
                totalTimes:'3',
                deadline:'2021.3.12 15:23',
                status:'ended'
            },
            {
                number:'459',
                title:'每日一练',
                study:'高一',
                source:'第865期',
                useTimes:'2',
                totalTimes:'3',
                deadline:'2021.3.12 15:23',
                status:'sharing'
            },
            {
                number:'458',
                title:'JUST ASK 成长不烦恼 ',
                study:'高一',
                source:'第865期',
                useTimes:'0',
                totalTimes:'3',
                deadline:'2021.3.12 15:23',
                status:'sharing'
            },
        ]
      },
      newTouxiang: ''
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    '$route': {
      handler(val, oldVal) {
        const _this = this;
        if (val) {
          if(this.$route.query.type){
            _this.menuType = decodeURIComponent(this.$route.query.type)
          }else{
            _this.menuType = 'user'
          }
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    // 切换菜单
    handleChangeMenu(value){
        this.menuType = value
        this.$router.push({
            path: '/peraonal',
            query: {
                headerConfig: this.$route.query.headerConfig,
                type:encodeURIComponent(value)
            },
        }); 
    },
    changeTouxiang(img){
        this.newTouxiang = img
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.peraonal{
    min-height: calc(100vh - 64px);
}
.main{
    background: #F7F8FA;
    height: calc(100vh - 64px);
    display: flex;
    ul{
        margin: 0;
        background: #FFFFFF;
        padding: 8px;
        width: 200px;
        list-style: none;
        flex-shrink: 0;
        li{
            margin-bottom: 4px;
            padding: 9px 12px;
            display: flex;
            align-items: center;
            border-radius: 2px;
            cursor: pointer;
            .svg-icon{
                width: 14px;
                height: 14px;
                color: #4E5969;
            }
            span{
                padding-left: 16px;
                font-size: 14px;
                line-height: 22px;
                color: #4E5969;
            }
            &:hover{
                background: #F2F3F5;
            }
            &.active{
                background: #F2F3F5;
                .svg-icon,span{
                    color: #165DFF;
                    font-weight: 500;
                }
            }
        }
    }
    &-right{
        flex: 1;
        margin: 16px;
        overflow: auto; // 订单管理的表格
    }
}
</style>