xtNotice.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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. data.readFlag = 1
  118. this.messageList.splice()
  119. }
  120. })
  121. }
  122. // 跳转
  123. if(data.notice&&data.notice.type == 'tx' && type == 1){
  124. this.toAction(data)
  125. }else{
  126. this.goToMessageDetail(data)
  127. }
  128. },
  129. // 查看详细
  130. goToMessageDetail(data){
  131. // 跳转到详细页
  132. uni.navigateTo({
  133. url:'./xtNoticeDetail/xtNoticeDetail?id='+ data.noticeId
  134. })
  135. },
  136. toAction (data) {
  137. // 急送订单
  138. if (data.notice.extInfo.bizType == 'TEMP_ORDER') {
  139. uni.navigateTo({ url: '/pages/sales/edit?pageType=detail&data='+JSON.stringify({ salesBillSn: data.notice.extInfo.bizSn }) })
  140. }
  141. // 补货订单
  142. if (data.notice.extInfo.bizType == 'SHELF_REPLENISH') {
  143. uni.navigateTo({ url: '/pages/replenishmentManage/replenishmentList?billState=WAIT_CONFIRM' })
  144. }
  145. // 货架订单
  146. if (data.notice.extInfo.bizType == 'SHELF_ORDER') {
  147. uni.navigateTo({ url: '/pages/shelfOrder/orderDetail?pageType=detail&orderBillSn='+data.notice.extInfo.bizSn })
  148. }
  149. // 货架异常
  150. if (data.notice.extInfo.bizType == 'SHELF_WARN') {
  151. const shelfName = data.notice.plainContent.split('已经超过')[0]
  152. uni.navigateTo({ url: '/pages/shelfOrder/shelfOrder?bizType=SHELF_WARN&shelfSn='+data.notice.extInfo.bizSn+'&shelfName='+shelfName })
  153. }
  154. },
  155. },
  156. onLoad() {
  157. this.pageInit()
  158. },
  159. // scroll-view到底部加载更多
  160. onReachBottom(){
  161. console.log('到底部加载更多')
  162. if(this.messageList.length < this.total){
  163. this.pageNo += 1
  164. this.getMessageList()
  165. }else{
  166. this.status = "nomore"
  167. }
  168. },
  169. }
  170. </script>
  171. <style lang="less">
  172. .container{
  173. width:100%;
  174. font-size: 28rpx;
  175. .message{
  176. background-color: #FFFFFF;
  177. padding: 25upx 30upx;
  178. margin: 25upx;
  179. border-radius: 30upx;
  180. box-shadow: 1px 1px 3px #EEEEEE;
  181. display: flex;
  182. align-items: center;
  183. .message-cons{
  184. flex-grow: 1;
  185. width: 50%;
  186. .messageTitle{
  187. font-size: 30rpx;
  188. padding-right: 30upx;
  189. }
  190. .message-info{
  191. font-size: 26rpx;
  192. color: #666;
  193. margin-top: 10rpx;
  194. margin-bottom: 10rpx;
  195. }
  196. .messageTime{
  197. font-size: 26rpx;
  198. color:#989898;
  199. }
  200. }
  201. .message-right{
  202. display: flex;
  203. align-items: center;
  204. font-size: 24upx;
  205. text-align: right;
  206. padding-left: 50upx;
  207. .message-unread{
  208. color: #FA3534;
  209. }
  210. .message-readed{
  211. color: #999;
  212. }
  213. }
  214. }
  215. }
  216. </style>