FE_huoran_data/src/pages/setting/person/index.vue

<template>
    <div>
        <div class="wrap">
            <div class="left">
                <div class="inner">
                    <div class="text-center">
                        <img :src="avatar" class="avatar" />
                        <el-upload :headers="{token}" :action="this.api.uploadUserAvatars" name="file" :limit="1" :on-success="changeAvatar">
                            <el-button type="text" size="small">上传头像</el-button>
                        </el-upload>
                    </div>

                    <el-menu class="menu" :default-active="active" @select="handleSelect">
                        <el-menu-item v-for="item in typeList" :index="item.index" :key="item.index">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </div>
            <div class="right">
                <info v-if="active == 1"></info>
                <download v-else></download>
            </div>
        </div>
    </div>
</template>

<script>
import Setting from '@/setting'
import { mapState,mapActions } from 'vuex'
import info from './info'
import download from './download'
import util from '@/libs/util'
export default {
    data() {
        return {
            token: '',
            typeList: [
                {
                    index: '1',
                    title: '用户信息'
                },{
                    index: '2',
                    title: '我的下载',
                },
            ],
            active: '1',
        };
    },
    components: { info,download },
    computed: {
        ...mapState('user', [
            'avatar'
        ]),
    },
    mounted() {
        this.token = util.local.get(Setting.tokenKey)
    },
    methods: {
        ...mapActions('user', [
            'setAvatar'
        ]),
        changeAvatar(res) {
            this.setAvatar(res.message)
        },
        handleSelect(key, keyPath){
            this.active = key
        },
    }
};
</script>

<style lang="scss" scoped>
    /deep/.wrap{
        display: flex;
        .left{
            margin-right: 20px;
            .inner{
                width: 200px;
                padding: 30px 0;
                border-radius: 8px;
                background-color: #fff;
            }
            .avatar{
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }
            .menu{
                .el-menu-item.is-active{
                    color: #fff;
                    background-color: $main-color;
                }
            }
        }
        .right{
            flex: 1;
        }
    }
</style>