duoji-frontend/src/views/center.vue

<template>
    <div class="center bg-white">
        <div class="center-table">
            <a-row>
                <a-col span="4">登录账户</a-col>
                <a-col span="8">{{userInfo.account || '-'}}</a-col>

                <a-col span="4">用户姓名</a-col>
                <a-col span="8">{{userInfo.name || '-'}}</a-col>
            </a-row>

            <a-row>
                <a-col span="4">手机号码</a-col>
                <a-col span="8">{{userInfo.phone || '-'}}</a-col>

                <a-col span="4">邮箱</a-col>
                <a-col span="8">{{userInfo.email || '-'}}</a-col>
            </a-row>
        </div>
        <a-row>
            <a-col span="24" align="center">
                <a-button class="mt16" @click="editPwd">修改密码</a-button>
            </a-col>
        </a-row>
    </div>
</template>

<script>
export default {
    name: "center",
    data() {
        return {
            userInfo: {}
        };
    },
    methods: {
        editPwd() {
            this.$axios({
                url: "/app/userCenter",
                method: "GET"
            }).then(res => {
                window.open(
                    res.data.url + "?redirect=" + location.origin + "#/center/edit",
                    "_self"
                );
            }).catch(err => {

            });
            // this.$api.httpApi.userCenter({
            //     data: {
            //         pageNum:this.pageNum,
            //         pageSize:this.pageSize,
            //     }
            // }).then(res => {
            //     console.log(res)
            // });
        }
    },
    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    }
};
</script>

<style lang='scss'>
.center {
    padding: 24px;
    &-table {
        .ant-row {
            display: flex;
            border-right: 1px solid #e9e9e9;
            div {
                padding: 16px;
                border-top: 1px solid #e9e9e9;
                border-left: 1px solid #e9e9e9;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                display: flex;
                align-items: center;
            }
            .ant-col-4 {
                background-color: #fafafa;
            }
        }
        .ant-row:last-child {
            border-bottom: 1px solid #e9e9e9;
        }
    }
}
</style>