zhxy-jsd/src/pages/view/analysis/jl/personnelList.vue

<!-- src/pages/view/analysis/jl/personnelList.vue -->
<template>
  <view class="personnel-list-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">{{ pageTitle }}</text>
      <text class="refresh-btn" @click="refreshData">刷新</text>
    </view>

    <!-- 筛选信息 -->
    <view class="filter-info" v-if="njId && njmc">
      <text class="filter-text">{{ njmc }}</text>
    </view>

    <!-- 人员列表 -->
    <view class="personnel-list">
      <view 
        class="personnel-item" 
        v-for="personnel in personnelList" 
        :key="personnel.id"
      >
        <view class="personnel-main-info">
          <text class="personnel-name">{{ personnel.xm }}</text>
          <text class="personnel-class">{{ personnel.njmc }}{{ personnel.bjmc }}</text>
        </view>
        <view class="personnel-status">
          <view class="status-tag" :class="getStatusClass()">
            {{ getStatusText() }}
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="personnelList.length === 0 && !isLoading">
      <text class="empty-text">暂无人员数据</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="isLoading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 信息推送按钮 - 只在未接龙时显示 -->
    <view class="push-button-container" v-if="type === 'wjl' && personnelList.length > 0">
      <button class="push-button" @click="handlePushMessage">信息推送</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPersonnelListApi, pushMessageApi } from '@/api/base/jlApi'

interface Personnel {
  id: string;
  xm: string;
  njmc: string;
  bjmc: string;
  jlts: number;
}

const jlId = ref('')
const type = ref('')
const pageTitle = ref('')
const bjId = ref('')
const njId = ref('')
const njmc = ref('')
const personnelList = ref<Personnel[]>([])
const isLoading = ref(false)

// 获取状态样式类
const getStatusClass = () => {
  switch (type.value) {
    case 'yjl':
      return 'completed'
    case 'wjl':
      return 'pending'
    case 'wgz':
      return 'unfollowed'
    default:
      return ''
  }
}

// 获取状态文本
const getStatusText = () => {
  switch (type.value) {
    case 'yjl':
      return '已接龙'
    case 'wjl':
      return '未接龙'
    case 'wgz':
      return '未关注'
    default:
      return ''
  }
}

// 刷新数据
const refreshData = async () => {
  await loadPersonnelData()
}

// 处理信息推送
const handlePushMessage = async () => {
  try {
    uni.showModal({
      title: '确认推送',
      content: `确定要对 ${personnelList.value.length} 名未接龙人员进行信息推送吗？`,
      success: async (res) => {
        if (res.confirm) {
          await pushMessage()
        }
      }
    })
  } catch (error) {
    console.error('推送确认失败:', error)
  }
}

// 执行信息推送
const pushMessage = async () => {
  try {
    uni.showLoading({ title: '推送中...' })
    
    const params: any = {
      jlId: jlId.value
    }
    
    // 如果指定了年级，添加年级参数
    if (njId.value) {
      params.njId = njId.value
    }
    
    // 如果指定了班级，添加班级参数
    if (bjId.value) {
      params.bjId = bjId.value
    }
    
    console.log('推送API参数:', params)
    
    const result = await pushMessageApi(params)
    
    if (result && result.resultCode === 1) {
      uni.showToast({
        title: '推送成功',
        icon: 'success'
      })
      
      // 延迟关闭当前页面
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 1500)
    } else {
      uni.showToast({
        title: result?.message || '推送失败',
        icon: 'error'
      })
    }
    
  } catch (error) {
    console.error('推送失败:', error)
    uni.showToast({
      title: '推送失败',
      icon: 'error'
    })
  } finally {
    uni.hideLoading()
  }
}

// 加载人员数据
const loadPersonnelData = async () => {
  try {
    isLoading.value = true
    
    const params: any = {
      jlId: jlId.value,
      type: type.value
    }
    
    // 如果指定了班级，添加班级参数
    if (bjId.value) {
      params.bjId = bjId.value
    }
    
    // 如果指定了年级，添加年级参数
    if (njId.value) {
      params.njId = njId.value
    }
    
    console.log('调用API参数:', params)
    
    const result = await getPersonnelListApi(params)
    
    console.log('API返回结果:', result)
    
    // 检查返回的数据结构
    if (result) {
      if (Array.isArray(result)) {
        // 如果直接返回数组
        personnelList.value = result
        console.log('设置人员列表数据(数组):', personnelList.value)
      } else if (result.result && Array.isArray(result.result)) {
        // 如果返回的是 {result: [...]} 格式
        personnelList.value = result.result
        console.log('设置人员列表数据(对象):', personnelList.value)
      } else {
        console.log('数据格式不正确:', result)
      }
    } else {
      console.log('没有获取到人员数据')
    }
    
  } catch (error) {
    console.error('加载人员数据失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'error'
    })
  } finally {
    isLoading.value = false
  }
}

onLoad((options) => {
  console.log('personnelList onLoad options:', options)
  
  if (options.jlId && options.type) {
    jlId.value = options.jlId
    type.value = options.type
    
    // 设置页面标题
    if (options.title) {
      pageTitle.value = decodeURIComponent(options.title)
    } else {
      // 根据类型设置默认标题
      switch (options.type) {
        case 'yjl':
          pageTitle.value = '已接龙人员'
          break
        case 'wjl':
          pageTitle.value = '未接龙人员'
          break
        case 'wgz':
          pageTitle.value = '未关注人员'
          break
        default:
          pageTitle.value = '人员列表'
      }
    }
    
    // 设置班级信息
    if (options.bjId) {
      bjId.value = options.bjId
    }
    
    // 设置年级信息
    if (options.njId) {
      njId.value = options.njId
    }
    
    if (options.njmc) {
      njmc.value = decodeURIComponent(options.njmc)
    }
    
    console.log('设置后的参数:', {
      jlId: jlId.value,
      type: type.value,
      pageTitle: pageTitle.value,
      bjId: bjId.value,
      njId: njId.value,
      njmc: njmc.value
    })
    
    loadPersonnelData()
  }
})
</script>

<style scoped lang="scss">
.personnel-list-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 12px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.refresh-btn {
  font-size: 14px;
  color: #1890ff;
  padding: 4px 8px;
  border: 1px solid #1890ff;
  border-radius: 4px;
}

.filter-info {
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-text {
  font-size: 14px;
  color: #1890ff;
  font-weight: 500;
}

.personnel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.personnel-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.personnel-main-info {
  flex: 1;
}

.personnel-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.personnel-class {
  font-size: 14px;
  color: #666;
}

.personnel-status {
  flex-shrink: 0;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  
  &.completed {
    background-color: #e1f3d8;
    color: #67c23a;
    border: 1px solid #b3e19d;
  }
  
  &.pending {
    background-color: #fef0f0;
    color: #f56c6c;
    border: 1px solid #fbc4c4;
  }
  
  &.unfollowed {
    background-color: #fff7e6;
    color: #faad14;
    border: 1px solid #ffd591;
  }
}

.empty-state,
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-text,
.loading-text {
  font-size: 14px;
  color: #999;
}

.push-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.push-button {
  width: 100%;
  height: 44px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  
  &:active {
    background-color: #096dd9;
  }
}
</style>