hellogithub-vue/src/components/User/UserInfo.vue

<template>
    <div style="display: flex;flex-direction: column;flex-wrap: nowrap" v-show="this.$cookie.get('username')!=null">
        <div  style="display: flex;flex-direction: row;align-items: center;width: 11vw;justify-content: space-between">
            <div @click="toUserPage" style="display: flex;flex-direction: row;align-items: center">
<!--                <el-avatar v-if="imageUrl===''" shape="square" style=" cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large"></el-avatar>-->
                <el-avatar v-if="this.$cookie.get('username')!==null" shape="square" style=" cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+this.$cookie.get('username')" size="large">{{this.$cookie.get('username')}}</el-avatar>
                <div style="margin-left: 5px;display: flex;flex-direction: column;justify-content: space-evenly">
                    <span style="cursor: pointer;font-weight: bold">{{this.$cookie.get('username')}}</span>
                    <span style="display: flex;justify-content: flex-start;cursor: pointer;font-weight: 800;font-size: 13px;color: #3b82f6">Lv.{{userLevel}}</span>
                </div>
            </div>

            <el-switch v-model="switchValue" style="">
            </el-switch>
        </div>
        <div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between;align-items: center">
            <span style="font-size: 10px;color: #9ca3af">贡献值</span>
            <span style="font-weight: bold;color: #59A3A4;font-size: 20px">{{ContributionValue}}/100</span>
        </div>
        <div style="margin-top: 10px">
            <el-progress :text-inside="true" :stroke-width="15" :percentage="ContributionValue"></el-progress>
        </div>
        <el-divider></el-divider>
        <div style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;">
            <el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-s-custom" class="link" @click="toUserPage">我的主页</el-link>
            <el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-switch-button" class="link" @click="signOut">退出登录</el-link>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import Vue from "vue";

export default {
    name: "UserInfo",
    data(){
        return{
            switchValue:false,
            ContributionValue:0,
            imageUrl:'',
            userLevel:null,
        }
    },
    created() {
         this.updateUserLevel();
         this.getUserInfo();
    },
    mounted() {
        this.getContributionValue();
        this.getUserInfo();
        setTimeout(()=>{
            this.updateUserLevel();
            this.getUserInfo();
        },1000)
    },
    methods: {
        signOut() {
            this.$cookie.delete('username');
            // deletecookie
            axios({
                method: 'get',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/deletesession',
                // URL 中的查询参数
                params: {}
            });
            if (this.$cookie.get('username') === null) {
                Vue.prototype.$notify({
                    title: '成功',
                    message: ('i', {style: 'color: teal'}, "退出成功！"),
                    type: 'success',
                    offset: 50
                });
                if (this.$route.path !== '/home') {
                    setTimeout(() => {
                        this.$router.push({
                            path: '/home'
                        })
                    }, 800)
                } else {
                    window.location.reload();
                }


            } else {
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: ('i', {style: 'color: teal'}, "退出失败！"),
                    type: 'success',
                    offset: 50
                });
            }


        },
        toUserPage() {
            this.$router.push({
                path: '/UserInfoPage',
                query: {
                    name: this.$cookie.get('username'),
                    refresh: true
                }
            })
        },
        getContributionValue() {
            var that = this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/contributionValue',
                // URL 中的查询参数
                params: {}
            }).then((res) => {
                // console.log(res);
                if (res.data.code === 500) {
                    return;
                } else {
                    that.ContributionValue = res.data;
                }

            });
        },
        getUserInfo() {
            var that = this;
            if(this.$cookie.get("username")!=null){
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
                    // URL 中的查询参数
                    params: {
                        username: this.$cookie.get("username")
                    }
                }).then(function (res) {
                    that.userLevel=res.data.userLevel;
                    // that.imageUrl = res.data.userAvatar;
                    // console.log(res);
                });
            }else{
                return;
            }
        },
        updateUserLevel(){
            if(this.$cookie.get("username")!=null){
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/levelup',
                    // URL 中的查询参数
                    params: {

                    }
                });
            }else{
                return;
            }
        },
        // changeAvatarByLocal(){
        //     var that=this;
        //     axios({
        //         method: 'post',
        //         // 请求的地址
        //         url: '/api/retUserAv',
        //         // URL 中的查询参数
        //         params:{
        //             username:this.$cookie.get('username'),
        //         },
        //         responseType:'blob'
        //     }).then((res)=>{
        //         that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
        //     })
        // },
    }
}
</script>

<style>

</style>