index.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <view class="notice clearfix" :style="{ paddingTop: CustomBar + 'px' }">
  3. <tui-skeleton
  4. v-if="skeletonShow"
  5. backgroundColor="#fafafa"
  6. borderRadius="10rpx"
  7. :isLoading="true"
  8. :loadingType="5"
  9. ></tui-skeleton>
  10. <view v-else>
  11. <view class="navbar-wrap" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
  12. <view
  13. class="navbar-text"
  14. :style="{ lineHeight: CustomBar - StatusBar + 'px;', fontSize: fontSizeSetting + 'px;' }"
  15. >
  16. 消息 <text @click="clearNews" class="iconfont icon-qingli"></text>
  17. </view>
  18. </view>
  19. <view class="container-notice">
  20. <view class="notice-cell" @click="navigator('/pages/notice/club/notice-order')">
  21. <view class="notice-cell-icon">
  22. <image class="icon-image" :src="StaticUrl + 'icon/icon-notice-order@2x.png'" mode=""></image>
  23. </view>
  24. <view class="notice-cell-text"> 交易物流 <text class="cell-text">官方</text> </view>
  25. <view class="notice-cell-badge" v-if="tradeCount>0">
  26. <text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
  27. {{ tradeCount | BadgeType }}
  28. </text>
  29. </view>
  30. </view>
  31. <view class="notice-cell" @click="navigator('/pages/notice/club/notice-users')">
  32. <view class="notice-cell-icon">
  33. <image class="icon-image" :src="StaticUrl + 'icon/icon-notice-users@2x.png'" mode=""></image>
  34. </view>
  35. <view class="notice-cell-text"> 账户通知 <text class="cell-text">官方</text> </view>
  36. <view class="notice-cell-badge" v-if="accountCount>0">
  37. <text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
  38. {{ accountCount | BadgeType }}
  39. </text>
  40. </view>
  41. </view>
  42. <view class="notice-cell" @click="navigator('/pages/notice/club/notice-serve')">
  43. <view class="notice-cell-icon">
  44. <image class="icon-image" :src="StaticUrl + 'icon/icon-notice-serve@2x.png'" mode=""></image>
  45. </view>
  46. <view class="notice-cell-text"> 服务通知 <text class="cell-text">官方</text> </view>
  47. <view class="notice-cell-badge" v-if="notificationCount>0">
  48. <text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
  49. {{ notificationCount | BadgeType }}
  50. </text>
  51. </view>
  52. </view>
  53. <view class="notice-cell" @click="navigator('/pages/notice/club/notice-coupon')">
  54. <view class="notice-cell-icon">
  55. <image class="icon-image" :src="StaticUrl + 'icon/icon-notice-coupon@2x.png'" mode=""></image>
  56. </view>
  57. <view class="notice-cell-text"> 优惠促销 <text class="cell-text">官方</text> </view>
  58. <view class="notice-cell-badge" v-if="promotionCount>0">
  59. <text class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
  60. {{ promotionCount | BadgeType }}
  61. </text>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. import { mapState, mapMutations } from 'vuex'
  70. export default {
  71. data() {
  72. return {
  73. CustomBar: this.CustomBar,
  74. StatusBar: this.StatusBar,
  75. StaticUrl: this.$Static,
  76. skeletonShow: true,
  77. clubId: 0,
  78. tradeCount: 0,
  79. accountCount: 0,
  80. notificationCount: 0,
  81. promotionCount: 0
  82. }
  83. },
  84. onLoad() {},
  85. filters: {
  86. BadgeType(value) {
  87. if (value) {
  88. return value > 99 ? '99+' : value
  89. }
  90. }
  91. },
  92. computed: {
  93. ...mapState(['hasLogin', 'userInfo'])
  94. },
  95. methods: {
  96. async initData() {
  97. const userInfo = await this.$api.getStorage()
  98. this.skeletonShow = true //预加载圆圈
  99. this.clubId = userInfo.clubId ? userInfo.clubId : 0
  100. console.log('clubId',this.clubId)
  101. this.getUserAuthClubMessageCount()
  102. },
  103. clearNews() {
  104. uni.vibrateShort({
  105. success: function() {
  106. console.log('success')
  107. }
  108. })
  109. this.$util.msg('已将所有消息标记为已读', 2000)
  110. },
  111. getUserAuthClubMessageCount() {
  112. console.log('获取消息通知数据')
  113. //供应商详情
  114. this.UserService.getUserAuthClubMessageCount({ commonId: this.clubId })
  115. .then(response => {
  116. this.tradeCount = response.data.tradeCount // 交易物流
  117. this.accountCount = response.data.account // 账户通知
  118. this.notificationCount = response.data.notificationCount // 服务通知
  119. this.promotionCount = response.data.promotionCount // 优惠促销
  120. this.skeletonShow = false //预加载圆圈隐藏
  121. })
  122. .catch(error => {
  123. this.$util.msg(error.msg, 2000)
  124. })
  125. this.skeletonShow = false
  126. },
  127. initLogin() {
  128. this.$api.redirectTo('/pages/login/login')
  129. },
  130. navigator(url) {
  131. this.$api.navigateTo(url)
  132. }
  133. },
  134. onPullDownRefresh() {
  135. //下拉刷新
  136. this.initData()
  137. uni.stopPullDownRefresh()
  138. },
  139. onShow() {
  140. if (this.hasLogin) {
  141. this.initData()
  142. } else {
  143. this.initLogin()
  144. }
  145. }
  146. }
  147. </script>
  148. <style lang="scss">
  149. .navbar-wrap {
  150. position: fixed;
  151. width: 100%;
  152. top: 0;
  153. z-index: 100000;
  154. box-sizing: border-box;
  155. background: #ffffff;
  156. .navbar-text {
  157. font-size: 30rpx;
  158. color: #000000;
  159. font-weight: 500;
  160. text-align: center;
  161. .iconfont {
  162. display: inline-block;
  163. width: 48rpx;
  164. height: 48rpx;
  165. border-radius: 50%;
  166. background-color: #f5f5f5;
  167. text-align: center;
  168. line-height: 48rpx;
  169. color: #666666;
  170. font-size: 30rpx;
  171. margin-left: 20rpx;
  172. }
  173. }
  174. }
  175. .container-notice {
  176. width: 100%;
  177. height: auto;
  178. box-sizing: border-box;
  179. padding: 0 24rpx;
  180. padding-top: 20rpx;
  181. .notice-cell {
  182. width: 100%;
  183. height: 130rpx;
  184. box-sizing: border-box;
  185. padding: 19rpx 0;
  186. border-bottom: 1px solid #e1e1e1;
  187. .notice-cell-icon {
  188. width: 92rpx;
  189. height: 92rpx;
  190. float: left;
  191. .icon-image {
  192. width: 92rpx;
  193. height: 92rpx;
  194. display: block;
  195. }
  196. }
  197. .notice-cell-text {
  198. width: 400rpx;
  199. height: 100%;
  200. line-height: 92rpx;
  201. font-size: 34rpx;
  202. text-align: left;
  203. margin-left: 24rpx;
  204. float: left;
  205. .cell-text {
  206. display: inline-block;
  207. height: 32rpx;
  208. padding: 0 11rpx;
  209. line-height: 32rpx;
  210. border-radius: 20rpx;
  211. text-align: center;
  212. border: 1px solid #e15616;
  213. font-size: 24rpx;
  214. color: #e15616;
  215. margin-left: 10rpx;
  216. }
  217. }
  218. .notice-cell-badge {
  219. width: 92rpx;
  220. height: 92rpx;
  221. float: right;
  222. box-sizing: border-box;
  223. padding: 25rpx 15rpx;
  224. text-align: right;
  225. }
  226. }
  227. }
  228. .uni-badge--small {
  229. -webkit-transform: scale(0.8);
  230. -ms-transform: scale(0.8);
  231. transform: scale(0.8);
  232. -webkit-transform-origin: center center;
  233. -ms-transform-origin: center center;
  234. transform-origin: center center;
  235. }
  236. .uni-badge {
  237. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  238. -webkit-box-sizing: border-box;
  239. box-sizing: border-box;
  240. font-size: 12px;
  241. line-height: 1;
  242. display: inline-block;
  243. padding: 3px 6px;
  244. color: #333;
  245. border-radius: 100px;
  246. background-color: #f1f1f1;
  247. }
  248. .uni-badge-error {
  249. color: #fff;
  250. background-color: #ff2a2a;
  251. }
  252. </style>