newssq.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <template>
  2. <view class="car">
  3. <view class="cartop">
  4. <view class="tabtop flexc">
  5. <view class="tabt" :class="tabval==ite.dictValue?'act':''" v-for="(ite,idx) in tablist" :key="idx" @click="getTabFn(ite.dictValue)">{{ite.dictLabel}}</view>
  6. </view>
  7. <view class="numbox" @click="getHdFn">
  8. 未读互动<text>{{hdcount}}</text>
  9. </view>
  10. </view>
  11. <!-- 列表 -->
  12. <view class="carlists">
  13. <car-list :datainfo="list" :wzlxList="wzlxList" :wtdt="wtdt" type='newssq' @getDetail="getDetail" @getDelFn="getDelFn" @getPut="getPut"></car-list>
  14. </view>
  15. <view class="rfbtn" @click="getAddFn">发布</view>
  16. <loading></loading>
  17. </view>
  18. </template>
  19. <script>
  20. import config from '@/config'
  21. const baseUrl = config.baseUrl
  22. import carList from "@/manage/components/car/list.vue"
  23. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  24. import {getDictionaryFn} from "@/api/system/user.js"
  25. import {newsList,newsDel,getCommentInteractionCount} from "@/api/work/manage.js"
  26. export default{
  27. components:{carList},
  28. data(){
  29. return{
  30. cxrq:"",
  31. text:'',
  32. list:[],
  33. pageSize: 10,
  34. pageNum: 1,
  35. reachflag: true,
  36. wtdt:'',
  37. tabval:'',
  38. tablist:[{dictLabel:"已停用",dictValue:'yty'}],
  39. wzlxList:[],
  40. hdcount:0,
  41. }
  42. },
  43. onUnload() {
  44. uni.$off('newsList')
  45. },
  46. onLoad: function() {
  47. uni.$on('newsList',(res)=>{
  48. this.getrefreshData()
  49. })
  50. this.init()
  51. this.getCommentInteractionCount()
  52. },
  53. // 上拉触底加载更多触发事件
  54. onReachBottom() {
  55. if (this.reachflag) {
  56. this.pageNum++
  57. this.getDataFn()
  58. }
  59. },
  60. methods:{
  61. checkPermi, checkRole,
  62. getCommentInteractionCount(){
  63. var params={}
  64. getCommentInteractionCount(params).then(res=>{
  65. if(res.code==200){
  66. this.hdcount=res.data
  67. }
  68. })
  69. },
  70. init(){
  71. // 社区资讯类型
  72. getDictionaryFn('community_typ').then(res=>{
  73. if(res.code==200){
  74. if(res.data){
  75. this.tabval=res.data[0].dictValue;
  76. this.wzlxList = res.data.map(v => {
  77. return {
  78. dictLabel: v.dictLabel,
  79. dictValue: v.dictValue
  80. }
  81. })
  82. var newArr=JSON.parse(JSON.stringify(this.tablist))
  83. this.tablist=this.wzlxList.concat(newArr)
  84. this.getDataFn()
  85. }
  86. }
  87. })
  88. },
  89. getAddFn(){
  90. this.$tab.navigateTo("/manage/pages/community/newsaddsq?tabval="+this.tabval)
  91. },
  92. getHdFn(){
  93. this.$tab.navigateTo("/mine/pages/news/index");
  94. this.hdcount=0;
  95. },
  96. getPut(id){
  97. if(checkPermi((['wuYe:news:edit']))){
  98. this.$tab.navigateTo("/manage/pages/community/newsaddsq?id="+id)
  99. }else{
  100. this.$tab.navigateTo("/manage/pages/community/newssqdetail?id="+id)
  101. }
  102. },
  103. getDetail(id){
  104. this.$tab.navigateTo("/manage/pages/community/newssqdetail?id="+id)
  105. },
  106. getrefreshData(){
  107. this.pageNum=1;
  108. this.list=[];
  109. this.reachflag=true;
  110. this.getDataFn()
  111. },
  112. getTabFn(val){
  113. this.tabval=val;
  114. this.getrefreshData()
  115. },
  116. bindDateChangea(e){
  117. var val=e.detail.value;
  118. this.cxrq=val;
  119. },
  120. getDelFn(data){
  121. var that=this;
  122. newsDel(data).then(res=>{
  123. if(res.code==200){
  124. this.$toast("删除成功");
  125. setTimeout(function(){
  126. that.getrefreshData()
  127. },1500)
  128. }
  129. })
  130. },
  131. formatRichText(html) {
  132. let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
  133. match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '').replace(/style=""/gi, '');
  134. match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
  135. match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
  136. return match;
  137. });
  138. newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
  139. match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
  140. return match;
  141. });
  142. newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  143. newContent = newContent.replace(/\<img src="/gi,
  144. '<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;" src="' +this.baseUrl);
  145. return newContent;
  146. },
  147. getDataFn(){
  148. var params={
  149. pageSize:this.pageSize,
  150. pageNum: this.pageNum,
  151. }
  152. if(this.tabval=='yty'){
  153. params.status='2'
  154. }else{
  155. params.communityType=this.tabval;
  156. params.status='1'
  157. }
  158. newsList(params).then(res=>{
  159. if(res.code==200){
  160. if (res.rows.length < this.pageSize) {
  161. this.reachflag = false
  162. this.wtdt = '到底了~';
  163. } else {
  164. var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum - 1)
  165. if (num < res.total) {
  166. this.reachflag = true
  167. this.wtdt = ''
  168. } else {
  169. this.reachflag = false
  170. this.wtdt = '到底了~';
  171. }
  172. }
  173. var newArr=JSON.parse(JSON.stringify(res.rows))
  174. newArr.forEach(ite=>{
  175. if(ite.communityContent){
  176. ite.communityContent=this.formatRichText(ite.communityContent)
  177. }
  178. ite.right=0;
  179. })
  180. if (this.pageNum == 1) {
  181. this.list = newArr;
  182. } else {
  183. this.list = this.list.concat(newArr)
  184. }
  185. }else{
  186. this.$toast(res.msg)
  187. }
  188. })
  189. },
  190. }
  191. }
  192. </script>
  193. <style>
  194. page{background: #F3F3F0;}
  195. </style>
  196. <style lang="scss" scoped>
  197. .car{padding: 148rpx 0 110rpx;}
  198. .cartop{position: fixed;left: 0;right: 0;top: 0;background-color: #ffffff;z-index: 2;
  199. .tabtop{padding:28rpx 200rpx 40rpx 0;position: relative;overflow: auto;
  200. .tabt{font-weight: 500;font-size: 32rpx;color: #666666;position: relative;line-height: 56rpx;flex: 0 0 auto;text-align: center;margin: 0 10rpx;padding: 0 20rpx;
  201. &.act{font-weight: bold;font-size: 32rpx;color: #272727;
  202. &::after{content: '';width: 40rpx;height: 10rpx;background: #0156FE;border-radius: 6rpx;position: absolute;left: 50%;margin-left: -20rpx;bottom: -10rpx;}
  203. }
  204. }
  205. }
  206. .numbox{width: 188rpx;height: 58rpx;background-color: #E6E6E6;border-radius: 29rpx 0 0 29rpx;font-weight: 500;font-size: 26rpx;color: #0156FE;display: flex;align-items: center;justify-content: center;position: absolute;right: 0;top: 28rpx;
  207. text{height: 20rpx;min-width: 20rpx;padding: 0 8rpx;box-sizing: border-box;line-height: 20rpx;margin-left: 10rpx;font-weight: bold;
  208. font-size:16rpx;color: #FCF9F1;background: #D32C26;border-radius: 5px;}
  209. }
  210. }
  211. .carlists{padding: 0 18rpx;}
  212. </style>