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

<!-- src/pages/view/notice/index.vue -->
<template>
  <view class="jl-list-page">
    <!-- 新建接龙按钮 -->
    <view class="fab-button" @click="goToPublish">
      <uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
    </view>

    <!-- 列表内容 -->
    <view v-if="jlList.length > 0">
      <view v-for="item in jlList" :key="item.id" class="jl-card" @click="goToDetail(item.id)">
        <view class="card-header">
          <text class="jl-title">{{ item.jlmc }}</text>
          <text class="jl-status" :class="getStatusClass(item.jlStatus)">
            {{ getStatusText(item.jlStatus) }}
          </text>
        </view>
        <view class="card-body">
          <image v-if="item.jlfm" :src="item.jlfm" mode="aspectFill" class="cover-thumbnail"></image>
          <text class="jl-excerpt" v-html="item.jlms"></text>
        </view>
        <view class="card-footer">
          <text class="footer-item">发布者: {{ item.jsxm }}</text>
          <text class="footer-item">{{ formatTime(item.jlFbtime) }}</text>
          <text class="footer-item" v-if="item.bjmc">范围: {{ item.njmc+item.bjmc }}</text>
        </view>
      </view>
    </view>
    <view v-else class="empty-list">暂无数据</view>
  </view>
</template>

<script lang="ts" setup>
import {ref, onMounted} from "vue";
import {BASE_URL} from "@/config";

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

const jlList = ref<JlItem[]>([]);
const total = ref(0);

const fetchJlList = async () => {
  try {
    const response = await uni.request({
      url: `${BASE_URL}/mobile/jl/list`,
      method: "GET",
      data: {pageNo: 1, pageSize: 10},
      header: {"Content-Type": "application/json"}
    });
    if (response.statusCode === 200 && response.data) {
      const result = response.data;
      const pageData = result.data || result;
      if (pageData.result && Array.isArray(pageData.result.rows)) {
        jlList.value = pageData.result.rows;
        total.value = pageData.result.total || 0;
      } else {
        jlList.value = [];
        total.value = 0;
      }
    } else {
      jlList.value = [];
      total.value = 0;
    }
  } catch (e) {
    jlList.value = [];
    total.value = 0;
  }
};

onMounted(() => {
  fetchJlList();
});

// 跳转到详情页
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 按钮样式
.fab-button {
  position: fixed;
  right: 20px;
  bottom: 40px; // 根据需要调整距离底部的距离
  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);
  z-index: 10;
}

.empty-list {
  text-align: center;
  color: #999;
  margin-top: 40px;
}
</style>