index.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <template>
  2. <!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
  3. style="background-color: #F5F6FA;"> -->
  4. <view>
  5. <u-navbar title="消息中心" leftIconSize='0' :bgColor="bgColor" :placeholder='true' leftIconColor="#fff"
  6. titleStyle='color:#fff' rightText='一键已读' @rightClick="rightClick">
  7. </u-navbar>
  8. <view class="top-bgc"></view>
  9. <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
  10. style="background-color: #F5F6FA;">
  11. <view class="content" v-if="news.length > 0">
  12. <view class="info-item flex" v-for="(item,index) in news" :key="index" @click="read(item)">
  13. <view class="left">
  14. <image src="@/static/images/news/cy.png" class="img" v-if="item.newsType=='承运通知'">
  15. </image>
  16. <image src="@/static/images/news/xt.png" class="img" v-else>
  17. </image>
  18. </view>
  19. <view class="right"
  20. :style="{'border-bottom':index==news.length-1?'1px solid #fff':'1px solid #e6e6e6'}">
  21. <view class="row1 flex flex-space-between">
  22. <view class="title">
  23. {{item.newsType}}
  24. </view>
  25. <view class="time">
  26. {{item.createDate}}
  27. </view>
  28. </view>
  29. <view class="row2 flex flex-space-between align-center">
  30. <view style='white-space: pre-wrap;' class="text point1">
  31. {{item.newsContent}}
  32. </view>
  33. <view class="red-point" v-if="item.newsFlag==0"></view>
  34. </view>
  35. </view>
  36. <!-- <view class="flex flex-space-between">
  37. <view class="left">
  38. <view>系统消息</view>
  39. <u-badge :isDot="true" bgColor='red' :absolute='true' :offset='badgeOffset'></u-badge>
  40. </view>
  41. <view class="">
  42. 今天 21:51
  43. </view>
  44. </view>
  45. <view class="flex flex-space-between">
  46. 您的驾驶证即将到期,请尽快到“我的-身份认证”中更新,逾期将影响运费支付。
  47. </view> -->
  48. <u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true'
  49. :showCancelButton='showCancelButton' confirmColor='#2772FB' @confirm="confirmClick"
  50. @close="cancelClick" @cancel="cancelClick"></u-modal>
  51. </view>
  52. </view>
  53. </mescroll-body>
  54. </view>
  55. </template>
  56. <script>
  57. var that
  58. import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  59. import {
  60. mapState
  61. } from 'vuex';
  62. export default {
  63. mixins: [MescrollMixin], // 使用mixin
  64. data() {
  65. return {
  66. confirmText: '确定',
  67. showCancelButton: true,
  68. isShowAlert: false,
  69. alertTitle: '',
  70. src: 'https://cdn.uviewui.com/uview/album/1.jpg',
  71. bgColor: '#317AFE',
  72. value: 100,
  73. news: [], // 数据列表
  74. badgeOffset: [0, -5],
  75. mescroll: null
  76. }
  77. },
  78. // async onLoad() {
  79. // that = this
  80. // // #ifdef APP-PLUS
  81. // let _status = await that.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
  82. // driverPhone: this.userInfo.phone,
  83. // }).then(res => {
  84. // return res.data.authenticationStatus
  85. // })
  86. // // if (_status == '已禁用') {
  87. // // this.isShowAlert = true
  88. // // this.alertTitle == '账号审核中'
  89. // // this.confirmText = '退出APP'
  90. // // this.showCancelButton = false
  91. // // } else {
  92. // // console.log(1231233212332312312213)
  93. // // }
  94. // // #endif
  95. // },
  96. onShow() {
  97. uni.setTabBarItem({
  98. index: 0,
  99. text: '货源',
  100. iconPath: 'static/images/common/huoyuan@2x(1).png',
  101. selectedIconPath: 'static/images/common/huoyuan@2x.png'
  102. })
  103. uni.setTabBarItem({
  104. index: 2,
  105. text: '订单',
  106. iconPath: 'static/images/common/dingdan@2x(1).png',
  107. selectedIconPath: 'static/images/common/dingdan@2x.png'
  108. })
  109. this.newsNumber()
  110. this.upCallback({
  111. size: 10,
  112. num: 1
  113. })
  114. },
  115. computed: {
  116. ...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
  117. },
  118. methods: {
  119. newsNumber() {
  120. let that = this
  121. that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
  122. reCommonId: this.userInfo.id,
  123. }).then(res3 => {
  124. if (res3.data || res3.data == 0) {
  125. let name = 'myTip';
  126. let value = res3.data
  127. if (value == 0) {
  128. uni.removeTabBarBadge({
  129. index: 3
  130. })
  131. }
  132. that.$store.commit('$uStore', {
  133. name,
  134. value
  135. });
  136. if (value != 0 && value) {
  137. uni.setTabBarBadge({
  138. index: 3,
  139. text: value + ""
  140. })
  141. }
  142. that.$forceUpdate()
  143. }
  144. })
  145. },
  146. confirmClick() {
  147. // #ifdef APP-PLUS
  148. if (this.alertTitle == '账号审核中') {
  149. if (uni.getSystemInfoSync().platform == 'ios') {
  150. plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
  151. } else if (uni.getSystemInfoSync().platform == 'android') {
  152. plus.runtime.quit();
  153. }
  154. return
  155. }
  156. // #endif
  157. },
  158. rightClick() {
  159. uni.showLoading({
  160. title: '加载中',
  161. mask: true
  162. })
  163. this.$request.baseRequest('post', '/newsInfo/api/editAllNewsInfo', {
  164. reCommonId: this.userInfo.id,
  165. }).then(res => {
  166. this.mescroll.resetUpScroll()
  167. uni.hideLoading()
  168. uni.removeTabBarBadge({
  169. index: 2
  170. })
  171. this.newsNumber() //消息气泡
  172. })
  173. .catch(res => {
  174. uni.hideLoading()
  175. uni.$u.toast(res.message);
  176. });
  177. },
  178. read(val) {
  179. uni.$u.route("/pages/news/newsSee?_obj=" + JSON.stringify(val))
  180. uni.showLoading({
  181. title: '加载中',
  182. mask: true
  183. })
  184. this.$request.baseRequest('post', '/newsInfo/api/editNewsInfo', {
  185. id: val.id,
  186. }).then(res => {
  187. this.mescroll.resetUpScroll()
  188. this.look()
  189. uni.hideLoading()
  190. this.newsNumber() //查询消息气泡
  191. })
  192. .catch(res => {
  193. uni.hideLoading()
  194. uni.$u.toast(res.message);
  195. });
  196. },
  197. look() {
  198. let that = this
  199. that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
  200. reCommonId: this.userInfo.id,
  201. }).then(res3 => {
  202. if (res3.data || res3.data == 0) {
  203. let name = 'myTip';
  204. let value = res3.data
  205. if (value == 0) {
  206. uni.removeTabBarBadge({
  207. index: 3
  208. })
  209. }
  210. that.$store.commit('$uStore', {
  211. name,
  212. value
  213. });
  214. if (value != 0 && value) {
  215. uni.setTabBarBadge({
  216. index: 3,
  217. text: value + ""
  218. })
  219. }
  220. }
  221. })
  222. },
  223. back() {
  224. uni.navigateBack({
  225. })
  226. },
  227. mescrollInit(mescroll) {
  228. this.mescroll = mescroll;
  229. },
  230. downCallback() {
  231. // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
  232. // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
  233. this.mescroll.resetUpScroll()
  234. },
  235. /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  236. upCallback(page) {
  237. console.log(page)
  238. // 此处可以继续请求其他接口
  239. if (page.num == 1) {
  240. this.news = []
  241. // 请求其他接口...
  242. }
  243. // 如果希望先请求其他接口,再触发upCallback,可参考以下写法
  244. // if(!this.isInitxx){
  245. // apiGetxx().then(res=>{
  246. // this.isInitxx = true
  247. // this.mescroll.resetUpScroll() // 重新触发upCallback
  248. // }).catch(()=>{
  249. // this.mescroll.endErr()
  250. // })
  251. // return // 此处return,先获取xx
  252. // }
  253. //联网加载数据
  254. this.$request.baseRequest('get', '/newsInfo/selectNewsInfo', {
  255. reCommonId: this.userInfo.id,
  256. pageSize: page.size,
  257. currentPage: page.num,
  258. }).then(res => {
  259. if (page.num == 1) {
  260. this.news = []
  261. }
  262. this.news = this.news.concat(res.data.records); //追加新数据
  263. this.$forceUpdate()
  264. this.mescroll.endBySize(res.data.records.length, res.data.total);
  265. })
  266. .catch(res => {
  267. uni.$u.toast(res.message);
  268. });
  269. }
  270. }
  271. }
  272. </script>
  273. <style lang="scss" scoped>
  274. /deep/.u-navbar__content__right__text {
  275. font-size: 26rpx;
  276. color: #FFFFFF;
  277. }
  278. /deep/.point1 {
  279. text-overflow: ellipsis;
  280. overflow: hidden;
  281. /* white-space: nowrap; */
  282. display: -webkit-box;
  283. -webkit-line-clamp: 1;
  284. -webkit-box-orient: vertical;
  285. text-overflow: ellipsis;
  286. margin-top: 20rpx;
  287. }
  288. .top-bgc {
  289. position: absolute;
  290. width: 100%;
  291. height: 519rpx;
  292. // background: linear-gradient(180deg, #317AFE 0%, #F8F9FC 100%);
  293. }
  294. .content {
  295. // position: relative;
  296. // top: 0;
  297. background: #FFFFFF;
  298. margin: 20rpx;
  299. width: calc(100% - 40rpx);
  300. // padding: 20rpx;
  301. box-sizing: border-box;
  302. border-radius: 20rpx;
  303. padding-top: 30rpx;
  304. }
  305. .info-item {
  306. padding: 20rpx 30rpx 30rpx 30rpx;
  307. .img {
  308. width: 80rpx;
  309. height: 80rpx;
  310. margin-top: 20rpx;
  311. }
  312. .left {
  313. margin-right: 20rpx;
  314. }
  315. .right {
  316. width: 100%;
  317. border-bottom: 1px solid #E6E6E6;
  318. padding-bottom: 20rpx;
  319. .row1 {
  320. .title {
  321. font-size: 32rpx;
  322. color: #000000;
  323. font-weight: 600;
  324. }
  325. .time {
  326. font-size: 32rpx;
  327. color: #999999;
  328. }
  329. }
  330. .row2 {
  331. .text {
  332. font-size: 28rpx;
  333. color: #999999;
  334. width: 500rpx;
  335. }
  336. .red-point {
  337. width: 10rpx;
  338. height: 10rpx;
  339. background: #EE2F51;
  340. border-radius: 6rpx;
  341. margin-right: 20rpx;
  342. }
  343. }
  344. }
  345. }
  346. </style>