caimei-applets-caimei/pages/notice/club/notice-order.vue

<template>
	<view class="container cart clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<view class="container-main" v-else>
			<view class="clearfix">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image class="empty-container-image" :src="StaticUrl + '/icon/icon-notice-empty@2x.png'"></image>
					<text class="error-text">暂无任何消息~</text>
				</view>
				<!-- 列表 -->
				<view class="tui-notice" v-else v-for="(cell, index) in list" :key="index">
					<tui-swipe-action :operateWidth="80" :backgroundColor="'#F7F7F7'">
						<template v-slot:content>
							<notice-cell :cellType="1" :cell="cell"></notice-cell>
						</template>
						<template v-slot:button>
							<view class="tui-custom-btn_box">
								<view class="tui-custom-btn" @tap="deleteBtn(cell.id)">
									<text class="iconfont icon-shanchu3"></text>
								</view>
							</view>
						</template>
					</tui-swipe-action>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
				<!--加载loadding-->
			</view>
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import noticeCell from './components/notice-cell.vue'
export default {
	components:{
		noticeCell
	},
	data() {
		return {
			skeletonShow: true,
			StaticUrl: this.$Static,
			listQuery: {
				commonId: 0,
				messageType: 1,
				pageNum: 1,
				pageSize: 10
			},
			list: [],
			isEmpty: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			hasNextPage: false,
			nomoreText: '上拉显示更多'
		}
	},
	onLoad() {
		this.initData()
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		async initData() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.commonId = userInfo.clubId ? userInfo.clubId : 0
			this.getUserAuthClubMessageList()
		},
		getUserAuthClubMessageList() {
			this.UserService.getUserAuthClubMessageList(this.listQuery)
				.then(response => {
					let data = response.data
					this.hasNextPage = response.data.hasNextPage
					if (data.list && data.list.length > 0) {
						this.isEmpty = false
						this.list = [...data.list]
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.list.length < 3) {
								this.pullUpOn = true
								this.loadding = false
							} else {
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '到底了'
							}
						}
					} else {
						this.isEmpty = true
					}
					this.skeletonShow = false
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
			console.log('获取消息通知数据')
		},
		getReachBottomData(index) {
			//上拉加载
			this.listQuery.pageNum += 1
			this.UserService.getUserAuthClubMessageList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.hasNextPage = data.hasNextPage
						this.list = this.list.concat(data.list)
						this.pullFlag = false // 防上拉暴滑
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		deleteBtn(id) {
			// 删除通知消息
			this.UserService.authDeleteMessage({ id: id })
				.then(response => {
					uni.vibrateShort({
						success: function() {
							console.log('success')
						}
					})
					this.listQuery.pageNum = 1
					this.getUserAuthClubMessageList()
				})
				.catch(error => {
					console.log('error=>', error.msg)
				})
		}
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getReachBottomData()
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		this.listQuery.pageNum = 1
		this.getUserAuthShopMessageList()
		uni.stopPullDownRefresh()
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.container-main {
	width: 100%;
	box-sizing: border-box;
	padding: 24rpx 0;
	.empty-container-image {
		width: 260rpx;
		height: 260rpx;
		margin-top: -300rpx;
	}
}
.tui-notice{
	margin-bottom: 24rpx;
}
.tui-notice-cell {
	width: 702rpx;
	height: auto;
	background-color: #ffffff;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding:16rpx 24rpx;
	margin: 0 auto;
	.tui-cell-top{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		.cell-title{
			font-size: 32rpx;
			color: #333333;
			float: left;
			font-weight: bold;
		}
		.cell-time{
			font-size: 24rpx;
			color: #999999;
			float: right;
		}
	}
	.tui-cell-content{
		width: 100%;
		height: 160rpx;
		box-sizing: border-box;
		padding: 16rpx;
		border-radius: 8rpx;
		background-color: #F7F7F7;
		.cell-image{
			width: 128rpx;
			height: 128rpx;
			border-radius: 8rpx;
			float: left;
			image{
				width: 128rpx;
				height: 128rpx;
				display: block;
				border-radius: 8rpx;
			}
		}
		.cell-content{
			width: 490rpx;
			height: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666666;
			text-align: justify;
			float: left;
		}
	}
	.tui-cell-bot{
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		padding: 16rpx 0 0 0;
		.tui-cell-btn{
			width: 160rpx;
			height: 64rpx;
			border-radius: 35rpx;
			box-sizing: border-box;
			border: 1px solid #999999;
			text-align: center;
			line-height: 64rpx;
			font-size: 26rpx;
			color: #333333;
			float: right;
			margin-left: 24rpx;
		}
	}
}
.tui-custom-btn_box {
	width: 80px;
	height: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f7f7f7;
}

.tui-custom-btn {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	background-color: #f94b4b;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	.icon-shanchu3 {
		font-size: 32rpx;
	}
}
</style>