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">
				<!-- 空白页 -->
				<use-empty v-if="tabItem.orderList.length === 0 && tabItem.loaded" e-style="round" e-type="cart"
					tip="订单数据为空" height="93vh"></use-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.order)">
							<view class="dflex-b padding-bottom-sm">
								<view class="fs fwb dflex">
									<u-tag text="自提" size="mini" bgColor="#FFF4E4" color="#F5821F" shape="circle" borderColor="#FFF4E4"></u-tag>
									订单编号：M000003332
								</view>
								<text class="fs active">等待付款</text>
							</view>
							<!-- 订单商品明细 -->
							<view class="goods-area dflex-b">
								<view class="pic-list dflex">
									<view class="pic"></view>
									<view class="pic"></view>
									<view class="pic"></view>
								</view>
								<view class="next-detail">
									<text>共3件</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">共3件</text>
								<text class="fs-xs margin-right-xs">共6份商品</text>
								<text class="fs-xs margin-right-xs">实付</text>
								<text class="price ft-main">{{ item.order.order_actural_paid}}</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">取消订单</button>
									<button class="action-btn border-radius-big bg-main">订单详情</button>
									<button class="action-btn border-radius-big bg-main main-btn">去支付</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>
	
	</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: []
					},
					{
						id: 5,
						state: '已关闭',
						loadingType: 'more',
						orderList: []
					}
				],
				reqdata: {
					page: 1,
					rows: 10
				},
				scrollLeft: 0,
				title: '全部'
			}
		},
		methods: {
			loadData(){},
			// swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			
			// 点击跳转详情页面
			todetail(order) {
				// uni.navigateTo({
				// 	url: `/pages/user/order/order-detail?order_id=${order.order_id}`
				// });
				uni.navigateTo({
					url: `/pages/order/orderDetail/orderDetail`
				});
			},
			// 立即支付
			payment(order) {

			},
			// 删除订单
			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();
					}
				});
			},
			// 查看物流
			toexpress(item) {
				// uni.navigateTo({
				// 	url: `/pages/user/order/order-express?order_id=${item.order.order_id}`
				// });
			},
			// 已发货
			toreceipt(item) {
				let _this = this;
			
				uni.showModal({
					title: '提示',
					content: '确认收货',
					success: function(res) {
						if (res.confirm) {
							
						} 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>