message.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="center">
  3. <view class="message">
  4. <view class="item" v-for="l in list" @click="look(l.cate_id)">
  5. <view class="img">
  6. <image :src="l.image" mode=""></image>
  7. </view>
  8. <view class="right">
  9. <view class="top">
  10. <view class="title">{{ l.name }}</view><view class="time">{{ time(l.last_message.add_time) }}</view>
  11. </view>
  12. <view class="bottom">
  13. <view class="concent clamp2">{{ l.last_message.detail }}</view>
  14. <view class="icon" v-show="l.unwatch_message > 0"></view>
  15. <view class="title">{{ l.name }}</view><view class="time">{{ l.time }}</view>
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import { messageList } from '@/api/finance.js'
  24. export default {
  25. data(){
  26. return {
  27. list:[],
  28. }
  29. },
  30. onLoad() {
  31. this.loadData()
  32. },
  33. methods: {
  34. loadData() {
  35. messageList({page:1,limit:10}).then(({data}) =>{
  36. this.list = data
  37. console.log(data)
  38. })
  39. },
  40. look(id) {
  41. console.log(id)
  42. },
  43. time (data) {
  44. var date = new Date(data)
  45. var Y = date.getFullYear() + '-'
  46. var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  47. var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
  48. var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  49. var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  50. var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
  51. return Y + M + D + h + m + s
  52. }
  53. }
  54. }
  55. </script>
  56. <style lang="scss">
  57. .center,page {
  58. height: 100%;
  59. width: 100%;
  60. background: #F8F8F8;
  61. }
  62. .message {
  63. margin-top: 20rpx;
  64. font-family: PingFangSC-Medium;
  65. background-color: #fff;
  66. .item {
  67. display: flex;
  68. padding: 30rpx 0;
  69. margin: 0 30rpx;
  70. border-bottom: solid 1rpx #f8f8f8;
  71. .img {
  72. margin: auto 0;
  73. width: 110rpx;
  74. margin-left: 0rpx;
  75. image {
  76. width: 80rpx;
  77. height: 80rpx;
  78. }
  79. }
  80. .right {
  81. width: calc(100% - 110rpx);
  82. display: grid;
  83. align-content: space-between;
  84. .top {
  85. display: flex;
  86. justify-content: space-between;
  87. .title {
  88. color: #000;
  89. font-size: 30rpx;
  90. }
  91. .time {
  92. color: #999999;
  93. font-size: 25rpx;
  94. }
  95. }
  96. .bottom {
  97. display: flex;
  98. justify-content: space-between;
  99. .concent {
  100. width: calc(100% - 30rpx);
  101. color: #999999;
  102. font-size: 26rpx;
  103. }
  104. .icon {
  105. margin: auto 0;
  106. width: 10rpx;
  107. height: 10rpx;
  108. background-color: #FB555C;
  109. border-radius: 50%;
  110. }
  111. }
  112. }
  113. }
  114. }
  115. </style>