jhlapp/pagesT/customer/components/Visitslogs.vue

<template>
	<view class="rigth-view">
		<scroll-view scroll-y="true" class="rigth-scroll" @scrolltolower="scrolltolowerMore">
			<view class="log-li" v-for="(item, index) in visit_logs" :key="index">
				<view class="goods-name">
					{{ item.goodsName }}
				</view>
				<view class="time">
					{{ $u.timeFormat(item.createTime, 'mm-dd hh:MM:ss') }}
				</view>
			</view>
			<!-- <view class="goods-li" v-for="(item, index) in visit_logs" :key="index">
				<view class="goods-main clearfix">
					<image class="goods-img float_left" src="../../../static/Tar_bar_slices/goods-fill.png" mode="aspectFill"></image>
					<view class="goods-info float_left ">
						<view class="goods-name clearfix ellipsis">
							<view class="ellipsis float_left" style="width: 350rpx;">{{ item.goodsName }}</view>
							<view class="float_right browse">
								<view class="float_left browse-left">浏览</view>
								<view class="float_left browse-center"></view>
								<view class="float_left browse-right">323S</view>
							</view>
						</view>
						<view class="goods-code">库存：114329</view>
						<view class="goods-code">
							<view class="num-ul clearfix">
								<view class="num-li" style="margin-right: 32rpx;">购买价格：212.00</view>
								<view class="num-li">购买数量：20</view>
								<view class="num-li price">
									<text style="font-weight: 300;">￥</text>
									1230123213.78
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-view clearfix">
					<view class="float_left ellipsis shop-name">浏览店铺名称</view>
					<view class="float_right time">浏览时间：{{ $u.timeFormat(item.createTime, 'mm-dd hh:MM:ss') }}</view>
				</view>
			</view> -->
			<u-loadmore :status="load_status" />
		</scroll-view>
	</view>
</template>

<script>
export default {
	props: {
		customerId: {
			type: [Number, String],
			default: '',
		}
	},
	data() {
		return {
			load_status: 'nomore',
			visit_logs: [],
			page: 1,
			pageSize: 10,
			total: 0
		};
	},
	created() {
		this.getCustomerVisitsLogInfo();
	},
	methods: {
		scrolltolowerMore() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getCustomerVisitsLogInfo();
			}
		},
		// 浏览记录
		getCustomerVisitsLogInfo() {
			this.$u.api
				.getAllCustomerVisitsLog({
					customerId: parseInt(this.customerId),
					page: this.page,
					pageSize: this.pageSize,
				})
				.then(({ data }) => {
					if (this.page === 1) {
						this.visit_logs = data;
					} else {
						this.visit_logs = this.visit_logs.concat(data);
					}
					this.total = 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 - 100rpx);
		.goods-li {
			width: 710rpx;
			margin: 24rpx auto;
			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 {
						-webkit-line-clamp: 1;
						color: #2d405e;
						font-size: 30rpx;
						font-weight: 500;

						.browse {
							.browse-left {
								border-radius: 8rpx 0 0 8rpx;
								width: 64rpx;
								height: 40rpx;
								background-color: #2d405e;
								font-size: 20rpx;
								color: #ffffff;
								line-height: 40rpx;
								text-align: center;
							}

							.browse-center {
								width: 0;
								height: 0;
								border-color: #2d405e #4076d6 transparent transparent;
								border-style: solid;
								border-width: 40rpx 10rpx 0 0;
							}

							.browse-right {
								border-radius: 0 8rpx 8rpx 0;
								width: 76rpx;
								height: 40rpx;
								background-color: #4076d6;
								font-size: 20rpx;
								color: #ffffff;
								line-height: 40rpx;
								text-align: center;
							}
						}
					}

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

					.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-li{
	background-color: #FFFFFF;
	padding: 24rpx;
	width: 710rpx;
	margin: 24rpx auto;
	border-radius: 8px;
	.goods-name{
		color: #2d405e;
		font-size: 30rpx;
		font-weight: 500;
	}
	.time{
		padding-top: 20rpx;
		font-size: 24rpx;
	}
}
</style>