supervise/supervise-uniapp/pages/home/MessageFragment.vue

<template>
	<view class="pages">
		<view>
			<view v-for="(item,index) in dataList" class="newslist">

				<view class="item" @click="itemClick(index)">

					<image class="item-img" :src="item.icon" mode="aspectFit"></image>

					<view class="item-con">

						<view class="item-con-top">
							<text class="item-con-top-title">{{item.name}}</text>
							<text class="item-con-top-time">{{item.messageTime}}</text>
						</view>
						<view class="item-con-bom">
							<text class="item-con-bom-content">{{item.content}}</text>
							<view v-show="item.imgCount!=0">

								<text class="item-con-bom-number">{{item.imgCount}}</text>
							</view>
						</view>

					</view>

				</view>

			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					userSid: "",
					wxCode: "",
				},
				dataList: [

				],
			};
		},
		onLoad() {},

		onShow() {

			console.log('userSid>>>>>>', getApp().globalData.sid)

			if (getApp().globalData.sid) {
				this.params.userSid = getApp().globalData.sid
				this.getData()
			} else {
				this.init()
			}



		},
		methods: {
			init() {
				let that = this
				wx.login({
					success: function(res) {
						if (res.code) {
							console.log('Http网络请求信息', {
								"wxCode": res.code
							})

							that.params.wxCode = res.code
							that.getData();
						}
					},
					fail: function(res) {
						uni.showToast({
							title: "网络错误，请退出后重新进入。",
							icon: 'none'
						})
					}
				});
			},
			getData() {
				// let data = await axios.get('/api/portal/v1/flow/task/'+userSid)
				// 	console.log('data', data)
				var _this = this
				console.log('params', this.params)
				this.$api.messageTypeList(this.params).then((resp) => {
					// if (resp.success) {
					console.log('1111', resp)
					_this.dataList = []
					var data = resp
					var item1 = data[0]
					var content = item1.messageLogs.message[1]

					_this.dataList.push({
						icon: item1.icon,
						name: item1.name,
						messageTime: item1.messageLogs.messageTime,
						content: content,
						imgCount: item1.messageLogs.count,
					})

					var item2 = data[1]
					var content = item2.messageLogs.message[2]

					_this.dataList.push({
						icon: item2.icon,
						name: item2.name,
						messageTime: item2.messageLogs.messageTime,
						content: content,
						imgCount: item2.messageLogs.count,
					})
					var item3 = data[2]
					var type = "[" + item3.messageLogs.type + "]"
					var content = item3.messageLogs.message[1]

					_this.dataList.push({
						icon: item3.icon,
						name: item3.name,
						messageTime: item3.messageLogs.messageTime,
						content: type + content,
						imgCount: item3.messageLogs.count,
					})




				}).catch(e => {
					console.log('eeeee', e)
				})
			},
			itemClick(index) {
				console.log('index', index)

				switch (index) {
					case 0: // 风险预警
						uni.navigateTo({
							url: "/pages/index/RiskWarning"
						})
						break;
					case 1: // 数据消息
						uni.navigateTo({
							url: "/pages/index/FormsData"
						})
						break;
					case 2: // 设备状态
						uni.navigateTo({
							url: "/pages/index/DeviceStatus"
						})
						break;
					default:
						break;
				}
			}

		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		height: 100%;

		.newslist {
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 12px;
			margin-left: 12px;
			margin-right: 12px;
			margin-top: 12px;
			padding: 10px 15px;

			.item {
				display: flex;

				flex-direction: row;
				align-items: center;

				.item-img {
					width: 55px;
					height: 55px;
				}

				.item-con {
					width: 100%;
					margin-left: 10px;
					display: flex;
					flex-direction: column;

					.item-con-top {
						display: flex;
						flex-direction: row;

						.item-con-top-title {
							flex: 1;
							font-size: 15px;
							color: #101010;
							margin-right: 10px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.item-con-top-time {
							font-size: 14px;
							color: #A1A1A1;
						}
					}

					.item-con-bom {
						margin-top: 5px;
						display: flex;
						flex-direction: row;

						.item-con-bom-content {
							flex: 1;

							font-size: 14px;
							color: #777777;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.item-con-bom-number {
							color: #fff;
							width: 20px;
							height: 20px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 10px;
							flex-shrink: 0;
							text-align: center;
							background: #CBCBCB;
							border-radius: 50%;
							font-size: 12px;
						}
					}
				}
			}

		}
	}
</style>