caimei-applets-caimei/pages/supplier/components/notice.vue

<template>
	<view class="notice clearfix" :style="{ paddingTop: CustomBar + 'px' }">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<view v-else>
			<view class="navbar-wrap" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
				<view
					class="navbar-text"
					:style="{ lineHeight: CustomBar - StatusBar + 'px;', fontSize: fontSizeSetting + 'px;' }"
				>
					消息 <text @click="clearNews" class="iconfont icon-qingli"></text>
				</view>
			</view>
			<view class="container-notice">
				<view class="notice-cell" @click="navigator('/pages/notice/shop/notice-users?messageType=2')">
					<view class="notice-cell-icon">
						<image class="icon-image" :src="StaticUrl + 'icon/icon-notice-users@2x.png'" mode=""></image>
					</view>
					<view class="notice-cell-text"> 账户通知 <text class="cell-text">官方</text> </view>
					<view class="notice-cell-badge" v-if="accountCount > 0">
						<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
							{{ accountCount | BadgeType }}
						</text>
					</view>
				</view>
				<view class="notice-cell" @click="navigator('/pages/notice/shop/notice-serve?messageType=3')">
					<view class="notice-cell-icon">
						<image class="icon-image" :src="StaticUrl + 'icon/icon-notice-serve@2x.png'" mode=""></image>
					</view>
					<view class="notice-cell-text"> 服务通知 <text class="cell-text">官方</text> </view>
					<view class="notice-cell-badge" v-if="notificationCount > 0">
						<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
							{{ notificationCount | BadgeType }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			CustomBar: this.CustomBar,
			StatusBar: this.StatusBar,
			StaticUrl: this.$Static,
			skeletonShow: true,
			shopId: 0,
			allCount:0,
			accountCount: 0,
			notificationCount: 0
		}
	},
	filters: {
		BadgeType(value) {
			if (value) {
				return value > 99 ? '99+' : value
			}
		}
	},
	created() {
		this.initData()
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		async initData() {
			const userInfo = await this.$api.getStorage()
			this.shopId = userInfo.shopId ? userInfo.shopId : 0
			this.getUserAuthShopMessageCount()
		},
		clearNews() {
			// 标记消息已读
			if(this.allCount == 0){
				this.$util.msg('暂无未读消息', 2000)
				return
			}
			this.UserService.authUpdateShopMessageAsRead({ commonId:this.shopId,messageType: '' })
				.then(response => {
					uni.vibrateShort({
						success: function() {
							console.log('success')
						}
					})
					this.initData()
					this.$util.msg('已将所有消息标记为已读', 2000)
				})
				.catch(error => {
					console.log('标记通知消息已读', error.msg)
				})
		},
		getUserAuthShopMessageCount() {
			//供应商通知消息中心
			this.ShopService.getUserAuthShopMessageCount({ commonId: this.shopId })
				.then(response => {
					this.allCount = response.data.count
					this.accountCount = response.data.accountCount
					this.notificationCount = response.data.notificationCount
					this.skeletonShow = false //预加载圆圈隐藏
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
			this.skeletonShow = false
		},
		navigator(url) {
			this.$api.navigateTo(url)
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		uni.stopPullDownRefresh()
	},
	onShow() {}
}
</script>

<style lang="scss">
.notice {
	width: 100%;
	height: 100%;
	position: relative;
	background: #FFFFFF;
	box-sizing: border-box;
}		
.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100000;
	box-sizing: border-box;
	background: #ffffff;
	.navbar-text {
		font-size: 30rpx;
		color: #000000;
		font-weight: 500;
		text-align: center;
		.iconfont {
			display: inline-block;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background-color: #f5f5f5;
			text-align: center;
			line-height: 48rpx;
			color: #666666;
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	}
}
.container-notice {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 24rpx;
	padding-top: 20rpx;
	.notice-cell {
		width: 100%;
		height: 130rpx;
		box-sizing: border-box;
		padding: 19rpx 0;
		border-bottom: 1px solid #e1e1e1;
		.notice-cell-icon {
			width: 92rpx;
			height: 92rpx;
			float: left;
			.icon-image {
				width: 92rpx;
				height: 92rpx;
				display: block;
			}
		}
		.notice-cell-text {
			width: 400rpx;
			height: 100%;
			line-height: 92rpx;
			font-size: 34rpx;
			text-align: left;
			margin-left: 24rpx;
			float: left;
			.cell-text {
				display: inline-block;
				height: 32rpx;
				padding: 0 11rpx;
				line-height: 32rpx;
				border-radius: 20rpx;
				text-align: center;
				border: 1px solid #FF5B00;
				font-size: 24rpx;
				color: #FF5B00;
				margin-left: 10rpx;
			}
		}
		.notice-cell-badge {
			width: 92rpx;
			height: 92rpx;
			float: right;
			box-sizing: border-box;
			padding: 25rpx 15rpx;
			text-align: right;
		}
	}
}
.uni-badge--small {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
}
.uni-badge {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 12px;
	line-height: 1;
	display: inline-block;
	padding: 3px 6px;
	color: #333;
	border-radius: 100px;
	background-color: #f1f1f1;
}
.uni-badge-error {
	color: #fff;
	background-color: #ff2a2a;
}
</style>