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">
          <text class="num" v-if="item.stage">{{item.stage}}</text>
        </view>
        <view class="content-box">
          <view class="van-ellipsis title">{{item.title}}</view>
          <view class="van-ellipsis intro">{{item.content}}</view>
        </view>
        <view class="time">{{item.time|showTime}}</view>
      </view>
    </view>
  </view>
</template>

<script>
const moment=require('@/utils/moment-with-locales.min')
moment.locale('zh-cn');
import {apiBuyList} from '@/api/buy.js'
export default {
  filters: {
    showTime(e){
      // 判断是否为今年
      const isYear=moment(e).isBefore(new Date(), 'year');
      if(isYear){
        return moment(e).format("YYYY年MM月DD日");
      }else{
        const isDay=moment(e).isBefore(new Date(), 'day');
        if(isDay){
          return moment(e).format("MM月DD日");
        }else{
          const hour=moment(e).hour()
          return hour<12?`上午 ${moment(e).format('hh:mm')}`:`下午 ${moment(e).format('hh:mm')}`
        }
      }
    }
  },
  data () {
    return {
      list:[
       {
			"report_id": 1631,
			"report_chapter_id": 0,
			"activity_id": 0,
			"classify_id_first": 75,
			"classify_name_first": "双周报",
			"classify_id_second": 76,
			"classify_name_second": "橡胶双周报",
			"title": "橡胶双周报",
			"content": "【第1期|FICC| 橡胶双周报】双周报",
			"stage": 1,
			"time": "2022-03-09T13:19:13+08:00",
			"unread": 3
		},
		{
			"report_id": 0,
			"report_chapter_id": 0,
			"activity_id": 253,
			"classify_id_first": 0,
			"classify_name_first": "",
			"classify_id_second": 0,
			"classify_name_second": "",
			"title": "防守打法发水电费",
			"content": "主讲：秦钏",
			"stage": 0,
			"time": "2022-03-09T09:59:47+08:00",
			"unread": 0
		},
		{
			"report_id": 836,
			"report_chapter_id": 0,
			"activity_id": 0,
			"classify_id_first": 52,
			"classify_name_first": "行业调研",
			"classify_id_second": 53,
			"classify_name_second": "寻根知本",
			"title": "寻根知本（10月第一期）",
			"content": "【第1期|FICC| 寻根知本】行业调研",
			"stage": 1,
			"time": "2022-03-03T14:18:24+08:00",
			"unread": 4
		},
		{
			"report_id": 1073,
			"report_chapter_id": 0,
			"activity_id": 0,
			"classify_id_first": 56,
			"classify_name_first": "权益研报",
			"classify_id_second": 57,
			"classify_name_second": "近期路演精华",
			"title": "短保早餐行业龙头商业模式分析",
			"content": "【第1期|FICC| 近期路演精华】权益研报",
			"stage": 1,
			"time": "2022-03-02T15:41:29+08:00",
			"unread": 1
		}
      ]
    }
  },
  onLoad(){},
  onShow() {
    // this.getList()
  },
  methods: {
    async getList(){
      const res=await apiBuyList()

    },

    goDetail(item){
      uni.navigateTo({ url: `/pages-buy/detail?classify_id_first=${item.classify_id_first}&activity_id=${item.activity_id}` })
    }
  }
}
</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: 120rpx;
        height: 120rpx;
        background-color: $global-bg-color-grey;
        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: 20rpx;
          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: 14px;
          font-weight: bold;
          margin-bottom: 18rpx;
        }
        .intro{
          color: $global-text-color-grey;
        }
      }
      .time{
        font-size: $global-font-size-sm;
        color: $global-text-color-grey;
        flex-shrink: 0;
        margin-left: 20rpx;
      }
    }
  }
}
</style>