yanzong_qianduan/pages/news/recycling/orderList.vue

<template>
	<view>
		<view class="head-info">
			<!-- 搜索 -->
			<view class="searchContent">
				<u-input v-model="order_no" placeholder="输入订单编号"/>
				<u-icon name="search" @click="getOrderList(1)" class="search"></u-icon>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="container">
			<view class="classify-list">
				<view class="list" :class="{'action':classifyShow == -1}" @click="onClassify(-1)">
					<text>全部</text>
					<text class="line" v-show="classifyShow == -1"></text>
				</view>
				<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==index}" @click="onClassify(index)" :key="index">
					<text>{{item.name}}</text>
					<text class="line" v-show="classifyShow==index"></text>
				</view>
			</view>
		</view>
		<view class="shopContent">
			<view class="shopItem" v-for="(item,index) in goodsList" :key="index" @click="openPage(6,item.order_id)">
				<view class="orderInfo">
					<text>订单号：{{item.order_no}}</text>
					<text class="statusText" style="color: #FF6813;">{{item.order_status_text}}</text>
				</view>
				<view class="shopItemInfo">
					<image :src="item.server_image"></image>
					<view class="priceCon">
						<view class="a">{{item.server_name}}</view>
						<view class="b">
							<text class="num">x1</text>
							<view class="priceText">
								<text style="font-size: 26upx;">¥</text>
								<text>{{item.pay_price?Number(item.pay_price):item.pay_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="totalNum">
					<!-- <text>含运费¥{{item.yunfei}}</text> -->
					<text>共计：</text>
					<text>¥{{item.pay_price?Number(item.pay_price):item.pay_price}}</text>
				</view>
				<view class="remark">
					<view class="remarkTitle">
						收件人姓名 {{item.username}}
					</view>
					<view class="remarkContent" v-if="item.buyer_remark">
						{{item.buyer_remark}}
					</view>
				</view>
				<view class="btnGroup">
					<view class="btn info" v-if="item.is_cancel && (item.order_status == 10 || item.order_status == 20)" @click.stop="openPage(1,index,item)" >取消订单</view>
					<view class="btn primary" v-if="item.is_pay && item.order_status == 10" @click.stop="openPage(2,index,item)">去支付</view>
					<view class="btn primary" v-if="item.is_dispatch && item.order_status == 20" @click.stop="openPage(3,index,item)">去派单</view>
					<view class="btn primary" v-if="item.is_success && item.order_status == 30" @click.stop="openPage(4,index,item)">立即完成</view>
					<view class="btn info" v-if="item.order_status==40">已完成</view>
					<view class="btn info" v-if="item.order_status==50">已取消</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 220rpx;">
			<u-empty text="暂无信息" v-if="total == 0" mode="list" style="margin-top: 160rpx;"></u-empty>
			</view>
		
		<u-popup v-model="show" mode="bottom" border-radius="10" :closeable="true">
			<view class="filterContent">
				<view class="filterTitle">
					订单筛选
				</view>
				<view class="filterItem">
					<view class="filterItemContent">
						<view class="itemTitle">
							下单时间
						</view>
						<view class="timeContainer">
							<u-input v-model="startTime" type="select" @click="getTime('start')"  disabled placeholder="起始时间"/>
							<text>-</text>
							<u-input v-model="endTime" type="select" @click="getTime('end')" disabled placeholder="终止时间"/>
						</view>
					</view>
					<view class="filterItemContent">
						<view class="itemTitle">
							来源
						</view>
						<view class="selectContainer">
							<view @click="setResourceIndex(index)" :class="sourceIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in selectList" :key="item.id">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="filterItemContent">
						<view class="itemTitle">
							支付方式
						</view>
						<view class="selectContainer">
							<view @click="setpayIndex(index)" :class="payIndex==index?'selectItem active':'selectItem'" v-for="(item,index) in payList" :key="item.id">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="btnGroup">
					<view class="resetBtn">
						重置
					</view>
					<view class="confrim">
						确定
					</view>
				</view>
			</view>
				<u-picker mode="time" z-index="99999" v-model="timeShow"></u-picker>
			
		</u-popup>
	</view>
</template>

<script>
import * as newFunApi from '@/api/newFun'
export default {
	data(){
		return{
			searchText:'',
			classifyShow: -1,
			classList: [],
			goodsList:[],
			show:false,
			timeShow:false,
			selectList:[
				{id:1,name:'预售'},
				{id:2,name:'秒杀'},
				{id:3,name:'拼团'},
				{id:4,name:'砍价'},
			],
			payList:[
				{id:1,name:'微信支付'},
				{id:2,name:'好友代付'},
				{id:3,name:'线下支付'},
			],
			sourceIndex:0,
			payIndex:0,
			startTime:null,
			endTime:null,
			total: 1,
			order_no: "",
			pageNum: 1,
		}
	},
	onLoad(o) {
		if(o.type){
			this.classifyShow = o.type-1
		}
	},
	onShow() {
		this.getList(1);
	},
	onPullDownRefresh() {
		this.pageNum = 1;
		this.goodsList = [];
		this.getList();
		setTimeout(()=>{
			uni.stopPullDownRefresh();
		},1000)
	},
	onReachBottom(){
	   if(this.goodsList.length <= this.total){
	   	this.pageNum ++;
	   	this.getList();
	   }
	},
	methods:{
		openPage(i,index,a){
			const that = this;
			if(i == 1){
				uni.showModal({
					title: "温馨提示",
					content: "是否取消该订单？",
					confirmColor: "#F21A1C" ,
					complete(res) {
						if(res.confirm){
							that.toDel(index,a.order_id);
						}
					}
				})
			}else if(i == 2){
				uni.navigateTo({
					url: "/pages/news/recycling/pay?type=fuwuorder&order_id="+a.order_id
				})
			}else if(i == 3){
				uni.navigateTo({
					url: "/pages/news3/dispatch?type=fuwuorder&order_id="+a.order_id
				})
			}else if(i == 6){
				uni.navigateTo({
					url: "/pages/news/recycling/orderDetail?type=fuwuorder&order_id="+index
				})
			}else if(i == 4){
				uni.showModal({
					title: "温馨提示",
					content: "是否提交该订单？",
					confirmColor: "#F21A1C" ,
					complete(res) {
						if(res.confirm){
							that.toConfirmSuccess(a.order_id);
						}
					}
				})
			}
		},
		//完成订单
		async toConfirmSuccess(order_id) {
			const {status, message, data} = await serverConfirmSuccess({
				order_id
			})
			if(status == 200){
				uni.showToast({
					title: "提交成功"
				})
				this.getInfo();
			}
		},
		//删除订单
		async toDel(index,order_id) {
			const {status, message, data} = await newFunApi.serverCancelOrder({
				order_id
			});
			if(status == 200){
				uni.showToast({
					title: "取消成功"
				})
				this.goodsList.splice(index,1);
			}
		},
		/**
		 * 获取列表
		 */
		async getList() {
			let {status, message, data} = await newFunApi.serverOrderInfoStatus({});
			if(status == 200){
				this.classList = data.list
				this.getOrderList();
			}
		},
		/**
		 * 获取商品列表
		 */
		async getOrderList(type) {
			uni.showLoading({
				title:"加载中"
			})
				if(type == 1){
					this.pageNum = 1;
					this.goodsList = []
				}
			let {status, message, data} = await newFunApi.serverOrderList({
				order_no: this.order_no,
				page: this.pageNum,
				order_status: this.classList.length > 0?(this.classifyShow>=0?this.classList[this.classifyShow].value:''):""
			});
			if(status == 200){
				uni.hideLoading();
				this.goodsList = this.arrayUnique(this.goodsList.concat(data.list),'order_id')
				this.total = data.total
			}
		},
		//数组对象去重
		  arrayUnique(arr, name) {
		    var hash = {};
		    return arr.reduce(function (item, next) {
		        hash[next[name]]
		            ? ""
		            : (hash[next[name]] = true && item.push(next));
		        return item;
		    }, []);
		  },
		getLable(val){
			let arr = this.classList.filter(item=>{
				return val==item.id
			})
			return arr[0].name
		},
		onSearch(){
			
		},
		onClassify(index){
			this.classifyShow = index;
			this.pageNum = 1;
			this.goodsList = []
			this.getOrderList();
		},
		setResourceIndex(index){
			this.sourceIndex = index;
		},
		setpayIndex(index){
			this.payIndex = index;
		},
		getTime(val){
			console.log("ooo")
			this.timeShow = true;
		}
	}
};
</script>

<style scoped lang="scss">
page{
	background-color: #F7F8FA;
	min-height:100%;
}
.nolist {
		width: 100%;
		display: block;
		margin: 0 auto;
		text-align: center;
		padding: 150rpx 50rpx;
	
		image {
			width: 388rpx;
			height: 378rpx;
		}
	
		.txt {
			font-size: 32rpx;
			margin-top: 20rpx;
			font-weight: 500;
			color: #fff;
		}
	}
.head-info{
	
	padding:22upx 20upx;
	.searchContent{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
		border-radius: 80rpx;
		::v-deep .uni-input-placeholder{
			margin-left:90upx;
			z-index:10;
		}
		input{
			margin-left: 60rpx;
			flex: 1;
		}
		.search{
			position: absolute;
			top:20upx;
			left:26upx;
			z-index:9;
		}
		::v-deep .u-input{
			flex:1;
			width: 500rpx;
			margin-left: 40upx;
		}
		::v-deep .uni-input-input{
			
			background: #FFFFFF;
			border-radius: 30px 30px 30px 30px;
			opacity: 1;
			padding-left:80upx;
			width:calc(100% - 80upx);
			
		}
		.filter{
			display: flex;
			width: 100upx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width:34upx;
				height:auto;
			}
			text{
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #616161;
				
			}
		}
	}
}
.container{
	background-color: #fff;
}
.classify-list{
	white-space:nowrap;
	width: 100%;
	height: 100rpx;
	overflow-x: auto;
	overflow-y: hidden;
	.list{
		position: relative;
		display:inline-block;
		width: 18%;
		height: 100%;
		line-height: 100rpx;
		text-align: center;
		text{
			font-size: 28rpx;
			color: #3B3B3B;
			
		}
		.line{
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			// width: 60%;
			// height: 8rpx;
			background: linear-gradient(to right,#f8f893,#fe9d00);
			// border-radius: 10rpx;
			transform: translate(-50%,0);
			
			width: 60upx;
			height: 8upx;
			background: #FF6257;
			border-radius: 29px 29px 29px 29px;
			opacity: 1;
		}
	}
	.action{
		text{
			font-size: 32rpx;
			opacity: 1;
		}
	}
}
.shopContent{
	
	
	.shopItem{
		margin-bottom:14upx;
		padding:36upx;
		background-color: #fff;
		.orderInfo{
			display: flex;
			align-items: center;
			justify-content:space-between;
			text{
				font-size: 28upx;
				color: #707070;
				
			}
		}
		.shopItemInfo{
			display: flex;
			margin-top:40upx;
			image{
				width:180upx;
				height:180upx;
				flex-shrink: 0;
			}
			.priceCon{
				flex:1;
					overflow: hidden;
				.a{
					font-size: 28rpx;
					font-weight: 500;
					height: 50rpx;
					color: #3B3B3B;
					overflow: hidden;
					margin-left:40upx;
				}
				.b{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					margin-left:40upx;
					margin-top: 80rpx;
				}
				.num{
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #1E1E1E;
					
				}
				.priceText{
					display: flex;
					align-items: center;
					text{
						font-size: 32upx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #F21A1C;
						font-weight: bold;
					}
					
				}
			}
		}
		.totalNum{
			text-align: right;
			margin-top:70upx;
			text:first-child{
				font-size: 24upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #B7B7B7;
				
			}
			text:nth-child(2){
				font-size: 32upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #3B3B3B;
				margin:0 10upx;
				
			}
			text:nth-child(3){
				font-size: 32upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #F21A1C;
			
			}
		}
		.remark{
			background: #F8F8F8;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			padding:20upx;
			margin-top:20upx;
			.remarkTitle{
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #3B3B3B;
				
			}
			.remarkContent{
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #939393;
				margin-top:8upx;
			}
		}
		.btnGroup{
			display: flex;
			margin-top:28upx;
			flex-wrap: wrap;
			justify-content: flex-end;
			.btn{
				width: 180upx;
				height: 56upx;
				background: #FFFFFF;
				border-radius: 50px 50px 50px 50px;
				opacity: 1;
				font-size: 14px;
				line-height: 56upx;
				text-align: center;
				margin-left:12upx;
			}
			.info{
				border: 1px solid #9F9F9F;
				color: #8B8B8B;
				
			}
			.primary{
				border: 1px solid #F63116;
				color: #F83F11;
				
			}
		}
	}
}
.filterContent{
	padding:32upx;
	.filterTitle{
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #303030;
		text-align: center;
	}
	.filterItem{
		.filterItemContent{
			margin-top:40upx;
			.itemTitle{
				
				font-size: 28upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #303030;
				margin-bottom:20upx;
				
			}
			.timeContainer{
				display: flex;
				align-items: center;
				::v-deep .uni-input-wrapper{
					background: #F3F3F3;
					border-radius: 22px 22px 22px 22px;
					opacity: 1;
					text-align: center;
				}
				::v-deep .u-input__right-icon{
					display: none;
				}
				text{
					margin:16upx;
				}
			}
			.selectContainer{
				display: flex;
				.selectItem{
					flex:1;
					margin:0 10upx;
					height: 70upx;
					line-height: 66upx;
					text-align: center;
					background: #F3F3F3;
					border-radius: 22px 22px 22px 22px;
					opacity: 1;
				
					font-size: 28upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #A1A1A1;
				
				}
				.active{
					border: 1px solid #F83F11;
					color:#F21A1C;
					background-color: #fff;
				}
			}
		}
	}
	.btnGroup{
		display: flex;
		justify-content: center;
		margin-top:100upx;
		padding-bottom:60upx;
		.resetBtn{
			width: 216upx;
			height: 70upx;
			line-height: 66upx;
			background: #DBDBDB;
			border-radius: 22px 22px 22px 22px;
			opacity: 1;
		
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #585858;
			text-align: center;
			
		}
		.confrim{
			width: 216upx;
			height: 70upx;
			text-align: center;
			background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
			border-radius: 50px 50px 50px 50px;
			opacity: 1;
			line-height: 66upx;
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-left:24upx;
			
		}
	}
}
</style>