index.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <div class="message">
  3. <van-nav-bar title="ByteSailing">
  4. <template #right> <van-icon name="more-o" /> </template>
  5. </van-nav-bar>
  6. <ul>
  7. <li @click="toRouter('announcement')">
  8. <div class="icon-box">
  9. <i class="iconfont icon-iconm_xitxx"></i>
  10. </div>
  11. <div class="text-center">
  12. <div class="title">{{$t('message.systemNotification')}}</div>
  13. <div class="content">{{announcementData.rows.length > 0 ? announcementData.rows[0].title : ''}}</div>
  14. </div>
  15. <div class="text-right">
  16. <div class="time-or-num">
  17. <div class="time">{{announcementTime}}</div>
  18. <div class="num">{{announcementData.total}}</div>
  19. </div>
  20. <van-icon name="arrow" size='16' />
  21. </div>
  22. </li>
  23. <li>
  24. <div class="icon-box" style="background:#A06CFB">
  25. <i class="iconfont icon-iconm_yewtx"></i>
  26. </div>
  27. <div class="text-center">
  28. <div class="title">{{$t('message.businessReminder')}}</div>
  29. <div class="content">{{sendMegData.rows.length > 0 ? sendMegData.rows[0].title : ''}}</div>
  30. </div>
  31. <div class="text-right">
  32. <div class="time-or-num">
  33. <div class="time">{{sendMegTime}}</div>
  34. <div class="num">{{sendMegData.total}}</div>
  35. </div>
  36. <van-icon name="arrow" size='16' />
  37. </div>
  38. </li>
  39. <!-- <li @click="toRouter('email')">
  40. <div class="icon-box" style="background:#FF8800">
  41. <i class="iconfont icon-iconx_dianzyx"></i>
  42. </div>
  43. <div class="text-center">
  44. <div class="title" style="line-height:40px">{{$t('message.mailReminder')}}</div>
  45. <div class="content"></div>
  46. </div>
  47. <div class="text-right">
  48. <div class="time-or-num">
  49. <div class="time"> </div>
  50. <div class="num">{{emailNumber}}</div>
  51. </div>
  52. <van-icon name="arrow" size='16' />
  53. </div>
  54. </li>
  55. <li>
  56. <div class="icon-box" style="background:#38CBD8">
  57. <i class="iconfont icon-iconm_kehd"></i>
  58. </div>
  59. <div class="text-center">
  60. <div class="title" style="line-height:40px">{{$t('message.privateLetter')}}</div>
  61. <div class="content"></div>
  62. </div>
  63. <div class="text-right">
  64. <div class="time-or-num">
  65. <div class="time"> </div>
  66. <div class="num">0</div>
  67. </div>
  68. <van-icon name="arrow" size='16' />
  69. </div>
  70. </li> -->
  71. </ul>
  72. </div>
  73. </template>
  74. <script setup>
  75. import { ref, getCurrentInstance, onMounted } from 'vue'
  76. import { showSuccessToast, showFailToast } from 'vant'
  77. import { useRoute } from 'vue-router'
  78. import { getUserInfo } from '@/utils/auth'
  79. const proxy = getCurrentInstance().proxy
  80. const toMessageList = () => {
  81. proxy.$router.push('/main/messageList')
  82. }
  83. let sendMegData = ref({
  84. rows: [],
  85. total:0,
  86. })
  87. function timesFun (timesData) {
  88. //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了
  89. var dateBegin = new Date(timesData.replace(/-/g, "/"));//将-转化为/,使用new Date
  90. var dateEnd = new Date();//获取当前时间
  91. var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
  92. var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
  93. var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  94. var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
  95. //计算相差分钟数
  96. var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  97. var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
  98. //计算相差秒数
  99. var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  100. var seconds = Math.round(leave3 / 1000);
  101. var timesString = '';
  102. if (dayDiff != 0) {
  103. timesString = dayDiff + proxy.$t('common.daysAgo');
  104. } else if (dayDiff == 0 && hours != 0) {
  105. timesString = hours + proxy.$t('common.hoursAgo');
  106. } else if (dayDiff == 0 && hours == 0) {
  107. timesString = minutes + proxy.$t('common.minutesAgo');
  108. }
  109. return {
  110. timesString: timesString
  111. }
  112. }
  113. let sendMegTime = ref('')
  114. let announcementTime = ref('')
  115. proxy.post('/pushInfo/page',{
  116. pageNum:1,
  117. pageSize:999,
  118. pushRead: 0,
  119. type:2,
  120. }).then(res => {
  121. sendMegData.value = res.data
  122. sendMegTime = res.data.rows.length > 0 ? timesFun(res.data.rows[0].createTime).timesString : ''
  123. //计算a距离现在的时间
  124. })
  125. const announcementData = ref({
  126. rows: [],
  127. total:0,
  128. })
  129. proxy.post('/pushAnnouncement/page',{
  130. pageNum:1,
  131. pageSize:10,
  132. type:2,
  133. pushRead: 0,
  134. }).then(res => {
  135. announcementData.value = res.data
  136. announcementTime = timesFun(res.data.rows[0].createTime).timesString
  137. //计算a距离现在的时间
  138. })
  139. const toRouter = (routerName) => {
  140. proxy.$router.push(`/main/${routerName}`)
  141. }
  142. const emailNumber = ref(0)
  143. // proxy.post('/mailInfo/getUserEmailList',{
  144. // id:getUserInfo().userId
  145. // }).then(res => {
  146. // for (let i = 0; i < res.data.length; i++) {
  147. // const element = res.data[i];
  148. // for (let j = 0; j < element.mailFolderInfoList.length; j++) {
  149. // const jelement = element.mailFolderInfoList[j];
  150. // if(jelement.unreadMessageCount) emailNumber.value = emailNumber.value + jelement.unreadMessageCount
  151. // }
  152. // }
  153. // console.log(res)
  154. // })
  155. </script>
  156. <style lang="scss">
  157. .op0{
  158. opacity: 0;
  159. }
  160. .message{
  161. ul{
  162. margin: 12px 0 0 0;
  163. padding-left: 12px;
  164. background: #fff;
  165. li{
  166. padding: 20px 12px 20px 0;
  167. overflow: hidden;
  168. height: 80px;
  169. box-sizing: border-box;
  170. border-bottom: 1px solid #ddd;
  171. .text-center{
  172. float: left;
  173. width: calc(100% - 170px);
  174. .title{
  175. font-size: 16px;
  176. font-weight: bold;
  177. color: #333;
  178. }
  179. .content{
  180. font-size: 14px;
  181. color: #999;
  182. margin-top: 4px;
  183. //文字一行多余省略
  184. overflow: hidden;
  185. text-overflow: ellipsis;
  186. white-space: nowrap;
  187. }
  188. }
  189. .text-right{
  190. width: 90px;
  191. float: right;
  192. display: flex;
  193. .van-badge__wrapper{
  194. line-height: 40px;
  195. }
  196. .time-or-num {
  197. text-align: center;
  198. margin-right: 5px;
  199. .time{
  200. font-size: 12px;
  201. color: #999;
  202. }
  203. .num {
  204. width:40px;
  205. height: 16px;
  206. background: #FF4D4F;
  207. border-radius: 8px;
  208. text-align: center;
  209. line-height: 16px;
  210. font-size: 12px;
  211. color: #fff;
  212. margin-top: 8px;
  213. }
  214. }
  215. }
  216. .icon-box{
  217. width: 40px;
  218. height: 40px;
  219. background: #46A6FF;
  220. border-radius: 20px;
  221. text-align: center;
  222. line-height: 40px;
  223. margin-right: 20px;
  224. float: left;
  225. i{
  226. font-size: 20px;
  227. color: #fff;
  228. }
  229. }
  230. }
  231. }
  232. }
  233. </style>