xtNotice.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <view class="container">
  3. <view class="message" v-for="(item,index) in messageList" :key="item.id" @click="setRead(item,0)">
  4. <view class="message-cons">
  5. <view class="flex align_center justify_between">
  6. <view class="messageTitle">{{item.notice.title}}</view>
  7. <view class="message-right">
  8. <view>
  9. <span v-if="item.readFlag==0" class="message-unread">未读</span>
  10. <span v-if="item.readFlag==1" class="message-readed">已读</span>
  11. </view>
  12. <uni-icon color="rgba(157, 168, 181, 1)" name="arrow-right"></uni-icon>
  13. </view>
  14. </view>
  15. <view class="ellipsis-one message-info">
  16. {{item.notice.plainContent}}
  17. </view>
  18. <view class="flex align_center justify_between">
  19. <view class="messageTime flex_1">{{item.notice.releaseDate}}</view>
  20. <view v-if="item.notice.type == 'tx'">
  21. <u-button @click.stop="setRead(item,1)" shape="circle" plain size="mini" type="primary">
  22. {{ item.notice.extInfo.bizType == 'SHELF_REPLENISH' ? '立即处理':'点击查看' }}
  23. </u-button>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="nodata">
  29. <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" :margin-top="100" icon-size="150" text="暂无数据" img-width="120" v-if="messageList.length==0 && status!='loading'" mode="list"></u-empty>
  30. <u-loadmore :load-text="$config('loadText')" class="loadmore" v-if="total>pageSize || status=='loading'" :status="status" />
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. import {getMessage,hasRead,setReadAllNotice} from "@/api/user.js"
  36. export default{
  37. data(){
  38. return{
  39. messageList:[],
  40. pageNo: 1,
  41. pageSize: 10,
  42. total: 0,
  43. status: 'loadmore'
  44. }
  45. },
  46. computed: {
  47. wsMessage() {
  48. return this.$store.state.vuex_messagUnReadCount
  49. },
  50. },
  51. watch: {
  52. // 有新消息时刷新列表
  53. wsMessage(newValue, oldValue) {
  54. this.pageInit()
  55. }
  56. },
  57. filters: {
  58. filterHtml: function(str) {
  59. return str?str.replace(/<.*?>/g,""):""
  60. }
  61. },
  62. onNavigationBarButtonTap(e) {
  63. uni.showLoading({
  64. mask:true,
  65. title: '正在设置...'
  66. })
  67. setReadAllNotice().then(res => {
  68. if(res.status == 200){
  69. uni.hideLoading()
  70. this.pageInit()
  71. }
  72. })
  73. },
  74. methods:{
  75. pageInit(){
  76. this.messageList = []
  77. this.total = 0
  78. this.pageNo = 1
  79. this.getMessageList()
  80. },
  81. // 获取数据列表
  82. getMessageList(){
  83. this.status = "loading"
  84. getMessage({
  85. pageNo: this.pageNo,
  86. pageSize: this.pageSize
  87. }).then(res => {
  88. if (res.status == 200) {
  89. res.data.list.map(item => {
  90. if(item.notice.type == 'tx'){
  91. item.notice.extInfo = JSON.parse(item.notice.extInfo)
  92. }
  93. })
  94. if(this.pageNo>1){
  95. this.messageList = this.messageList.concat(res.data.list || [])
  96. }else{
  97. this.messageList = res.data.list || []
  98. }
  99. this.total = res.data.count || 0
  100. } else {
  101. this.messageList = []
  102. this.total = 0
  103. uni.showToast({
  104. title: res.message ? res.message : '网络似乎出错了,请稍后再试',
  105. icon: "none"
  106. })
  107. }
  108. this.status = "loadmore"
  109. })
  110. },
  111. setRead(data,type){
  112. //设置为已读
  113. if (data.readFlag==0){
  114. hasRead({msg_id: data.id}).then(res => {
  115. // 刷新列表
  116. if (res.status == 200){
  117. this.pageInit()
  118. if(data.notice&&data.notice.type == 'tx' && type == 1){
  119. this.toAction(data)
  120. }else{
  121. this.goToMessageDetail(data)
  122. }
  123. }
  124. })
  125. }else{
  126. if(data.notice&&data.notice.type == 'tx' && type == 1){
  127. this.toAction(data)
  128. }else{
  129. this.goToMessageDetail(data)
  130. }
  131. }
  132. },
  133. // 查看详细
  134. goToMessageDetail(data){
  135. // 跳转到详细页
  136. uni.navigateTo({
  137. url:'./xtNoticeDetail/xtNoticeDetail?item='+ encodeURIComponent(JSON.stringify(data))
  138. })
  139. },
  140. toAction (data) {
  141. // 急送订单
  142. if (data.notice.extInfo.bizType == 'TEMP_ORDER') {
  143. uni.navigateTo({ url: '/pages/sales/edit?pageType=detail&data='+JSON.stringify({ salesBillSn: data.notice.extInfo.bizSn }) })
  144. }
  145. // 补货订单
  146. if (data.notice.extInfo.bizType == 'SHELF_REPLENISH') {
  147. uni.navigateTo({ url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_CONFIRM' })
  148. }
  149. // 货架订单
  150. if (data.notice.extInfo.bizType == 'SHELF_ORDER') {
  151. uni.navigateTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.notice.extInfo.bizSn })
  152. }
  153. // 货架异常
  154. if (data.notice.extInfo.bizType == 'SHELF_WARN') {
  155. const shelfName = data.notice.plainContent.split('已经超过')[0]
  156. uni.navigateTo({ url: '/pages/shelfOrder/shelfOrder?bizType=SHELF_WARN&shelfSn='+data.notice.extInfo.bizSn+'&shelfName='+shelfName })
  157. }
  158. },
  159. },
  160. onLoad() {
  161. this.pageInit()
  162. },
  163. // scroll-view到底部加载更多
  164. onReachBottom(){
  165. console.log('到底部加载更多')
  166. if(this.messageList.length < this.total){
  167. this.pageNo += 1
  168. this.getMessageList()
  169. }else{
  170. this.status = "nomore"
  171. }
  172. },
  173. }
  174. </script>
  175. <style lang="less">
  176. .container{
  177. width:100%;
  178. font-size: 28rpx;
  179. .message{
  180. background-color: #FFFFFF;
  181. padding: 25upx 30upx;
  182. margin: 25upx;
  183. border-radius: 30upx;
  184. box-shadow: 1px 1px 3px #EEEEEE;
  185. display: flex;
  186. align-items: center;
  187. .message-cons{
  188. flex-grow: 1;
  189. width: 50%;
  190. .messageTitle{
  191. font-size: 30rpx;
  192. padding-right: 30upx;
  193. }
  194. .message-info{
  195. font-size: 26rpx;
  196. color: #666;
  197. margin-top: 10rpx;
  198. margin-bottom: 10rpx;
  199. }
  200. .messageTime{
  201. font-size: 26rpx;
  202. color:#989898;
  203. }
  204. }
  205. .message-right{
  206. display: flex;
  207. align-items: center;
  208. font-size: 24upx;
  209. text-align: right;
  210. padding-left: 50upx;
  211. .message-unread{
  212. color: #FA3534;
  213. }
  214. .message-readed{
  215. color: #999;
  216. }
  217. }
  218. }
  219. }
  220. </style>