agri-app/pages/news/subpages/eventCenter/index.vue

<template>
  <view class="message-page">
    <z-paging ref="eventPage" refresher-only
              :show-empty="false" :show-footer="false" @onRefresh="getEventList">
      <template #refresher="{refresherStatus}">
        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
        <custom-refresher :status="refresherStatus" />
      </template>
    <!-- 消息列表 -->
    <scroll-view :scroll-y="true"
                 class="message-list"
                 :scroll-top="scrollTop"
                 v-if="messageList.length>0">
      <view
          v-for="(item, index) in messageList"
          :key="index"
          :id="`item${item.id}`"
          @click="gotoDetail(item)"
          class="message-item"
      >
        <!-- 图片区域（带未读角标 + 渐变遮罩） -->
        <view class="img-box">
          <image class="bg-img" :src="item.imageUrl" mode="aspectFill"></image>
          <!-- 新增：底部渐变遮罩层 -->
          <view class="gradient-mask"></view>
          <view class="unread-tag" v-if="item.readStatus===0">未读</view>
          <text class="img-title">{{ item.title }}</text>
        </view>

        <!-- 额外描述文本（仅第三条有） -->
        <view class="desc-text" v-if="item.content">
          <text>{{ item.content }}</text>
<!--          <text class="link-btn" @click="handleLink">立即认证✅</text>-->
        </view>

        <!-- 底部信息栏 -->
        <view class="info-bar">
          <view class="sender-info">
            <image class="sender-icon" :src="item.imgUrl || avatarUrl" mode="aspectFill"></image>
            <text class="sender-name">{{ item.createBy || '小策官方团队'}}</text>
          </view>
          <text class="send-time">{{ formatTime(item.createTime) }}</text>
        </view>
      </view>
      <!-- 底部提示 -->
      <uni-divider-text margin="10rpx 0"
                        width="50%"
                        font-size="24rpx"
                        v-if="messageList.length>0"
                        lineText="只展示最近7天的消息"/>
<!--      <uni-load-more v-if="messageList.length>4" iconType="auto" :status="status" :content-text="contentText" />-->
    </scroll-view>
    <view class="empty__item tn-margin-top empty__view" v-else>
      <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
                text="近7天暂无消息" :imgWidth="200"
                :imgHeight="200"></tn-empty>
    </view>
    </z-paging>
  </view>
</template>

<script>
import {formatTime} from "@/utils/agri";
import {listMessage} from "@/api/warn/message";
import UniDividerText from "@/components/uni-divider/uni-divider-text.vue";
export default {
  components: {UniDividerText},
  data() {
    return {
      avatarUrl: "https://img.xiaoces.com/photos/logo.png",
      messageList: [],
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中.......',
        contentnomore: '没有更多数据了'
      },
      status: 'more',
      scrollTop: null
    }
  },
  onShow() {
    // 只允许查询七天以内消息默认展示今天
    this.getEventList();
  },
  methods: {
    formatTime,
    handleLink() {
      // 点击"立即认证"的跳转逻辑
      uni.showToast({ title: "跳转到认证页" })
    },
    gotoDetail(item) {
      uni.showToast({ title: "跳转到详情页" })
      // todo 此处更新已读
      // 点击消息项跳转详情页
      uni.navigateTo({
        url: "/pages/news/subpages/eventDetail/index?title=" + item.title
      })
    },
    getEventList() {
      this.status = 'loading'
      // if (!this.isHaveOldData) {
      //   setTimeout(() => {
      //     this.$modal.msg("没有更早数据！");
      //     // 结束刷新状态
      //     this.status = 'nomore'
      //   }, 800);
      //   return;
      // }
      var query = {
        msgType: "event"
      }
      listMessage(query).then(response => {
        if (response.code === 200) {
          this.messageList = response.rows.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
          if (this.messageList.length === 0) {
            this.$modal.showToast('没有更多数据~')
          }
        }
      }).finally(()=>{
        // 在数据更新后设置 scrollTop
        this.$nextTick(() => {
          // 更新数据的长度
          this.scrollTop = 9999;
        });
        // 结束刷新状态
        this.status = 'nomore'
        this.$refs.eventPage.complete();
      })
    }

  }
}
</script>

<style scoped>
page {
  background-color: #f8f8f8;
}
/* 页面容器 */
.message-page {
  height: 100vh;
}

/* 消息列表 */
.message-list {
  height: 100vh;
  padding: 40rpx 20rpx;
}
.message-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 25rpx;
  overflow: hidden;
}

/* 图片区域 */
.img-box {
  position: relative;
  width: 100%;
  height: 320rpx;
}
.bg-img {
  width: 100%;
  height: 100%;
}
/* 新增：底部渐变遮罩 */
.gradient-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx; /* 遮罩高度，和标题区域对齐 */
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  pointer-events: none; /* 不影响点击 */
}
.unread-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}
.img-title {
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
  z-index: 2; /* 确保标题在遮罩上方 */
}

/* 底部信息栏 */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
}
.sender-info {
  display: flex;
  align-items: center;
}
.sender-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
  border-radius: 50%;
}
.sender-name {
  font-size: 28rpx;
  color: #666;
}
.send-time {
  font-size: 28rpx;
  color: #999;
}

/* 描述文本（仅第三条） */
.desc-text {
  padding:  30rpx 24rpx 0 24rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.link-btn {
  color: #007bff;
}
</style>