ludu-admin-vue3/src/views/member/user/detail/index.vue

<template>
  <div v-loading="loading">
    <el-row :gutter="10" class="detail-info-warp">
      <el-col :span="14" class="detail-info-item">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <CardTitle title="基本信息" />
              <el-button
                v-if="userInfo.id"
                type="primary"
                text
                @click="openForm('update', userInfo.id)"
                >编辑</el-button
              >
            </div>
          </template>
          <el-row>
            <el-col :span="4">
              <ElAvatar shape="square" :size="140" :src="userInfo.avatar || undefined" />
            </el-col>
            <el-col :span="20">
              <el-descriptions :column="2">
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="ep:user" />
                      用户名
                    </div>
                  </template>
                  {{ userInfo.name || '空' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="ep:user" />
                      昵称
                    </div>
                  </template>
                  {{ userInfo.nickname }}</el-descriptions-item
                >
                <el-descriptions-item label="手机号">
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="ep:phone" />
                      手机号
                    </div>
                  </template>
                  {{ userInfo.mobile }}</el-descriptions-item
                >
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="fa:mars-double" />
                      性别
                    </div>
                  </template>
                  <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="userInfo.sex" />
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="ep:location" />
                      所在地
                    </div>
                  </template>
                  {{ userInfo.areaId }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="ep:position" />
                      注册IP
                    </div>
                  </template>
                  {{ userInfo.registerIp }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="fa:birthday-cake" />
                      生日
                    </div>
                  </template>
                  {{ userInfo.birthday ? formatDate(userInfo.birthday) : '空' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="ep:calendar" />
                      注册时间
                    </div>
                  </template>
                  {{ userInfo.createTime ? formatDate(userInfo.createTime) : '空' }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template #label>
                    <div class="cell-item">
                      <Icon icon="ep:calendar" />
                      最后登录时间
                    </div>
                  </template>
                  {{ userInfo.loginDate ? formatDate(userInfo.loginDate) : '空' }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="10" class="detail-info-item">
        <el-card shadow="never">
          <template #header>
            <CardTitle title="账户信息(WIP)" />
          </template>
          <AccountInfo />
        </el-card>
      </el-col>
      <el-card header="账户明细" style="width: 100%; margin-top: 20px" shadow="never">
        <template #header>
          <CardTitle title="账户明细" />
        </template>
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="积分" name="point">
            <PointList v-if="userInfo.id" :member-id="userInfo.id" />
          </el-tab-pane>
          <el-tab-pane label="签到" name="sign">
            <SignList v-if="userInfo.id" :member-id="userInfo.id" />
          </el-tab-pane>
          <el-tab-pane label="成长值" name="third">成长值(WIP)</el-tab-pane>
          <el-tab-pane label="余额" name="fourth">余额(WIP)</el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <UserForm ref="formRef" @success="getUserData(userInfo.id)" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import PointList from '@/views/member/user/components/point-list.vue'
import SignList from '@/views/member/user/components/sign-list.vue'
import CardTitle from '@/views/member/user/components/card-title.vue'
import { ElMessage } from 'element-plus'
import { getUser, UserBaseInfoVO } from '@/api/member/user'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import UserForm from '@/views/member/user/UserForm.vue'
import AccountInfo from '@/views/member/user/components/account-info.vue'
defineOptions({ name: 'MemberDetail' })

const activeName = ref('point')
const loading = ref(true)
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}
let userInfo = ref<UserBaseInfoVO>({
  areaId: undefined,
  avatar: undefined,
  birthday: undefined,
  createTime: undefined,
  id: undefined,
  loginDate: undefined,
  loginIp: '',
  mark: '',
  mobile: '',
  name: '',
  nickname: '',
  password: null,
  registerIp: undefined,
  sex: 0,
  status: 0
})

const getUserData = async (id: any) => {
  loading.value = true
  try {
    // userInfo.value = Object.assign(userInfo, await getUser(parseInt(id as string)))
    userInfo.value = await getUser(parseInt(id as string))
  } finally {
    loading.value = false
  }
}
const route = useRoute()
let router = useRouter()
const { member_id } = route.query
onMounted(() => {
  if (!member_id) {
    ElMessage.warning('会员id 未携带！')
    router.back()
    return
  }
  getUserData(member_id)
})
</script>

<style scoped lang="css">
.detail-info-item:first-child {
  padding-left: 0 !important;
}
/* first-child 不生效有没有大佬给看下q.q */
.detail-info-item:nth-child(2) {
  padding-right: 0 !important;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cell-item {
  display: inline;
}
.cell-item::after {
  content: ':';
}
</style>