sct/pagesT/Distribution/DOrder.vue

<template>
	<view style="height: 100vh">
		<view class="content">
			<view class="navbar">
				<view
					v-for="(item, index) in navList"
					:key="index"
					class="nav-item"
					:class="[ tabCurrentIndex === index?'current primary-color':'']"
					@click="tabClick(item, index)"
				>
					{{ item.text }}
					<view class="current-line primary-btn"></view>
				</view>
			</view>

			<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
					<scroll-view @scrolltolower="scrollBootom" scroll-y="true" style="height:100%">
						<Aempty text="您还没有相关订单" src="https://onlineimg.qianniao.vip/order.png" v-if="orderList.length === 0"></Aempty>
						<view v-for="(item, index) in orderList" :key="index" class="order-item">
							<view class="clearfix order-no-view" @click="goPage(`/pagesT/Distribution/DorderDetail?id=` + item.id)">
								<text class="float_left order-no-text">{{ $_utils.formatDate(item.createTime) }}</text>
								<text class="float_right order-status-text">
									{{
										item.orderStatus === 1
											? '待付款'
											: item.orderStatus === 2
											? '待付款'
											: item.orderStatus === 3
											? '待发货'
											: item.orderStatus === 4
											? '待收货'
											: item.orderStatus === 5
											? '已完成'
											: item.orderStatus === 6
											? '已关闭'
											: ''
									}}
								</text>
							</view>
							<view class="goods-ul">
								<view
									class="goods-li clearfix"
									v-for="(it, gindex) in item.orderGoods"
									:key="gindex"
									@click="goPage(`/pagesT/Distribution/DorderDetail?id=` + item.id)"
								>
									<image class="goods-img float_left" :src="it.goodsImages" mode="aspectFit"></image>
									<view class="float_right goods-right">
										<view class="goods-name">{{ it.goodsName }}</view>
										<view class="goods-descrip">
											规格：
											<text style="padding-right: 6upx;">{{ it.unitName }}</text>
											<block v-for="(ip, indexSp) in it.specGroup" :key="indexSp">
												<text v-if="indexSp > 0">-</text>
												<text>{{ ip.specValueName }}</text>
											</block>
										</view>
										<view class="goods-price clearfix">
											<view class="float_left">
												<text class="price primary-color">¥{{ it.price }}</text>
												<!-- <text class="sku">/{{ it.unitName }}</text> -->
											</view>
											<view class="float_right">
												<text class="icon-jia">*</text>
												<text class="goods-num">{{ it.buyNum }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="middle clearfix">
								<view class="float_left money-view">
									{{ text_set.commission || '佣金' }}：
									<text class="primary-color">¥{{ item.retMoney }}</text>
								</view>
								<view class="float_right">
									实付：
									<text class="price primary-color">￥{{ item.payAmount }}</text>
								</view>
							</view>
						</view>
						<u-loadmore margin-top="20" v-if="orderList.length" :status="loading_status" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList: [],
			tabCurrentIndex: 0,
			state: 1,
			loading_status: 'loadmore',
			navList: [
				{
					state: 0,
					text: '全部',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 2,
					text: '待付款',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 3,
					text: '待发货',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 4,
					text: '待收货',
					loadingType: 'more',
					orderList: []
				},
				{
					state: 5,
					text: '已完成',
					loadingType: 'more',
					orderList: []
				}
			],
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			text_set: {}
		};
	},

	onLoad(options) {
		this.state = 0;
		this.text_set = this.$store.state.distributionTextSet;
		if (this.text_set.commission_r) {
			uni.setNavigationBarTitle({
				title: this.text_set.distribution_order || '分销订单'
			});
		}
	},
	onShow() {
		this.getOrderSelect();
	},
	methods: {
		scrollBootom() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getOrderSelect();
			}
		},
		// 获取订单列表
		getOrderSelect() {
			// this.orderList = [];
			const params = {
				page: this.page,
				pageSize: this.pageSize
			};
			if (this.state) {
				params.orderStatus = this.state;
			}
			this.loading_status = 'loading';
			this.$u.api
				.getCommissionOrder({
					...params
				})
				.then(data => {
					if (this.page === 1) {
						this.orderList = data.data;
					} else {
						this.orderList = this.orderList.concat(data.data);
					}
					this.pageTotal = data.pageTotal;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
				});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.page = 1;
			switch (this.tabCurrentIndex) {
				case 0:
					this.state = 0;
					break;
				case 1:
					this.state = 2;
					break;
				case 2:
					this.state = 3;
					break;
				case 3:
					this.state = 4;
					break;
			}
			this.orderList = [];
			this.getOrderSelect();
		},
		//顶部tab点击
		tabClick(item, index) {
			this.tabCurrentIndex = index;
			this.state = item.state;
			// this.getOrderSelect()
		}
	}
};
</script>

<style lang="scss">
.order-item {
	margin: 24upx 0;
	// padding: 0 30upx;
	background-color: #fff;

	.order-no-view {
		font-size: 24upx;
		padding: 24upx 30upx;
		color: #666;
		font-weight: 300;
		border-bottom: 1upx solid #eee;
		.order-status-text {
			font-weight: 500;
		}
	}

	.goods-li:last-child {
		margin-bottom: 0;
	}

	.goods-li {
		background: #fafafa;
		padding: 30upx 20upx;
		margin-bottom: 20upx;

		.goods-img {
			width: 180upx;
			height: 180upx;
		}

		.goods-right {
			width: 500upx;
			margin-left: 20upx;

			.goods-name {
				color: #333;
				font-size: 32upx;
				margin-bottom: 19upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.goods-descrip {
				font-size: 22upx;
				color: #999;
				margin-bottom: 28upx;
				// font-weight: 300;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.goods-price {
				.price {
					color: $price-color;
					font-size: 40upx;
				}

				.sku {
					font-size: 22upx;
					font-weight: 300;
					color: #666;
				}

				.icon-jia {
					color: #666;
					font-size: 24upx;
				}

				.goods-num {
					font-size: 24upx;
				}
			}
		}
	}
}

.middle {
	font-size: 24upx;
	position: relative;
	padding: 24upx 30upx;
	.money-view {
		color: #444;
		.price {
			font-size: 32upx;
			font-weight: bold;
			color: $price-color;
		}
	}
}

.btnS {
	padding: 0 28upx;
	line-height: 60upx;
	color: #6e6e6e;
	font-size: 24upx;
	text-align: center;
	margin-right: 10upx;
	height: 60upx;
	background: rgba(241, 241, 241, 1);
	// box-shadow: 0px 2upx 14upx 0px rgba(0, 0, 0, 0.1);
	border-radius: 40upx;
}

.btnSAdd {
	padding: 0 28upx;
	line-height: 60upx;
	color: #ffffff;
	font-size: 24upx;
	text-align: center;
	height: 60upx;
	border-radius: 40upx;
}
.content {
	background: $page-color-base;
	height: 100vh;
}

.swiper-box {
	height: calc(100% - 80upx);
}

.list-scroll-content {
	height: 100%;
}

.navbar {
	display: flex;
	height: 88upx;
	background: #fff;
	position: relative;
	z-index: 10;
	border-bottom: 1upx solid #eee;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #666666;
		position: relative;
		font-weight: 300;

		&.current {
			// color: $uni-color-primary;
			font-weight: 500;
			font-size: 32upx;

			.current-line {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 10upx;
				transform: translateX(-50%);
				width: 40upx;
				height: 6upx;
				background: $base-btn-bg;
				border-radius: 6upx;
				/*border-bottom: 2px solid #F53C28;*/
			}
		}
	}
}
</style>