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

<template>
  <view class="audits-container">
    <!-- 员工审核列表 -->
    <scroll-view
        class="employeeList-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 employeeList" :key="index" class="employee-card" @click="handleCardClick(item)">
        <!-- 左侧头像 -->
        <image class="avatar" :src="item.img || '/static/ic_avg.png'"/>

        <!-- 右侧信息 -->
        <view class="info-container">
          <view class="name-row">
            <text class="name">{{ item.userName }}</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.createTime }}</text>
        </view>

        <!-- 审核状态 - 精确贴合右上角 -->
        <view class="status-badge"
              :class="{
                'status-pending': item.isAuditState === 1,
                'status-processed': item.isAuditState === 2
              }">
          {{ item.isAuditState === 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 {
      employeeList: [], // 员工列表数据
      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.unit.queryEmployee({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          unitId: uni.getStorageSync('lifeData').vuex_user.unitId,
        });
        if (res.code == "200") {
          let rows = res.rows || [];
          if (rows.length < this.pageSize) {
            this.noMore = true;
          }

          if (this.pageNum === 1) {
            this.employeeList = rows;
          } else {
            this.employeeList = [...this.employeeList, ...rows];
          }
          await this.getImageUrl();
        }
      } catch (e) {
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
    // 点击卡片事件
    handleCardClick(item) {
      uni.navigateTo({
        url: `/pages/sys/workbench/unitManagement/auditsDetail?id=${item.id}`,
      });
    },
    async getImageUrl() {
      // 收集所有需要获取链接的图片ID
      const imgIds = [];
      const imgIdToIndexMap = []; // 保存图片ID对应的list索引

      for (let i = 0; i < this.employeeList.length; i++) {
        const item = this.employeeList[i];
        if (item.img) {
          imgIds.push(item.img);
          imgIdToIndexMap.push({
            id: item.img,
            index: i
          });
        }
      }

      // 如果有图片ID需要处理，则调用API一次获取所有图片链接
      if (imgIds.length > 0) {
        console.log(imgIds);
        try {
          const imgRes = await this.$u.api.getImageUrl({}, imgIds.join(','));
          if (imgRes.code == 200 && imgRes.data) {
            // 将返回的图片URL映射回对应的list项
            imgRes.data.forEach(imgItem => {
              const mapping = imgIdToIndexMap.find(m => m.id === imgItem.ossId);
              if (mapping) {
                this.$set(this.employeeList[mapping.index], 'img',  this.vuex_config.imgUrl+imgItem.url);
              }
            });
          }
          console.log(this.employeeList);
        } catch (error) {
          console.error('获取图片链接失败:', error);
        }
      }
    },
  }
};
</script>

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

.employeeList-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;
}

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

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

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