jhlapp/pagesT/customer/components/BuyLogs.vue

<template>
	<view class="rigth-view">
		<scroll-view scroll-y="true" class="rigth-scroll" @scrolltolower="moreGoods">
			<view class="goods-li" v-for="(item, index) in buy_logs" :key="index">
				<view class="goods-main clearfix">
					<image class="goods-img float_left" :src="item.goodsImages" mode="aspectFill"></image>
					<view class="goods-info float_left ">
						<view class="goods-name ellipsis">{{ item.goodsName }}</view>
						<view class="goods-code">购买规格：{{ item.unitName }}</view>
						<view class="goods-code">
							<view class="num-ul">
								<view class="num-li" style="margin-right: 32rpx;">购买价格：{{ item.price }}</view>
								<view class="num-li">购买数量：{{ item.buyNum }}</view>
								<view class="num-li price">
									<text style="font-weight: 300;">￥</text>
									<text style="font-size: 28rpx;">{{item.totalMoney}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-view clearfix">
					<view class="float_left ellipsis shop-name">{{ item.goodsCode }}</view>
					<view class="float_right time">购买时间：{{ $u.timeFormat(item.createTime, 'mm-dd hh:MM:ss') }}</view>
				</view>
			</view>
			<u-loadmore v-if="buy_logs.length" :status="load_status" />
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		userCenterId: {
			type: [Number, String],
			default: ''
		}
	},
	data() {
		return {
			load_status: 'nomore',
			page: 1,
			pageSize: 10,
			buy_logs: [],
			total: 0
		};
	},
	created() {
		this.searchCustomerBuyLog();
	},
	methods: {
		moreGoods() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.searchCustomerBuyLog();
			}
		},
		searchCustomerBuyLog() {
			this.load_status = 'loading';
			this.$u.api
				.searchCustomerBuyLog({
					page: this.page,
					pageSize: this.pageSize,
					userCenterId: this.userCenterId
				})
				.then(res => {
					if (this.page === 1) {
						this.buy_logs = res.data;
					} else {
						this.buy_logs = this.buy_logs.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.rigth-view {
	background-color: rgb(247, 248, 250);

	.rigth-scroll {
		width: 100%;
		height: calc(90vh - 200rpx);

		.goods-li {
			margin: 24rpx 20rpx 0;
			background-color: #ffffff;
			border-radius: 8px;
			position: relative;

			.bottom-view {
				padding: 0 24rpx;
				line-height: 86rpx;
				border-top: 1px solid #ecf0f7;
				.shop-name {
					font-weight: 600;
				}
				.time {
					color: #b8c0c8;
				}
			}
			.goods-main {
				padding: 27rpx 0 20rpx 24rpx;
				.goods-img {
					border-radius: 14rpx;
					width: 126rpx;
					height: 126rpx;
					margin-right: 16rpx;
				}

				.goods-info {
					width: 530rpx;

					.goods-name {
						color: #2d405e;
						font-size: 30rpx;
						font-weight: 600;
					}

					.goods-code {
						margin-top: 8rpx;
						width: 100%;
						font-size: 22rpx;
						font-family: DINPro-Regular;
						font-weight: 400;
						color: #62738e;
					}

					.goods-tag {
						padding: 10rpx 0;

						.tag-li {
							margin-right: 14rpx;
						}
					}

					.goods-num {
						color: #999999;
						font-size: 22rpx;

						text {
							padding-right: 10rpx;
						}
					}
				}
			}

			.num-ul {
				.num-li {
					float: left;
					&.price{
						font-weight: 600;
						float: right;
						color: #FA6400;
					}
				}
			}
		}
	}
}

// .log-scroll {
// 	height: 100vh;
// }
// .logs-ul {
// 	.logs-li {
// 		padding: 20rpx 0;
// 		border-bottom: 1px solid #eeeeee;
// 		.goods-img {
// 			position: relative;
// 			width: 100rpx;
// 			height: 100rpx;
// 			border-radius: 20rpx;
// 			overflow: hidden;
// 			margin-right: 20rpx;
// 			image {
// 				width: 100%;
// 				height: 100%;
// 				display: block;
// 			}
// 		}
// 		.goods-info {
// 			width: 460rpx;
// 			.date-time {
// 				font-size: 22rpx;
// 			}
// 			.other-info {
// 				padding-top: 10rpx;
// 				display: flex;
// 				flex-wrap: wrap;
// 				font-size: 22rpx;
// 				.info-li {
// 					width: 50%;
// 					display: inline-block;
// 					color: #6c6c6c;
// 				}
// 			}
// 		}
// 		.float_right {
// 			.look-btn {
// 				font-size: 20rpx;
// 				width: 118rpx;
// 				line-height: 40rpx;
// 				height: 40rpx;
// 				text-align: center;
// 				color: #ffffff;
// 				background-color: $uni-color-primary;
// 				border-radius: 6rpx;
// 				margin: 20rpx auto;
// 			}
// 		}
// 	}
// }
</style>