caimei-applets-caimei/supplier/pages/order/order-list.vue

<template>
	<view class="container mine clearfix">
		<view class="tui-header-box first">
			<view class="tui-header-search" @click.stop="rDrawer">
				<view class="inner">
					<text class="iconfont icon-sousuo"></text>
					<view class="input">筛选我的订单</view>
				</view>
			</view>
		</view>
		<view class="user-section">
			<view  :class="{'tui-order-list':scrollTop >= 0}" class="clearfix">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AcewRAAEtqt4jZmU397.png"></image>
					<text class="error-text">暂无数据^_^</text>
				</view>
				<!-- 列表 -->
				<view v-else class="tui-order-content">
					<view  class="tui-order-item" v-for="(order,orderIndex) in orderData" :key="orderIndex"  @click.stop="detail(order.shopOrderID)">
						<view class="order-title">
							<view class="order-title-n">
								<view class="order-title-name">收货人：{{order.userInfo.shouHuoRen}}</view>
								<view class="order-title-phone">手机号：{{order.userInfo.mobile}}</view>
							</view>
							<view class="order-title-t first">
								<view class="order-title-num">订单编号：{{ order.shopOrderNo }}</view>
								<view class="order-title-tip">结算状态：{{ order.payStatus | payStatusType }}</view>
							</view>
							<view class="order-title-t">
								<view class="order-title-num">下单时间：{{ order.orderTime }}</view>
								<view class="order-title-tip">发货状态：<text class="status">{{ order.sendOutStatus | sendOutStatusType }}</text></view>
							</view>
						</view>
						<view class="order-product">
							<view class="goods-pros-t clearfix" v-for="(pros,prosIndex) in order.orderProductList" :key="prosIndex">
								<view class="pros-product">
									<view class="pros-product-img">
										<image :src="pros.productImage" mode=""></image>
									</view>
									<view class="pros-product-msg">
										<view class="name">{{ pros.name }}</view>
										<view class="unit">规格：{{ pros.productUnit }}</view>
										<view class="price">
											<view class="red">¥{{ pros.price | NumFormat}}</view>
											<view class="count"><text class="small">X</text> {{ pros.num }}</view>
										</view>
										<view class="number">
											<text>已发货：{{ pros.shipmentsNum }}</text>
											<text v-if="order.returnedNum!=null&&order.returnedNum!=0">已退货：{{ pros.actualCancelNum }}</text>
											<text v-if="order.returnedNum!=null&&order.returnedNum!=0">取消：{{ pros.actualCancelNum }}</text>
										</view>
									</view>
								</view>
								<view class="pros-product-uss">合计：<text class="text">¥{{ pros.price | NumFormat}}</text></view>
							</view>
						</view>
						<!-- 底部button -->
						<order-button ref="orderButton" 
									  :status="order.sendOutStatus"
									  :orderInfo ="order"
									  @buttonConfirm="handButtonConfirm">
						</order-button>
					</view>
					<!--加载loadding-->
					<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
					<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
					<!--加载loadding-->
				</view>
			</view>
		</view>	
		<!--右抽屉-->
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<view class="d-container clearfix" :style="{paddingTop:20+'px'}">
				<view class="d-label">订单编号:</view>
				<view class="d-input">
					<input class="input" type="text" value="" v-model="listQuery.shopOrderNo" placeholder="输入订单编号"/>
				</view>
				<view class="d-label">收货人姓名:</view>
				<view class="d-input">
					<input class="input" type="text" value="" v-model="listQuery.name" placeholder="输入收货人姓名"/>
				</view>
				<view class="d-label">结算状态:</view>
				<view class="d-input">
					<picker @change="bindPickerChange($event)" :value="index" :range="StatusArray" range-key="name">
						<input class="input" type="text" disabled="false" v-model="showSendOutStatus" value="" placeholder="请选择结算状态"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-label">发货状态:</view>
				<view class="d-input">
					<picker @change="bindPickerChange1($event)" :value="index" :range="PayArray" range-key="name">
						<input class="input" type="text" disabled="false" v-model="showpayStatus" value="" placeholder="请选择发货状态"/>
						<text class="iconfont icon-xiangyou"></text>
					</picker>
				</view>
				<view class="d-input btn">
					<view class="d-btn comfrim" @click="handSearchList">确定</view>
					<view class="d-btn clear" @click="handSearchClear">重置</view>
				</view>
			</view>
		</tui-drawer>
		<!-- 分享弹窗 -->
		<share-alert  :shopOrderID="btnoRderID"
					  v-if="isShareModal"  
					  @shareConfirm ='onShareAppMessage'>
		</share-alert>		
	</view>
