123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <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>
|