jhlapp/pagesT/customer/components/CustomerOrder.vue

<template>
	<view class="rigth-view">
		<scroll-view scroll-y class="order_ul" @scrolltolower="scrollTolowerHandel">
			<view class="order_li" v-for="(item, index) in order_list" :key="index" @click="goPage(`/pages/order/orderInfo?userCenterId=${item.userCenterId}&id=${item.id}`)">
				<view class="order_time clearfix">
					<view class="float_left">
						<view class="tag-circleRight">
							<image v-if="item.orderMsg === '待审核'" src="../../../static/img/ic-audit.png" class="img"></image>
							<image v-else-if="item.orderMsg === '已关闭'" src="../../../static/img/ic-Closed.png" class="img"></image>
							<image v-else-if="item.orderMsg === '已出库'" src="../../../static/img/ic-stock.png" class="img"></image>
							<image v-else-if="item.orderMsg === '已完成'" src="../../../static/img/ic-Completed.png" class="img"></image>
							<image v-else-if="item.orderMsg === '待出库'" src="../../../static/img/ic-delivered.png" class="img"></image>
							<image v-else src="../../../static/img/ic-delivered.png" class="img"></image>
						</view>
					</view>

					<view class="float_left text ellipsis">{{ item.shopName }}</view>
					<viwe class="float_right time">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</viwe>
				</view>
				<view class="order_bottom">
					<view class="order_params">
						订单编号
						<text class="right-txt">{{ item.no }}</text>
					</view>
					<view class="order_params clearfix">
						<text class="float_left">
							订单来源
							<text class="right-txt">{{ item.sourceMsg }}</text>
						</text>
					</view>
					<view class="order_params clearfix">
						<text class="float_left">
							业务员
							<text class="right-txt">{{ item.salesManName || '未分配' }}</text>
						</text>
						<view class="float_right" style="color: #FA6400;font-weight: bold;font-size: 28rpx;"><text style="font-weight: 300;font-size: 24rpx;">￥</text>{{ item.payAmount }}</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="order_list.length" :status="load_status" />
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		userCenterId: {
			type: [Number, String],
			default: ''
		}
	},
	data() {
		return {
			order_list: [],
			page: 1,
			pageSize: 10,
			total: 0,
			load_status: 'nomore'
		};
	},
	created() {
		this.getAllOrder();
	},
	methods: {
		scrollTolowerHandel() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllOrder();
			}
		},
		// 订单列表
		getAllOrder() {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize,
				search: {
					userCenterId: this.userCenterId
				}
			};
			this.$u.api.getAllOrder(params).then(res => {
				if (this.page === 1) {
					this.order_list = res.data;
				} else {
					this.order_list = this.order_list.concat(res.data);
				}
				this.order_list = this.order_list.map(item => {
					return {
						...item,
						goods_list: item.goods_list || []
					};
				});
				this.load_status = this.$utils.loadStatus(this.page, this.pageSize, res.pageTotal);
				this.total = res.pageTotal;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.rigth-view {
	background-color: rgb(247, 248, 250);
	.order_ul {
		width: 100%;
		height: calc(90vh - 226rpx);

		.order_li {
			margin: 24rpx 20rpx 0;
			padding: 0 24rpx 30rpx;
			background-color: #ffffff;
			// padding-top: 16rpx;
			border-radius: 14rpx;

			.money-text {
				color: $uni-color-error;
				margin: 0 4rpx;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 30rpx;
			}

			.order_time {
				// background-color: #f7f8fa;
				height: 80rpx;
				line-height: 80rpx;

				.img {
					width: 126rpx;
					height: 40rpx;
					// margin-left: 24rpx;
					vertical-align: middle;
				}

				// .txt {
				// 	font-size: 28rpx;
				// 	font-weight: 500;
				// 	// margin-left: 110rpx;
				// 	// vertical-align: middle;
				// }

				// .custom-icon-jinru {
				// 	font-size: 28rpx;
				// 	margin-left: 10rpx;
				// }

				.tag-circleRight {
					// line-height: 40rpx;
					height: 40rpx;
					// background-color: $uni-color-primary;
					// color: #ffffff;
					// font-size: 24rpx;
					// display: inline-block;
					width: 126rpx;
					// text-align: center;
					// border-radius: 0 100rpx 100rpx 0;

					// text {
					// 	font-size: 28rpx;
					// 	font-weight: bold;
					// 	margin-left: 4rpx;
					// }
				}
				.text {
					font-size: 30rpx;
					color: #2d405e;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					margin-left: 24rpx;
					margin-top: 4rpx;
					width: 180rpx;
				}
				.time {
					font-size: 24rpx;
					color: #b8c0c8;
					font-family: DINPro-Regular;
					font-weight: 400;
					margin-top: 4rpx;
				}
			}

			.order_info {
				padding: 30rpx;
				font-size: 24rpx;
				border-bottom: 1px solid #f7f8fa;
			}

			.remarks {
				background-color: #f1f1f1;
				padding: 0 30rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.order_tip {
				margin-left: 0rpx;
				color: #333333;
				height: 89rpx;
				vertical-align: middle;
				padding: 25rpx 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 195, 149, 0.1) 100%);

				.txst {
					font-size: 28rpx;
					font-weight: 500;
					color: #2d405e;
				}
			}

			.order_pip {
				margin-left: 0rpx;
				color: #333333;
				height: 89rpx;
				vertical-align: middle;
				padding: 25rpx 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(246, 119, 120, 0.1) 100%);

				.txst {
					font-size: 28rpx;
					font-weight: 500;
					color: #2d405e;
				}
			}

			.order_bottom {
				// padding: 30rpx;
				// margin-left: 40rpx;
				font-size: 22rpx;
				margin-top: 4rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #62738e;

				.order_params {
					margin-bottom: 8rpx;
					// color: #999999;

					.right-txt {
						// font-size: 28rpx;
						// font-weight: 400;
						// color: #2D405E;
						margin-left: 30rpx;
					}

					.float_right {
						// color: #333333;
					}
				}

				.printing-btn {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;

					.custom-icon-dayin {
						// font-size: 30rpx;
					}
				}

				.btn {
					display: flex;
					justify-content: center;
					margin-top: 30rpx;

					.btn_some {
						width: 200rpx;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						border-radius: 6rpx;
					}

					.btn_examine {
						border: 1px solid #2979ff;
						color: #2979ff;
					}

					.btn_order {
						border: 1px solid #999999;
						color: #999999;
						margin-left: 30rpx;
					}
				}
			}
		}
	}
}

// .log-scroll {
// 	height: 100vh;
// }
// .order-ul {
// 	.order-li {
// 		padding: 20rpx 0;
// 		padding-left: 80rpx;
// 		position: relative;
// 		border-bottom: 1px solid #eeeeee;
// 		.icon {
// 			position: absolute;
// 			left: 20rpx;
// 			top: 20rpx;
// 		}
// 		.customer {
// 			padding-bottom: 10rpx;
// 			.float_left {
// 				font-size: 32rpx;
// 				font-weight: bold;
// 			}
// 		}
// 		.other {
// 			font-size: 22rpx;
// 			line-height: 40rpx;
// 			.float_right {
// 				font-size: 26rpx;
// 				font-weight: bold;
// 				color: $uni-color-error;
// 			}
// 		}
// 	}
// }
</style>