jili2-visitor/pages/index/index.vue

<template>
	<view class="box">
		<view v-for="(item,index) in list" :key="index" class="box-list" @click="goDetail(item)">
			<image v-if="item.status == 1" class="box-list-icon" src="../../images/yiyuyue.png"></image>
			<image v-if="item.status == 2" class="box-list-icon" src="../../images/yishiyong.png"></image>
			<view class="box-list-left">
				<view class="box-list-org">{{item.orgName}}</view>
				<view class="box-list-serve">{{item.title}}</view>
				<view class="box-list-date">{{item.day}}  {{item.start}}-{{item.end}}</view>
			</view>
			<view class="box-list-right">
				<view v-if="item.status == 0" class="box-btn">待审核</view>
				<view v-if="item.status == 1" class="box-btn box-btn-use">已预约</view>
				<view v-if="item.status == 2" class="box-btn">已使用</view>
				<view v-if="item.status == 3" class="box-btn">已过期</view>
				<view v-if="item.status == 4" class="box-btn">已拒绝</view>
			</view>
		</view>
		<!-- <view class="box-list">
			<image class="box-list-icon" src="../../images/yishiyong.png"></image>
			<view class="box-list-left">
				<view class="box-list-org">中国银行</view>
				<view class="box-list-serve">行政楼501人事部</view>
				<view class="box-list-date">2021-1-26  15:00-16:00</view>
			</view>
			<view class="box-list-right">
				<view class="box-btn">已使用</view>
			</view>
		</view> -->
		
		<view v-if="list.length == 0" class="no-data">
			<image src="../../images/no_data.png" mode=""></image>
			<view class="no-data-text">
				空空如也~
			</view>
		</view>
		
		<image src="../../images/yuyuebtn.png" class="yuyue-btn" @click="goAdd"></image>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				list: [],
				page: 1,
				size: 10,
				flag: 0
			}
		},
		onLoad() {
			app.checkLogin();
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'order'){
					that.list = res.data.data;
					if (that.list.length < that.size) {
						that.flag = 1;
					} else {
						that.page++;
					}
				}
			}
			
			this.flag = 0;
			this.page = 1;
			this.getOrder();
		},
		onPullDownRefresh() {
			this.flag = 0;
			this.page = 1;
			this.getOrder();
		},
		onReachBottom() { //上拉加载
		    this.getOrder();
		},
		methods: {
			goAdd(){
				uni.navigateTo({
				    url: '/pages/index/add'
				});
			},
			goDetail(obj){
				var that = this;
				uni.navigateTo({
					url: '/pages/index/detail',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', obj);
					}
				})
			},
			getOrder(){
				if(this.flag == 1){
					return;
				}
				app.ajax({
					url: app.globalData.serverUrl + 'visitorOrder/list',
					type: 'POST',
					apiname: 'order',
					data: {
						page: this.page,
						size: this.size
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		// background-color: #FFFFFF;
	}
	.box{
		padding: 20rpx;
	}
	.box-list{
		width: 670rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		position: relative;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	.box-list-icon{
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
	}
	.box-list-left{
		display: inline-block;
		width: 520rpx;
		height: 120rpx;
		float: left;
	}
	.box-list-right{
		display: inline-block;
		width: 132rpx;
		height: 120rpx;
		line-height: 120rpx;
		float: right;
	}
	.box-btn{
		display: inline-block;
		width: 132rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 24rpx;
		vertical-align: middle;
		background-color: #DFDFDF;
		border: 1rpx solid #949494;
		color: #949494;
		font-size: 28rpx;
	}
	.box-btn.box-btn-use{
		color: #FFB145;
		background-color: #FFE5C0;
		border: 1rpx solid #FFB145;
	}
	
	.box-list-org{
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}
	.box-list-serve,.box-list-date{
		color: #949494;
		font-size: 28rpx;
		font-weight: 500;
	}
	.yuyue-btn{
		width: 171rpx;
		height: 171rpx;
		display: inline-block;
		position: fixed;
		z-index: 1000;
		right: 32rpx;
		bottom: 167rpx;
		border-radius: 50%;
	}
</style>