hongze_yb_xcx/pages/buy/buy.vue

<template>
  <view class="buy-page">
    <view class="list-wrap">
      <view class="flex item" v-for="item in list" :key="item.report_id" @click="goDetail(item)">
        <view class="img" :style="'background-image:url('+item.img_url+')'">
          <text class="num" v-if="item.unread">{{item.unread}}</text>
        </view>
        <view class="content-box">
          <view class="van-ellipsis title">{{item.title}}</view>
          <view :class="['van-ellipsis intro',item.content.substr(0,1)=='【'?'text-indent':'']">{{item.content}}</view>
        </view>
        <view class="time">{{item.time|showTime}}</view>
      </view>
      <view style="color:#999;margin:40rpx 0;text-align:center">- 已经到底了 -</view>
    </view>
  </view>
</template>

<script>
const dayjs=require('@/utils/dayjs.min')
dayjs.locale('zh-cn') 
import {apiBuyList} from '@/api/buy.js'
export default {
  filters: {
    showTime(e){
      // 判断是否为今年
      const isYear=dayjs(e).isBefore(new Date(), 'year');
      if(isYear){
        return dayjs(e).format("YYYY年MM月DD日");
      }else{
        const isDay=dayjs(e).isBefore(new Date(), 'day');
        if(isDay){
          return dayjs(e).format("MM月DD日");
        }else{
          const hour=dayjs(e).hour()
          return hour<12?`上午 ${dayjs(e).format('hh:mm')}`:`下午 ${dayjs(e).format('hh:mm')}`
        }
      }
    }
  },
  data () {
    return {
      list:[]
    }
  },
  onShow() {
    this.getList()
  },
  onPullDownRefresh() {
    this.getList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1500);
  },
  methods: {
    async getList(){
      const res=await apiBuyList()
      if(res.code===200){
        this.list=res.data
      }
    },

    goDetail(item){
      uni.navigateTo({ url: `/pages-buy/detail?classify_id_first=${item.classify_id_first}&activity_id=${item.activity_id}&name=${item.classify_name_first}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.buy-page{
  .list-wrap{
    padding: 30rpx 34rpx;
    .item{
      padding: 30rpx 0;
      border-bottom: 1px solid $global-border-color;
      align-items: center;
      .img{
        flex-shrink: 0;
        margin-right: 28rpx;
        width: 90rpx;
        height: 90rpx;
        background-color: $global-bg-color-grey;
        background-size: cover;
        position: relative;
        border-radius: 14rpx;
        .num{
          position: absolute;
          top: 0;
          right: 0;
          transform: translate(50%,-50%);
          display: inline-block;
          box-sizing: border-box;
          min-width: 28rpx;
          padding: var(--van-badge-padding);
          color: #fff;
          font-size: $global-font-size-mini;
          line-height: 1.2;
          text-align: center;
          background: #ee0a24;
          border-radius: 28rpx;
          padding: 2rpx 4rpx;
        }
      }
      .content-box{
        flex: 1;
        overflow: hidden;
        .title{
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 6rpx;
        }
        .intro{
          color: $global-text-color-grey;
          font-size: 28rpx;
        }
        .text-indent{
          margin-left: -12rpx;
        }
      }
      .time{
        font-size: $global-font-size-sm;
        color: $global-text-color-grey;
        flex-shrink: 0;
        margin-left: 20rpx;
      }
    }
  }
}
</style>