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 class="notice-cell" @click="navigateTo('/pages/notice/club/notice-article?messageType=5')">
                	<view class="notice-cell-icon">
                		<image class="icon-image" :src="'https://static.caimei365.com/app/img/' + 'icon/icon-notice-text@2x.png'" mode=""></image>
                	</view>
                	<view class="notice-cell-text"> 最新文章 <text class="cell-text">官方</text> </view>
                	<view class="notice-cell-badge" v-if="articleCount > 0">
                		<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
                			{{ articleCount | BadgeType }}
                		</text>
                	</view>
                </view>
                <view class="notice-cell" @click="navigateTo('/pages/notice/club/notice-activity?messageType=6')">
                	<view class="notice-cell-icon">
                		<image class="icon-image" :src="'https://static.caimei365.com/app/img/' + 'icon/icon-notice-active@2x.png'" mode=""></image>
                	</view>
                	<view class="notice-cell-text"> 最新活动 <text class="cell-text">官方</text> </view>
                	<view class="notice-cell-badge" v-if="activityCount > 0">
                		<text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
                			{{ activityCount | BadgeType }}
                		</text>
                	</view>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>
import { fetchMessageCount, updateHeheMessageAsRead } from '@/services/api/notice.js'
import { getStorage } from '@/common/storage.js'
import { mapActions } from 'vuex'

export default {
    data() {
        return {
            skeletonShow: true,
            CustomBar: '',
            StatusBar: '',
            fontSizeSetting: '',
            StaticUrl: '',
            clubId: 0,
            allCount: 0,
            tradeCount: 0,
            accountCount: 0,
            notificationCount: 0,
            promotionCount: 0,
            articleCount: 0,
            activityCount: 0,
            userId: 0
        }
    },
    filters: {
        BadgeType: val => (val && val >= 99 ? '99+' : val) // 红点的提示信息
    },
    watch: {},
    onPullDownRefresh() {
        uni.stopPullDownRefresh()
    },
    onShow() {
        this.userId = getStorage('USER_INFO').userId || 0
        if (this.userId) {
            this.initData()
        } else {
            this.initLogin()
        }
    },
    methods: {
        ...mapActions('user', ['updateNoticeNum']),
        initLogin() {
            uni.redirectTo({ url: '/pages/authorize/login-custom' })
        },
        async initData() {
            this.getSystomInfo()
            const { data } = await fetchMessageCount({ commonId: this.userId })
            this.tradeCount = data.tradeCount // 交易物流
            this.accountCount = data.account // 账户通知
            this.notificationCount = data.notificationCount // 服务通知
            this.promotionCount = data.promotionCount // 优惠促销
            this.activityCount = data.activityCount // 活动通知
            this.articleCount = data.infoCount // 文章通知
            this.allCount = data.count // 总数
            this.skeletonShow = false //预加载圆圈隐藏
        },
        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
                }
            })
        },
        async clearNews() {
            try {
                if (this.allCount > 0) {
                    await updateHeheMessageAsRead({ commonId: this.userId })
                    this.initData()
                    this.updateNoticeNum()
                    uni.showToast({
                        title: '清理成功',
                        icon: 'success'
                    })
                } else {
                    uni.showToast({
                        title: '暂无新的消息'
                    })
                }
            } catch (e) {
                console.log(e)
            }
        },
        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>