notice-list.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>消息列表-消息中心-创业帮</title>
  6. <meta name="keywords" content="消息列表-消息中心-创业帮">
  7. <meta name="description" content="消息列表-消息中心-创业帮">
  8. <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
  9. <meta name="apple-mobile-web-app-capable" content="yes">
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta content="telephone=no" name="format-detection">
  12. <meta content="email=no" name="format-detection">
  13. <meta name="apple-mobile-web-app-title" content="消息列表-消息中心-创业帮">
  14. <meta http-equiv="Cache-Control" content="no-siteapp">
  15. <link rel="stylesheet" href="./static/css/main.css">
  16. <style>
  17. ul::-webkit-scrollbar {
  18. display: none !important;
  19. }
  20. </style>
  21. </head>
  22. <body class="back-color pb0 bgcf7f7f7 pt0" style="padding-top:0;">
  23. <div id="app" v-cloak>
  24. <van-nav-bar class="user_rank_explan_title user_title_normal" :title="noticetype" v-if="toptitleisshow" @click-left="goback" left-arrow>
  25. <template #left> <img src="./static/images/left.png" alt=""></template>
  26. </van-nav-bar>
  27. <div class="notice-list" ref="wrapper2">
  28. <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :class="noticelist.length === 0 ? 'isnodata':''" style="height:100%;">
  29. <ul class="pt16 pl16 pr16">
  30. <van-empty class="custom-image" image="./static/images/empty-img.png" description="暂无数据" v-if="isnodata"></van-empty>
  31. <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
  32. <li class="mb20" v-for="item,index in noticelist" :key="item.Id" @click="articledetail(item.Id,item.MsgType,item.Url,index)">
  33. <div class="tc">
  34. <div class="notice-time dib"><span class="cfff db">{{item.CreateDate}}</span></div>
  35. </div>
  36. <div class="notice-box pt16 ovh">
  37. <div class="notice-title">
  38. <div class="dib rel pr6" v-if="item.ReadFlag !== 1">
  39. <van-badge content=" " dot></van-badge>
  40. </div><span class="f16 c333">{{item.Title}}</span>
  41. </div>
  42. <div class="notice-img pt8" v-if="item.BgPic !== ''"><img class="db" :src="item.BgPic" style="width:100%;"></div>
  43. <div class="notice-info pt8 pb16"><span class="f12 c999">{{item.CreateDate}} {{item.Summary}}</span></div>
  44. <div class="notice-btn van-hairline--top" v-if="item.MsgType !== 2">
  45. <van-cell title="查看详情" is-link></van-cell>
  46. </div>
  47. </div>
  48. </li>
  49. </van-list>
  50. </ul>
  51. </van-pull-refresh>
  52. </div>
  53. </div>
  54. <script src="./static/js/klm-vv.min.js"></script>
  55. <script src="./static/js/appfunc.min.js"></script>
  56. <script src="./static/js/klm-axios-config.js"></script>
  57. <script src="./static/js/publicfn.js"></script>
  58. <script>
  59. // 通过 CDN 引入时不会自动注册 Lazyload 组件
  60. // 可以通过下面的方式手动注册
  61. Vue.use(vant.Lazyload);
  62. PublicLib.SetStatusBarBgColor({bgcolor:'ffffff'});
  63. //--- PublicLib.SetStatusBarStyle({type:'default', isShow:1});
  64. // 在 #app 标签下渲染一个按钮组件
  65. let app = new Vue({
  66. el: '#app',
  67. data() {
  68. return {
  69. isnodata:false,
  70. toptitleisshow:false,
  71. noticetype:'消息',
  72. noticelist:[],
  73. //- 滚动加载
  74. loading: false,
  75. finished: false,
  76. //- 刷新
  77. refreshing: false,
  78. pageinfo:{
  79. PageSize:10,
  80. PageNum:1
  81. }
  82. };
  83. },
  84. created() {
  85. this.toptitleisshow = toptitleisshow;
  86. this.noticetype = PublicLib.getCookieInfo('noticeType');
  87. if(PublicLib.getCookieInfo('noticeType') === '个人消息'){
  88. PublicLib.SetTitle({Title:'个人消息'});
  89. }else{
  90. PublicLib.SetTitle({Title:'系统消息'});
  91. };
  92. //- if(PublicLib.getCookieInfo('userId') === '14'){
  93. this.getnoticelist('refresh');
  94. //- }else{
  95. //- this.isnodata = true
  96. //- };
  97. },
  98. mounted(){
  99. this.$refs.wrapper2.style.height = `${document.documentElement.clientHeight}px`;
  100. },
  101. beforeUpdate(){
  102. this.$refs.wrapper2.style.height = `${document.documentElement.clientHeight}px`;
  103. },
  104. methods: {
  105. onLoad() {
  106. if (this.refreshing) {
  107. //- this.noticelist = [];
  108. this.refreshing = false;
  109. this.pageinfo.PageNum = 0;
  110. };
  111. this.pageinfo.PageNum++;
  112. this.getnoticelist();
  113. },
  114. onRefresh() {
  115. // 清空列表数据
  116. this.finished = false;
  117. // 重新加载数据
  118. // 将 loading 设置为 true,表示处于加载状态
  119. this.loading = true;
  120. this.pageinfo.PageNum = 1;
  121. this.getnoticelist('refresh');
  122. },
  123. async getnoticelist(type = 'onload'){
  124. //- PublicLib.ShowLoading({Message:''});
  125. let requestUrl = '';
  126. if(PublicLib.getCookieInfo('noticeType') === '个人消息'){
  127. requestUrl = 'api/v1/msgpersonal/list?t='+Math.random(6);
  128. }else{
  129. requestUrl = 'api/v1/msgplacard/list?t='+Math.random(6);
  130. };
  131. const UserId = PublicLib.getCookieInfo('userId');
  132. const res = await getRequest(requestUrl,JSON.stringify({UserId,...this.pageinfo}));
  133. if(res.status === '1') {
  134. //- PublicLib.HideLoading();
  135. if(res.data.length < this.pageinfo.PageSize) {
  136. this.finished = true;
  137. };
  138. if(type === 'refresh'){
  139. this.noticelist = res.data
  140. this.refreshing = false;
  141. }else{
  142. this.noticelist.push(...res.data);
  143. };
  144. if(PublicLib.getCookieInfo('noticeType') === '系统消息'){
  145. this.noticelist.splice(this.noticelist.length - 1,0,{
  146. CreateDate:'2022-06-10',
  147. Title:'转商户型创客',
  148. Summary:'点击查看商户型创客转换流程',
  149. ReadFlag:1,
  150. Id:99999,
  151. BgPic:'',
  152. });
  153. this.noticelist.splice(this.noticelist.length - 6,0,{
  154. CreateDate:'2022-07-06',
  155. Title:'创业帮菁英班开始报名啦',
  156. Summary:'给自己一次改变的机会,点击查看详情',
  157. ReadFlag:1,
  158. Id:1000,
  159. BgPic:'',
  160. });
  161. };
  162. this.loading = false;
  163. if(this.noticelist.length === 0) {this.isnodata = true}else{this.isnodata = false};
  164. res.data.forEach(item=>{
  165. PublicLib.CachePicture({picUrl:item.BgPic});
  166. });
  167. }
  168. },
  169. goback(){
  170. PublicLib.GoBack({Level:1});
  171. },
  172. async articledetail(id,type,url,index){
  173. if(id === 1000){
  174. return PublicLib.Goto({ Url: 'https://mp.weixin.qq.com/s/Gn6XxY9OrvA_UjaIMPTRow' });
  175. };
  176. if(id === 99999){
  177. PublicLib.putCookieInfo('articleId', 113);
  178. PublicLib.Goto({Url:'user-service-detail'});
  179. }else{
  180. await this.readflag(id,index);
  181. if(type === 2){
  182. }else if(type === 0){
  183. PublicLib.putCookieInfo('noticeArticleDetail', id);
  184. PublicLib.Goto({Url:'notice-detail'});
  185. }else if(type === 1){
  186. PublicLib.Goto({Url:url});
  187. };
  188. };
  189. },
  190. //- 标记为已读
  191. async readflag(Id,index){
  192. let requestUrl = '';
  193. if(PublicLib.getCookieInfo('noticeType') === '个人消息'){
  194. requestUrl = 'api/v1/msgpersonal/read?t='+Math.random(6);
  195. }else{
  196. requestUrl = 'api/v1/msgplacard/read?t='+Math.random(6);
  197. };
  198. const UserId = PublicLib.getCookieInfo('userId');
  199. const res = await postRequest(requestUrl,JSON.stringify({UserId,Id}));
  200. if(res.status === '1') {
  201. this.noticelist[index].ReadFlag = 1;
  202. };
  203. },
  204. }
  205. });
  206. </script>
  207. </body>
  208. </html>