wxapp/pages/orders/orders.vue

<template>
	<view class="flex flex-direction" style="height: 100vh;">
		<u-navbar>
			<view class="flex tab-con">
				<view class="tab flex">
					<view :class="currentIndex==0?'text-white':''" @tap="chooseNav(0)">线上订单</view>
					<view :class="currentIndex==1?'text-white':''" @tap="chooseNav(1)">门店订单</view>
					<view class="current bg-red" :class="currentIndex==0?'':'moveright'"></view>
				</view>
				<!-- <view class="btn" @tap="toInvoice">开发票</view> -->
			</view>
		</u-navbar>

		<u-tabs :list="navs" :is-scroll="false" height="90" :current="orderTypeIndex" duration="0.2" bar-width="100" :bold="false"
		 active-color="red" @change="chooseTabs"></u-tabs>

		<swiper class="flex-sub" :current="orderTypeIndex" :duration="300" :indicator-dots="false" :autoplay="false" @change="changeCurrent"
		 @animationfinish="initData">
			<swiper-item v-for="(item1,index1) in navs" :key="index1">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="getOrders(orderTypeIndex)">
					<view class="flex flex-direction justify-center align-center null" v-if="item1.isNull" style="height: 60vh;">
						<image src="/static/null05.png" style="width: 300rpx;" mode="widthFix"></image>
						<view style="font-size: 28rpx;color: #AAAAAA;margin-top: 10rpx;">暂无订单</view>
					</view>
					<view class="" v-else>
						<view class="orders-box" style="padding: 10rpx 0;">
							<view v-for="(item2,index2) in item1.orders" :key="index2" style="padding: 10rpx 20rpx;">
								<navigator :url="'../orderDetail/orderDetail?orderId='+item2.id" class="order-item bg-white clear">
									<view class="order-item-top flex justify-between align-center">
										<view class="flex align-center">
											<view class="text-center text-white buy" style="">买</view>
											<view class="flex" style="font-size: 32rpx;color: #000000;">{{item2.createdAt}}<text class="cuIcon-right"
												 style="color: #ccc;"></text></view>
										</view>
										<view class="text-red" v-if="item2.status==0">未付款</view>
										<view class="text-red" v-if="item2.status==1">支付成功</view>
										<view class="text-red" v-if="item2.status==2">订单已取消</view>
										<view class="text-red" v-if="item2.status==3">订单已过期</view>
										<view class="text-red" v-if="item2.status==4">交易已完成</view>
										<view class="text-red" v-if="item2.status==5">交易已关闭</view>
									</view>
									<order-goods :goodsList="item2.goodsList"></order-goods>
									<view class="order-btn flex justify-between align-center" hover-stop-propagation>
										<view class="">
											<button v-if="item2.status==0" class="cu-btn lines-gray text-gray round" @tap.stop="cancelOrder(index2,item2.id)">取消订单</button>
											<button v-if="item2.status==1&&item2.expressStatus!=0" class="cu-btn lines-gray text-gray round" style="margin-right: 15rpx;" @tap.stop="checkExpress(item2.id)">查看物流</button>
											<button v-if="item2.status==1&&item2.expressStatus!=0" class="cu-btn lines-red text-red round" @tap.stop="confirmGet(index2,item2.id)">确认收货</button>
											<button v-if="item2.status==2||item2.status==3||item2.status==5" class="cu-btn lines-gray text-gray round" @tap.stop="deleteOrder(index2,item2.id)">删除订单</button>
											<button v-if="item2.status==4" class="cu-btn lines-gray text-gray round" @tap.stop="evaluate(index2,item2.id)">立即评价</button>
										</view>
										<view class="">共{{item2.totalGoodsCount}}件商品 总计<text class="text-red">￥{{item2.goodsTotalAmount | toFixed(2)}}</text></view>
									</view>
								</navigator>
							</view>
						</view>
						<u-loadmore :status="item1.loadStatus" margin-bottom="40" />
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				navs: [],
				nav1: ["全部", "待付款", "待发货", "待收货", "待评价"],
				nav2: ["全部", "待付款", "待自提", "待评价"],
				orderTypeIndex: 0,
				reqUrl: "",
				sendData: {},
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.type) {
				this.orderTypeIndex = parseInt(options.type)
			}
			this.setNav()
		},
		methods: {
			// 线上订单/门店订单切换
			chooseNav(i) {
				this.currentIndex = i
				this.orderTypeIndex = 0
				this.setNav()
			},
			setNav() {
				this.navs = []
				if (this.currentIndex == 0) {
					for (let i = 0; i < this.nav1.length; i++) {
						this.navs.push({
							name: this.nav1[i],
							page: 0,
							stopLoad: false,
							orders: [],
							isNull: false,
							loadStatus: "loading"
						})
					}
				} else if (this.currentIndex == 1) {
					for (let i = 0; i < this.nav2.length; i++) {
						this.navs.push({
							name: this.nav2[i],
							page: 0,
							stopLoad: false,
							orders: [],
							isNull: false,
							loadStatus: "loading"
						})
					}
				}
				this.getOrders()
			},
			//点击订单类型切换
			chooseTabs(index) {
				this.orderTypeIndex = index
			},
			//swiper切换
			changeCurrent(e) {
				this.orderTypeIndex = e.detail.current
				this.getOrders()
			},
			//一旦用户有切换swiper的动作，就把不是当前页面的数据重置
			initData() {
				console.log(this.orderTypeIndex)
				for (let i = 0; i < this.navs.length; i++) {
					if (i != this.orderTypeIndex) {
						this.navs[i].page = 0
						this.navs[i].stopLoad = false
						this.navs[i].orders = []
						this.navs[i].isNull = false
						this.navs[i].loadStatus = "loading"
					}
				}
			},
			getOrders() {
				let index = this.orderTypeIndex
				if (this.navs[index].stopLoad) {
					console.log("没有更多了。。。。。。")
					return
				}
				this.sendData = {
					userId: uni.getStorageSync("userInfo").id,
					page: this.navs[index].page,
					orderType: this.currentIndex.toString()
				}
				this.navs[index].page++
				switch (index) {
					case 0: //全部
						this.reqUrl = "/api/v1/order/list/all"
						break;
					case 1: //待付款
						this.reqUrl = "/api/v1/order/list/unpaid"
						break;
					case 2:
						if (this.currentIndex == 0) { //待发货
							this.reqUrl = "/api/v1/order/list/undelivered"
						} else if (this.currentIndex == 1) { //门店订单待自提
							this.reqUrl = "/api/v1/order/list/receipt"
						}
						break;
					case 3:
						if (this.currentIndex == 0) { //待收货
							this.reqUrl = "/api/v1/order/list/receipt"
						} else if (this.currentIndex == 1) { //门店订单待评价
							this.reqUrl = "/api/v1/order/list/unevaluated"
						}
						break;
					case 4: //待评价
						this.reqUrl = "/api/v1/order/list/unevaluated"
						break;
					default:
						break;
				}
				this.$u.post(this.reqUrl, this.sendData).then(res => {
					console.log(res.data);
					if (res.data.code == "FAIL") {
						this.$u.toast(res.data.msg);
						return
					}
					let order = res.data.data
					if (order.length == 0) {
						this.navs[index].stopLoad = true
						this.navs[index].loadStatus = "nomore"
						if (this.navs[index].page == 1) {
							console.log("没有此类订单")
							this.navs[index].isNull = true
						}
						return
					}
					//为了防止第一页商品数量不够时scrollview不能触底导致底部一直显示正在加载
					if (order.length < 5) {
						this.navs[index].loadStatus = "nomore"
					}
					this.navs[index].orders.push(...order)
					console.log(this.navs)
				});
			},
			toInvoice() {
				uni.redirectTo({
					url: "/packageA/invoice/invoice"
				})
			},
			//取消订单
			cancelOrder(index, id) {
				uni.showModal({
					title: '提示',
					content: '确认要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$u.post('/api/v1/order/cancel', {
								userId: uni.getStorageSync("userInfo").id,
								orderId: id,
							}).then(res => {
								console.log(res.data);
								if (res.data.code == "FAIL") {
									this.$u.toast(res.data.msg);
									return
								}
								this.navs[this.orderTypeIndex].orders.splice(index, 1)
								uni.showToast({
									title: "订单已取消"
								})
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//确认收货
			confirmGet(index, id) {
				uni.showModal({
					title: '提示',
					content: '确认收货吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$u.post('/api/v1/order/receipt/confirm', {
								userId: uni.getStorageSync("userInfo").id,
								orderId: id,
							}).then(res => {
								console.log(res.data);
								if (res.data.code == "FAIL") {
									this.$u.toast(res.data.msg);
									return
								}
								this.navs[this.orderTypeIndex].orders.splice(index, 1)
								uni.showToast({
									title: "已确认收货"
								})
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//删除订单
			deleteOrder(index, id) {
				uni.showModal({
					title: '提示',
					content: '确认删除该订单吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$u.post('/api/v1/order/delete', {
								userId: uni.getStorageSync("userInfo").id,
								orderId: id,
							}).then(res => {
								console.log(res.data);
								if (res.data.code == "FAIL") {
									this.$u.toast(res.data.msg);
									return
								}
								this.navs[this.orderTypeIndex].orders.splice(index, 1)
								uni.showToast({
									title: "订单已删除"
								})
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//查看物流
			checkExpress(id) {
				console.log(id)
				uni.navigateTo({
					url: "../logisticsList/logisticsList?orderId=" + id
				})
			},
			//立即评价
			evaluate() {
				this.$u.toast("暂未开放");
				return
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		width: 100vw;
	}

	.tab-con {
		.tab {
			border: 2rpx solid #DDDDDD;
			border-radius: 30rpx;
			position: relative;

			view {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-weight: 900;
				text-align: center;
			}

			.current {
				border-radius: 30rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -100;
				transition: 0.5s;
			}

			.moveright {
				transform: translateX(160rpx);
			}
		}

		.btn {
			margin-left: 10rpx;
			padding: 0 10rpx;
			line-height: 60rpx;
		}
	}

	.nav-box {
		line-height: 80rpx;
		box-shadow: 0 0 15rpx 1rpx rgba(0, 0, 0, 0.1);

		.nav-item {
			flex: 1;
			text-align: center;
			font-weight: 700;
		}

		.active {
			position: relative;
			color: red;
		}

		.active::after {
			content: "";
			position: absolute;
			bottom: 5rpx;
			width: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			height: 6rpx;
			border-radius: 3rpx;
			background-color: red;
		}
	}

	.order-item {
		padding: 25rpx;
		border-radius: 10rpx;

		.order-item-top {
			line-height: 40rpx;
			padding: 10rpx 0;

			.buy {
				font-size: 28rpx;
				background-color: #FE3E27;
				border-radius: 5rpx;
				margin-right: 10rpx;
				width: 40rpx;
			}
		}

		.order-btn {
			margin: 30rpx 0 10rpx;

			button {
				padding: 0 15rpx;
				height: 60rpx;
				font-size: 28rpx;
			}
		}
	}
</style>