caimei-applets-caimei/pages/tabBar/notice/index.vue

<template>
	<view class="notice clearfix" :style="{ paddingTop: CustomBar + 'px' }">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<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/club/notice-order')">
					<view class="notice-cell-icon">
						<image class="icon-image" :src="StaticUrl + 'icon/icon-notice-order@2x.png'" mode=""></image>
					</view>
					<view class="notice-cell-text"> 交易物流 <text class="cell-text">官方</text> </view>
					<view class="notice-cell-badge">
						<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"> 99+ </text>
					</view>
				</view>
				<view class="notice-cell" @click="navigator('/pages/notice/club/notice-users')">
					<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">
						<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"> 99+ </text>
					</view>
				</view>
				<view class="notice-cell" @click="navigator('/pages/notice/club/notice-serve')">
					<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">
						<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"> 5 </text>
					</view>
				</view>
				<view class="notice-cell" @click="navigator('/pages/notice/club/notice-coupon')">
					<view class="notice-cell-icon">
						<image class="icon-image" :src="StaticUrl + 'icon/icon-notice-coupon@2x.png'" mode=""></image>
					</view>
					<view class="notice-cell-text"> 优惠促销 <text class="cell-text">官方</text> </view>
					<view class="notice-cell-badge">
						<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"> 10 </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
		}
	},
	onLoad() {},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		async initData() {
			const userInfo = await this.$api.getStorage()
			this.skeletonShow = true //预加载圆圈
			this.userId = userInfo.userId ? userInfo.userId : 0
			this.initGetCartGoodsList()
		},
		clearNews() {
			this.$util.msg('已将所有消息标记为已读', 2000)
		},
		initGetCartGoodsList() {
			console.log('获取消息通知数据')
			this.skeletonShow = false
		},
		initLogin() {
			this.$api.redirectTo('/pages/login/login')
		},
		navigator(url) {
			this.$api.navigateTo(url)
		},
	},
	onPullDownRefresh() {
		//下拉刷新
		uni.stopPullDownRefresh()
	},
	onShow() {
		if (this.hasLogin) {
			this.initData()
		} else {
			this.initLogin()
		}
	}
}
</script>

<style lang="scss">
.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 #e15616;
				font-size: 24rpx;
				color: #e15616;
				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>