fundHoldApp/pages/message/index.vue

<template>
  <view class="message-center container-with-lines full-height-with-titile">

    <scroll-view class="message-list" scroll-y :refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
	  <view v-for="(message, index) in messages" :key="index" class="message-group">
        <view class="time-label">{{ message.timeLabel }}</view>
        <view class="message-item">
          <view v-if="message.messageType === 'text'">
            <view class="message-title">{{ message.title }}</view>
            <view class="message-content">
              <text class="message-text">{{ message.content }}</text>
            </view>
          </view>
          <view v-else-if="message.messageType === 'banner'">
            <view class="message-header">
              <view class="message-title">{{ message.title }}</view>
              <view class="status-tag">
                <text>查看详情</text>
				<uni-icons type="right" size="14" color="#2C54D0"/>
              </view>
            </view>
            <view class="message-banner">
              <image class="banner-image" :src="message.bannerInfo.image" mode="aspectFill"/>
              <view class="banner-content">
                <view class="banner-title">{{ message.bannerInfo.title }}</view>
                <view class="banner-subtitle">{{ message.bannerInfo.subtitle }}</view>
                <view class="banner-buttons">
                  <uni-button class="btn-buttons" type="primary">立即开通会员 · 限时特惠 199元/年</uni-button>
                  <uni-button class="btn-buttons" plain>查看更多会员权益</uni-button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	import { getMessageList } from '@/api/home/message.js';
export default {
  data() {
    return {
      messages: [
        {
          timeLabel: '一天前',
		  title: '转账通知',
		  messageType: 'text',
		  content: '2025-02-03 21:15:34 账号互转账 50000PLA 请注意查收'
        },
		{
          timeLabel: '昨天19:20',
		  title: '营销活动通知',
		  messageType: 'banner',
		  bannerInfo: {
			image: 'https://ai-public.mastergo.com/ai/img_res/ff7cd6fee4b780dbf931d0682555484e.jpg',
			title: '老友季 普惠权益',
			subtitle: '云集星品 好礼 诚意优选好礼'
		  }
        },
		{
          timeLabel: '昨天14:30',
		  title: '系统通知',
		  messageType: 'text',
		  content: '您的账户安全等级已提升，请继续保持良好的安全习惯'
        },
        {
          timeLabel: '前天',
		  title: '新功能上线通知',
		  messageType: 'text',
		  content: '智能助手功能全新升级，支持更多便捷服务，快来体验吧'
        }
      ],
      triggered: false,
	  param: {
	    pageNum: 1,
	    pageSize: 10,
	    name: ''
	  },
	  languageData:{},
	  // 用户信息
	  userInfo:this.$store.state.user
    }
  },
  onPullDownRefresh() {
    // 下拉刷新
   this.param.pageSize = 10;
   this.onRefresh();
  },
  onReachBottom() {
    // 触底刷新
    this.param.pageSize = this.param.pageSize + 10;
    this.onRefresh()
  },
  created() {
  	this.languageData = this.$languageData;
    this.selectList();
  },
  onLoad(){
	  this.selectList();
  },
	methods: {
		// 查询消息列表
		selectList(){
			let notifyParam = {
				receiver:this.userInfo.userId
			}
			getMessageList(notifyParam,this.param).then(res=>{
				// console.log("---res---",res)
				// this.messages = res.rows
			})
		},
		onRefresh() {
		  setTimeout(() => {
			const newMessage = {
			  timeLabel: '刚刚',
			  title: '系统提醒',
			  messageType: 'text',
			  content: '您有一条新的消息提醒，请注意查收'
			}
			this.messages.unshift(newMessage)
			uni.stopPullDownRefresh(); // 关闭下拉刷新
		  }, 1000)
		},
		onLoadMore() {
		  setTimeout(() => {
			const historyMessages = {
			  timeLabel: '一周前',
			  title: '历史消息',
			  messageType: 'text',
			  content: '这是一条历史消息记录，感谢您的持续关注'
			}
			this.messages.push(historyMessages)
		  }, 1000)
		}
	}
}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	.message-center {
		background-size: 400%;
		background-position: center; 
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}
	.btn-buttons{
		font-size: 30rpx;
		line-height: 1.555556;
	}
	.message-list {
		flex: 1;
		overflow: auto;
	}

	.message-group {
		margin-bottom: 20rpx;
	}
	.time-label {
		padding: 20rpx 30rpx;
		font-size: 14px;
		color: #999999;
		display: flex;
		justify-content: center;
	}
	.message-item {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 2rpx;
		border-radius: 16rpx;
		margin: 0 20rpx 20rpx 20rpx;
	}
	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.message-title {
		font-size: 16px;
		color: #333333;
		font-weight: 500;
	}
	.status-tag {
		font-size: 14px;
		color: #2C54D0;
		display: flex;
		align-items: center;
		gap: 4rpx;
	}
	.status-tag text {
		font-size: 14px;
	}
	.message-content {
		margin-top: 10rpx;
	}
	.message-text {
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
	}
	.message-banner {
		border-radius: 16rpx;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	.banner-image {
		width: 100%;
		height: 240rpx;
	}
	.banner-content {
		padding: 30rpx;
		background: linear-gradient(to right, #ffffff, #f8f9fa);
	}
	.banner-title {
		font-size: 18px;
		color: #333333;
		font-weight: 600;
		margin-bottom: 16rpx;
	}
	.banner-subtitle {
		font-size: 14px;
		color: #666666;
		margin-bottom: 30rpx;
		line-height: 1.4;
	}
	.banner-buttons {
		display: flex;
		gap: 24rpx;
		flex-direction: column;
	}
	:deep(.uni-button) {
		margin: 0;
		font-size: 14px;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
	}
	:deep(.uni-button[type=primary]) {
		background: linear-gradient(135deg, #ff8533, #ff6b00);
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 0, 0.2);
	}
	:deep(.uni-button[plain]) {
		color: #666666;
		border-color: #e5e5e5;
		background-color: #ffffff;
	}
	:deep(.uni-button[plain]:hover) {
		color: #ff6b00;
		border-color: #ff6b00;
	}
</style>