上传代码

uniapp04/pages/messageCenter/messageCenter.vue

@@ -0,0 +1,48 @@
+<template>
+	<uni-list>
+		<uni-list :border="true"  v-for="(item, index) in historyList" :key="index">
+			
+			<uni-list-chat :title="item.title" :avatar="item.imgUrl" :note="item.message" :time="item.time" badge-positon="left" :badge-text="item.unread" clickable="true" @click="handleDonate"></uni-list-chat>
+		</uni-list>
+	</uni-list>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+    const historyList = ref([
+      {
+        imgUrl: 'https://ts1.tc.mm.bing.net/th/id/R-C.e05fb7d12c52fc08ed0b83cc9aafaa70?rik=n8c5LP%2bsEJF1WQ&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2021%2f04-21%2f99523%2fwater_99523_698_698_.png&ehk=pHsR6er2LGmrUr%2bVVLRbNE%2bSWMkqOSMyvoYueS4GqDs%3d&risl=&pid=ImgRaw&r=0',
+        title: '支付宝客服',
+		unread:'1',
+		time:'刚才',
+		message:'我的外卖被偷了，抓紧给我退款'
+		
+      }
+    ])
+    const handleDonate = () => {
+          uni.navigateTo({ url: "../talk/talk" });
+        };
+    
+       
+</script>
+
+<style>
+page {
+	background-color: #fff;
+}
+
+.chat-custom-right {
+	flex: 1;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+
+.chat-custom-text {
+	font-size: 12px;
+	color: #999;
+}
+</style>