recycapp/pages/person/qiangdan.vue

<template>
	<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)">
					<text >{{item.type_name}}</text> 
				</view>
				<view class="order-box" @click="goDetail(item.id)">
					<view class="li"> 
						<view class="lr">订单号：</view> {{item.order_no}}
					</view> 
					<view class="li">
						<view class="" style="justify-content: space-between; display: flex;width:100%">
							<view><view class="lr">预约人：</view> {{item.accept_name}}</view>
							<view class="gongli" v-if="item.distance>=0">
								{{item.distance}}/km
							</view>
						</view>
					</view>
					<view class="li"> 
							<view class="lr">手机号：</view>
							<text v-if="item.person_id>0">{{item.accept_mobile}}</text>
							<text v-else>接单后可看</text> 
					</view>
					
					<view class="li">  
						<view class="lr">预约重量：</view>
						<view>{{item.weight}}</view> 
					</view>
					<view class="li">  
						<view class="lr">预约时间：</view>
						<view>{{item.order_time}}</view> 
					</view> 
					<view class="li"> 
						<view class="lr">预约地址：</view>
						<view>{{item.accept_address}}</view> 
					</view>
				</view> 
				<view class="footer" >
					  <view class="btn btn-default" @click="goDetail(item.id)"   >详情</view> 
					  <view class="btn btn-default" @click="setorder(item.id,2)" v-if="item.status==1 && jiedan_type ==1 ">接单</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 {  
		data() {
			return {
				jiesuan_order_id:0,
				jiedan_type:0,
				show:false, 
				tabCur: 0,
				list: [],
				page:1, 
			};
		}, 
		onLoad(e) {  
		},
		
		onShow () {
			
			this.page = 1
			this.list = []
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			}  
			this.getList() 
		},
		onPullDownRefresh() { 
			this.page = 1
			this.list = []
			this.getList() 
		},
		onReachBottom() { 
			this.page++
			this.getList()
		},
		methods:{   
			setorder(id,status){
				var msg ='';
				if(status ==2){
					msg ='确认要接单吗？';
				} 
				uni.showModal({
					title:'提示',
					content: msg,
					success:(ret)=>{ 
						if(ret.confirm){  
							this.$api.setorder({ 
								order_id:id  ,
								money:this.money  ,
								status:status  
							}, res => { 
								if (res.code == "1") {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									}) 
									setTimeout(()=>{
										this.page=1 
										this.list = []
										this.getList() 
									},1000)
								}else{ 
									uni.showToast({ title: res.msg , icon: 'none' }) 
								}
							}) 
				
						}
					} 
				})
			},
			getList(){
				this.$api.qiangdanlist({
					page:this.page, 
					status:this.tabCur
				}, res => {
				    
				    if (res.code == "1") {
						this.jiedan_type = res.data.jiedan_type;
						if(this.jiedan_type ==0){
							uni.showToast({ title: "未开启抢单" , icon: 'none' })
								 
							 setTimeout(()=>{
								uni.navigateBack({
								  delta: 1
								})
							 },2000)
							
							return false
						} 
				    	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:'/pages/person/orderinfo?id=' + id
				})
			},   
		}
	}
</script>

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

	.card-list {
		padding: 18rpx 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-box {
			padding: 0 28rpx;  
			.li {
				color: #666666;
				font-size: 28rpx;
				padding-bottom: 28rpx;display: flex;
				.lr{  width: 76px;
					text-align: right;
					display: inline-block;
					}
				
			}
		} 
	}	 
</style>