byte-sailing-mobile/src/views/message/index.vue

<template>
    <div class="message">
        <van-nav-bar title="ByteSailing">
            
            <template #right> <van-icon name="more-o" /> </template>
        </van-nav-bar>
        <ul>
            <li  @click="toRouter('announcement')">
                <div class="icon-box">
                    <i  class="iconfont icon-iconm_xitxx"></i>
                </div>
                <div class="text-center">
                    <div class="title">{{$t('message.systemNotification')}}</div>
                    <div class="content">{{sendMegData.rows.length > 0 ? sendMegData.rows[0].title : ''}}</div>
                </div>
                <div class="text-right">
                    <div class="time-or-num">
                        <div class="time">{{sendMegTime}}</div>
                        <div class="num">{{sendMegData.total}}</div>
                    </div>
                    <van-icon name="arrow" size='16' />
                </div>
            </li>
            <li>
                <div class="icon-box" style="background:#A06CFB">
                    <i  class="iconfont icon-iconm_yewtx"></i>
                </div>
                <div class="text-center" style="line-height:40px">
                    <div class="title">{{$t('message.businessReminder')}}</div>
                    <div class="content"></div>
                </div>
                <div class="text-right">
                    <div class="time-or-num">
                        <div class="time"> </div>
                        <div class="num">0</div>
                    </div>
                    <van-icon name="arrow" size='16' />
                </div>
            </li>
            <li @click="toRouter('email')">
                <div class="icon-box"  style="background:#FF8800">
                    <i  class="iconfont icon-iconx_dianzyx"></i>
                </div>
                <div class="text-center">
                    <div class="title"  style="line-height:40px">{{$t('message.mailReminder')}}</div>
                    <div class="content"></div>
                </div>
                <div class="text-right">
                    <div class="time-or-num">
                        <div class="time"> </div>
                        <div class="num">{{emailNumber}}</div>
                    </div>
                    <van-icon name="arrow" size='16' />
                </div>
            </li>
            <li>
                <div class="icon-box" style="background:#38CBD8">
                    <i  class="iconfont icon-iconm_kehd"></i>
                </div>
                <div class="text-center">
                    <div class="title"  style="line-height:40px">{{$t('message.privateLetter')}}</div>
                    <div class="content"></div>
                </div>
                <div class="text-right">
                    <div class="time-or-num">
                        <div class="time"> </div>
                        <div class="num">0</div>
                    </div>
                    <van-icon name="arrow" size='16' />
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/utils/auth'
const proxy = getCurrentInstance().proxy
const toMessageList = () => {
    proxy.$router.push('/main/messageList')
}
let sendMegData = ref({
    rows: [],
    total:0,
})
function timesFun (timesData) {
    //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
    var dateBegin = new Date(timesData.replace(/-/g, "/"));//将-转化为/，使用new Date
    var dateEnd = new Date();//获取当前时间
    var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
    var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
    var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
    //计算相差分钟数
    var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
    var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
    //计算相差秒数
    var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
    var seconds = Math.round(leave3 / 1000);
    var timesString = '';

    if (dayDiff != 0) {
        timesString = dayDiff + proxy.$t('common.daysAgo'); 
    } else if (dayDiff == 0 && hours != 0) {
        timesString = hours + proxy.$t('common.hoursAgo');
    } else if (dayDiff == 0 && hours == 0) {
        timesString = minutes + proxy.$t('common.minutesAgo');
    }

    return {
        timesString: timesString
    }
}
let sendMegTime = ref('')
proxy.post('/sendMeg/page',{type:'1',status:1}).then(res => {
    sendMegData = res.data
    sendMegTime = timesFun(res.data.rows[0].createTime).timesString
    //计算a距离现在的时间
})

const toRouter = (routerName) => {
    proxy.$router.push(`/main/${routerName}`)
}
const emailNumber = ref(0)
proxy.post('/mailInfo/getUserEmailList',{
    id:getUserInfo().userId
}).then(res => {
    for (let i = 0; i < res.data.length; i++) {
        const element = res.data[i];
        for (let j = 0; j < element.mailFolderInfoList.length; j++) {
            const jelement = element.mailFolderInfoList[j];
            if(jelement.unreadMessageCount) emailNumber.value = emailNumber.value + jelement.unreadMessageCount
        }
    }
    console.log(res)
})
</script>
<style lang="scss">
.op0{
    opacity: 0;
}
    .message{
        ul{
            margin: 12px 0 0 0;
            padding-left: 12px;
            background: #fff;
            li{
                
                padding: 20px 12px 20px 0;
                display: flex;
                justify-content: space-between;
                height: 80px;
                box-sizing: border-box;
                border-bottom: 1px solid #ddd;
                .text-center{
                    flex: 1;
                    max-width: calc(100vw - 140px);
                    .title{
                        font-size: 16px;
                        font-weight: bold;
                        color: #333;
                    }
                    .content{
                        font-size: 14px;
                        color: #999;
                        margin-top: 4px;
                        //文字一行多余省略
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;

                    }
                }
                .text-right{
                    display: flex;
                    .van-badge__wrapper{
                        line-height: 40px;
                    }
                    .time-or-num {
                        text-align: center;
                        margin-right: 5px;
                        .time{
                            font-size: 12px;
                            color: #999;
                        }
                        .num {
                            width:40px;
                            height: 16px;
                            background: #FF4D4F;
                            border-radius: 8px;
                            text-align: center;
                            line-height: 16px;
                            font-size: 12px;
                            color: #fff;
                            margin-top: 8px;
                        }
                    }
                }
                .icon-box{
                    width: 40px;
                    height: 40px;
                    background: #46A6FF;
                    border-radius: 20px;
                    text-align: center;
                    line-height: 40px;
                    margin-right: 20px;
                    i{
                        font-size: 20px;
                        color: #fff;
                    }
                }
            }
        }
    }
</style>