pet_uni/pages/Index/components/ChatPage/index.vue

<template>
	<view class="body-background" :style="{backgroundImage:'url('+staticImage.bodyBackground+')'}"></view>
	<view class="app-wallpaper">

		<view class="chat-list-container row">
			<view v-for="item in chatList" class="chat-list-item-container col-12" :style="{
				backgroundImage:'url('+staticImage.chatBgImage+')'
			}">
				<view class="chat-item-background" @click="chatDetail(item)" :style="{
				backgroundImage:'url('+staticImage.chatLTBgImage+')'
			}">
					<view class="chat-item-content row">
						<view class="chat-item-left">
							<image class="img" :src="item.avatar" mode="aspectFill"/>
						</view>
						<view class="chat-item-right">
							<view class="chat-item-title-group row">
								<view class="chat-item-title">{{item.order_info}}</view>
								<view class="chat-item-time">{{timeFormat(item.create_time)}}</view>
							</view>
							<view class="chat-item-desc">
								{{item.info}}
							</view>
              <u-badge v-if="item.no_read_count>0" type="error" max="99" :value="item.no_read_count" absolute :offset="['100%','0']" custom-style="z-index:1;"></u-badge>
						</view>
					</view>
				</view>
			</view>
<!--			<view class="chat-item-end row">-->
<!--				— 没有更多内容了 —-->
<!--			</view>-->
		</view>
    <u-loadmore :status="status" fontSize="28"
                color="#ACB4B6"
                line
                line-color="#ACB4B6"
                marginBottom="30" marginTop="30" @loadmore="getChatList()"/>
	</view>

</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '@/components/MzButton/Index.vue';
	import api from '@/utils/functions.js';
	import {chatList} from "@/api/chat";
  import {cardList} from "@/api/card";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				staticImage: {
					screenActiveImg: imghost + '/banner.png',
					orderCardBackground: imghost + '/order-card-background.png',
					wallpaperBgImage:imghost +'/background.png',
					chatBgImage:imghost +'/chat-list-background.png',
					chatLTBgImage:imghost +'/chat-list-lt-background.png',
					bodyBackground:imghost+'/background.png'
				},
				isTop: false,
				chatList:[],
        status:'loadmore',
        page:1,
			}
		},
		mounted() {
			this.getChatList();
		},
		methods: {
      chatShow(){
        this.page = 1;
        this.status = 'loadmore';
        this.getChatList(true);
      },
      timeFormat(time){
        let now = uni.$u.timeFormat(new Date().getTime(),'yyyy/mm/dd');
        let formatTime = uni.$u.timeFormat(time,'yyyy/mm/dd');
        if(now === formatTime){
          return uni.$u.timeFormat(time,'hh:MM:ss');
        }else{
          return uni.$u.timeFormat(time,'yyyy/mm/dd');
        }
      },
			chatDetail(item){
				uni.navigateTo({
					url:'/pages/ChatDetail/index?id='+item.order_service_id
				});
			},
			getChatList(clear = false){
        if(clear){
          this.status = 'loadmore';
          this.chatList = [];
          this.page = 1;
        }
        if(this.status === 'nomre'){
          return false;
        }
        this.status = 'loading';
        chatList(this.page, this.$store.state.userInfo.store_id > 0).then(res => {
          this.chatList.push.apply(this.chatList,res.data);
          if(res.data.length === 0){
            this.status = 'nomore';
          }else{
            this.status = 'loadmore';
          }
          this.page++;
        })
			}
		},
    onReachBottom() {
      this.getChatList();
    },
		onPageScroll(res) {
			if(res.scrollTop <= 20){
				uni.$emit('isTop', true);
			}else{
				uni.$emit('isTop', false);
			}
		},
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop +
			// 	api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		}
	}
</script>

<style lang="scss">
	@import '@/pages/Index/components/ChatPage/components/index.scss';
</style>