huihouqin-new-ph/pages/order/index.vue

<template>
	<view>
		<view class="order-box">
			<view v-for="(item,index) in list" :key="index" class="order-box-list" @click="goDetail(item.id)">
				<view class="order-box-header">
					<text class="order-box-title">{{item.name}}</text>
					<text class="order-box-desc" v-if="item.status == 1">已预约</text>
					<text class="order-box-desc" v-if="item.status == 2">已取消</text>
				</view>
				<view class="order-box-body">
					<view class="order-box-body-left">
						<image :src="item.goodsImg"></image>
					</view>
					<view class="order-box-body-right">
						<text class="order-box-body-desc">下单时间：{{item.createTime}}</text>
						<text class="order-box-body-cate" v-if="item.cate == 1">早餐</text>
						<text class="order-box-body-cate" v-if="item.cate == 2">午餐</text>
						<text class="order-box-body-cate" v-if="item.cate == 3">晚餐</text>
						<text class="order-box-body-cate" v-if="item.cate == 4">当日餐</text>
					</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>
		</view>

	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				list: [],
				page: 1,
				size: 10,
				flag: 0
			}
		},
		onLoad() {

		},
		onShow(){
			var that = this;
		
			this.flag = 0;
			this.page = 1;
			this.getOrder();
			
			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++;
					}
				}
			}
		},
		onPullDownRefresh() {
			this.flag = 0;
			this.page = 1;
			this.getOrder();
		},
		onReachBottom() { //上拉加载
		    this.getOrder();
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
				    url: "/pages/order/detail?id=" + id
				});
			},
			getOrder(){
				if(this.flag == 1){
					return;
				}
				app.ajax({
					url: app.globalData.serverUrl + 'shopOrder/orderList',
					type: 'POST',
					apiname: 'order',
					data: {
						page: this.page,
						size: this.size
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-box{
		padding-bottom: 30rpx;
	}
	.order-nodata{
		margin-top: 150rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
	}
	
	.order-box-list{
		width: 680rpx;
		height: auto;
		border-radius: 8rpx;
		margin: 15rpx auto;
		background-color: #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
	}
	.order-box-header{
		width: 680rpx;
		height: 78rpx;
		line-height: 78rpx;
		border-bottom: 1rpx solid #F6F6F6;
	}
	.order-box-title{
		display: inline-block;
		width: 500rpx;
		height: 100%;
		font-size: 34rpx;
		font-weight: bold;
	}
	.order-box-desc{
		display: inline-block;
		width: 180rpx;
		text-align: right;
		height: 100%;
		color: #949494;
		font-size: 30rpx;
	}
	.order-box-body{
		padding: 20rpx 0 30rpx 0;
	}
	.order-box-body-left{
		display: inline-block;
		width: 88rpx;
		height: 88rpx;
		float: left;
	}
	.order-box-body-left image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.order-box-body-right{
		display: inline-block;
		width: 580rpx;
		float: right;
	}
	.order-box-body-desc{
		display: inline-block;
		width: 100%;
		font-size: 28rpx;
		color: #949494;
	}
	.order-box-body-cate{
		display: inline-block;
		width: 100%;
		font-size: 24rpx;
		color: $theme-color;
	}
</style>