index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <view class="message-wrap">
  3. <view class="empty-mess" v-if="messData.length==0">
  4. 暂无消息
  5. </view>
  6. <view class="message-item" v-for="(item,index) in messData" :key="index">
  7. <view class="item-title">
  8. <view class="infoTitle">
  9. <view class="inback"></view>
  10. </view>
  11. <p>
  12. {{item.msgTitle}}
  13. </p>
  14. </view>
  15. <view class="item-mesage" v-html="messItem(item)">
  16. </view>
  17. <view class="fot-btn" @click="jumpDetails(item)">
  18. 查看详情
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. import {
  25. mapState,
  26. mapMutations,
  27. mapActions
  28. } from 'vuex';
  29. export default {
  30. computed: {
  31. ...mapState(['messData'])
  32. },
  33. data() {
  34. return {
  35. messview: "",
  36. listData: [{
  37. title: "拣货提醒",
  38. message: "您有新的拣货单【出库单号】待处理,请注意及时处理。"
  39. },
  40. {
  41. title: "拣货提醒",
  42. message: "您有新的拣货单【出库单号】待处理,请注意及时处理。"
  43. },
  44. {
  45. title: "拣货提醒",
  46. message: "您有新的拣货单【出库单号】待处理,请注意及时处理。"
  47. },
  48. {
  49. title: "拣货提醒",
  50. message: "您有新的拣货单【出库单号】待处理,请注意及时处理。"
  51. },
  52. ],
  53. }
  54. },
  55. mounted() {
  56. this.getMessData({
  57. spdId: "SPDID",
  58. msgStas: 0
  59. });
  60. },
  61. methods: {
  62. ...mapActions(['getMessData']),
  63. messItem(itm) {
  64. let newMessage = itm.msgText;
  65. itm.msgColumnList.forEach((item) => {
  66. newMessage = newMessage.replace(
  67. item.msgColumnNo,
  68. `<span style='color:${
  69. item.msgColumnColor
  70. }'>【${item.msgColumn}】</span>`
  71. );
  72. });
  73. return newMessage;
  74. },
  75. jumpDetails(item) {
  76. this.$http('home.readData', [{
  77. id: item.id,
  78. msgStas: "1"
  79. }], '加载中', true).then((res) => {
  80. });
  81. this.$http(item.msgColumnList[0].url, {
  82. [item.msgColumnList[0].msgKey]: item.msgColumnList[0].msgColumn
  83. }, '加载中', true).then((res) => {
  84. if (res.success == true) {
  85. uni.setStorage({
  86. key: item.msgColumnList[0].msgRoutePath,
  87. data: res.data.records[0] || {}
  88. });
  89. uni.navigateTo({
  90. url: `/pages/${item.msgColumnList[0].msgRoutePath}/index`,
  91. success: function(res) {
  92. console.log(res, "res")
  93. }
  94. });
  95. }
  96. })
  97. }
  98. }
  99. }
  100. </script>
  101. <style lang="scss" scoped>
  102. uni-page-body {
  103. width: 100%;
  104. height: 100%;
  105. }
  106. .message-wrap {
  107. width: 100%;
  108. height: 100%;
  109. padding: 20rpx;
  110. box-sizing: border-box;
  111. background-color: #F1F1F1;
  112. .empty-mess {
  113. width: 100%;
  114. height: 100%;
  115. display: flex;
  116. align-items: center;
  117. justify-content: center;
  118. }
  119. .message-item {
  120. width: 100%;
  121. border: 1px solid #ccc;
  122. border-radius: 10rpx;
  123. margin-top: 20rpx;
  124. padding: 10rpx;
  125. box-sizing: border-box;
  126. background-color: #fff;
  127. position: relative;
  128. padding-bottom: 100rpx;
  129. .item-title {
  130. width: 100%;
  131. height: 100rpx;
  132. text-align: left;
  133. color: rgba(16, 16, 16, 1);
  134. font-size: 32rpx;
  135. text-align: left;
  136. font-family: PingFangSC-bold;
  137. padding-left: 10rpx;
  138. display: flex;
  139. align-items: center;
  140. .infoTitle {
  141. width: 62rpx;
  142. height: 62rpx;
  143. border-radius: 31rpx;
  144. background-color: rgba(1, 169, 146, 1);
  145. margin-right: 20rpx;
  146. display: flex;
  147. align-items: center;
  148. justify-content: center;
  149. .inback {
  150. width: 34.1rpx;
  151. height: 34.1rpx;
  152. background: url('../../static/mdtext.svg');
  153. background-size: 100% 100%;
  154. }
  155. }
  156. }
  157. .item-mesage {
  158. width: 100%;
  159. box-sizing: border-box;
  160. color: rgba(16, 16, 16, 0.7);
  161. font-size: 32rpx;
  162. text-align: left;
  163. font-family: PingFangSC-regular;
  164. }
  165. .fot-btn {
  166. width: 100%;
  167. height: 80rpx;
  168. border-top: 1px solid #ccc;
  169. position: absolute;
  170. left: 0;
  171. bottom: 0;
  172. display: flex;
  173. align-items: center;
  174. justify-content: center;
  175. }
  176. }
  177. }
  178. </style>