mobile_uniapp_mmhy/pages/flowOrderList/flowOrderList.vue

<template>
	<view class="flowOrderList">
		<view class="box" v-for="(item,index) in boxList" :key="index" @tap="flowOrderDetails(item.id)">
			<view class="title">
				<image src="../../static/img/image41.204c6330707ae6355af5.png" mode=""></image>
				订购商品:{{item.info.mobile.name}}
				<view class="type" v-if="item.status==0">待付款</view>
				<view class="type" v-else-if="item.status==10">已付款未处理</view>
				<view class="type" v-else-if="item.status==15">已提运营</view>
				<view class="type" v-else-if="item.status==17">有号码未发货</view>
				<view class="type" v-else-if="item.status==20">已提运营商</view>
				<view class="type" v-else-if="item.status==23">已发货</view>
				<view class="type" v-else-if="item.status==25">已完成</view>
				<view class="type" v-else-if="item.status==30">申请退款</view>
				<view class="type" v-else-if="item.status==50">已关闭</view>
				<view class="type" v-else-if="item.status==60">无号码</view>
				<view class="type" v-else-if="item.status==70">换卡</view>
				<view class="type" v-else-if="item.status==80">争议单</view>
				<view class="type" v-else-if="item.status==90">已退款</view>
				<view class="type" v-else-if="item.status==100">退款反驳</view>
				<view class="type" v-else-if="item.status==110">审核失败</view>
			</view>
			<view class="loabl">
				<text>下单时间:</text>
				{{item.create_time | formatDate}}
			</view>
			<view class="loabl">
				<text>订单编号:</text>
				{{item.order_no}}
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				list: 15,
				page: 1,
				phone:"",
				boxList:[],
			}
		},
		filters: {
			formatDate(value) {
				if(value == undefined){
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value * 1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日
				return MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
			}
		 
		},
		// 下拉加载
		onReachBottom() {
			this.status = 'loading';
			this.page = ++ this.page;
			let obj={
				page:this.page,
				phone:this.phone,
				type:2
			}
			this.$http.order_list(obj).then(res=>{
				// console.log(res)
				if(res.data.code==1){
					if(obj.page<res.data.data.per_page || obj.page == res.data.data.per_page){
						let arr=this.boxList.concat(res.data.data.data)
						this.boxList=arr;
						console.log(this.boxList)
					}
					this.status = 'nomore'								
				}else{
					this.status = 'nomore'
				}
			})
		},
		onLoad(option){
			if(option.phone){
				this.phone=option.phone
				this.phoneList()
			}else{
				this.phoneList()
			}
			
		},
		methods: {
			// 初始化列表
			phoneList(){
				// 初始化页数
				let obj={
					page:this.page,
					phone:this.phone,
					type:2
				}
				this.$http.order_list(obj).then(res=>{
					console.log(res)
					if(res.data.code==1){
						this.boxList=res.data.data.data
					}
				})
			},
			flowOrderDetails(id){
				uni.navigateTo({
				  url: '/pages/flowOrderDetails/flowOrderDetails?id='+id,
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #F5F5F5;
	}
	.flowOrderList{
		.box{
			width: 700rpx;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			.title{
				position: relative;
				width: 440rpx;
				font-size: 30rpx;
				color: #333;
				margin-bottom: 20rpx;
				image{
					width: 35rpx;
					height: 35rpx;
					padding-right:8rpx;
				}
				.type{
					position: absolute;
					right: -220rpx;
					top: 0;
					padding: 4rpx 20rpx;
					background-color: #ef9f26;
					font-size: 26rpx;
					border-radius: 20rpx;
					color: #FFF;
				}
			}
			.loabl{
				color: #868686;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>