buy.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="buy-page">
  3. <view class="list-wrap">
  4. <view class="flex item" v-for="item in list" :key="item.report_id" @click="goDetail(item)">
  5. <view class="img">
  6. <text class="num" v-if="item.unread">{{item.unread}}</text>
  7. </view>
  8. <view class="content-box">
  9. <view class="van-ellipsis title">{{item.title}}</view>
  10. <view class="van-ellipsis intro">{{item.content}}</view>
  11. </view>
  12. <view class="time">{{item.time|showTime}}</view>
  13. </view>
  14. <view style="color:#999;margin:40rpx 0;text-align:center">- 已经到底了 -</view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. const moment=require('@/utils/moment-with-locales.min')
  20. moment.locale('zh-cn');
  21. import {apiBuyList} from '@/api/buy.js'
  22. export default {
  23. filters: {
  24. showTime(e){
  25. // 判断是否为今年
  26. const isYear=moment(e).isBefore(new Date(), 'year');
  27. if(isYear){
  28. return moment(e).format("YYYY年MM月DD日");
  29. }else{
  30. const isDay=moment(e).isBefore(new Date(), 'day');
  31. if(isDay){
  32. return moment(e).format("MM月DD日");
  33. }else{
  34. const hour=moment(e).hour()
  35. return hour<12?`上午 ${moment(e).format('hh:mm')}`:`下午 ${moment(e).format('hh:mm')}`
  36. }
  37. }
  38. }
  39. },
  40. data () {
  41. return {
  42. list:[]
  43. }
  44. },
  45. onShow() {
  46. this.getList()
  47. },
  48. methods: {
  49. async getList(){
  50. const res=await apiBuyList()
  51. if(res.code===200){
  52. this.list=res.data
  53. }
  54. },
  55. goDetail(item){
  56. uni.navigateTo({ url: `/pages-buy/detail?classify_id_first=${item.classify_id_first}&activity_id=${item.activity_id}&name=${item.classify_name_first}` })
  57. }
  58. }
  59. }
  60. </script>
  61. <style lang="scss" scoped>
  62. .buy-page{
  63. .list-wrap{
  64. padding: 30rpx 34rpx;
  65. .item{
  66. padding: 30rpx 0;
  67. border-bottom: 1px solid $global-border-color;
  68. align-items: center;
  69. .img{
  70. flex-shrink: 0;
  71. margin-right: 28rpx;
  72. width: 120rpx;
  73. height: 120rpx;
  74. background-color: $global-bg-color-grey;
  75. position: relative;
  76. border-radius: 14rpx;
  77. .num{
  78. position: absolute;
  79. top: 0;
  80. right: 0;
  81. transform: translate(50%,-50%);
  82. display: inline-block;
  83. box-sizing: border-box;
  84. min-width: 20rpx;
  85. padding: var(--van-badge-padding);
  86. color: #fff;
  87. font-size: $global-font-size-mini;
  88. line-height: 1.2;
  89. text-align: center;
  90. background: #ee0a24;
  91. border-radius: 28rpx;
  92. padding: 2rpx 4rpx;
  93. }
  94. }
  95. .content-box{
  96. flex: 1;
  97. overflow: hidden;
  98. .title{
  99. font-size: 14px;
  100. font-weight: bold;
  101. margin-bottom: 18rpx;
  102. }
  103. .intro{
  104. color: $global-text-color-grey;
  105. }
  106. }
  107. .time{
  108. font-size: $global-font-size-sm;
  109. color: $global-text-color-grey;
  110. flex-shrink: 0;
  111. margin-left: 20rpx;
  112. }
  113. }
  114. }
  115. }
  116. </style>