zhonglxcx/zhonglmini/pages/orderlist/orderlist.vue

<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<empty v-if="list.length === 0"></empty>
				<view class="row" v-for="(row,index) in list" :key="index">
					<view class="listitem" v-if="row.orderlx==1">
						<view class="type">{{row.dh}}</view>
						<view class="type" v-if="row.order_zt>0">{{orderzttext[row.order_zt]}}</view>
						<view class="type" v-else>{{row.ztmiaos}}</view>
					</view>
					
					<view class="listitem" v-else>
						<view class="type">{{row.dh}}</view>
						<view class="type" v-if="row.order_zt>0">{{orderzttext2[row.order_zt]}}</view>
						<view class="type" v-else>{{row.ztmiaos}}</view>
					</view>
					
					<view class="listitem">
						<view class="itemtitle">下单日期</view>
						<view class="itemvaule">{{row.rq}}</view>
					</view>
					<view class="listitem">
						<view class="itemtitle">送货日期</view>
						<view class="itemvaule">{{row.dhrq}}</view>
					</view>
					<view class="listitem">
						<view class="itemtitle">商品金额</view>
						<view class="itemvaule">￥{{row.allmoney}}</view>
					</view>
			
					<view class="detail">
						<view class="number">共{{row.goodnum}}件商品</view><view class="sum">合计￥<view class="price">{{row.total}}</view></view>
						<view class="nominal"><span v-if="row.yhjine>0" style="color: red;">(优惠券 ￥-{{row.yhjine}})</span></view>
					</view>
					<view class="btns">
						<text  style="margin: 0 auto;margin-left: 0px;color: #666; font-size: 28rpx;" v-if="row.orderlx==1">支付订单</text>
						<text  style="margin: 0 auto;margin-left: 0px;color: #666; font-size: 28rpx;"  v-else>普通订单</text>
						
						<!-- <block v-if="row.orderlx==0&&(row.zt==2||row.zt==1)&&row.sh==1">
							<view class="default">审核该订单</view>
						</block>
						<block v-else-if="row.orderlx==0&&(row.zt==2||row.zt==1)">
							<view class="default" @click="qutuanh(row.dhid,row.allmoney,0)">去退货</view>
						</block> -->
						<block v-if="row.orderlx==0&&row.zt==2">
							<!-- 取消订单 -->
							<view class="pay"  @click="cancelorder(row.dhid)">取消订单</view>
						</block>
						<block v-if="row.jiad==1">
							<!-- 取消订单 -->
							<view class="pay"  @click="jiad(row.dhid)">加减单</view>
						</block>
			<!-- 			<block v-if="row.orderlx==0&&(row.zt==2||row.zt==1)">
							<view class="default" @click="qutuanh(row.dhid,row.allmoney,0)">去退货</view>
						</block> -->
						<block v-if="row.orderlx==1&&row.is_pay==1&&row.zt!=3">
							<!-- 取消订单 -->
							<view class="pay"  @click="cancelorder(row.dhid)">取消订单</view>
							<view class="pay" @tap="toPayment(row.dhid)">去付款</view>
						</block>
						<block v-if="row.orderlx==1&&row.is_pay==2&&row.order_zt!=2&&row.zt!=3">
								<view class="default" @click="sqtuik(row.dhid,row.allmoney,0)">申请退款</view>
						</block>
						<view class="default" v-if="row.goodnum>0" @click="showdetail(row.dhid)">订单明细</view>
						<view class="default" v-if="row.goodnum>0" @click="daochu(row.dhid)">导出</view>
					</view>

					<view class="btns" v-if="row.yszt==1">
						<view class="default" @click="toyans(row.dhid)">验收</view>
						<!-- <view class="default" >监督</view>
						<view class="default" >投诉</view>
						<view class="default" >评论</view> -->
					</view>				
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :maskClick="maskclose">
			<view class="dosure" @click="closeit">关闭</view>
			<view class="choosegood" :class="[product.istk?'tkgood':'']" v-for="(product,index) in detailgoodlist" :key="index">
				<view class="choosegoodimg" style="width: 15%;">
					<image  class="uni-product-image" :src="product.img"></image>
				</view>
				<view class="desc">
					<view>{{product.mc}}&nbsp;￥{{product.price}}{{product.dw}}</view>
					<view class="price">规格：{{product.gg}}</view>
					<view class="price">订货量：{{product.dinghl}}{{product.dw}}</view>
					<view class="chukl">送货量：{{product.songhl}}{{product.dw}}</view>
				</view>
				<view class="shisje">￥{{product.je}}</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import * as XLSX from '@/static/excel.js';
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				maskclose:true,
				headerPosition:"fixed",
				headerTop:"0px",
				typeText:['待付款','已付款','售后订单'],
				orderzttext:['','退款中','已退款','拒绝退款','部分退款中','部分已退款'],
				orderzttext2:['','退货中','已退货','拒绝退货','部分退货中','部分已退货'],
				orderType: ['全部','已确认','待确认','已取消'],
				fhtype:['待发货','已发货'],
				//订单列表 演示数据
				list:[],
				tabbarIndex:0,
				detailgoodlist:[],
				ispay:0,
				waitpayTime: 25,
				timerIdforgood: null,
				showcan:false
			};
		},
		onLoad(option) {
			//option为object类型，会序列化上个页面传递的参数
			//console.log("option: " + JSON.stringify(option));
			let tbIndex = parseInt(option.state);
			this.tabbarIndex = tbIndex;
			//兼容H5下排序栏位置
			// #ifdef H5
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
		},
		onPageScroll(e){
			return;
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop>=0?"fixed":"absolute";
		},
		onShow(){
			this.orderlist(this.tabbarIndex);
		},
		onUnload(){
			uni.switchTab({
				url: '/pages/user/user'
			});
			
		},
		components: {uniPopup,empty},
		methods: {
			jiad(dhid){
				uni.removeStorageSync('cartlistjiad');//移除加单购物里面的商品
				uni.navigateTo({
					url:'../orderlist/orderjiad?dhid='+dhid
				})
			},
			toyans(dhid){
				uni.navigateTo({
					url:'../orderlist/orderyans?dhid='+dhid,
				})
			},
			cancelorder(dhid){
				var that=this;
				uni.showModal({
					title: '您确认要取消订单吗？',
					content: '',
					success: (res) => {
						if (res.confirm) {
							that.delorder(dhid);
						} 
					}
				});
			},
			async delorder(dhid){
				let userinfo=uni.getStorageSync('userinfo');
				let redata=await this.$api.cancelOrder({action:'cancelOrder',userid:userinfo.uid,name:userinfo.name,dhid:dhid});
				if(redata.code==1){
					this.orderlist(this.tabbarIndex);
				}else{
					uni.showToast({
						title:redata.msg,icon:'none'
					})
				}
				uni.hideLoading();
			},
			async orderlist(type){
				uni.showLoading({
					title:'加载中...'
				})
				this.list=[];
				let userinfo=uni.getStorageSync('userinfo');
				let redata=await this.$api.orderlist2({action:'orderlist',userid:userinfo.uid,type:type});
				if(redata.code==1){
					this.list = redata.data;
					//console.log('订单列表',redata.data);
				}else{
					// uni.showToast({
					// 	title:'暂无数据',icon:'none'
					// })
				}
				uni.hideLoading();
				//console.log(redata.data,'返回订单列表')
			},
			async excel_dh(dhid)
			{
				let redata=await this.$api.daochu({action:'daochu',dhid:dhid});
				if(redata.code==1)
				{
					const fileName=redata.data.filename;
					const header = redata.data.header;
					const headerName = redata.data.headerName;
					const ExcelData = redata.data.data;
					XLSX.excel_exprot(ExcelData, header, headerName,fileName);
				}else
				{
					uni.showToast({
						title:'暂无数据',icon:'none'
					})
				}
			},
			async orderdetail(id,type){
				// let redata=await this.$api.orderdetail({action:'orderdetail',dhid:id});
				// if(redata.code==1){
				// 	this.detailgoodlist = redata.data;
				// 	console.log('订单详情',redata);
				// 	if(redata.data.length>0){
				// 		if(this.detailgoodlist.length>0){
				// 			this.$refs.popup.open()
				// 		}
				// 	}
				// }else{
				// 	uni.showToast({
				// 		title:'暂无数据',icon:'none'
				// 	})
				// }
				let redata=await this.$api.orderdetail({action:'orderdetail',dhid:id});
				if(redata.code==1){
					this.detailgoodlist = redata.data;
					if(redata.data.length>0){
						if(this.detailgoodlist.length>0){
							if(type==1){
								//去再次支付
								let tmpList=[];
								let len = this.detailgoodlist.length;
								for(let i=0;i<len;i++){
									tmpList.push(this.detailgoodlist[i]);
								}
								if(tmpList.length<1){
									uni.showToast({
										title:'请选择商品结算',
										icon:'none'
									});
									return ;
								}
								//把优惠券id和金额传过去二次支付页面进行显示，但不能进行选择优惠券，否则导致支付金额跟第一次不符合支付失败
								let yid=tmpList[0].yid;
								let yhjine=tmpList[0].yhjine
								uni.setStorage({
									key:'buylist',
									data:tmpList,
									success: () => {
										uni.navigateTo({
											url:'../orderconfirmation/orderconfirmation_twopay?dhid='+id+'&yid='+yid+"&yhjine="+yhjine
										})
									}
								})
							}else{
								this.$refs.popup.open()
							}
						}
					}
				}else{
					uni.showToast({
						title:'暂无数据',icon:'none'
					})
				}
			},
			showType(tbIndex){
				this.tabbarIndex = tbIndex;
				this.orderlist(tbIndex);
			},
			showdetail(id){
				this.orderdetail(id,0)
			},
			closeit(){
				this.$refs.popup.close()
			},
			//取消订单
			cancelOrder(dhid){
				let t=this;
				uni.showModal({
				    title: '温馨提示',
				    content: '是否删除该订单?',
				    success: function (res) {
				        if (res.confirm) {
							uni.showLoading({
								title:'正在删除...'
							})
				           t.cancelorder(dhid)
				        } else if (res.cancel) {
							//用户点击取消
				        }
				    }
				});
				
			},
			toPayment(dhid){
				//本地模拟订单提交UI效果
				this.orderdetail(dhid,1);
			},
			sqtuik(dhid,allmoney,tktype){
				//tktype 0-未发货前申请退款，1-已发货申请售后
				uni.navigateTo({
					url:'../refund/refund?dhid='+dhid+'&index='+this.tabbarIndex+'&allmoney='+allmoney+'&tktype='+tktype
				})
			},
			qutuanh(dhid,allmoney,tktype){
				//tktype 0-未发货前申请退款，1-已发货申请售后
				uni.navigateTo({
					url:'../refund/refund2?dhid='+dhid+'&index='+this.tabbarIndex+'&allmoney='+allmoney+'&tktype='+tktype
				})
			},
			wuliu(dhid){
				uni.showToast({
					title:'暂无物流',icon:'none'
				})
				// uni.navigateTo({
				// 	url:'./wuliu?dhid='+dhid
				// })
			},
			daochu(dhid)
			{
				this.excel_dh(dhid);
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f3f3f3;
}
.kfbt{
	width: 100%;
	background-color: #ffffff;
	border-radius: 65rpx;
	font-size: 22rpx;
	button::after{ border: none; }
	border: solid 1upx #ccc;
	color: #666;
	padding: 0rpx 20rpx;
}
.topTabBar{
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #f8f8f8;
	height: 80upx;
	display: flex;
	justify-content: space-around;
	.grid{
		width: 20%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #444;
		font-size: 28upx;
		.text{
			height: 76upx;
			display: flex;
			align-items: center;
			&.on{
				color: #f06c7a;
				border-bottom: solid 4upx #f06c7a;
			}
		}
		
	}
}
.order-list{
	margin-top: 80upx;
	padding-top: 20upx;
	width: 100%;
	.list{
		width: 94%;
		margin: 0 auto;
		.onorder{
			width: 100%;
			height: 50vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			image{
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			.text{
				width: 100%;
				height: 60upx;
				font-size: 28upx;
				color: #444;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.row{
			padding: 10upx 40upx;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;
			.type{
				font-size: 26upx;
				color: #ec652f;
				height: 50upx;
				display: flex;
				align-items: center;
			}
			.listitem{
				display: flex;
				justify-content: space-between;
				.itemtitle{
					font-size: 25upx;
					color: #A7A7A7;
				}
				.itemvaule{
					font-size: 28upx;
					color: #5A5A5A;
				}
				.itemvaule_mx{
					font-size: 25upx;
					color: #A7A7A7;
				}
			}
			.detail{
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				height: 60upx;
				font-size: 24upx;
				.sum{
					padding: 0 8upx;
					display: flex;
					align-items: flex-end;
					.price{
						font-size: 30upx;
					}
				}
				
			}
			.btns{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view{
					min-width: 120upx;
					height: 50upx;
					padding: 0 2upx;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26upx;
					margin-left: 20upx;
				}
				.default{
					border: solid 1upx #ccc;
					color: #666;
				}
				.pay{
					border: solid 1upx #ec652f;
					color: #ec652f;
				}
			}
		}
	}
}
.tip{
		color: #008001;
		margin-bottom: 15rpx;
	}
	.tkgood{
		filter: grayscale(90%);
	}
	.choosegood{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 1px;
		padding-bottom: 15upx;
		border-bottom: 1upx solid #E8E8E8;
	}
	.desc{
		font-size: 25upx;
		width: 45%;
	}
	.price{
		color: #7E7E7C;
		padding-top: 20rpx;
	}
	.chukl{
		color: #6C9850;
		padding-top: 20rpx;
	}
	.istk{
		color: #C1C1C1;
		padding-top: 20rpx;
	}
	.shisje{
		color: #DB2C21;
		padding-top: 20rpx;
	}
	.choosegoodimg image{
		width: 150rpx;
		height: 150rpx;
	}
.dosure{
		position: absolute;
		right: 25upx;
		top: 20upx;
	}
</style>