index.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <view class="news">
  3. <mescroll-body height="100%" ref="mescrollRef" bottom="200" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
  4. <view class="list">
  5. <view class="list-item" v-for="(item,index) in list" :key="index">
  6. <view class="time">{{item.sendTime}}</view>
  7. <view class="new-card">
  8. <view class="news-cons">
  9. <view class="name">{{item.title}}</view>
  10. <view class="text ellipsis-2">{{item.msg}}</view>
  11. </view>
  12. <view class="news-detail" @click="toDetail(item.id)">
  13. <view class="txt">查看详情</view>
  14. <re-image imgSrc="/retail/mall/icon_more.png" width="24" height="24"></re-image>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. </mescroll-body>
  20. </view>
  21. </template>
  22. <script>
  23. import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js"
  24. import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue'
  25. import { msgPage } from '@/apis/news.js'
  26. export default {
  27. components:{
  28. MescrollBody
  29. },
  30. data(){
  31. return{
  32. list: [{
  33. sendTime:'2024-3-31 12:85',
  34. msg:'消息内容写死的文本',
  35. title:'充值信息',
  36. }],
  37. }
  38. },
  39. mixins: [MescrollMixin],
  40. methods: {
  41. // 初始化
  42. initPage() {
  43. this.mescroll.resetUpScroll()
  44. this.mescroll.scrollTo(0, 300)
  45. },
  46. async upCallback(){
  47. this.mescroll.endErr()
  48. const res = await msgPage()
  49. if(res.code === 1){
  50. this.mescroll.endBySize(res.records.length, res.total)
  51. }
  52. },
  53. toDetail(id){
  54. uni.navigateTo({
  55. url:'/pages/system/index?id' + id
  56. })
  57. }
  58. },
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. .news{
  63. padding: 32rpx 20rpx;
  64. .list{
  65. .list-item{
  66. .time{
  67. text-align: center;
  68. font-size: 26rpx;
  69. margin-bottom: 20rpx;
  70. color: #989897;
  71. }
  72. .new-card{
  73. background-color: #fff;
  74. border-radius: 16rpx;
  75. .news-cons{
  76. padding: 32rpx 32rpx 24rpx;
  77. border-bottom: 2rpx solid #F0F2F4;
  78. .name{
  79. font-size: 32rpx;
  80. font-weight: 500;
  81. color: #363531;
  82. margin-bottom: 16rpx;
  83. }
  84. .text{
  85. font-size: 28rpx;
  86. color: #7C7C7B;
  87. }
  88. }
  89. .news-detail{
  90. display: flex;
  91. justify-content: space-between;
  92. align-items: center;
  93. padding: 24rpx 26rpx 32rpx 22rpx;
  94. .txt{
  95. font-size: 28rpx;
  96. font-weight: 400;
  97. color: #363531;
  98. }
  99. }
  100. }
  101. }
  102. }
  103. }
  104. </style>