qzw_xcx/pages/myOrder/index.vue

<template>
	<view>
		<van-tabs :active="active"  @change="changeselect" style="width: 20%!important;">
		  <van-tab v-for="(item, index) in menu" :name="index" :key="index" :title="item.name">
		  </van-tab>
		</van-tabs>
		<van-skeleton  :loading="loading">
		<scroll-view  v-if="order_list.length > 0" style="height: 95vh;" class="floor-list"
		  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		 :refresher-enabled="false">
		  <view v-for="(item,index) in order_list" :key="index"  class="cart-list">
		   <view class="topTip" @click="goStore(item.store_id)">
			   <view>
				   <image v-if="item.store_avatar" :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar" style="border-radius: 50%;
				   width: 50upx;height: 50upx;vertical-align: middle;"></image>
				  <span style="padding-left: 16upx;">{{item.store_name}}</span>
			   </view>
			   <view style="color: #D9332E;font-size: 24upx;">{{item.status}}</view>
		   </view>
		   
		   <view  @click="goDetail(item.order_id)" v-for="(items,indexs) in item.goods"  :key="indexs" class="shoplist" style="background-color: #fff;">
			  <view>
				  <van-card
					title-class="changewidth"
					price-class ="priceClass"
					:price="items.goods_pay_price"
					:desc="items.descire+'X'+items.goods_num"
					:title="items.desarray"
					:thumb="pictureUrl + '/uploads/home/store/goods/'+items.goods_image.substr(0, items.goods_image.indexOf('\_')) + '/' + items.goods_image"
				  >
				  </van-card>
			  </view>
		   </view>
			   <view class="topTip">
				  <view style="font-size: 28upx;">合计：{{item.order_amount}}</view>
				  <view class="deleChange"  @click="gopay(item)" v-if="item.order_state == 10">去付款</view>
				  <view class="deleChange"  @click="gopay(item)" v-if="item.order_state == 20&&item.shipping_type==0">催单</view>
				  <view class="deleChange"  @click="gopay(item)" v-if="item.order_state == 20&&item.shipping_type!=0">联系酒店</view>
				  <view class="deleChange"  @click="gopay(item)" v-if="item.order_state == 30">确认收货</view> 
				  <view class="deleChange"  @click="gopay(item)" v-if="item.order_state == 40 && item.evaluation_state == 0">去评价</view>
			   </view>
		  </view>
		  <view v-if="ispull"  class="fontcenter">加载中...</view>
		  <view v-if="!ispull" style="padding: 20upx 0;" class="fontcenter">只有这么多订单啦</view>  
		</scroll-view> 
		 </van-skeleton>
		<view  v-if="order_list.length == 0 && successlogion && hasLogin" >
			  <view style="margin: 120upx auto;text-align: center;">
					<van-icon size="160rpx" color="#909399" name="description" />
					<view style="text-align: center;color: #909399;"> 去买点什么</view>
			  </view>
		</view>
		<view  v-if="order_list.length == 0 && !successlogion || order_list.length == 0 && !hasLogin" >
			  <view style="margin: 120upx auto;text-align: center;">
					<van-icon size="160rpx" color="#909399" name="description" />
					<view style="text-align: center;color: #909399;">
					<span style="color: #F76260;" @click="gotologion">请先登录</span></view>
			  </view>
		</view>
		<!-- 催单 -->
		<Dialog  :orderCancel="orderCancel"
		    :titles="titles"
		    @colseDialog="cancelDialog" 
		    @confirmPay="confirmOrder"
		 />
		 <Gobacktop @getop="getop" v-if="isTop" />
	</view>
</template>

