qianduan1/pages/message/index.vue

<template>
  <view class="container">
    <!-- 消息列表 -->
    <view class="message-list">
      <view class="message-item" v-for="(item, index) in messageList" :key="index">
        <view class="message-icon">
          <image :src="item.icon" :style="{ backgroundColor: item.iconBgColor }"></image>
        </view>
        <view class="message-content">
          <text class="message-title">{{item.title}}</text>
          <text class="message-subtitle">{{item.subtitle}}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
	export default {
	  data() {
	    return {
	      time: '18:31',
	      speed: '83.0',
	      battery: '36',
	      messageList: [
	        {
	          icon: '/static/course-精选-icon.png',
	          iconBgColor: '#FFE4E1',
	          title: '课程精选',
	          subtitle: '暂无新消息'
	        },
	        {
	          icon: '/static/course-上新-icon.png',
	          iconBgColor: '#E3F2FD',
	          title: '课程上新',
	          subtitle: '暂无新消息'
	        },
	        {
	          icon: '/static/直播预约-icon.png',
	          iconBgColor: '#E8EAF6',
	          title: '直播预约',
	          subtitle: '暂无新消息'
	        },
	        {
	          icon: '/static/圈子消息-icon.png',
	          iconBgColor: '#E8F5E9',
	          title: '圈子消息',
	          subtitle: '暂无新消息'
	        }
	      ],
	      socketTask: null
	    };
	  },
	  onLoad() {
	    this.connectWebSocket();
	  },
	  methods: {
	    connectWebSocket() {
	      this.socketTask = uni.connectSocket({
	        url: 'wss://your-websocket-server-url' // 替换为实际的WebSocket服务器地址
	      });
	      this.socketTask.onOpen(() => {
	        console.log('WebSocket连接成功');
	        // 可以在这里发送初始化消息等
	      });
	      this.socketTask.onMessage((res) => {
	        const data = JSON.parse(res.data);
	        // 假设收到的消息格式 { type: '课程精选', content: '有新课程啦' }
	        const index = this.messageList.findIndex((item) => item.title === data.type);
	        if (index > -1) {
	          this.messageList[index].subtitle = data.content;
	        }
	      });
	      this.socketTask.onError((err) => {
	        console.error('WebSocket连接错误', err);
	      });
	      this.socketTask.onClose(() => {
	        console.log('WebSocket连接关闭');
	      });
	    },
	    goToPage(page) {
	      uni.navigateTo({
	        url: `/${page}`
	      });
	    }
	  },
	  onUnload() {
	    if (this.socketTask) {
	      this.socketTask.close();
	    }
	  }
	};
</script>
<style>
	/* 全局样式 */
	.container {
	  background-color: #f7fafc;
	  height: 100vh;
	  display: flex;
	  flex-direction: column;
	}
	.status-bar {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 10rpx 20rpx;
	  background-color: #ebf4ff;
	}
	.time {
	  font-size: 30rpx;
	}
	.network-status {
	  display: flex;
	  align-items: center;
	}
	.speed,
	.signal,
	.battery {
	  font-size: 24rpx;
	  margin-left: 10rpx;
	}
	.header {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 80rpx;
	  background-color: #ebf4ff;
	}
	.title {
	  font-size: 40rpx;
	  font-weight: bold;
	}
	.message-list {
	  flex: 1;
	  overflow-y: auto;
	  padding: 20rpx;
	}
	.message-item {
	  display: flex;
	  align-items: center;
	  padding: 20rpx 0;
	  border-bottom: 1rpx solid #e5e7eb;
	}
	.message-icon {
	  width: 60rpx;
	  height: 60rpx;
	  border-radius: 50%;
	  margin-right: 20rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.message-icon image {
	  width: 40rpx;
	  height: 40rpx;
	}
	.message-content {
	  flex: 1;
	}
	.message-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-bottom: 10rpx;
	}
	.message-subtitle {
	  font-size: 28rpx;
	  color: #6b7280;
	}
	.tab-bar {
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  height: 80rpx;
	  background-color: #fff;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	.tab-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.tab-icon {
	  width: 40rpx;
	  height: 40rpx;
	  margin-bottom: 5rpx;
	}
	.tab-text {
	  font-size: 24rpx;
	}
</style>