|
|
@@ -1,42 +1,48 @@
|
|
|
<template>
|
|
|
- <div class="message">
|
|
|
- <van-nav-bar title="ByteSailing">
|
|
|
-
|
|
|
- </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>
|
|
|
- <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="message">
|
|
|
+ <van-nav-bar title="ByteSailing"> </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>
|
|
|
+ <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>
|
|
|
@@ -68,83 +74,88 @@
|
|
|
<van-icon name="arrow" size='16' />
|
|
|
</div>
|
|
|
</li> -->
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ </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
|
|
|
+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')
|
|
|
-}
|
|
|
+ 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 = '';
|
|
|
+ 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');
|
|
|
- }
|
|
|
+ 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
|
|
|
- }
|
|
|
+ return {
|
|
|
+ timesString: timesString,
|
|
|
+ };
|
|
|
}
|
|
|
-let sendMegTime = ref('')
|
|
|
-let announcementTime = ref('')
|
|
|
-proxy.post('/pushInfo/page',{
|
|
|
- pageNum:1,
|
|
|
- pageSize:999,
|
|
|
+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 : ''
|
|
|
+ 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,
|
|
|
+ rows: [],
|
|
|
+ total: 0,
|
|
|
+});
|
|
|
+proxy
|
|
|
+ .post("/pushAnnouncement/page", {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ type: 2,
|
|
|
pushRead: 0,
|
|
|
-}).then(res => {
|
|
|
- announcementData.value = res.data
|
|
|
- announcementTime = timesFun(res.data.rows[0].createTime).timesString
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ announcementData.value = res.data;
|
|
|
+ announcementTime = timesFun(res.data.rows[0].createTime).timesString;
|
|
|
//计算a距离现在的时间
|
|
|
-})
|
|
|
-
|
|
|
+ });
|
|
|
|
|
|
const toRouter = (routerName) => {
|
|
|
- proxy.$router.push(`/main/${routerName}`)
|
|
|
-}
|
|
|
-const emailNumber = ref(0)
|
|
|
+ proxy.$router.push(`/main/${routerName}`);
|
|
|
+};
|
|
|
+const emailNumber = ref(0);
|
|
|
// proxy.post('/mailInfo/getUserEmailList',{
|
|
|
// id:getUserInfo().userId
|
|
|
// }).then(res => {
|
|
|
@@ -157,89 +168,84 @@ const emailNumber = ref(0)
|
|
|
// }
|
|
|
// console.log(res)
|
|
|
// })
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
-.op0{
|
|
|
- opacity: 0;
|
|
|
+.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;
|
|
|
+.message {
|
|
|
+ ul {
|
|
|
+ margin: 12px 0 0 0;
|
|
|
+ padding-left: 12px;
|
|
|
+ background: #fff;
|
|
|
+ li {
|
|
|
+ padding: 20px 12px 20px 0;
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
- .text-right{
|
|
|
- width: 90px;
|
|
|
- float: right;
|
|
|
- display: flex;
|
|
|
- .van-badge__wrapper{
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
- .time-or-num {
|
|
|
- text-align: center;
|
|
|
- margin-right: 5px;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .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>
|
cz