您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

messageList.vue 8.3 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. <template>
  2. <view class="message_list">
  3. <!-- 公告 -->
  4. <view class="m-nav">
  5. <view class="m-n-lside">
  6. <image src="@/static/images/notice.png" mode=""></image>
  7. 全部{{ count }}条新消息
  8. </view>
  9. <view class="m-n-rside" @click="allRead">
  10. 全部已读
  11. </view>
  12. </view>
  13. <!-- 选项卡 -->
  14. <view class="m-tabs">
  15. <u-tabs :list="list" :current="current" :is-scroll="false" @change="change"></u-tabs>
  16. </view>
  17. <template v-if="current == 0">
  18. <scroll-view :scroll-top="scrollTop" refresher-enabled="true" :refresher-triggered="triggered"
  19. @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
  20. :scroll-y="true" class="scroll-Y" @scrolltolower="lower">
  21. <template v-if="updateAnnList.length!=0">
  22. <block v-for="(item,index) in updateAnnList" :key="index">
  23. <view class="upgradeItem" @click="goReception(item, index)">
  24. <view class="right">
  25. <view class="title">
  26. <template v-if="item.messageType == 2">
  27. {{ item.weekDate }}
  28. </template>
  29. <template v-else>
  30. {{ fomatDate(item.createTime) }}
  31. </template>
  32. <template v-if="item.orgCode&&item.orgName">
  33. {{ item.orgName }}
  34. </template>
  35. {{item.title}}
  36. <template v-if="item.readFlag==0">
  37. <view class="notRead"></view>
  38. </template>
  39. </view>
  40. <view class="time">{{item.createTime}}</view>
  41. </view>
  42. </view>
  43. </block>
  44. </template>
  45. <template v-else>
  46. <view style="padding: 100rpx 0;">
  47. <u-empty text="暂无数据" mode="list"></u-empty>
  48. </view>
  49. </template>
  50. </scroll-view>
  51. </template>
  52. <!-- 升级公告 -->
  53. <template v-if="current == 1">
  54. <scroll-view :scroll-top="scrollTop" refresher-enabled="true" :refresher-triggered="triggered"
  55. @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
  56. :scroll-y="true" class="scroll-Y" @scrolltolower="lower">
  57. <template v-if="updateAnnList.length!=0">
  58. <block v-for="(item,index) in updateAnnList" :key="index">
  59. <view class="upgradeItem" @click="goDetail(item)">
  60. <view class="right">
  61. <view class="title">
  62. {{item.title}}
  63. <template v-if="item.readFlag==0">
  64. <view class="notRead"></view>
  65. </template>
  66. </view>
  67. <view class="time">{{item.createTime}}</view>
  68. </view>
  69. </view>
  70. </block>
  71. </template>
  72. <template v-else>
  73. <view style="padding: 100rpx 0;">
  74. <u-empty text="暂无数据" mode="list"></u-empty>
  75. </view>
  76. </template>
  77. </scroll-view>
  78. </template>
  79. </view>
  80. </template>
  81. <script>
  82. var util = require("../../utils/util.js");
  83. var config = require("../../config");
  84. export default {
  85. data() {
  86. return {
  87. triggered: true,
  88. scrollTop: 0,
  89. old: {
  90. scrollTop: 0
  91. },
  92. updateAnnList: [],
  93. sysItemList: [],
  94. list: [{
  95. name: '接待报告',
  96. id: 1, // 1日报 2周报 3其他(非3为接待报告,3是系统消息)
  97. }, {
  98. name: '升级公告',
  99. id: 3, // 1日报 2周报 3其他(非3为接待报告,3是系统消息)
  100. }],
  101. count: 0, // 全部条数
  102. current: 0,
  103. pageNum: 1,
  104. pageSize: 10,
  105. };
  106. },
  107. onShow() {
  108. this.updateAnnList = []
  109. this.pageNum = 1
  110. this.updateInit()
  111. this.getMessageNotRed()
  112. },
  113. onLoad() {
  114. this._freshing = false;
  115. setTimeout(() => {
  116. this.triggered = true;
  117. }, 1000)
  118. },
  119. onPullDownRefresh() {
  120. this.initPage()
  121. setTimeout(function() {
  122. uni.stopPullDownRefresh();
  123. }, 1000);
  124. },
  125. methods: {
  126. onPulling(e) {
  127. console.log("onpulling", e);
  128. },
  129. onRefresh() {
  130. if (this._freshing) return;
  131. this.updateAnnList = []
  132. this.pageNum = 1
  133. this.updateInit()
  134. this._freshing = true;
  135. setTimeout(() => {
  136. this.triggered = false;
  137. this._freshing = false;
  138. }, 3000)
  139. },
  140. onRestore() {
  141. this.triggered = 'restore'; // 需要重置
  142. console.log("onRestore");
  143. },
  144. lower(e) {
  145. this.pageNum++
  146. this.updateInit()
  147. },
  148. initPage() {
  149. this.updateAnnList = []
  150. this.pageNum = 1
  151. this.updateInit()
  152. },
  153. // 全部标记已读
  154. allRead() {
  155. this.$u.get('/zkMessage/updateState', {
  156. accountId: uni.getStorageSync('weapp_session_userInfo_data').accountId,
  157. projectId: uni.getStorageSync('buildingID').id,
  158. }).then(res => {
  159. uni.showToast({
  160. title: '全部已读成功!',
  161. duration: 2000
  162. });
  163. this.initPage()
  164. }).catch(e => {
  165. console.log(e)
  166. })
  167. },
  168. updateInit() {
  169. let obj = {
  170. messageType: this.list[this.current].id,
  171. id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
  172. num: this.pageNum,
  173. size: this.pageSize
  174. }
  175. if (this.current == 0) {
  176. obj.projectId = uni.getStorageSync('buildingID').id
  177. } else {
  178. obj.projectId = ''
  179. }
  180. uni.request({
  181. url: config.service.updateList,
  182. method: "GET",
  183. data: obj,
  184. header: {
  185. 'content-type': 'application/json',
  186. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  187. },
  188. success: (res) => {
  189. if (res.data.data) {
  190. if (this.pageNum != 1) {
  191. this.updateAnnList = [...this.updateAnnList, ...res.data.data.list.results];
  192. } else {
  193. this.updateAnnList = res.data.data.list.results || []
  194. }
  195. }
  196. },
  197. fail: e => {
  198. console.log(e)
  199. }
  200. })
  201. },
  202. goDetail(data) {
  203. this.$store.commit('setMessageObj', data)
  204. uni.navigateTo({
  205. url: "./messageDetail"
  206. })
  207. },
  208. // 获取未读消息数量
  209. getMessageNotRed() {
  210. uni.request({
  211. url: config.service.notReadNum,
  212. method: "GET",
  213. data: {
  214. id: uni.getStorageSync('weapp_session_userInfo_data').accountId,
  215. projectId: uni.getStorageSync('buildingID').id,
  216. },
  217. header: {
  218. 'content-type': 'application/json',
  219. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  220. },
  221. success: (res) => {
  222. this.count = res.data.data || 0
  223. }
  224. })
  225. },
  226. // 跳转日报
  227. goReception(data, index) {
  228. this.$store.commit('setMessageObj', data)
  229. data.readFlag = 1
  230. if (data.messageType == 2) {
  231. uni.navigateTo({
  232. url: `/pages/reportExcel/weekReport?id=${data.id}`
  233. })
  234. } else {
  235. uni.navigateTo({
  236. url: `/pages/reportExcel/dayReport?id=${data.id}`
  237. })
  238. }
  239. },
  240. fomatDate(date) {
  241. if (!date) return '--'
  242. let arr = date.split(' ')
  243. let str = arr[0]
  244. let result = str.split('-')
  245. return `${result[1]}月${result[2]}日`
  246. },
  247. // 转换时间
  248. getTimeLine(date, type = 1) {
  249. let resu = '--'
  250. if (!date) return resu
  251. let time = new Date(date.replace(/-/g, '/'))
  252. time.setDate(time.getDate() - 7)
  253. let arr = date.split(' ')
  254. let str = arr[0]
  255. let result = str.split('-')
  256. let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
  257. let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()
  258. if (type == 1) {
  259. resu = `${m}.${d}-${result[1]}.${result[2]}`
  260. } else {
  261. resu = `${m}月${d}日~${result[1]}月${result[2]}日`
  262. }
  263. return resu
  264. },
  265. change(index) {
  266. this.current = index;
  267. this.initPage()
  268. }
  269. }
  270. }
  271. </script>
  272. <style lang="scss">
  273. .message_list {
  274. width: 100vw;
  275. height: calc(100vh - var(--window-top));
  276. background: #F8F8F8;
  277. display: flex;
  278. flex-direction: column;
  279. .m-nav {
  280. flex-shrink: 0;
  281. padding: 0 30rpx;
  282. width: 100%;
  283. height: 68rpx;
  284. display: flex;
  285. align-items: center;
  286. .m-n-lside {
  287. flex-grow: 1;
  288. display: flex;
  289. align-items: center;
  290. image {
  291. margin-right: 16rpx;
  292. width: 36rpx;
  293. height: 36rpx;
  294. }
  295. }
  296. .m-n-rside {
  297. flex-shrink: 0;
  298. padding: 6rpx 14rpx;
  299. border: 1rpx solid #E0E0E0;
  300. font-size: 24rpx;
  301. }
  302. }
  303. .m-tabs {
  304. flex-shrink: 0;
  305. }
  306. .scroll-Y {
  307. padding: 20rpx 0 0 0;
  308. flex-grow: 1;
  309. overflow-y: scroll;
  310. .upgradeItem {
  311. margin: 0 0 20rpx 0;
  312. padding: 24rpx 30rpx 28rpx;
  313. height: 156rpx;
  314. display: flex;
  315. background: #fff;
  316. .right {
  317. .title {
  318. font-size: 32rpx;
  319. font-weight: bold;
  320. display: flex;
  321. .notRead {
  322. width: 14rpx;
  323. height: 14rpx;
  324. background: #FF0000;
  325. border-radius: 100%;
  326. }
  327. }
  328. .time {
  329. margin: 18rpx 0 0 0;
  330. color: #6f6f6f;
  331. font-size: 24rpx;
  332. }
  333. }
  334. }
  335. }
  336. }
  337. </style>