145 lines
4.1 KiB
Vue
145 lines
4.1 KiB
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> |