FE_middlePlatform_server/src/views/setting/index.vue

<template>
    <div class="wrap">
        <div class="left">
            <div class="inner">
                <div class="text-center">
                    <img :src="$store.state.avatar" class="avatar" />
                    <el-upload :headers="{token}" :action="this.api.updateUserAvatars" name="file" :limit="10" :show-file-list="false" :on-success="changeAvatar">
                        <el-button type="text" size="small">点击更换头像</el-button>
                    </el-upload>
                </div>

                <ul class="menu">
                    <li v-for="item in typeList" :key="item.index" :class="{active: item.index == active}">
                        {{ item.title }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="right">
            <info ref="info" @updateStatus="updateStatus"></info>
        </div>
    </div>
</template>

<script>
import Setting from '@/setting'
import { mapState,mapActions } from 'vuex'
import info from './info'
import util from '@/libs/util'
export default {
    data() {
        return {
            token: sessionStorage.getItem('token'),
            typeList: [
                {
                    index: '1',
                    title: '用户信息'
                }
            ],
            active: '1',
            edited: false
        };
    },
    components: { info },
    computed: {
        ...mapState('user', [
            'avatar'
        ]),
    },
    // 离开的时候判断是否有保存更改的信息,没有则拦截并提示
    beforeRouteLeave(to, from, next) {
        if(this.edited){
            this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', {
                type: 'warning'
            }).then(() => {
                this.$refs.info.save()
                next(false)
            }).catch(() => {
                next(false)
            })
        }else{
            next()
        }
    },
    mounted() {
        
    },
    methods: {
        ...mapActions('user', [
            'setAvatar'
        ]),
        changeAvatar(res) {
            this.setAvatar(res.message)
        },
        updateStatus(status){
            this.edited = status
        }
    }
};
</script>

<style lang="scss" scoped>
.wrap{
    display: flex;
    width: 1280px;
    margin: 0 auto;
    background-color: #f3f6fa;
    .text-center {
      text-align: center;
    }
    .left{
        margin-right: 12px;
        background-color: #fff;
        box-shadow: 2px 0px 6px 0px #EEEEEE;
        .inner{
            width: 170px;
            padding: 20px 0;
        }
        .avatar{
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .menu{
            margin-top: 32px;
            li{
                padding: 0 20px;
                color: #303133;
                font-size: 14px;
                line-height: 38px;
                cursor: pointer;
                &.active{
                    color: #fff;
                    background-color: #9278ff;
                }
            }
        }
    }
    .right{
        flex: 1;
    }
}
</style>