调整

src/components/User/UserInfo.vue

@@ -0,0 +1,106 @@
+<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 style="display: flex;flex-direction: row;align-items: center">
+                <el-avatar shape="square" style=" background-color: #59A3A4;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large">{{this.$cookie.get('username')}}</el-avatar>
+                <div style="margin-left: 5px;display: flex;flex-direction: column;justify-content: space-evenly">
+                    <span style="font-weight: bold">{{this.$cookie.get('username')}}</span>
+                    <span style="font-weight: 800;font-size: 13px;color: #3b82f6">Lv.1</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,
+        }
+    },
+    mounted() {
+        this.getContributionValue();
+    },
+    methods:{
+        signOut(){
+            // deletecookie
+            var that=this;
+            axios({
+                method: 'get',
+                // 请求的地址
+                url: 'http://localhost:8082/helloGithub_war_exploded/deletesession',
+                // URL 中的查询参数
+                params: {
+                }
+            });
+            this.$cookie.delete('username');
+            if(this.$cookie.get('username')===null){
+                Vue.prototype.$notify({
+                    title: '成功',
+                    message: ('i', {style: 'color: teal'}, "退出成功！"),
+                    type: 'success',
+                    offset: 50
+                });
+                setTimeout(()=>{
+                    window.location.reload();
+                },1000)
+            }
+
+
+        },
+        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;
+                }
+
+            });
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>