<template> <el-dialog title="用户详情" center :visible.sync="dialogObj.show" width="800px"> <el-row align="middle" type="flex"> <el-col :span="4"><label>头像</label></el-col> <el-col :span="8"> <img :src="userDetail.avatar"/> </el-col> <el-col :span="4"><label>昵称</label></el-col> <el-col :span="8">{{userDetail.nickname}}</el-col> </el-row> <el-row> <el-col :span="4"><label>手机号</label></el-col> <el-col :span="8">{{userDetail.mobile}}</el-col> <el-col :span="4"><label>用户ID</label></el-col> <el-col :span="8">{{userDetail.user_id}}</el-col> </el-row> <el-row> <el-col :span="4"><label>生日</label></el-col> <el-col :span="8">{{userDetail.birthday}}</el-col> <el-col :span="4"><label>邀请类型</label></el-col> <el-col :span="8">{{userDetail.invite_type}}</el-col> </el-row> <el-row> <el-col :span="4"><label>等级</label></el-col> <el-col :span="8">{{userDetail.level}}</el-col> <el-col :span="4"><label>邀请人ID</label></el-col> <el-col :span="8">{{userDetail.invite_user_id}}</el-col> </el-row> <el-row align="middle" type="flex"> <el-col :span="4"><label>邀请码</label></el-col> <el-col :span="8"> {{userDetail.invite_code}} </el-col> <el-col :span="4"><label>老师ID</label></el-col> <el-col :span="8"> {{userDetail.teacher_id}} </el-col> </el-row> <el-row> <el-col :span="4"><label>注册时间</label></el-col> <el-col :span="8">{{userDetail.created_at}}</el-col> <el-col :span="4"><label>最后登录</label></el-col> <el-col :span="8">{{userDetail.last_login_at}}</el-col> </el-row> </el-dialog> </template> <script> import {getUserDetailApi} from "../../service/api"; export default { name: "detail", props:[ 'dialogObj' ], data(){ return { userDetail:{}, show:false } }, methods:{ getDetail(){ if(!this.dialogObj.id) return; getUserDetailApi(this.dialogObj.id).then(res=>{ this.userDetail = res }) }, initDialog(){ this.getDetail(); this.show = this.dialogObj.show; } }, watch:{ 'dialogObj.show'(value){ if(value){ this.loading = true; this.initDialog() } }, show(value){ this.$emit("changeShow",value); } } } </script> <style scoped lang="less"> .el-col{ height: 60px; img{ width: 50px; border-radius: 100px; } label{ color: #5982e6; } } </style>