zhxy-jsd/src/pages/view/notice/index.vue

<!-- src/pages/view/notice/index.vue -->
<template>
  <view class="jl-list-page">
    <!-- 列表内容 -->
    <BasicListLayout @register="register" v-model="dataList">
      <template v-slot="{ data }">
        <view class="jl-card">
          <view class="card-header">
            <text class="jl-title">{{ data.jlmc }}</text>
            <text class="jl-status" :class="getStatusClass(data.jlStatus)">
              {{ getStatusText(data.jlStatus) }}
            </text>
          </view>
          <view class="card-body">
            <image
              v-if="data.jlfm"
              :src="imagUrl(data.jlfm)"
              mode="aspectFill"
              class="cover-thumbnail"
            ></image>
            <rich-text class="jl-excerpt" :nodes="data.jlms"></rich-text>
          </view>
          <view class="card-footer">
            <text class="footer-item">发布者: {{ data.jsxm || '未知' }}</text>
            <text class="footer-item">{{ formatTime(data.jlFbtime) }}</text>
            <text class="footer-item" v-if="data.bjmc"
              >范围: {{ data.njmc + data.bjmc }}</text
            >
            <view class="footer-actions">
              <u-button
                class="footer-btn"
                type="primary"
                size="mini"
                @click="goToFeedback(data.id)"
              >接龙情况</u-button>
              <u-button
                v-if="data.jlStatus === 'A'"
                class="footer-btn"
                type="warning"
                size="mini"
                @click="goToPush(data.id)"
              >消息推送</u-button>
            </view>
          </view>
        </view>
      </template>
      <template #bottom>
        <view class="white-bg-color py-5">
          <view class="flex-row items-center pb-10 pt-5">
            <u-button
              text="新增接龙"
              class="mx-15"
              type="primary"
              @click="goToPublish"
            />
          </view>
        </view>
      </template>
    </BasicListLayout>
    <!-- 用uniqueList渲染 -->
    <template v-for="item in uniqueList" :key="item.id">
      <!-- 这里可以加自定义渲染内容做二次验证 -->
    </template>
  </view>
</template>

<script lang="ts" setup>
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
import { mobilejllistApi } from "@/api/base/server";
import { imagUrl } from "@/utils";
import { computed, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";

interface JlItem {
  id: string;
  jlmc: string; // 接龙名称
  jlms: string; // 接龙描述
  jlStatus: string; // 发布状态：A待推送，B暂存，C已推送
  jlFbr: string; // 发布人
  jlFbtime: string; // 发布时间
  jlfm: string; // 接龙封面
  njmc: string;
  bjmc: string; // 班级名称
  jlkstime: string; // 接龙开始时间
  jljstime: string; // 接龙结束时间
  jsxm?: string;
}

// 使用 BasicListLayout
const [register, { reload }] = useLayout({
  api: mobilejllistApi, // 必须提供 api，即使使用了 query
  componentProps: {},
});

// 兜底去重逻辑
const dataList = ref<JlItem[]>([]);
const uniqueList = computed(() => {
  const map = new Map();
  (dataList.value || []).forEach(item => {
    if (item && item.id != null) map.set(String(item.id), item);
  });
  return Array.from(map.values());
});

// 日志：每次dataList变化时打印
watch(dataList, (val) => {
  // 监听数据变化
});

// 跳转到详情页
const goToDetail = (jlId: string) => {
  uni.navigateTo({
    url: `/pages/view/notice/detail?id=${jlId}`,
  });
};

// 跳转到发布页
const goToPublish = () => {
  uni.navigateTo({
    url: "/pages/view/notice/publish",
  });
};

// 跳转到接龙反馈（detail）页
const goToFeedback = (jlId: string) => {
  uni.navigateTo({
    url: `/pages/view/notice/detail?id=${jlId}`,
  });
};

// 跳转到消息推送页
const goToPush = (jlId: string) => {
  uni.navigateTo({
    url: `/pages/view/notice/push-list?jlId=${jlId}`,
  });
};

// 根据状态获取对应的 CSS 类
const getStatusClass = (status: string) => {
  if (status === "A") return "status-published";
  if (status === "B") return "status-draft";
  return "status-ended";
};

// 根据状态获取状态文字
const getStatusText = (status: string) => {
  if (status === "A") return "待推送";
  if (status === "B") return "暂存";
  return "已推送";
};

// 格式化时间
const formatTime = (timeStr: string) => {
  if (!timeStr) return "";
  const date = new Date(timeStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    "0"
  )}-${String(date.getDate()).padStart(2, "0")}`;
};

onShow(() => {
  reload();
});
</script>

<style scoped lang="scss">
.jl-list-page {
  position: relative; // 为了 FAB 定位
  min-height: 100vh; // 确保 FAB 总在视图内
}

.jl-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #447ade; // 左侧加个强调色条
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;

  .jl-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    flex: 1;
    margin-right: 10px;
    // 最多显示两行
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .jl-status {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;

    &.status-published {
      background-color: #BE193FFF; // 红色-待推送
    }

    &.status-draft {
      background-color: #ff9f0a; // 橙色-暂存
    }

    &.status-ended {
      background-color: #19be4d; // 绿色-已推送
    }
  }
}

.card-body {
  // 封面图样式 (如果启用)
  .cover-thumbnail {
    width: 80px;
    height: 60px;
    border-radius: 4px;
    margin-right: 10px;
    float: left; // 文字环绕图片
  }

  .jl-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    // 最多显示 3 行
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

.card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  .footer-item {
    white-space: nowrap;
    font-size: 14px;
    color: #666;
  }
  .footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    width: 100%;
    flex-basis: 100%; /* 独占一行 */
    margin-top: 6px;
    padding: 0;
  }
  .footer-btn {
    min-width: 60px;
    width: auto;
    font-size: 12px;
    padding: 0 12px;
    flex: none;
    margin: 0;
  }
}

// FAB 按钮样式 - 由 DragButton 组件处理定位
.fab-button {
  width: 50px;
  height: 50px;
  background-color: #4477ee;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 空列表样式已由 BasicListLayout 组件处理，移除此样式 */
</style>