bc_wx_applet/pages/order/myOrder/myOrder.vue

<template>
	<view class="container">
		<topNavBar title="全部订单" />
		<!-- 订单状态区 -->
		<view class="state-area dflex navbar-area bg-main">
			<view class="nav-item dflex-c pos-r fs h-full" :class="{ active: tabCurrentIndex === index }"
				v-for="(item, index) in navList" :key="index" @click="tabClick(index)">
				{{ item.state }}
			</view>
		</view>
		<!-- </scroll-view> -->

		<!-- 订单轮播区 -->
		<swiper class="swiper-area w-full" :duration="0" :current="tabCurrentIndex" @change="changeTab">
			<!-- 轮播项对应订单状态 -->
			<swiper-item class="tab-content wh-full" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<!-- 滚动区 -->
				<scroll-view class="h-full" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<u-empty text="订单是空的~"
						v-if="!tabItem.loaded && (!tabItem.orderList || tabItem.orderList.length === 0)" mode="order"
						style="padding-top: 100rpx;">
					</u-empty>
					<!-- 订单列表区 -->
					<view class="margin-bottom-sm" :class="index === 0 ? 'padding-top-sm' : ''"
						v-for="(item, index) in tabItem.orderList" :key="index">
						<!-- 订单项 -->
						<view class="order-item padding bg-main border-radius">
							<view @click="todetail(item)">
								<view class="dflex-b padding-bottom-sm">
									<view class="fs-xs fwb dflex">
										<u-tag :text="item.pickupInfo.pickupType ? '堂食' : '打包'" size="mini"
											bgColor="#FFF4E4" color="#F5821F" shape="circle"
											borderColor="#FFF4E4"></u-tag>
										订单编号：{{ item.orderId }}
									</view>
									<text class="fs-xs active">
										<text v-if="item.status == 'TRADE_NO_CREATE_PAY'">待付款</text>
										<text v-else>已完成</text>
									</text>
								</view>
								<!-- 订单商品明细 -->
								<view class="goods-area dflex-b">
									<view class="pic-list dflex">
										<view v-for="(i, gindex) in item.orderItemVoList" :key="gindex"
											class="margin-right-sm">
											<image v-if="i.picUrl" mode="aspectFit" class="wh-full" :src="i.picUrl">
											</image>
											<view v-else class="pic"></view>
										</view>
									</view>
									<view class="next-detail">
										<text v-if="item.orderItemVoList">共{{item.orderItemVoList.length}}件</text>
										<u-icon name="arrow-right" size="20"></u-icon>
									</view>
								</view>

								<!-- 实付款 -->
								<view class="dflex-e padding-top-sm">
									<text class="fs-xs margin-right-xs"
										v-if="item.orderItemVoList">共{{item.orderItemVoList.length}}份商品</text>
									<text class="fs-xs margin-right-xs">实付</text>
									<text class="price ft-main">{{ item.payAmount}}</text>
								</view>
							</view>

							<!-- 订单操作区 -->
							<view class="dflex-b margin-top-sm">
								<view>
									<text class="ft-dark">更多</text>
								</view>

								<view class="dflex-e">
									<view class="dflex">
										<button class="action-btn border-radius-big bg-main"
											@click="toDelete()">取消订单</button>
										<button class="action-btn border-radius-big bg-main"
											@click="todetail(item)">订单详情</button>
										<button class="action-btn border-radius-big bg-main main-btn"
											@click="todetail(item)">去支付</button>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 上拉加载更多 -->
					<use-loadmore v-if="tabItem.orderList.length > 0 && tabItem.loaded && tabItem.hasmore"
						:type="tabItem.loadingType"></use-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navData: {},
				navList: [{
						id: 0,
						state: '全部',
						loadingType: 'more',
						orderList: [{
								order_detail: [{
									goods_img: '../../../static/x2.jpg',
									goods_name: '商品1',
									goods_name_pw: '小标题',
									goods_num: 1,
									goods_sku_name: 60,
									goods_price: 10
								}],
								order: {
									order_actural_paid: 10,
									order_refund_state: '处理中',
									state: '待发货'
								}
							},
							{
								order_detail: [{
									goods_img: '../../../static/x2.jpg',
									goods_name: '商品1',
									goods_name_pw: '小标题',
									goods_num: 1,
									goods_sku_name: 60,
									goods_price: 10
								}],
								order: {
									order_actural_paid: 10,
									state: '待发货'
								}
							}
						]
					},
					{
						id: 1,
						state: '待付款',
						loadingType: 'more',
						orderList: []
					},
					{
						id: 2,
						state: '待核销',
						loadingType: 'more',
						orderList: []
					},
					{
						id: 3,
						state: '已取消',
						loadingType: 'more',
						orderList: []
					},
					{
						id: 4,
						state: '已完成',
						loadingType: 'more',
						orderList: []
					}
				],
				reqdata: {
					page: 1,
					rows: 10
				},
				scrollLeft: 0,
				title: '全部'
			}
		},
		onLoad(e) {
			this.tabCurrentIndex = parseFloat(e.type);
			this.fatchDate()
		},
		methods: {
			async fatchDate() {
				const e = uni.getStorageSync('carl')
				const params = {
					storeId: e.id
				}
				const result = await this.$request('get', '/order/tradeOrder/queryTradeOrder', params)
				if (result) {
					console.log('result', result.rows)
					this.navList[0].orderList = result.rows
					console.log('orderList', this.navList[0].orderList)
					// this.navList[1].orderList = result.rows.filter(item => item.status == 'TRADE_NO_CREATE_PAY');
				}
			},
			loadData() {},
			// swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},

			// 点击跳转详情页面
			todetail(order) {
				console.log('order', order)
				// uni.navigateTo({
				// 	url: `/pages/user/order/order-detail?order_id=${order.order_id}`
				// });
				uni.navigateTo({
					url: `/pages/order/orderPaid/orderPaid?data=${encodeURIComponent(JSON.stringify(order))}`
				});
			},
			// 立即支付
			payment(order) {

			},
			toDelete() {
				this.$refs.uToast.show({
					type: 'default',
					title: '默认主题',
					message: "演示阶段暂时不能取消",
					position: 'center'
				})
			},
			// 删除订单
			delOrder(item) {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '删除订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});

						} else if (res.cancel) {
							console.log('点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 取消订单
			cancelOrder(item) {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '取消订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 申请退款
			torefund(data) {

			},
			// 评价
			toevaluate(item) {

			}
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		min-height: 100%;
		background: $page-color-base;
	}

	/* 订单状态区 */
	.navbar-area {
		white-space: nowrap;
	}

	.state-area {
		height: 7vh;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		z-index: 10;
		top: 0;
	}

	.nav-item {
		flex: 1;

		&.active {
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: 0;
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}

	/* 订单轮播区 */
	.swiper-area {
		height: 93vh;
	}

	/* 订单区 */
	.order-area {}

	/* 订单项 */
	.order-item {

		/* 订单商品明细区 */
		.goods-area {
			display: flex;

			image {
				width: 180rpx;
				height: 180rpx;
			}

			.right {
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}
			}
		}

		/* 操作按钮 */
		.action-btn {
			width: 156rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}

	.pic-list {
		width: calc(100% - 130upx);

		.pic {
			margin-right: 20upx;
			height: 160rpx;
			width: 160rpx;
			background-color: #EEE;
		}

		.pic:last-child {
			margin: 0;
		}
	}

	.next-detail {
		width: 130upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>