recycapp/pages/order/order.vue

<template>
	<view>
		<view class="navbar"> 
				<view v-for="item in tabs"  class="item"  :class="[tabCur==item.id?'on':'']" @click="selectTab(item.id)">
					{{item.name}}
				</view>  
			</view>
			
		<view class="card-list">
			<view class="order-box" v-for="item in list" :key="item.id" > 
				<view class="order-header" @click="goDetail(item.id)">
					<view>{{item.type_name}}</view>
					<view >
						  {{item.status_name}}
					</view>
				</view>
				<view class="order-info" @click="goDetail(item.id)">
					<view class="order-li"> 
						<view>订单号：</view>{{item.order_no}}
					</view>
					<view class="order-li"> 
						<view>预约地址：</view>
						{{item.accept_address}}
					</view>
					<view class="order-li">  
						<view>预约时间：</view>
						{{item.order_time}}
					</view>
					<view class="order-li">  
						<view>预约重量：</view>
						{{item.weight}}
					</view>
				</view> 
				<view class="footer"  >
					  <view class="btn btn-default" @click="goDetail(item.id)"  >详情</view> 
					  <view class="btn btn-default" @click="cancel(item.id)" v-if="item.status==1 || item.status==2">取消</view>      
				</view> 
			</view>  
			<view class="zanwuimg" v-if="list.length == 0">
			  <image src="../../static/img/null.png" mode="widthFix"></image>
				<view>暂无相关订单</view>
			</view>  
		</view> 
		
	</view>
</template>

<script> 
	
	export default {
		components: { 
		},
		data() {
			return {
				show:false,
				tabs: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '待接单'
					},
					{
						id: 2,
						name: '已接单'
					},
					{
						id: 3,
						name: '已完成'
					},
					{
						id: 4,
						name: '已取消'
					}
				],
				tabCur: 0,
				list: [],
				page:1,
			};
		}, 
		onLoad(e) {  
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		
		onShow () { 
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			}
			this.page = 1
			this.list = [] 
			this.getList();
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.getList() 
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods:{
			closePopup(){
				this.show = false
			},
			selectTab(id){
				this.page=1
				this.tabCur = id
				this.list = []
				this.getList()
			}, 
			cancel(id){
				uni.showModal({
					title:'提示',
					content: '确认要取消订单吗?',
					success:(ret)=>{ 
						if(ret.confirm){  
							this.$api.cancelorder({
								id:id  
							}, res => { 
								if (res.code == "1") {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									}) 
									this.page=1 
									this.list = []
									this.getList()
								}else{ 
									uni.showToast({ title: res.msg , icon: 'none' }) 
								}
							}) 
						}
					}
				}) 
			},
			getList(){
				var token = uni.getStorageSync('userToken');  
				if (!token) {
					return false;
				}
				this.$api.userOrder({
					page:this.page, 
					status:this.tabCur
				}, res => {
				    
				    if (res.code == "1") {
				    	let list = res.data.list.data
				    	if(list.length>0){
				    		this.list = [
				    			...this.list,
				    			...list	
				    		]
				    		this.page++
				    	}else{
				    		uni.showLoading({
				    			title:'加载中...'
				    		})
				    		setTimeout(()=>{
				    			uni.hideLoading()
				    			return
				    		},500)
				    		this.zanwuflag = true
				    		this.flagjiazai = true
				    	} 
				    	
				    }
				}) 
			},
			goDetail(id){
				uni.navigateTo({
					url:'../order/detail?id=' + id
				})
			},  
		}
	}
</script>

<style lang="scss">
	page {
	    background: #eee;
	}
	 

	.card-list {
		padding: 120rpx 14rpx 50px; 
	}
	
	
	 
	.order-box {
		    background: #ffffff;
		    border-radius: 12rpx;
		    margin-bottom: 16rpx;
		.footer{
			display: flex;
			justify-content: flex-end;padding-bottom: 10px; 
		}
		.order-header {
			width: 100%;
			padding: 28rpx;
			justify-content: space-between;
			display: flex; 
		}
		.order-info {
			padding: 0 28rpx; 
			.order-li {
				color: #666666;
				font-size: 28rpx;
				padding-bottom: 28rpx;
				
				>view{       width: 76px;
				text-align: right;
					display: inline-block;}
			}
		} 
	}	 
	 
	 .navbar {
	 	/*  #ifdef  H5  */
	 	margin-top:44px;
	 	/*  #endif  */ 
	 }
</style>