zhibo/Zhibo/admin/src/views/user/sign/list.vue

<template>
  <div class="divBox">
    <el-card shadow="never" class="ivu-mt">
      <div class="padding-add">
        <el-page-header @back="goBack" content="用户签到列表"></el-page-header>
        <div class="mt20">
          <!-- 搜索 -->
          <div class="mb20">
            <el-form inline size="small" :model="searchForm">
              <el-form-item>
                <el-input 
                  v-model="searchForm.nickname" 
                  placeholder="搜索用户昵称" 
                  clearable 
                  style="width: 200px;"
                  @keyup.enter.native="handleSearch"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="handleSearch">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 表格 -->
          <el-table :data="tableData" v-loading="loading" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" align="center" />
            <el-table-column label="用户昵称" width="150" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.nickname || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户头像" width="100" align="center">
              <template slot-scope="scope">
                <el-avatar 
                  :size="40" 
                  :src="scope.row.avatar"
                  shape="square"
                >
                  <span v-if="!scope.row.avatar">{{ scope.row.nickname ? scope.row.nickname.substr(0, 1) : '用' }}</span>
                </el-avatar>
              </template>
            </el-table-column>
            <el-table-column label="获得积分" width="120" align="center">
              <template slot-scope="scope">
                <el-tag type="warning">+{{ scope.row.number }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="类型" width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.type === 1 ? 'success' : 'primary'">
                  {{ scope.row.type === 1 ? '积分' : '经验' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="签到时间" min-width="180" align="center">
              <template slot-scope="scope">
                <span>{{ formatTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="acea-row row-right page mt20">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="searchForm.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { userSignListApi } from '@/api/sign';

export default {
  name: 'UserSignList',
  data() {
    return {
      searchForm: {
        nickname: '',
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 0,
      loading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      userSignListApi(this.searchForm)
        .then((res) => {
          // 兼容分页对象和直接数组两种格式
          if (res && res.list) {
            this.tableData = res.list || [];
            this.total = res.total || 0;
          } else if (Array.isArray(res)) {
            this.tableData = res;
            this.total = res.length;
          } else {
            this.tableData = [];
            this.total = 0;
          }
          this.loading = false;
        })
        .catch((err) => {
          console.error('获取用户签到列表失败:', err);
          // 如果后端接口不存在，使用模拟数据
          this.tableData = [
            { id: 675, uid: 1, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-11-29 19:50:49' },
            { id: 674, uid: 2, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-11-27 08:29:47' },
            { id: 673, uid: 3, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-11-19 16:44:20' },
            { id: 672, uid: 4, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-11-08 08:57:30' },
            { id: 671, uid: 5, nickname: '超级火爆女', avatar: '', number: 3, type: 1, createTime: '2025-11-05 16:44:29' },
            { id: 670, uid: 6, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-11-05 16:48:25' },
            { id: 669, uid: 7, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-11-03 14:09:20' },
            { id: 668, uid: 8, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-10-29 12:26:43' },
            { id: 667, uid: 9, nickname: '超级火爆女', avatar: '', number: 3, type: 1, createTime: '2025-10-23 19:48:56' },
            { id: 666, uid: 10, nickname: '超级火爆女', avatar: '', number: 2, type: 1, createTime: '2025-10-22 16:33:26' },
          ];
          this.total = 111;
          this.loading = false;
          this.$message.warning('后端接口暂未实现，显示模拟数据');
        });
    },
    handleSearch() {
      this.searchForm.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.searchForm.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getList();
    },
    formatTime(time) {
      if (!time) return '';
      return time;
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="scss">
.mt20 {
  margin-top: 20px;
}
.mb20 {
  margin-bottom: 20px;
}
</style>