qzw_xcx/pages/myOrder/index.vue

<template>
	<view>
		<van-tabs :active="active"  @change="changeselect" >
		  <van-tab v-for="(item, index) in menu" :name="index" :title="item.name">
		  </van-tab>
		</van-tabs>
		<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="true">
		  <view v-for="(item,index) in order_list" :key="index"   class="cart-list">
		   <view class="topTip" @click="goDetail(item.order_id)">
			   <view>
				   <image :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="item.order_amount"
					: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" v-if="item.order_state == 10">未付款</view>
				  <view class="deleChange" v-if="item.order_state == 20">催单</view>
				  <view class="deleChange" v-if="item.order_state == 20">确认收货</view> uni.navigateTo({
					url:`/pages/myOrder/paymoment?order_id=${order_id}&prices=${prices}`
				})
				  <view class="deleChange" v-if="item.order_state == 40 && item.evaluation_state == 0">去评价</view> -->
				  <view class="deleChange" @click="gopay(item)">{{item.operate}}</view> 
			   </view>
		  </view>
		
		</scroll-view> 
		<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" />
		<!--  <logionDialog @confirmDiaolog="confirmDiaolog" :ishow="false" @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/> -->
	</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 {
				isTop: false,
				ispull: true,
				showdialog: false,
				orderCancel:　false,
				titles:'',
				pictureUrl: this.pictureUrl,
				menu:[
					{name:'全部'},
					{name:'待支付'},
					{name:'处理中'},
					{name:'已收货'},
					{name:'已取消'},
					{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('getstate', (e) => {
				  console.log(e);
				  console.log("ss")
			  })
			  // 完成支付
			  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'
				})
			}
		},
		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'
				})
			},
			// 关闭弹窗
			// cancelDiaolog() {
			// 	this.showdialog = false;
			// },
			// // 确定
			// confirmDiaolog() {
			// 	this.showdialog = false;
			// 	this.getlist(); // 获取订单
			// },
			changeselect(e) {
				if(this.successlogion　&&　this.hasLogin) {
					  console.log(e);
					  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';
						this.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.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], '');
							})
						})
						this.order_list = this.order_list.concat(res.data.data.order_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], '');
							})
						})
					
						// let arr = item.goods_name.split(' ');
						// item.desarray = arr[0];
						// item.descire = arr.replace(arr[0], '');
						this.order_list = this.order_list.concat(res.data.data.order_list);
					}
				})
			},
			gopay(e) {
				console.log(e);
				let prices = e.order_amount;
				this.order_id = e.order_id;
				let order_id = e.order_id;
			
				if(e.operate == '去付款') {
					uni.navigateTo({
				      url:`/pages/myOrder/paymoment?order_id=${order_id}&prices=${prices}`
				    })
				}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}`
				});
			},
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				if(this.ispull) {
					console.log("l;ll")
					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;
	}
	.priceClass {
		color:#303133!important;
		font-size: 36upx;
		font-weight: normal!important;
	}
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.deleChange {
		border: 1px solid #C0C4CC;
		padding: 8upx;
	}
</style>