<script>
	import {
		mapMutations,mapState
	} from 'vuex'
	import Dialog from '@/component/Dialog.vue'
	import Gobacktop from '@/component/Gobacktop.vue'
	export default{
		components: {
			Dialog,
			Gobacktop
		},
		data() {
			return {
				firstloading: 0,
				loading: true,
				isTop: false,
				ispull: true,
				showdialog: false,
				orderCancel:　false,
				titles:'',
				pictureUrl: this.pictureUrl,
				menu:[
					{name:'全部'},
					{name:'待支付'},
					{name:'处理中'},
					{name:'已收货'},
					{name:'已取消'},
					// s{name:'退款售后'}
				],
				deleteorder: 0, // 判断删除订单还是确认收货
				// 要查找的订单状态 all-全部 waiting-待支付 payed-处理中 complete-已收货 cancel-已取消 refund-退款售后
				active: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				order_id:'',
				page: 1,
				page_size:　10,
				state: 'all',
				order_list:[]
			}
		},
		computed:{
			...mapState([
			  'hasLogin',
			  'userInfo',
			  'successlogion'
			]),
		},
		onLoad(a) {
			 uni.$on("refehlist",()=>{
				  this.order_list = [];
			      this.getlist();
			  })
			
			  uni.$on("finshlist",()=>{
				  this.page = 1;
			  	  this.order_list = [];
			      this.getlist();
			   })
			 
			  // 完成评价 
			  uni.$on("finshesitmate",()=>{
				   this.page = 1;
				   this.order_list = [];
			       this.getlist();
			   })
			if(this.successlogion &&　this.hasLogin) {
				this.getlist(); // 获取订单
		  	}else {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				})
			}
		},
		onUnload() {
			uni.$off();
		},
		
		watch:{
			'successlogion':function(val) {
			   if(val) {
				  this.active = 0;
				  this.getlist(); 
			   }else {
				  uni.navigateTo({
				  	url: '/pages/myCenter/logion'
				  })
			   }
			},
			'hasLogin':function(val) {
			   if(val) {
				  this.active = 0;
				  this.getlist(); 
			   }else {
				  uni.navigateTo({
				  	url: '/pages/myCenter/logion'
				  })
			   }
			},
			
		},
		methods: {
			getop() {
			        this.scrollTop = this.old.scrollTop
			                this.$nextTick(function(){
			                    this.scrollTop=0;
			                });
			        this.isTop = false;
			      },
			gotologion() {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				})
			},
			changeselect(e) {
				if(this.successlogion　&&　this.hasLogin) {
					  this.active = e.target.name;
					  this.page = 1;
					  this.ispull = true;
					  this.order_list = [];
					  if(e.target.name == 0) {
						this.state = 'all';
						this.getlist();
					  }else if(e.target.name == 1) {
						this.state = 'waiting';
						this.getlist();
					  }else if(e.target.name == 2) {
						this.state = 'payed';
						this.getlist();
					  }else if(e.target.name == 3) {
						this.state = 'complete';
						this.getlist();
					  }else if(e.target.name == 4) {
						this.state = 'cancel';
						this.getlist();
					  }
					  if(e.target.name == 5) {
					  	this.state = 'refund';
					  }
				}else {
					uni.navigateTo({
						url: '/pages/myCenter/logion'
					})
				}
				
			},
			
			// 订单退款售后列表
			refund() {
				this.request({
					url: '/v3/order/refund_list',
					method: 'POST',
					data: {
						state: this.state,
						page: this.page,
						page_size:　10
					},
					success: (res) => {
						if(res.data.data.refund_list.length< 10) {
							this.ispull = false;
						}
						res.data.data.refund_list.forEach((item,index) => {
								let arr = item.goods_name.split(' ');
								item.desarray = arr[0];
								item.descire = item.goods_name.replace(arr[0], '');
						})
						this.order_list = this.order_list.concat(res.data.data.refund_list);
					}
				})
			},
			// 订单列表
			getlist() {
				this.request({
					url: '/v2/order/orders',
					method: 'POST',
					data: {
						state: this.state,
						page: this.page,
						page_size:　10
					},
					success: (res) => {
						if(res.data.data.order_list.length< 10) {
							this.ispull = false;
						}
						res.data.data.order_list.forEach((item,index) => {
							item.goods.forEach(items => {
								let arr = items.goods_name.split(' ');
								items.desarray = arr[0];
								items.descire = items.goods_name.replace(arr[0], '');
							})
						})
					    if(this.firstloading == 0) {
					    	this.loading = false;
					    }
					    this.firstloading = 1;
						this.order_list = this.order_list.concat(res.data.data.order_list);
					}
				})
			},
			gopay(e) {
				let store_id = e.store_id;
				let prices = e.order_amount;
				this.order_id = e.order_id;
				let order_id = e.order_id;
			    let isform = 1;
				if(e.operate == '去付款') {
					uni.navigateTo({
				      url:`/pages/myOrder/paymoment?order_id=${order_id}&prices=${prices}
					  &isform=${isform}&store_id=${store_id}`
				    })
				}else if(e.operate == '删除') {
					this.titles = '确认删除订单？'
					this.deleteorder = 1;
					this.orderCancel = true;
				}else if(e.operate == '催单') {
					let a = 1;
					uni.navigateTo({
							url:`/pages/myOrder/reminder?order_id=${order_id}&a=${a}`
					})
				}else if(e.operate == '确认收货') {
					this.deleteorder = 2;
					this.titles = '确认收货？'
					this.orderCancel = true;
				}else if(e.operate == '去评价') {
					uni.navigateTo({
							url:`/pages/myOrder/estimate?order_id=${order_id}`
					})
					
				}else if(e.operate == '联系酒店') {
					let a = 2;
					uni.navigateTo({
							url:`/pages/myOrder/reminder?order_id=${order_id}&a=${a}`
					})
				}
			},
			cancelDialog() {
				this.orderCancel = false;
			},
			confirmOrder() {
				// 删除订单 确认收货
				this.orderCancel = false;
				let url = this.deleteorder == 1?'/v2/order/drop':'/v2/order/confirm';
				this.request({
					url: url,
					method:'POST',
					data: {
						order_id: this.order_id
					},
					success: (res) => {
						this.order_list = [];
						this.page = 1;
						this.ispull = true;
						this.getlist();
					}
				})
			},
			goDetail(e) {
				let order_id = e; 
				uni.navigateTo({
				        url: `/pages/myOrder/order?id=${order_id}`
				});
			},
			goStore(e) {
				let id = e; 
				 uni.navigateTo({
				       url: `/pages/index/hotel?id=${id}`
				 });
			},
			upper(e) {
			},
			
			// 滚到底部
			lower(e) {
				if(this.ispull) {
					this.page += 1;
					this.getlist();
				}
				
			},
			
			// 滚动时触发
			scroll(e) {
				if(e.detail.scrollTop > 400) {
				          this.isTop = true;
				        }else{ //当距离小于500时显示回到顶部按钮
				          this.isTop = false;
				        }
				
				        this.old.scrollTop = e.detail.scrollTop
			}
		}
		
	}
</script>
  
<style>
	page {
		background-color: #F5F5F5;
	}
	.cart-list {
		background-color: #fff;
		border-top: 12upx solid #F5F5F5;
	}
		
	.topTip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 36upx;
		border-bottom: 1px solid #F5F5F5;
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
	}
		
	.van-card__desc {
		font-size: 25rpx;
		color: #999!important;
		padding-top: 10rpx;
	}
	
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.deleChange {
		border: 1px solid #C0C4CC;
		padding: 8upx;
	}
		
	.van-tab {
		flex-basis: 20%!important;
	}
</style>