jiaoyi-uni/pages/service/service.vue

<template>
	<view class="content">
		<view class="order-body">
			<view class="empty-body" v-if="loginState">
				<view class="img">
					<image src="/static/image/empty.png" mode="widthFix"></image>
					<view class="tip">请先登录</view>
				</view>
				<view class="re-btn" @click="reback">去登陆</view>
			</view>
			<block class="" v-else>
				<z-paging ref="paging" show-refresher-update-time v-model="dataList" @query="queryList" :fixed="false">
					<view class="kefu-item" @click="$dialog.jumpUri('/pages/service/chat/chat?poi='+item.poi_id+'&source=list',1)" v-for="(item,index) in dataList" :key="index">
						<view class="logo"><image :src="item.avatar" mode="widthFix"></image></view>
						<view class="kefu-store">
							<view class="name">{{item.poi_name}} <text v-if="item.last.num > 0">{{item.last.num}}</text></view>
							<view class="desc" v-if="item.last.type=='text'">{{item.last.content}}</view>
							<view class="desc" v-if="item.last.type=='order'">[订单消息]</view>
							<view class="desc" v-if="item.last.type=='image'">[图片消息]</view>
							<view class="desc" v-if="item.last.type=='video'">[视频消息]</view>
							<view class="desc" v-if="item.last.type=='pay'">[支付消息]</view>
							<view class="desc" v-if="item.last.type=='address'">[地址消息]</view>
						</view>
						<view class="time">
							{{item.last.create_at}}
						</view>
					</view>
				</z-paging>
			</block>
			
		</view>
	</view>
</template>

<script>
var app;
import * as Api from "@/static/api/service.js";
export default {
	data() {
		return {
			listState:false,
			dataList:[],
			loginState:true
		}
	},
	onShow() {
		var token = uni.getStorageSync("user_token")
		if (token) {
			this.loginState = false;
		}
		this.queryList(1,10)
	},
	onLoad() {
		app = this;
	},
	methods: {
		queryList(pageNo, pageSize){
			var formData = {};
			var token = uni.getStorageSync("user_token")
			if (!token) {
				return false;
			}
			formData.page = pageNo;
			formData.size = pageSize;
			app.listState = true;
			Api.list(formData).then((res)=>{
				app.listState = false;
				uni.hideLoading();
				if (res.code !== 1) {
					this.$refs.paging.complete(false);
					return app.$dialog.showSuccess(res.msg);
				}
				app.$refs.paging.complete(res.data.rows);
			})
		}
	}
}
</script>

<style>
.order-body{height: calc(100vh - 20upx);margin-top: 20upx;}
.kefu-item{display: flex;align-items: center;background-color: #fff;padding: 20upx;border-bottom: 2upx solid #f8f8f8;}
.kefu-item .logo{height: 100upx;overflow: hidden;}
.kefu-item .logo image{width: 100upx;}
.kefu-item .kefu-store{margin-left: 20upx;}
.kefu-item .kefu-store .name{font-size: 28upx;color: #333;display: flex;align-items: center;}
.kefu-item .kefu-store .name text{background-color: #f00;color: #fff;width: 30upx;height: 30upx;display: flex;align-items: center;justify-content: center;border-radius: 30upx;font-size: 20upx;margin-left: 20upx;}
.kefu-item .kefu-store .desc{font-size: 24upx;color: #666;margin-top: 10upx;}
.kefu-item .time{margin-left: auto;margin-right: 0;font-size: 24upx;color: #666;}

.empty-body{display: flex;align-items: center;justify-content: center;flex-direction: column;height: calc(100vh - 100upx);}
.empty-body .img{text-align: center;font-size: 28upx;color: #666;}
.empty-body .img image{height: 160upx;width: 160upx;}
.empty-body .img .tip{margin-top: 20upx;}
.empty-body .re-btn{width: 180upx;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;color: #fff;background-color: #007aff;border-radius: 10upx;margin-top: 60upx;}
</style>