hongze_yb_xcx/pages-buy/detail.vue

<template>
    <page-meta :page-style="loading? 'overflow: hidden;' : ''" />
    <!-- <scroll-view scroll-y="true" :scroll-into-view="scrollViewId" upper-threshold="10" @scrolltoupper="onScrollTop" style="height: 100vh;"> -->
        <view class="list">
            <view class="item" v-for="(item,index) in list" :key="index" :id="`msg${item.report_id}${item.activity_id}`" >
                <view class="msg-time">{{formatMsgTime(item.time)}}</view>
                <view class="content" @click="goDetail(item)">
                    <view class="top-img" :style="'background-image:url('+item.img_url+')'">
                        <text class="name">{{item.top_name}}</text>
                    </view>
                    <view class="title">{{formatTitle(item)}}</view>
                    <view :class="['intro',item.content.substr(0,1)=='【'?'text-indent':'']">{{item.content}}</view>
                </view>
            </view>
        </view>
        <view class="report-empty-box" v-if="finished&&list.length==0">
            <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
            <view>暂无数据</view>
        </view>
    <!-- </scroll-view> -->
</template>

<script>
const dayjs=require('@/utils/dayjs.min')
dayjs.locale('zh-cn') 
import {apiBuyDetail} from '@/api/buy'
export default {
    data () {
        return {
            scrollViewId:'',
            classify_id_first:0,
            activity_id:0,
            page:1,
            pageSize:20,
            list:[],
            finished:false,
            loading:false
        }
    },
    onLoad(options) {
        this.classify_id_first=options.classify_id_first
        this.activity_id=options.activity_id
        uni.setNavigationBarTitle({
			title: options.activity_id!=0?'电话会':options.name
		})
        this.getList()
    },
    methods: {
        async getList(){
            this.loading=true
            const res=await apiBuyDetail({
                classify_id_first:Number(this.classify_id_first),
                activity_id:Number(this.activity_id),
                current_index:this.page,
                page_size:this.pageSize
            })
            setTimeout(() => {
                this.loading=false
            }, 500);
            if(res.code===200){
                let arr=res.data.list||[]
                
                let temarr=JSON.parse(JSON.stringify(arr))
                this.list=[...temarr.reverse(),...this.list]
                
                if(res.data.paging.is_end){
                    this.finished=true
                }

                this.$nextTick(()=>{
                    if(arr[0]){
                        this.scrollViewId=`msg${res.data.list[0].report_id}${res.data.list[0].activity_id}`
                        uni.pageScrollTo({ selector:'#'+this.scrollViewId,duration:0 })
                    }
				})
                
            }
        },

        // onScrollTop(){
        //     if(this.finished) return
		// 	this.page++
		// 	this.getList()
        // },

        // 格式化消息时间
        formatMsgTime(e){
            const hour=dayjs(e).hour()//获取小时
            const dayTime=dayjs(e).format('hh:mm')
            let dayStr=''
            if(hour>=0&&hour<5){
                dayStr=`凌晨 ${dayjs(e).format('HH:mm')}`
            }else if(hour>=5&&hour<7){
                dayStr=`清晨 ${dayTime}`
            }else if(hour>=7&&hour<9){
                dayStr=`早上 ${dayTime}`
            }else if(hour>=9&&hour<11){
                dayStr=`上午 ${dayTime}`
            }else if(hour>=11&&hour<13){
                dayStr=`中午 ${dayTime}`
            }else if(hour>=13&&hour<17){
                dayStr=`下午 ${dayTime}`
            }else if(hour>=17&&hour<19){
                dayStr=`傍晚 ${dayTime}`
            }else if(hour>=19&&hour<23){
                dayStr=`晚上 ${dayTime}`
            }else if(hour>=23&&hour<24){
                dayStr=`午夜 ${dayTime}`
            }

            // 判断是否为今天
            if(dayjs(new Date()).isSame(e, 'day')){
                return dayStr
            }
            // 判断昨天
            if(dayjs(dayjs().subtract(1, 'day')).isSame(e,'day')){
                return `昨天 ${dayStr}`
            }
            // 前天
            if(dayjs(dayjs().subtract(2, 'day')).isSame(e,'day')){
                return `前天 ${dayStr}`
            }
            // 周内
            if(dayjs(new Date()).isSame(e, 'week')){
                return `${dayjs(e).format('ddd')} ${dayStr}`
            }
            //年内
            if(dayjs(new Date()).isSame(e, 'year')){
                return `${dayjs(e).format('MM月DD日')} ${dayStr}`
            }

            return `${dayjs(e).format('YYYY年MM月DD日')} ${dayStr}`


        },

        goDetail(item){
            if(item.activity_id){
                uni.navigateTo({url: '/pages-activity/detail?id=' + item.activity_id })
            }else{
                uni.navigateTo({url:'/pages-report/reportDetail?reportId='+item.report_id})
            }
        },

        onPageScroll({ scrollTop }) {
            if(this.loading||this.finished) return
            if(scrollTop<20){
                this.page++
                this.getList()
            }
        },

        //格式化标题
        formatTitle(item){
            let t=dayjs(item.time).format('MMDD')
            if(item.activity_id){
                return `${item.title}`
            }else{
                return `${item.title}（${t}）`
            }
            
        }
    }
}
</script>

<style>
page{
    min-height: 100vh;
    padding-bottom: 0;
    background-color: #F5F6FA;
}
</style>
<style lang="scss" scoped>
.list{
    .item{
        padding: 34rpx;
        .msg-time{
            text-align: center;
            padding: 20rpx;
        }
        .content{
            background: #FFFFFF;
            box-shadow: 3rpx 3rpx 12rpx 0px rgba(161,161,161,0.14);
            border-radius: 16rpx;
            overflow: hidden;
            .top-img{
                width: 100%;
                height: 230rpx;
                background-color: #a1a1a1;
                background-size: cover;
                position: relative;
                .name{
                    display: block;
                    width: 90%;
                    text-align: center;
                    color: #CFC09F;
                    font-size: 50rpx;
                    font-weight: 600;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
            }
            .title{
                padding: 20rpx 30rpx 10rpx 30rpx;
                font-weight: bold;
                font-size: 32rpx;
            }
            .intro{
                padding: 0 30rpx 24rpx 30rpx;
                color: $global-text-color-grey;
            }
            .text-indent{
                margin-left: -12rpx;
            }
        }
    }
}
</style>