dgtis-uniapp/pages/message/index.vue

<template>
	<view class='purchase-list'>
		<view class="content-title">
			<text class="text-bold" style="font-size: 40upx;">消息</text>
			<text>({{unreadCount}})</text>
			<text style="margin-left: 10upx;cursor: pointer;color: gray;" @click="handleUpdateAll">
				<uni-icons type="paperclip" size="15"></uni-icons>
				全部已读
			</text>
		</view>
		<scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper"
			@scroll="scroll" @touchstart="touchstart" @touchend="touchend">
			<uni-list :border="false" style="margin-top: 10px;">
				<uni-list-chat style="cursor: pointer;" v-for="item in listData" :avatar-circle="true" :key="item.id"
					:title="item.templateNickname" avatar="https://img.36krcdn.com/20200410/v2_fb948f4c18de4b22927f0361d53f6caf_img_png" :note="item.templateParams.content"
					:time="parseTime(item.createTime)" :clickable="true" badge-positon="left"
					:badge-text="item.readStatus?'':'dot'" @click="toggle(item)">
				</uni-list-chat>
			</uni-list>
		</scroll-view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" border-radius="10px 10px 0 0">
				<view class="popup-body">
					<view class="popup-close">
						<uni-icons type="closeempty" size="20" @click="popupClose"></uni-icons>
					</view>
					<view class="popup-content">
						<uni-forms :model="itemData" label-position="top">
							<uni-forms-item label="发送人">
								<uni-easyinput disabled v-model="itemData.name"/>
							</uni-forms-item>
							<uni-forms-item label="创建时间">
								<uni-easyinput disabled v-model="itemData.time"/>
							</uni-forms-item>
							<uni-forms-item label="内容">
								<uni-easyinput disabled type="textarea" v-model="itemData.content"/>
							</uni-forms-item>
						</uni-forms>
					</view>
				</view>
				
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	import {
		getMyNotifyMessagePage,
		updateNotifyMessageRead,
		updateAllNotifyMessageRead,
		getUnreadNotifyMessageCount,
	} from "@/api/message/index"
	import myPull from '@/static/js/myPull.js'
	export default {
		data() {
			return {
				unreadCount: 0,
				pageNo: 1,
				pageSize: 10,
				listData: [],
				itemData: {
					name:'',
					time:'',
					content:'',
				},
			}
		},
		onLoad() {
			this.refresh();
		},
		created() {
			this.getUnreadCount();
		},
		methods: {
			popupClose(){
				this.$refs.popup.close();
			},
			toggle(item) {
				this.itemData.name = item.templateNickname;
				this.itemData.time = this.parseTime(item.createTime);
				this.itemData.content = item.templateParams.content;
				this.$refs.popup.open('bottom');
				if(item.readStatus==false){
					this.handleUpdate([item.id]);
				}
			},
			handleUpdateSingle(row) {
				this.handleUpdate([row.id])
			},
			handleUpdate(ids) {
				updateNotifyMessageRead(ids).then(response => {
					// this.$modal.msgSuccess("消息已读！")
					this.getList(this.page, this.__pulldone)
				});
			},
			handleUpdateAll() {
				updateAllNotifyMessageRead().then(response => {
					this.$modal.msgSuccess("全部已读！")
					this.getList(this.page, this.__pulldone)
				});
			},
			getUnreadCount() {
				getUnreadNotifyMessageCount().then(response => {
					this.unreadCount = response.data;
				})
			},
			/**
			 * @name 获取列表
			 */
			getList(page, done) {
				getMyNotifyMessagePage({
					pageNo: page,
					pageSize: this.pageSize
				}).then(response => {
					let list = response.data.list;
					done(list);
				});
			},

			/**
			 * @name 触底加载
			 */
			scrolltolower(event) {
				this.getList(this.page, this.__pulldone)
			},

			scroll(e) {
				// 重新设置pulldown
				this.setPullDown(e.detail.scrollTop < 10)
			},

			scrolltoupper() {

			},
		},
		mixins: [myPull({})],
	}
</script>

<style lang="scss" scoped>
	.popup-body{
		z-index: 99;
		// margin-bottom: 60px;
	}
	.popup-close{
		cursor: pointer;
		height: 40px;
		line-height: 40px;
		padding-left: 10px;
		border-bottom: 1px solid #eaecef;
	}
	.popup-content{
		margin: 20px;
	}
	.purchase-list {
		background-color: #f5f5f5;
		height: 100%;
		overflow: hidden;

		.purchase-body {
			height: calc(100% - 88upx);
			overflow: auto
		}
	}

	.content-title {
		background-color: #ffffff;
		height: 88upx;
		font-size: 28upx;
		position: sticky;
		box-sizing: border-box;
		padding: 0 10px;
		border-bottom: 2upx solid #dddddd;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px;
		min-width: 100%;
		overflow-x: auto;
		
	}

	.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>