caimei-applets-store/pages/tabBar/notice/notice.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;' }"
            	>
            		消息 <image class="iconfont icon-qingli" @click="clearNews" src="@/static/tabBar/clean_notice.png"></image>
            	</view>
            </view>
            <view class="container-notice">
                <view class="notice-cell" @click="navigateTo('/pages/notice/club/notice-order?messageType=1')">
                	<view class="notice-cell-icon">
                		<image class="icon-image" src="@/static/tabBar/play_notice.png" mode=""></image>
                	</view>
                	<view class="notice-cell-text"> 交易物流 <text class="cell-text">官方</text> </view>
                	<view class="notice-cell-badge" v-if="tradeCount > 0">
                		<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
                			{{ tradeCount | BadgeType }}
                		</text>
                	</view>
                </view>
                <view class="notice-cell" @click="navigateTo('/pages/notice/club/notice-users?messageType=2')">
                	<view class="notice-cell-icon">
                		<image class="icon-image" src="@/static/tabBar/user_notice.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="navigateTo('/pages/notice/club/notice-server?messageType=3')">
                	<view class="notice-cell-icon">
                		<image class="icon-image" src="@/static/tabBar/server_notice.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 class="notice-cell" @click="navigateTo('/pages/notice/club/notice-coupon?messageType=4')">
                	<view class="notice-cell-icon">
                		<image class="icon-image" src="@/static/tabBar/preferential_notice.png" mode=""></image>
                	</view>
                	<view class="notice-cell-text"> 优惠促销 <text class="cell-text">官方</text> </view>
                	<view class="notice-cell-badge" v-if="promotionCount > 0">
                		<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
                			{{ promotionCount | BadgeType }}
                		</text>
                	</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapGetters, mapMutations } from 'vuex'
    export default {
        data() {
            return {
                skeletonShow: true,
                // CustomBar: this.CustomBar,
                // StatusBar: this.StatusBar,
                // fontSizeSetting: this.fontSizeSetting,
                CustomBar: '',
                StatusBar: '',
                fontSizeSetting: '',
                StaticUrl: '',
                clubId: 0,
                allCount:0,
                tradeCount: 0,
                accountCount: 0,
                notificationCount: 0,
                promotionCount: 0
            }
        },
        filters: {
            BadgeType: (val) => (val && val >= 99 ? '99+' : val), // 红点的提示信息
        },
        computed: {
            ...mapGetters(['hasLogin'])
        },
        watch: {},
        onPullDownRefresh() {
            uni.stopPullDownRefresh()
        },
        onShow() {
            console.log(this.hasLogin)
            if (this.hasLogin) {
            	this.initData()
            } else {
            	this.initLogin()
            }
        },
        methods: {
            initLogin() {
                console.log(111)
                uni.redirectTo({ url: '/pages/authorize/login-custom' })
            },
            initData() {
                this.skeletonShow = false
                this.getSystomInfo()
            },
            getSystomInfo() {
                uni.getSystemInfo({
                    success: (e) => {
                        if (e.platform == 'android') {
                            this.CustomBar = e.statusBarHeight + 50
                        } else {
                            this.CustomBar = e.statusBarHeight + 45
                        };
                        this.StatusBar = e.statusBarHeight
                        this.fontSizeSetting = e.fontSizeSetting
                    }
                })
            },
            navigateTo(url) {
                uni.navigateTo({
                    url: url,
                })
            },
        },
    }
</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>