cadmin/web/src/views/account/accountList/info.vue

<template>
  <div>
    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
      <n-space vertical :size="14">
        <n-alert type="info" :show-icon="false">
          正在查询玩家信息，用户ID：{{ userId }} 刷新时间：{{ refreshDate }} &nbsp;
          <n-button :loading="show" @click="getUserInfo" size="small" secondary strong>
            <template #icon>
              <n-icon>
                <Refresh />
              </n-icon>
            </template>
          </n-button>
        </n-alert>
      </n-space>
    </n-card>

    <n-spin :show="show" description="正在从服务器查询玩家信息...">
      <n-card>
        <n-tabs
          type="card"
          class="card-tabs"
          default-value="baseInfo"
          size="small"
          animated
          tab-style="min-width: 80px;"
          style="margin: 0 -4px"
          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
          :on-update:value="updateTabs"
        >
          <n-tab-pane name="baseInfo" tab="玩家基本信息">
            <BaseInfo :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <!--          <n-tab-pane name="talent" tab="玩家天赋">
            <Talent :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="character" tab="玩家角色">
            <Role ref="RoleRef" :userId="userId" :userInfo="userInfo" />
          </n-tab-pane> -->
          <n-tab-pane name="chapter" tab="关卡进度">
            <Chapter :userId="userId" />
          </n-tab-pane>
          <!-- <n-tab-pane name="guide" tab="引导任务">
            <Guide :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="equipment" tab="玩家装备">
            <Equipment ref="EquipmentRef" :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="gem" tab="部位锻造">
            <Gem ref="GemRef" :userId="userId" :userInfo="userInfo" />
          </n-tab-pane> -->
          <n-tab-pane name="material" tab="玩家道具">
            <Material ref="MaterialRef" :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="rune" tab="玩家符文">
            <Rune ref="RuneRef" :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="legend" tab="玩家铭文">
            <Legend ref="LegendRef" :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <!-- <n-tab-pane name="recharge" tab="充值记录">
            <RechargeList :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="funding" tab="消费变动记录">
            <Consumption :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="levelProgress" tab="关卡进度详情">
            <LevelProgress :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>

          <n-tab-pane name="fighting" tab="战斗数据">
            <Fighting :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="advLog" tab="广告统计">
            <AdvLog :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="loginLog" tab="登录记录">
            <LoginLog :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>
          <n-tab-pane name="alarmData" tab="异常数据">
            <AlarmData :userId="userId" :userInfo="userInfo" />
          </n-tab-pane>-->
        </n-tabs>
      </n-card>
    </n-spin>
  </div>
</template>

<style scoped>
  .card-tabs .n-tabs-nav--bar-type {
    padding-left: 4px;
  }
</style>

<script lang="ts" setup>
  import { onMounted, inject, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useMessage } from 'naive-ui';
  import { SocketEnum } from '@/enums/socketEnum';
  import { getSocket, addOnMessage } from '@/utils/websocket';
  import { userInfoObj } from '@/views/account/accountList/userInfo';
  import { timestampToTime } from '@/utils/dateUtil';
  import { Refresh } from '@vicons/ionicons5';
  import BaseInfo from './components/BaseInfo.vue';
  import Material from './components/Material.vue';
  import Rune from './components/Rune.vue';
  import Legend from './components/Legend.vue';
  import Chapter from './components/Chapter.vue';

  interface Props {
    userId?: number | string;
  }
  const props = withDefaults(defineProps<Props>(), { userId: 0 });

  const router = useRouter();
  const userId = Number(router.currentRoute.value.params.id ?? props.userId);
  const userInfo = ref(userInfoObj);
  const show = ref(false);
  const refreshDate = ref('');
  const message = useMessage();
  const onMessageList = inject('onMessageList');
  const queryUserMessage = (res) => {
    console.log('queryUserMessage', res);
    const data = JSON.parse(res.data);
    if (data.type !== SocketEnum.TypeQueryUser) {
      return;
    }

    show.value = false;

    if (data.code == SocketEnum.CodeErr) {
      message.success('没有查询到该用户的档案');
      router.push({ name: 'account-list' });
      return;
    }
    userInfo.value = JSON.parse(data.msg);
    refreshDate.value = timestampToTime(userInfo.value.serverts);

    triggerRefresh();
  };

  addOnMessage(onMessageList, queryUserMessage);

  onMounted(() => {
    if ((userId === undefined || userId < 1) && props.userId < 1) {
      message.error('用户ID不正确，请检查！');
      return;
    }

    getUserInfo();
  });

  function getUserInfo() {
    show.value = true;
    if (getSocket() === undefined) {
      message.error('socket连接异常，请重试！');
      router.push({ name: 'account-list' });
      return;
    }

    try {
      getSocket().send(
        JSON.stringify({
          type: SocketEnum.TypeQueryUser,
          data: userId + '',
        })
      );
    } catch (err) {
      console.log('错误信息：' + err.message);

      setTimeout(function () {
        message.error('socket连接被断开，正在尝试恢复....');
        getSocket().send(
          JSON.stringify({
            type: SocketEnum.TypeQueryUser,
            data: userId + '',
          })
        );
        message.success('socket已恢复');
      }, 1000);
    }
  }

  function updateTabs(value: string | number) {
    console.log('value:' + value);
  }

  const RoleRef = ref();
  const EquipmentRef = ref();
  const MaterialRef = ref();
  const RuneRef = ref();
  const LegendRef = ref();
  const GemRef = ref();
  function triggerRefresh() {
    if (RoleRef.value !== undefined && RoleRef.value !== null) {
      RoleRef.value.fatherRefresh();
    }
    if (EquipmentRef.value !== undefined && EquipmentRef.value !== null) {
      EquipmentRef.value.fatherRefresh();
    }
    if (MaterialRef.value !== undefined && MaterialRef.value !== null) {
      MaterialRef.value.fatherRefresh();
    }
    if (RuneRef.value !== undefined && RuneRef.value !== null) {
      RuneRef.value.fatherRefresh();
    }
    if (LegendRef.value !== undefined && LegendRef.value !== null) {
      LegendRef.value.fatherRefresh();
    }
    if (GemRef.value !== undefined && GemRef.value !== null) {
      GemRef.value.fatherRefresh();
    }
  }
</script>