LotteryAdmin/src/views/user/userDiary/index.vue

<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch :loading="loading" :search-form="searchForm" @submit="onSubmit" />
    <YMTable ref="table" :table-key="5" :index="false" :selection="false" :columns="columns"
      :rows-actions="rowsActions" :apis="apis" :custom-style="{ height: 'calc(100vh - 200px)' }"
      :actions-width="100"
      :actions-fixed="false">
    </YMTable>

    <!-- 查看详情弹窗 -->
    <Dialog ref="viewDialog" :dialog-actions="{
      width: '820px',
      title: '登录日志详情',
      confirmButtom: false,
    }">
      <template slot="content">
        <div style="display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 0; max-height: 500px; overflow-y: auto;">
          <div v-for="field in viewFields" :key="field.prop"
            style="flex: 0 0 calc(33.33% - 12px); background: #f5f7fa; border-radius: 6px; padding: 12px 16px; box-sizing: border-box; border: 1px solid #e4e7ed;">
            <div style="font-size: 13px; color: #909399; margin-bottom: 4px;">{{ field.label }}</div>
            <div v-if="field.type === 'status'"
              :style="{ color: Number(field.rawValue) === 1 ? '#18C80A' : '#909399', fontSize: '15px' }">
              {{ field.value }}
            </div>
            <div v-else style="color: #303133; font-size: 15px; word-break: break-all;">{{ field.value }}</div>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/components/Dialog/index.vue'

export default {
  name: 'UserDiary',
  components: {
    Dialog
  },
  data() {
    return {
      loading: false,
      viewRow: null,
      searchForm: [
        { label: '会员ID', type: 'input', prop: 'member_id', clearable: true },
        { label: '会员昵称', type: 'input', prop: 'first_name', clearable: true },
        { label: '日期范围', type: 'daterange', prop: 'dateRange', valueFormat: 'yyyy-MM-dd',
          startPlaceholder: '开始日期', endPlaceholder: '结束日期' }
      ]
    }
  },
  computed: {
    apis() {
      return {
        list: {
          url: 'user/loginLog',
          dataParam: 'data.data',
          resultParam: 'data'
        }
      }
    },
    columns() {
      return [
        { label: '会员ID', prop: 'member_id', width: 100 },
        { label: '会员昵称', prop: 'first_name', width: 140 },
        { label: 'IP地址', prop: 'login_ip', width: 150, align: 'center',
          method: (row) => row.login_ip || '--' },
        { label: '国家/地区', prop: 'country', width: 120, align: 'center',
          method: (row) => row.country || '--' },
        { label: '浏览器核心', prop: 'browser', width: 120, align: 'center',
          method: (row) => row.browser || '--' },
        { label: '操作系统', prop: 'os', width: 120, align: 'center',
          method: (row) => row.os || '--' },
        { label: '状态', prop: 'status', width: 80, align: 'center',
          html: true,
          method: (row) => {
            if (row.status == null) return '--'
            const isOnline = Number(row.status) === 1
            const color = isOnline ? '#18C80A' : '#909399'
            const text = isOnline ? '在线' : '离线'
            return `<span style="color: ${color}">${text}</span>`
          } },
        { label: '在线时长(分)', prop: 'online_duration', width: 120, align: 'center',
          method: (row) => row.online_duration != null ? row.online_duration : '--' },
        { label: '登入时间', prop: 'created_at', width: 175, align: 'center' },
        { label: '登出时间', prop: 'logout_time', width: 175, align: 'center',
          method: (row) => row.logout_time ? row.logout_time : '--' },
      ]
    },
    rowsActions() {
      return [
        {
          key: 'view',
          label: '查看',
          method: (row) => {
            this.viewRow = { ...row }
            this.$refs.viewDialog.open()
          }
        }
      ]
    },
    viewFields() {
      if (!this.viewRow) return []
      const row = this.viewRow
      return [
        { label: '会员ID', prop: 'member_id', value: row.member_id ?? '--' },
        { label: '会员昵称', prop: 'first_name', value: row.first_name || '--' },
        { label: 'IP地址', prop: 'login_ip', value: row.login_ip || '--' },
        { label: '国家/地区', prop: 'country', value: row.country || '--' },
        { label: '浏览器核心', prop: 'browser', value: row.browser || '--' },
        { label: '操作系统', prop: 'os', value: row.os || '--' },
        { label: '状态', prop: 'status', value: row.status != null ? (Number(row.status) === 1 ? '在线' : '离线') : '--', type: 'status', rawValue: row.status },
        { label: '在线时长(分)', prop: 'online_duration', value: row.online_duration != null ? row.online_duration : '--' },
        { label: '登入时间', prop: 'created_at', value: row.created_at || '--' },
        { label: '登出时间', prop: 'logout_time', value: row.logout_time || '--' }
      ]
    }
  },
  methods: {
    onSubmit(params = {}) {
      const query = { ...params }
      if (params.dateRange && params.dateRange.length === 2) {
        query.start_time = params.dateRange[0]
        query.end_time = params.dateRange[1]
      }
      delete query.dateRange
      this.$refs.table.getList(query)
    }
  },
  mounted() {
    this.onSubmit()
  }
}
</script>

<style scoped>
.new-app-container { display: flex; flex-direction: column; height: 100%; padding: 16px; background: #f5f7fa; }
</style>