uniugm/ui/src/components/game/userDetailAccount.vue

<script setup>

const props = defineProps({
  accountInfo: {},
})

const accountInfo = props.accountInfo

console.log("账户信息：", accountInfo)

let accountInfoFields = [{
  "filedKey1": "账户id",
  "filedValue1": accountInfo.account_id,
  "filedKey2": "平台",
  "filedValue2": accountInfo.platform,
}, {
  "filedKey1": "角色数",
  "filedValue1": accountInfo.role_list.length,
  "filedKey2": "渠道",
  "filedValue2": accountInfo.channel,
}, {
  "filedKey1": "注册时间",
  "filedValue1": accountInfo.created_at,
  "filedKey2": "注册ip",
  "filedValue2": accountInfo.created_ip,
}, {
  "filedKey1": "总付费金额",
  "filedValue1": accountInfo.total_pay_amount,
  "filedKey2": "总付费次数",
  "filedValue2": accountInfo.total_pay_times,
}, {
  "filedKey1": "首次付费时间",
  "filedValue1": accountInfo.first_pay_at,
  "filedKey2": "最后付费时间",
  "filedValue2": accountInfo.last_pay_at,
}, {
  "filedKey1": "登录设备数（暂无）",
  "filedValue1": 0,
  "filedKey2": "最后登录时间",
  "filedValue2": accountInfo.last_login_time,
},]

let accountRoleList = []
let currencyItemColList = []

let isFirstRole = true
accountInfo.role_list.forEach(role => {
  let i = 0;

  role.currency_items.forEach(item => {
    i++
    let fieldName = "currencyName" + i
    let fieldValue = "currencyNum" + i
    role[fieldName] = item.desc
    role[fieldValue] = item.item_num

    if (isFirstRole) {
      currencyItemColList.push({colProp: fieldValue, colLabel: item.desc})
    }
  })

  isFirstRole = false
  accountRoleList.push(role)
})

// console.log("role list:", accountRoleList)
// console.log("currency item list:", currencyItemColList)

Object.keys((props.accountInfo)).forEach(key => {
  const account = props.accountInfo[key]
})


const tableCellStyle = (row) => {
  if (row.columnIndex === 0 || row.columnIndex === 2) {
    // return 'background:#fde9d9 !import'
    return {"font-weight": "bold", "color": "black"}
  } else {
    return {}
  }
}

</script>

<template>
  <div>
    <el-row>
      <el-table :data="accountInfoFields" style="width: 100%" table-layout="auto" border :cell-style="tableCellStyle"
                :show-header="false">
        <el-table-column prop="filedKey1" label="" width="180"/>
        <el-table-column prop="filedValue1" label="" width="200"/>
        <el-table-column prop="filedKey2" label="" width="180"/>
        <el-table-column prop="filedValue2" label="" width="200"/>
      </el-table>
    </el-row>
    <el-row>
      <!--      <el-button disabled type="primary" style="margin-bottom: 5px;margin-top: 5px">角色详情</el-button>-->
      <el-divider content-position="left">角色详情</el-divider>
      <el-table class="roleDetailList" :data="accountRoleList" border :show-header="true"
                style="width: 100%">
        <el-table-column prop="platform" label="平台"/>
        <el-table-column prop="server_id" label="区服"/>
        <el-table-column prop="name" label="角色名称" width="100%"/>
        <el-table-column prop="role_id" label="角色id"/>
        <el-table-column prop="total_pay_amount" label="充值金额"/>
        <el-table-column prop="level" label="等级"/>
        <el-table-column prop="created_at" label="创建时间" width="100"/>
        <el-table-column prop="last_login_time" label="最后登录时间" width="100"/>
        <el-table-column v-for="colInfo in currencyItemColList" :prop="colInfo.colProp" :label="colInfo.colLabel"/>
      </el-table>
    </el-row>
  </div>
</template>

<style scoped>

.roleDetailList :deep(.el-table__header-wrapper, .el-table__fixed-header-wrapper) {
  th {
    word-break: break-word;
    background-color: #f8f8f9 !important;
    color: #515a6e;
    height: 40px !important;
    font-size: 13px;
  }
}

.roleDetailList :deep(.el-table__header .el-table-column--selection .cell) {
  width: 60px !important; /* 选择器越具体优先级越高 */
}

.roleDetailList :deep(.el-table .fixed-width .el-button--small) {
  padding-left: 0;
  padding-right: 0;
  width: 20px !important;
}

.roleDetailList :deep(.el-table__header) {
  background: #f5f7fa !important;
}

.roleDetailList :deep(.el-table__row) td {
  border-color: #ebeef5;
}

</style>