zhxy-jsd/src/pages/view/notice/push-list.vue

<template>
  <BasicLayout>
    <!-- Default slot -->
    <scroll-view scroll-y class="push-list-scroll-view">
      <view class="push-list-container">
        <!-- 页面标题 -->
        <view class="page-header">
          <text class="page-title">推送清单</text>
          <text class="student-count">共 {{ studentList.length }} 名学生</text>
        </view>

        <!-- 学生信息卡片列表 -->
        <view class="student-cards">
          <view 
            v-for="(student, index) in studentList" 
            :key="student.id || student.xsId || index"
            class="student-card"
          >
            <view class="student-main-info">
              <text class="student-name">{{ student.xsxm || student.xm || '未知姓名' }}</text>
              <text class="grade-class">{{ student.njmc }} {{ student.bjmc }}</text>
            </view>
            <view class="parent-info">
              <text class="parent-label">家长：</text>
              <text class="parent-name">{{ student.jzxm || '暂无家长信息' }}</text>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="studentList.length === 0" class="empty-state">
          <uni-icons type="info" size="60" color="#ccc"></uni-icons>
          <text class="empty-text">暂无学生信息</text>
        </view>
      </view>
    </scroll-view>

    <!-- Bottom slot -->
    <template #bottom>
      <view class="bottom-actions">
        <button class="action-btn cancel-btn" @click="handleCancel">
          取消
        </button>
        <button class="action-btn confirm-btn" @click="handleConfirmPush" :disabled="isPushing">
          {{ isPushing ? '推送中...' : '确认推送' }}
        </button>
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { jlzxFindByJlParamsApi, xxtsSaveByJlzxParamsApi } from "@/api/base/server";

interface StudentInfo {
  id: string;
  xsId: string;
  xsxm: string;
  xm: string;
  njId: string;
  njmcId: string;
  njmc: string;
  bc: string;
  bjId: string;
  bjmc: string;
  jzIds: string;
  jzxm: string;
  jlId: string;
  jlmc: string;
  jlts: string;
  jlwcStatus: string;
}

const jlId = ref<string>('');
const studentList = ref<StudentInfo[]>([]);
const isPushing = ref(false);

onLoad((options) => {
  
  if (options.jlId && options.jlId !== 'null' && options.jlId !== 'undefined') {
    jlId.value = options.jlId;
    loadStudentList();
  } else {
    uni.showToast({ title: "缺少接龙ID参数", icon: "error" });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});

// 加载学生列表
const loadStudentList = async () => {
  try {
    uni.showLoading({ title: "加载学生信息中..." });
    
    const response = await jlzxFindByJlParamsApi({ jlId: jlId.value });

    uni.hideLoading();
    
    // 检查是否有学生数据
    if (response && (response.rows || response.result)) {
      // 从 rows 字段获取学生列表数据
      const students = response.rows || response.result || [];
      studentList.value = students;
    } else {
      throw new Error("获取学生信息失败：数据格式异常");
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({ 
      title: error instanceof Error ? error.message : "加载学生信息失败", 
      icon: "error" 
    });
  }
};

// 取消操作
const handleCancel = () => {
  uni.navigateBack();
};

// 确认推送
const handleConfirmPush = async () => {
  if (isPushing.value) return;
  
  try {
    isPushing.value = true;
    uni.showLoading({ title: "推送中..." });
    
    const response = await xxtsSaveByJlzxParamsApi({ jlId: jlId.value });
    
    uni.hideLoading();
    isPushing.value = false;
    
    if (response && response.resultCode === 1) {
      uni.showToast({ 
        title: "推送成功", 
        icon: "success",
        duration: 2000
      });
      
      // 推送成功后返回到接龙发布页面（上上页）
      setTimeout(() => {
        uni.navigateBack({
          delta: 2
        });
      }, 2000);
    } else {
      throw new Error(response?.resultMsg || "推送失败");
    }
  } catch (error) {
    uni.hideLoading();
    isPushing.value = false;
    uni.showToast({ 
      title: error instanceof Error ? error.message : "推送失败，请重试", 
      icon: "error" 
    });
  }
};
</script>

<style scoped lang="scss">
.push-list-scroll-view {
  height: 100%;
  box-sizing: border-box;
}

.push-list-container {
  padding: 12px;
  box-sizing: border-box;
}

.page-header {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.student-count {
  font-size: 14px;
  color: #909399;
}

.student-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.student-main-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.student-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.grade-class {
  font-size: 14px;
  color: #606266;
  background-color: #f4f4f5;
  padding: 2px 8px;
  border-radius: 4px;
}

.parent-info {
  display: flex;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.parent-label {
  font-size: 14px;
  color: #909399;
  margin-right: 4px;
}

.parent-name {
  font-size: 14px;
  color: #606266;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.empty-text {
  font-size: 16px;
  color: #909399;
  margin-top: 16px;
}

.bottom-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
  gap: 12px;
}

.action-btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  outline: none;

  &::after {
    border: none;
  }

  &.cancel-btn {
    background-color: #f4f4f5;
    color: #909399;
    border: 1px solid #e9e9eb;

    &:active {
      background-color: #e0e0e0;
    }
  }

  &.confirm-btn {
    background-color: #409eff;
    color: #ffffff;

    &:active {
      background-color: #3a8ee6;
    }

    &:disabled {
      background-color: #c0c4cc;
      color: #ffffff;
    }
  }
}
</style>