caimei-applets-caimei/pages/seller/components/message.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="$api.navigateTo('/pages/seller/notice/service/service')">
    				<view class="notice-cell-icon">
    					<image class="icon-image" :src="StaticUrl + 'icon/seller-server.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,
                notificationCount: 100,
                skeletonShow: false,
                allCount:0,
                tradeCount: 0,
                accountCount: 0,
                promotionCount: 0
            }
        },
        filters: {
        	BadgeType(value) {
        		if (value) {
        			return value > 99 ? '99+' : value
        		}
        	}
        },
        computed: {
        	...mapState(['hasLogin', 'userInfo'])
        },
        onPullDownRefresh() {
        	//下拉刷新
        	this.initData()
        	uni.stopPullDownRefresh()
        },
        mounted() {
            this.initData()
        },
        methods: {
            initData() {
                this.getSellerNoticeSpCount()
            },
            // 请求信息列表
            async getMessageList(){
                console.log(1111)
            },
            // 清理未读消息
            clearNews() {
            	// 标记消息已读
            	if(this.allCount == 0){
            		this.$util.msg('暂无未读消息', 2000)
            		return
            	}
            	this.SellerService.updateSpMessageAsRead({ commonId:this.userInfo.serviceProviderId, messageType: 3 })
                .then(response => {
                    uni.vibrateShort({
                        success: function() {
                            console.log('success')
                        }
                    })
                    this.initData()
                    this.$util.msg('已将所有消息标记为已读', 2000)
                })
                .catch(error => {
                    console.log('标记通知消息已读', error.msg)
                })
            },
            // 协销账户
            getSellerNoticeSpCount() {
            	//供应商详情
            	this.SellerService.getSellerNoticeSpCount({ commonId: this.userInfo.serviceProviderId, messageType: 3 })
            		.then(response => {
                        console.log(response)
                        this.notificationCount = response.data.accountCount
            			this.skeletonShow = false //预加载圆圈隐藏
            		})
            		.catch(error => {
            			this.$util.msg(error.msg, 2000)
            		})
            },
        }
    }
</script>

<style lang="scss" scoped>
.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>