消息中心

pages/index/modules/message.vue

@@ -1,24 +1,97 @@
 <template>
 	<view>
-		消息
+		<cu-custom ref="Dustom" id="custom"
+			bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png">
+			<block slot="content">
+				消息列表
+			</block>
+		</cu-custom>
+		<u-tabs :list="list1" :activeStyle="{ fontWeight: 'bold' }" @change="tabChange" />
+		<My_listbox ref="List" @getlist="getlist" :empty='empty'>
+			<List :list="list" @onReadMsg="onReadMsg" />
+			<view class="cu-bar tabbar" style="margin-top: 10px;" />
+		</My_listbox>
 	</view>
 </template>
 
 <script>
+import List from "../../message/list.vue"
 export default {
 	name: 'Message',
+	components: { List },
 	data() {
 		return {
 			uninitialized: true,
+			empty: true,
+			list1: [{
+				name: '应用消息'
+			}, {
+				name: '系统消息'
+			}],
+			list: [],
+			"content": {
+				"nocache": true,
+				"pageNumber": 1,
+				"pageTotal": 1,
+				"pageSize": 20,
+				"type": "应用",
+				"where": {}
+			}
 		};
 	},
 	methods: {
 		init(forcedUpdating = true) {
 			this.uninitialized = false;
-			console.log("加载消息")
+			this.$refs.List.setHeight();
+			this.getlist(true)
 		},
+		tabChange(e) {
+			let type = e.index == 0 ? '应用' : '系统';
+			if (this.content.type == type) return;
+			this.content.type = type;
+			this.getlist(true)
+		},
+		getlist(init) {
+			let content = this.content;
+			if (init) content.pageNumber = 1;
+			if (content.pageNumber > content.pageTotal) return;
+			this.$Http.basic({
+				"classname": "system.message.Message",
+				"method": "queryMessage",
+				content
+			}).then(res => {
+				console.log("消息列表", res)
+				this.$refs.List.RefreshToComplete();
+				// this.$refs.List.setHeight();
+				if (this.cutoff(res.msg)) return;
+				this.empty = res.data.length == 0;
+				this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
+				content.pageNumber = res.pageNumber + 1;
+				content.pageTotal = res.pageTotal;
+				this.content = content;
+			})
+		},
+		onReadMsg({ messageid }) {
+			this.list[this.list.findIndex(v => v.messageid == messageid)].isread = 1;
+		}
 	},
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+/deep/.u-tabs {
+	height: 44px;
+
+	.u-tabs__wrapper__nav {
+		height: 44px;
+
+		.u-tabs__wrapper__nav__item {
+			height: 44px !important;
+
+			.u-tabs__wrapper__nav__item__text {
+				color: #fff !important;
+			}
+		}
+	}
+}
+</style>

pages/message/list.vue

@@ -0,0 +1,62 @@
+<template>
+    <view><!-- :url="'/pages/message/detail?id=' + item.messageid" -->
+        <navigator v-for="item in list" :key="item.messageid" class="item" @tap="read(item)" url="#">
+            <view class="title u-line-1">{{ item.title || ' --' }}</view>
+            <view class="content u-line-3">{{ item.message || ' --' }}</view>
+            <view class="time">{{ item.readdate || ' --' }}</view>
+            <view class="unread" v-if="item.isread == 0" />
+        </navigator>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "List",
+    props: {
+        list: Array,
+        onReadMsg: Function
+    },
+    methods: {
+        read(item) {
+            if (item.isread == 0) this.$emit("onReadMsg", item)
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+    position: relative;
+    width: 355px;
+    margin: 10px auto 0;
+    background-color: #fff;
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .title {
+        font-size: 14px;
+        margin-bottom: 6px;
+    }
+
+    .content {
+        font-size: 12px;
+        margin-bottom: 6px;
+    }
+
+    .time {
+        font-size: 10px;
+        color: #666;
+    }
+
+    .unread {
+        position: absolute;
+        top: 3px;
+        right: 3px;
+        width: 8px;
+        height: 8px;
+        background: #FF3B30;
+        border-radius: 50%;
+    }
+}
+</style>