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

<!-- src/pages/view/notice/index.vue -->
<template>
  <view class="jl-list-page">
    <!-- 列表内容 -->
    <BasicListLayout @register="register">
      <template v-slot="{ data }">
        <view class="jl-card" @click="goToDetail(data.id)">
          <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>
        </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>
  </view>
</template>

<script lang="ts" setup>
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
import { mobilejllistApi } from "@/api/base/server";
import { imagUrl } from "@/utils";
import BasicDragButton from "@/components/BasicDragButton/DragButton.vue";

interface JlItem {
  id: string;
  jlmc: string; // 接龙名称
  jlms: string; // 接龙描述
  jlStatus: string; // 发布状态：A已发布，B暂存
  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 goToDetail = (jlId: string) => {
  uni.navigateTo({
    url: `/pages/view/notice/detail?id=${jlId}`,
  });
};

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

// 根据状态获取对应的 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")}`;
};
</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: #19be6b; // 绿色-已发布
    }

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

    &.status-ended {
      background-color: #999999; // 灰色-已结束
    }
  }
}

.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 {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 12px;
  color: #999;
  display: flex;
  flex-wrap: wrap; // 允许换行
  gap: 5px 15px; // 行间距 列间距

  .footer-item {
    white-space: nowrap;
  }
}

// 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>