You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

messageList.vue 8.2 KiB

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