vue-insagent-app/pages/tools/messageReminder/messageReminder.vue

<template>
	<view class="aui-news-box">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="headers dis a-c j-start ">
			<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
			<text style="margin: auto;">掌柜秘书</text>
		</view>
		<view class="" style="padding: 98px 16px 16px 16px;">
			<view class="massage-data dis a-c j-s" v-for="(item,index) in lists" :key="index" @click="swipeClick(item)">
				<image :src="item.img" mode="" style="width: 46px;height: 41px;"></image>
				<view class="" style="width: 80%;">
					<view class="dis j-s a-c">
						<text>{{item.titleType}}</text>
						<text>{{item.result.createTime}}</text>
					</view>
					<view class="ellipsis">{{item.result.content}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [{
						id: 1,
						titleType: "系统消息",
						time: "08:48",
						img: '/static/image/messageIcon/icon1.png',
						result: {}
					},
					{
						id: 2,
						titleType: "服务消息",
						time: "08:48",
						img: '/static/image/messageIcon/icon2.png',
						result: {}
					},
					{
						id: 3,
						titleType: "订单进度",
						time: "昨天",
						img: '/static/image/messageIcon/icon3.png',
						result: {}
					},
					{
						id: 4,
						titleType: "保单提醒",
						time: "星期六",
						img: '/static/image/messageIcon/icon4.png',
						result: {}
					},
					{
						id: 5,
						titleType: "佣金消息",
						time: "星期六",
						img: '/static/image/messageIcon/icon5.png',
						result: {}
					}, {
						id: 6,
						titleType: "增员服务",
						time: "星期五",
						img: '/static/image/messageIcon/icon6.png',
						result: {}
					}
				],
			}
		},
		onShow() {
			this.getUserMessage();
		},
		onPullDownRefresh() {
			// 执行刷新逻辑
			this.getUserMessage();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			async getUserMessage() {
				let res = await this.$http.get('/api/message/getUserMessage');
				if (res.code == '200') {
					res.data.map(val => {
						this.lists.map(ele => {
							if (val.msgType == ele.id) {
								ele.result = val;
							}
						})
						return val;
					})
					uni.stopPullDownRefresh();
				}
			},
			async swipeClick(item) {
				uni.navigateTo({
					url: "/pages/tools/messageReminder/details?msgType=" + item.result.msgType,
				})

			}
		}
	}
</script>

<style>
	.ellipsis {
		width: 100%;
		/* 设置一个固定宽度 */
		white-space: nowrap;
		/* 确保文本在一行显示 */
		overflow: hidden;
		/* 隐藏溢出的内容 */
		text-overflow: ellipsis;
		/* 使用省略号表示溢出的文本 */
		color: rgba(35, 40, 50, 0.6);
		font-size: 26rpx;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;
		background: #fff;
		background-image: url("/static/image/addStaff/bfg.png");
		background-size: 100% 100%;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}
	}

	.massage-data {
		padding: 16px 0;
		border-bottom: 1px solid #f2f2f2;

		text:nth-child(1) {
			color: #232832;
			font-size: 30rpx;
		}

		text:nth-child(2) {
			color: rgba(35, 40, 50, 0.6);
			font-size: 28rpx;
		}

		image {
			width: 46px;
			height: 41px;
		}
	}
</style>