xtNotice.vue 5.7 KB

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