xtNotice.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <view class="container">
  3. <view class="message" v-for="(item,index) in messageList" :key="item.id" @click="goToMessageDetail(item)">
  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="toAction(item)" 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`" 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. if(this.pageNo>1){
  90. this.messageList = this.messageList.concat(res.data.list || [])
  91. }else{
  92. this.messageList = res.data.list || []
  93. }
  94. this.total = res.data.count || 0
  95. } else {
  96. this.messageList = []
  97. this.total = 0
  98. uni.showToast({
  99. title: res.message ? res.message : '网络似乎出错了,请稍后再试',
  100. icon: "none"
  101. })
  102. }
  103. this.status = "loadmore"
  104. this.messageList.map(item => {
  105. if(item.notice.type == 'tx'){
  106. item.notice.extInfo = JSON.parse(item.notice.extInfo)
  107. }
  108. })
  109. })
  110. },
  111. setRead(item){
  112. //设置为已读
  113. if (item.readFlag==0){
  114. hasRead({msg_id: item.id}).then(res => {
  115. // 刷新列表
  116. if (res.status == 200){
  117. this.pageInit()
  118. }
  119. })
  120. }
  121. },
  122. // 查看详细
  123. goToMessageDetail(item){
  124. this.setRead(item)
  125. // 跳转到详细页
  126. uni.navigateTo({
  127. url:'./xtNoticeDetail/xtNoticeDetail?item='+ encodeURIComponent(JSON.stringify(item))
  128. })
  129. },
  130. toAction (data) {
  131. this.setRead(data)
  132. // 急送订单
  133. if (data.notice.extInfo.bizType == 'TEMP_ORDER') {
  134. uni.navigateTo({ url: '/pages/sales/edit?pageType=detail&data='+JSON.stringify({ salesBillSn: data.notice.extInfo.bizSn }) })
  135. }
  136. // 补货订单
  137. if (data.notice.extInfo.bizType == 'SHELF_REPLENISH') {
  138. uni.navigateTo({ url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_CONFIRM' })
  139. }
  140. // 货架订单
  141. if (data.notice.extInfo.bizType == 'SHELF_ORDER') {
  142. uni.navigateTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.notice.extInfo.bizSn })
  143. }
  144. // 货架异常
  145. if (data.notice.extInfo.bizType == 'SHELF_WARN') {
  146. const shelfName = data.notice.plainContent.split('已经超过')[0]
  147. uni.navigateTo({ url: '/pages/shelfOrder/shelfOrder?bizType=SHELF_WARN&shelfSn='+data.notice.extInfo.bizSn+'&shelfName='+shelfName })
  148. }
  149. },
  150. },
  151. onLoad() {
  152. this.pageInit()
  153. },
  154. // scroll-view到底部加载更多
  155. onReachBottom(){
  156. console.log('到底部加载更多')
  157. if(this.messageList.length < this.total){
  158. this.pageNo += 1
  159. this.getMessageList()
  160. }else{
  161. this.status = "nomore"
  162. }
  163. },
  164. }
  165. </script>
  166. <style lang="less">
  167. .container{
  168. width:100%;
  169. font-size: 28rpx;
  170. .message{
  171. background-color: #FFFFFF;
  172. padding: 25upx 30upx;
  173. margin: 25upx;
  174. border-radius: 30upx;
  175. box-shadow: 1px 1px 3px #EEEEEE;
  176. display: flex;
  177. align-items: center;
  178. .message-cons{
  179. flex-grow: 1;
  180. width: 50%;
  181. .messageTitle{
  182. font-size: 30rpx;
  183. padding-right: 30upx;
  184. }
  185. .message-info{
  186. font-size: 26rpx;
  187. color: #666;
  188. margin-top: 10rpx;
  189. margin-bottom: 10rpx;
  190. }
  191. .messageTime{
  192. font-size: 26rpx;
  193. color:#989898;
  194. }
  195. }
  196. .message-right{
  197. display: flex;
  198. align-items: center;
  199. font-size: 24upx;
  200. text-align: right;
  201. padding-left: 50upx;
  202. .message-unread{
  203. color: #FA3534;
  204. }
  205. .message-readed{
  206. color: #999;
  207. }
  208. }
  209. }
  210. }
  211. </style>