paper-shopkeeper-app/pages/message/system-message.vue

<template>
	<view class="system-message">
		<scroll-list ref="messageRef" :option="option" @load="quotationUp" @refresh="quotationDown">
			<view v-for="(item, index) in list" :key="index">
				<view class="system-message-main">
					<view class="system-message-main-top">
						<view class="system-message-title">
							<view class="">{{ item.messageType | meesageTypeFilter }}</view>
							<view class="dian" v-if="item.readOrNot === 0"></view>
						</view>
						<view class="system-message-subtitle">{{ item.createTime }}</view>
					</view>
					<view class="system-message-contant">{{ item.content }}</view>
				</view>
			</view>
		</scroll-list>
	</view>
</template>

<script>
import { systemMessageList, systemRead } from '@/apis/trade'
export default {
	data() {
		return {
			option: {
				size: 10,
				auto: true,
				emptyText: '暂无消息~',
				background: '#F7F8FA',
				fontSize: '40rpx'
			},
			pagination: {
				pageNum: 0, // 初始会执行一次下拉加载
				pageSize: 10
			},
			list: []
		}
	},
	filters: {
		meesageTypeFilter(value) {
			var mes = ''
			if (value) {
				switch (value) {
					case 1:
						mes = '客户下单'
						break
					case 2:
						mes = '客户付款'
						break
					case 3:
						mes = '客户收货'
						break
					case 4:
						mes = '客户询价'
						break
					case 4:
						mes = '取消订单'
						bre
					default:
						break
				}
			}
			return mes
			// 1-客户下单 2-客户付款 3-客户收货 4-客户询价 5-取消订单
		}
	},
	onLoad(option) {
		this.queryData()
	},
	methods: {
		queryData() {
			return new Promise((resolve, reject) => {
				systemMessageList({ ...this.pagination })
					.then(res => {
						if (res) {
							var data = res.records
							var count = 0
							for (let i = 0; i < data.length; i++) {
								if (data[i].readOrNot === 0) {
									count = count + 1
								}
							}
							this.$emit('systemCount', count)
							if (this.pagination.pageNum === 0) {
								this.list = res.records
							} else {
								this.list = this.list.concat(res.records)
							}
							resolve({ list: this.list, total: res.total })
						} else {
							reject()
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		},
		//消息分页
		quotationUp(page) {
			this.pagination.pageNum++
			this.queryData()
				.then(({ list, total }) => {
					this.$refs.messageRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.messageRef.loadFail()
				})
		},
		//消息分页
		quotationDown() {
			this.pagination.pageNum = 0
			this.queryData()
				.then(({ list, total }) => {
					this.$refs.messageRef.refreshSuccess({ list, total })
				})
				.catch(() => {
					this.$refs.messageRef.refreshFail()
				})
		},
		allread() {
			return new Promise((resolve, reject) => {
				var meesage = this.list.map(item => {
					return item.id
				})
				var params = {
					messageIds:meesage
				}
				systemRead(params)
					.then(res => {
						if (res) {
							uni.showToast({
								title: '操作成功',
								icon: 'success'
							})
							this.pagination.pageNum = 0
							this.queryData()
							this.$emit('systemCount', 0)
						} else {
							reject()
						}
					})
					.catch(err => {
						reject(err)
					})
			})
		}
	}
}
</script>

<style lang="scss">
.system-message {
	.system-message-main {
		background-color: #ffffff;
		margin: 20rpx 32rpx;
		border-radius: 20rpx;
	}
	.system-message-main-top {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 32rpx;
	}
	.system-message-title {
		font-size: 32rpx;
		color: #333333;
		letter-spacing: 0;
		font-weight: 600;
		display: flex;
	}
	.system-message-subtitle {
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}
	.system-message-contant {
		font-size: 28rpx;
		color: #888888;
		letter-spacing: 0;
		font-weight: 400;
		padding: 0rpx 32rpx;
		line-height: 40rpx;
		overflow: auto;
		max-height: 100rpx;
		height: 100rpx;
	}
	.dian {
		background: #ff0000;
		height: 14rpx;
		width: 14rpx;
		border-radius: 20rpx;
		margin-left: 10rpx;
	}
}
</style>