</template>
<script>
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	import orderButton from '@/components/cm-module/orderDetails/supplierListButton'//底部按钮
	import shareAlert from '@/components/cm-module/modelAlert/supplierShareAlert'	  //分享弹窗
	import modalLayer from "@/components/modal-layer"
	import empty from "@/components/empty";
	import { mapState,mapMutations } from 'vuex'
	const defaultListQuery = {
			shopID:'',
			pageNum: 1,
			pageSize: 10,
			sendOutStatus: '',//发货状态
			payStatus:'',//结算状态
			shopOrderNo:'',//订单编号
			name: '',//买家名称
	 };
	export default{
		components: {
			tuiLoadmore,
			tuiNomore,
			empty,
			shareAlert,
			orderButton
		},
		data() {
			return{	
				StatusArray:[
					{name:'所有',value:'0'},
					{name:'待发货',value:'1'},
					{name:'部分发货',value:'2'},
					{name:'已发货',value:'3'},
				],
				PayArray:[
					{name:'所有',value:'0'},
					{name:'待结算',value:'1'},
					{name:'部分结算',value:'2'},
					{name:'已结算',value:'3'},
				],
				shopID:0,
				showSendOutStatus:'',
				showpayStatus:'',
				CustomBar:this.CustomBar,// 顶部导航栏高度
				userID:0,
				openId:'',
				isShareModal:false,
				listQuery:Object.assign({}, defaultListQuery),
				orderData: [],
				btnoRderID: 0, //点击按钮传入的的订单ID
				scrollTop: 0,
				deteleType:'',
				skeletonShow: true,
				isEmpty: false,
				isDelete:false,
				isModalLayer: false,
				loadding: false,
				pullUpOn: true,
				pullFlag: true,
				hasNextPage: false,
				navbarHeight:'',
				nomoreText: '上拉显示更多',
				contentModalText:'',//操作文字提示语句
				modal:false,
				rightDrawer: false,
				OperationType:'',//操作类型
			}
		},
		onLoad(){
			
		},
		filters: {
			sendOutStatusType(value) {
				if (value === null) {
				  return '未发货';
				} else if(value === '1') {
				  return '待发货';
				} else if(value === '2') {
				  return '部分发货';
				} else{
				  return '已发货';
				}
			},
			payStatusType(value) {
				if (value === '1') {
				  return '待结算';
				} else if (value === '2') {
				  return '部分结算';
				} else {
				  return '已结算';
				}
			},
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			getOrderDatainit(index){
				this.listQuery.pageNum = 1
				this.ShopService.GetSupplierMyOrderList(this.listQuery).then(response =>{
					let data = response.data
					this.hasNextPage = data.hasNextPage
					if(data.results && data.results.length > 0){
						this.isEmpty = false;
						this.orderData = [...data.results];
						if(hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							if(this.orderData.length < 5){
								this.pullUpOn = true
							}else{
								this.pullUpOn = false
								this.nomoreText = '已至底部'
							}
						}
					}else{
						this.isEmpty = true
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			}, 
			getOnReachBottomData(index){//上拉加载
				this.listQuery.pageNum += 1
				this.ShopService.GetSupplierMyOrderList(this.listQuery).then(response =>{
					let data = response.data
					this.hasNextPage = data.hasNextPage
					this.orderData = this.orderData.concat(data.results)
					this.pullFlag = false;// 防上拉暴滑
					setTimeout(()=>{this.pullFlag = true;},500)
					if(this.total > this.orderData.length){
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					}else{
						this.loadding = false
						this.pullUpOn = false
						this.nomoreText = '已至底部'
					}
				})	
			},
			detail(shopOrderId) {//订单详情跳转
				this.isModalLayer = true;	
				this.$api.navigateTo(`/supplier/pages/order/order-details?shopOrderId=${shopOrderId}`)
			},
			handButtonConfirm(data) {//获取点击
				console.log(data)
				this.btnoRderID = data.orderInfo.shopOrderID
				console.log(this.btnoRderID )
				this.OperationType = data.type
				this.handShowAlert(data)
			},
			handShowAlert(data){//判断点击的按钮类型并执行...
				switch(data.type){
					case 'record':
						this.$api.navigateTo('/supplier/pages/deliver/deliver-record?shopOrderId='+this.btnoRderID)
						break
					case 'deliver':
						this.$api.navigateTo('/supplier/pages/deliver/deliver-goods?shopOrderId='+this.btnoRderID)
						break
				}
			},
			rDrawer() {//弹出抽屉
				this.rightDrawer = true;
			},
			closeDrawer(e) {//关闭抽屉
				this.leftDrawer = false;
				this.rightDrawer = false;
			},
			bindPickerChange: function(e) {//选择结算状态筛选
				this.showSendOutStatus = this.StatusArray[e.target.value].name
				this.listQuery.sendOutStatus = this.StatusArray[e.target.value].value
			},
			bindPickerChange1: function(e) {//选择发货状态筛选
				this.showpayStatus = this.PayArray[e.target.value].name
				this.listQuery.payStatus = this.PayArray[e.target.value].value
			},
			handSearchList(){//搜索
				this.getOrderDatainit()
				this.leftDrawer = false;
				this.rightDrawer = false;
			},
			handSearchClear(){//重置搜索条件
				this.listQuery = Object.assign({}, defaultListQuery)
				this.listQuery.shopID = this.shopID
				this.showSendOutStatus='';
				this.showpayStatus='';
				this.listQuery.shopOrderNo='';
				this.listQuery.name='';
			},
		},
		onShareAppMessage(res){//分享转发
			this.isShareModal = false
			if (res.from === 'button') {
				// 来自页面内转发按钮
		    }
			return {
				title: '您有订单待处理，请点击查看~',
				path: `/supplier/pages/login/share-info?authority=3&shopOrderId=${this.btnoRderID}`,
				imageUrl:'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
			}
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.getOnReachBottomData()
			}	
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.listQuery.pageNum = 1
				this.listQuery.payStatus=''
				this.listQuery.showSendOutStatus=''
				this.getOrderDatainit()
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShow(){
			this.$api.getComStorage('userInfo').then((resolve) =>{
				this.listQuery.shopID = this.shopID = resolve.shopID
				this.getOrderDatainit()
			})
		}	
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background:#F7F7F7;
	}
	.d-container {
		width: 560rpx;
		padding: 80rpx 30rpx;
		.d-title{
			width: 100%;
			height:80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #4688fa;
			font-size: $font-size-32;
			float: left;
		}
		.d-time{
			width: 100%;
			height: 70rpx;
			float: left;
			box-sizing: border-box;
			padding: 0 10rpx;
			border: 1px solid rgba(0,0,0,0.2);
			border-radius: 4rpx;
			margin-bottom: 30rpx;
			.iconfont{
				width:70rpx;
				height: 60rpx;
				display: block;
				float: left;
				font-size: 50rpx;
				color: #666666;
				line-height: 70rpx;
				text-align: left;
			}
			.input{
				width: 220rpx;
				height: 70rpx;
				line-height: 70rpx;
				float: left;
				box-sizing: border-box;
				font-size: $font-size-24;
				color: #333333;
				padding: 0 10rpx;
			}
		}
		.d-label{
			width: 100%;
			height: 44rpx;
			line-height: 44rpx;
			text-align: left;
			color: #666666;
			font-size: $font-size-26;
			float: left;
		}
		.d-input{
			width: 100%;
			height: 70rpx;
			float: left;
			box-sizing: border-box;
			padding: 0 10rpx;
			border: 1px solid rgba(0,0,0,0.2);
			border-radius: 4rpx;
			margin-bottom: 30rpx;
			position: relative;
			&.btn{
				border: none;
				margin-top: 40rpx;
			}
			.input{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				float: left;
				box-sizing: border-box;
				font-size: $font-size-24;
				color: #333333;
				padding: 0 10rpx;
				padding-right: 68rpx;
			}
			.iconfont{
				width: 50rpx;
				height: 68rpx;
				display: block;
				line-height: 68rpx;
				text-align: center;
				font-size: 30rpx;
				color: #999999;
				position: absolute;
				right: 0;
				top: 0;
			}
			.d-btn{
				width: 210rpx;
				height: 84rpx;
				border-radius: 42rpx;
				background: $btn-confirm;
				line-height: 84rpx;
				text-align: center;
				font-size: $font-size-26;
				color: #FFFFFF;
				float: right;
				&.comfrim{
					background: $btn-confirm;
					margin-left: 20rpx;
				}
				&.clear{
					background: #e1e1e1;   
				}
			}
		}
	}
	.tui-header-box {
		width: 100%;
		height: 84rpx;
		box-sizing: border-box;
		padding:10rpx 24rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #FFFFFF;
		.tui-header-search{
			width: 100%;
			height: 100%;
			background: #F7F7F7;
			border-radius: 32rpx;
			position: relative;
			.inner{
				width: 210rpx;
				margin: 0 auto;
				.icon-sousuo{
					width: 64rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					display: block;
					font-size: $font-size-38;
					float: left;
					color: #999999;
				}
				.input{
					height: 64rpx;
					float: left;
					line-height: 64rpx;
					color: #999999;
					font-size: $font-size-24;
				}
			}
		}
	}
	.tui-header {
		width: 100%;
		font-size: 16px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 0 40rpx;
	}
	.user-section{
		width: 100%;
		padding-top: 94rpx;
	}
	.tui-order-content{
		width: 100%;
		height: auto;
	}
	.tui-order-list {
		width: 100%;
		position: relative;
	}
	.tui-order-item {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding:20rpx 24rpx 0 24rpx;
		background: #fff;
		border-bottom: 20rpx solid #F7F7F7;
		box-sizing: border-box;
	}
	.order-title{
		width: 100%;
		height: auto;
		.order-title-n{
			width: 100%;
			height: 70rpx;
			float: left;
			font-size: $font-size-28;
			line-height: 70rpx;
			border-bottom: 1px solid #e1e1e1;
			.order-title-name{
				float: left;
				text-align: left;
				color: $text-color;
			}
			.order-title-phone{
				float: right;
				text-align: right;
				font-size: $font-size-28;
				color: $text-color;
			}
		}
		.order-title-t{
			width: 100%;
			height: 50rpx;
			float: left;
			font-size: $font-size-28;
			line-height: 50rpx;
			&.first{
				padding-top: 20rpx;
			}
			.order-title-num{
				float: left;
				text-align: left;
				color: #666666;
			}
			.order-title-tip{
				float: right;
				text-align: right;
				font-size: $font-size-28;
				color: #666666;
				.status{
					color: $color-system;
				}
			}
		}
		.order-title-b{
			width: 100%;
			height: 40rpx;
			float: left;
			margin-top: 8rpx;
			font-size: $font-size-28;
			line-height: 40rpx;
			color: #999999;
			text-align: left;
		}
	}
	.order-product{
		width: 100%;
		height: auto;
		float: left;
		margin-top: 15rpx;
		.goods-pros-t{
			width: 100%;
			height: auto;
			padding: 15rpx 0;
			border-bottom: 1px solid #e1e1e1;
			.pros-product{
				width: 100%;
				height: 184rpx;
				float: left;
				.pros-product-img{
					width: 182rpx;
					height: 182rpx;
					border:1px solid #e1e1e1;
					border-radius: 6rpx;
					float: left;
					margin-right: 17rpx;
					image{
						width: 182rpx;
						height: 182rpx;
						display: block;
						border-radius: 6rpx;
					}
				}
				.pros-product-msg{
					width: 500rpx;
					height: 184rpx;
					float: left;
					.name{
						width: 100%;
						height: auto;
						float: left;
						font-size: $font-size-28;
						line-height: 38rpx;
						color: $text-color;
						text-align: left;
						white-space: normal;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.unit{
						width: 100%;
						float: left;
						height: 38rpx;
						font-size: $font-size-22;
						color: #999999;
						line-height: 38rpx;
					}
					.price{
						width: 100%;
						float: left;
						height: 38rpx;
						font-size: $font-size-28;
						color: #666666;
						line-height: 38rpx;
						.red{
							color: #f94b4b;
							float: left;
							font-weight: bold;
						}
						.count{
							float: right;
							.small{
								font-size: $font-size-20;
							}
						}
					}
					.number{
						width: 100%;
						float: left;
						height: 38rpx;
						font-size: $font-size-24;
						color: #999999;
						line-height: 38rpx;
						text{
							margin-right: 30rpx;
						}
					}
				}
			}
			.pros-product-uss{
				width: 100%;
				float: left;
				height: 44rpx;
				font-size: $font-size-28;
				color: #999999;
				line-height: 44rpx;
				text-align: right;
				font-weight: bold;
				text{
					color: #f94b4b;
					margin-left: 10rpx;
				}
			}
		}
	}
	.order-footer{
		width: 100%;
		height: 78rpx;
		float: left;
		border-bottom: 1px solid #EFEFEF;
		.order-footer-top{
			width: 100%;
			height: 34rpx;
			line-height: 34rpx;
			font-size: $font-size-24;
			color: #999999;
			text-align: right;
		}
		.order-footer-bot{
			width: 100%;
			float: left;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $font-size-28;
			color: #999999;
			.name{
				width: 50%;
				float: left;
				text-align: left;
			}
			.money{
				width: 50%;
				float: right;
				text-align: right;
				.txt{
					color: #FF5000;
				}
			}
		}
	}
</style>