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.goods_name.split(' ')[1]+'X'+items.goods_num"
					:title="items.goods_name.split(' ')[0]"
					: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 && 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 && !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"
		 />
		<!--  <logionDialog @confirmDiaolog="confirmDiaolog" :ishow="false" @cancelDiaolog="cancelDiaolog" :showdialog="showdialog"/> -->
	</view>
</template>

<script>
	import {
		mapMutations,mapState
	} from 'vuex'
	import Dialog from '@/component/Dialog.vue'
	import logionDialog from '@/component/loginDialog.vue'
	export default{
		components: {
			Dialog,
			logionDialog
		},
		data() {
			return {
				showdialog: false,
				orderCancel:　false,
				titles:'',
				pictureUrl: this.pictureUrl,
				menu:[
					{name:'全部'},
					{name:'待支付'},
					{name:'处理中'},
					{name:'已收货'},
					{name:'已取消'},
					{name:'退款售后'}
				],
				// 要查找的订单状态 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'
			]),
		},
		onLoad() {
			uni.$emit("refehlist",()=>{
			      this.getlist();
			  })
			if(this.hasLogin) {
				this.getlist(); // 获取订单
				
		  	}else {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				})
				//this.showdialog = true;
			}
			
		},
		methods: {
			gotologion() {
				uni.navigateTo({
					url: '/pages/myCenter/logion'
				})
			},
			// 关闭弹窗
			// cancelDiaolog() {
			// 	this.showdialog = false;
			// },
			// // 确定
			// confirmDiaolog() {
			// 	this.showdialog = false;
			// 	this.getlist(); // 获取订单
			// },
			changeselect(e) {
				if(this.hasLogin) {
					  console.log(e);
					  this.active = e.target.name;
					  if(e.target.name == 0) {
						this.state = 'all';
					  }else if(e.target.name == 1) {
						this.state = 'waiting';
					  }else if(e.target.name == 2) {
						this.state = 'payed';
					  }else if(e.target.name == 3) {
						this.state = 'complete';
					  }else if(e.target.name == 4) {
						this.state = 'cancel';
					  }else if(e.target.name == 5) {
						this.state = 'refund';
					  }
					  this.getlist();	
				}else {
					uni.navigateTo({
						url: '/pages/myCenter/logion'
					})
				}
				
			},
			getlist() {
				this.request({
					url: '/v2/order/orders',
					method: 'POST',
					data: {
						state: this.state,
						page: this.page,
						page_size:　10
					},
					success: (res) => {
						this.order_list = 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.orderCancel = true;
				}
			},
			cancelDialog() {
				this.orderCancel = false;
			},
			confirmOrder() {
				this.orderCancel = false;
				this.request({
					url:'/v2/order/drop',
					method:'POST',
					data: {
						order_id: this.order_id
					},
					success: (res) => {
						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) {
				console.log("底部")
			},
			
			// 滚动时触发
			scroll(e) {
				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;
	}
	.priceClass {
		color:#303133!important;
		font-weight: 100!important;
		font-size: 36upx;
	}
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.deleChange {
		border: 1px solid #C0C4CC;
		padding: 8upx;
	}
</style>