qzw_xcx/pages/myOrder/index.vue

<template>
	<view>
		<view class="header">
			<van-tabs :active="active" @change="changeselect">
<!-- 				<view v-for="(item, index) in menu" :key="index">
					<van-tab v-if="num.waiting_count>0&&index==1" :name="index"  :info="num.waiting_count" :title="item.name"></van-tab>
					<van-tab v-if="num.payed_count>0&&index==2" :name="index"  :info="num.payed_count" :title="item.name"></van-tab> -->
					<van-tab v-for="(item, index) in menu" :key="index" :name="index" :info="num[index]" :title="item.name"></van-tab>
				<!-- </view> -->
			</van-tabs>
		</view>
		<van-skeleton :loading="loading">
			<scroll-view
				v-if="order_list.length > 0"
				style="height:100vh;margin-top: 88upx;"
				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: 160upx 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: 160upx 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: [],
			num:[],
		};
	},
	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();
	},
	onShow(){
		this.getNum();
	},

	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: {
		getNum(){
			this.request({
				url:'/v1/order/statistics',
				method:'GET',
				success: (res)=>{
					this.$nextTick(function(){
						var data=res.data.data;
						var waiting_count=data.waiting_count>0? data.waiting_count:null;
						var payed_count=data.payed_count>0? data.payed_count:null;
						this.num=[null,waiting_count,payed_count,null,null];
					})
				}
			})
		},
		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);
					console.log(this.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>
.header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #fff;
}	
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;
	padding: 0 2px !important;
}
</style>