caimei-applets-caimei/pages/supplier/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.receiver}}</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.image" 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.totalAmount | 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-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text='nomoreText' />
					<!--加载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.receiver" 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 orderButton from './components/supplierListButton'//底部按钮
	import shareAlert from '../components/supplierShareAlert'	  //分享弹窗
	import modalLayer from '@/components/modal-layer'
	import empty from '@/components/empty'
	import { mapState,mapMutations } from 'vuex'
	const defaultListQuery = {
			shopId:0,
			pageNum: 1,
			pageSize: 10,
			sendOutStatus: '',	// 发货状态
			payStatus:'',		// 结算状态
			shopOrderNo:'',		// 订单编号
			receiver: '',		// 买家名称
	 }
	export default{
		components: {
			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.list && data.list.length > 0){
						this.isEmpty = false
						this.orderData = [...data.list]
						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.list)
					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(`/pages/supplier/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('/pages/supplier/deliver/deliver-record?shopOrderId='+this.btnoRderID)
						break
					case 'deliver':
						this.$api.navigateTo('/pages/supplier/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=''
			},
		},
		onShareAppMessage(res){//分享转发
			this.isShareModal = false
			if (res.from === 'button') {
				// 来自页面内转发按钮
		    }
			return {
				title: '您有订单待处理，请点击查看~',
				path: `/pages/supplier/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>