SmartParks_uniapp/pages/sys/workbench/unitManagement/employeeAudits.vue

<template>
  <view class="audits-container">
    <!-- 员工审核列表 -->
    <scroll-view
        class="list-container"
        scroll-y
        :refresher-enabled="true"
        refresher-background="#f7f7f7"
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="onRefresh"
        @scrolltolower="loadMore"
        :lower-threshold="50"
        scroll-with-animation>

      <!-- 员工审核卡片 -->
      <view v-for="(item, index) in list" :key="index" class="employee-card" @click="handleCardClick(item)">
        <!-- 左侧头像 -->
        <image class="avatar" :src="item.avatar || '/static/ic_avg.png'"/>

        <!-- 右侧信息 -->
        <view class="info-container">
          <view class="name-row">
            <text class="name">{{ item.name }}</text>
            <image
                class="gender-icon"
                :src="item.gender === '1' ? '/static/ic_man.png' : '/static/ic_women.png'"
            />
            <text class="phone">{{ item.phone }}</text>
          </view>

          <text class="time">{{ item.applyTime }}</text>
        </view>

        <!-- 审核状态 - 精确贴合右上角 -->
        <view class="status-badge"
              :class="{
                'status-pending': item.status === '1',
                'status-processed': item.status === '2'
              }">
          {{ item.status === '1' ? "待处理" : "已处理" }}
        </view>
      </view>

      <!-- 底部加载提示 -->
      <view v-if="loading" class="loading-text">加载中...</view>
      <view v-if="noMore" class="loading-text">没有更多数据了</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {name: "于永乐", gender: "1", phone: "12448155", applyTime: "2025-09-01  10:51:32", status: "1"}
      ], // 员工列表数据
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页数量
      noMore: false, // 是否没有更多数据
      loading: false, // 加载状态
      refresherTriggered: false // 下拉刷新状态
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    // 下拉刷新
    async onRefresh() {
      this.refresherTriggered = true;
      this.pageNum = 1;
      this.noMore = false;
      await this.loadData();
      this.refresherTriggered = false;
    },
    // 滚动加载更多
    async loadMore() {
      if (this.loading || this.noMore) return;
      this.pageNum++;
      await this.loadData();
    },
    // 请求数据
    async loadData() {
      this.loading = true;
      try {
        let res = await this.$u.api.getEmployeeAuditList({
          pageNum: this.pageNum,
          pageSize: this.pageSize
        });

        if (res.code == "200") {
          let rows = res.rows || [];
          if (rows.length < this.pageSize) {
            this.noMore = true;
          }

          if (this.pageNum === 1) {
            this.list = rows;
          } else {
            this.list = [...this.list, ...rows];
          }
        }
      } catch (e) {
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
    // 点击卡片事件
    handleCardClick(item) {
      if (item.status === '1') {
        uni.navigateTo({
          url: `/pages/sys/workbench/unitManagement/auditsDetail`
        });
      }
    }
  }
};
</script>

<style scoped>
.audits-container {
  height: 100vh;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.list-container {
  flex: 1;
  padding: 28rpx 30rpx;
  box-sizing: border-box;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 24rpx;
}

.info-container {
  flex: 1;
  padding-right: 120rpx; /* 为状态标签留出空间 */
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.name {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  margin-right: 20rpx;
}

.gender-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.phone {
  font-size: 26rpx;
  color: #999;
}

.time {
  font-size: 26rpx;
  color: #999;
  margin-top: 8rpx;
}

.employee-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  overflow: hidden; /* 新增：确保状态标签圆角贴合 */
}

.status-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 28rpx;
  padding: 6rpx 20rpx;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 26%;
  text-align:left;
  font-weight: bold;
  color: #fff;
}

.status-pending {
  background: linear-gradient(to right, #007CFF, #FFFFFF); /* 蓝色渐变 */
}

.status-processed {
  background: linear-gradient(to right, #A5A5A5, #FFFFFF); /* 灰色渐变 */
  color: #FBFDFF;
}

.loading-text {
  text-align: center;
  color: #999;
  font-size: 26rpx;
  padding: 20rpx;
}

/* 隐藏滚动条 */
.list-container {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.list-container::-webkit-scrollbar {
  display: none;
}

:deep .list-container ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background-color: transparent !important;
}
</style>