fans-mobile/src/views/message/index.vue

<template>
  <div class="message">
    <van-nav-bar title="SANFAN MES制造执行系统">

    </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">{{announcementData.rows.length > 0 ? announcementData.rows[0].title : ''}}</div>
        </div>
        <div class="text-right">
          <div class="time-or-num">
            <div class="time">{{announcementTime}}</div>
            <div class="num">{{announcementData.total}}</div>
          </div>
          <van-icon name="arrow" size='16' />
        </div>
      </li> -->
      <li @click="toRouter('historyMessage')">
        <div class="icon-box" style="background:#A06CFB">
          <i class="iconfont icon-iconm_yewtx"></i>
        </div>
        <div class="text-center">
          <div class="title">{{$t('message.businessReminder')}}</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 @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("");
let announcementTime = ref("");
proxy
  .post("/pushInfo/page", {
    pageNum: 1,
    pageSize: 999,
    pushRead: 0,
    type: 2,
  })
  .then((res) => {
    sendMegData.value = res.data;
    sendMegTime =
      res.data.rows.length > 0
        ? timesFun(res.data.rows[0].createTime).timesString
        : "";
    //计算a距离现在的时间
  });
const announcementData = ref({
  rows: [],
  total: 0,
});
proxy
  .post("/pushAnnouncement/page", {
    pageNum: 1,
    pageSize: 10,
    type: 2,
    pushRead: 0,
  })
  .then((res) => {
    announcementData.value = res.data;
    announcementTime =
      res.data.rows.length > 0
        ? 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;

      overflow: hidden;
      height: 80px;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;
      .text-center {
        float: left;
        width: calc(100% - 170px);
        .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 {
        width: 90px;
        float: 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;
        float: left;
        i {
          font-size: 20px;
          color: #fff;
        }
      }
    }
  }
}
</style>