caimei-applets-caimei/pages/seller/club/club-visit.vue

<template>
	<view class="container ">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<template v-else>
			<au-custom :navbar-data="nvabarData" @navigateBack="hanldNavigateBack"></au-custom>
			<view class="vsit-content" v-if="list.length > 0">
				<view class="list-btn" @click="handleVisitDeatil(1, visit)">重点访问页>></view>
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="list-title">{{ item.year }}年</view>
					<view class="list-main clear">
						<view
							class="list-main-item"
							v-for="(visit, vIndex) in item.data"
							:key="vIndex"
							@click="handleVisitDeatil(2, visit)"
						>
							<view class="item-le">{{ visit.monthAndDay }}</view>
							<view class="item-ri">
								<view class="item-ri-i">访问记录</view>
								<view class="item-ri-i none">{{ visit.number }}条</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="vsit-content-none" v-else>
				<image
					class="none-image"
					src="https://static.caimei365.com/app/img/bg/bg_visit_none@2x.png"
					mode=""
				></image>
				<view class="none-text">暂无数据</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			skeletonShow: true,
			clubId: 0,
			nvabarData: {
				//顶部自定义导航
				haveHome: true,
				haveBack: true,
				textColor: '#ffffff',
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '', // 导航栏 中间的标题
				textLeft: this.$store.state.isIphone
			},
			list: []
		}
	},
	filters: {},
	onLoad(option) {
		this.clubId = option.clubId
		this.getVisitList(option.clubId)
	},
	methods: {
		getVisitList(clubId) {
			this.UserService.userClubRecordList({ clubId: clubId })
				.then(response => {
					this.list = response.data
					setTimeout(() => {
						this.skeletonShow = false
					}, 500)
				})
				.catch(error => {
					console.log(error)
				})
		},
		handleVisitDeatil(type, visit) {
			if (type === 2) {
				this.$api.navigateTo(
					`/pages/seller/club/club-visit-detail?clubId=${this.clubId}&accessDate=${
						visit.accessDate
					}&ip=${visit.ip}`
				)
			} else {
				this.$api.navigateTo(`/pages/seller/club/club-visit-details?clubId=${this.clubId}`)
			}
		},
		hanldNavigateBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	width: 100%;
	height: auto;
	background-color: #f7f7f7 !important;
}
.container {
	width: 100%;
	min-height: 700rpx;
	background: url(https://static.caimei365.com/app/img/bg/bg_visit@2x.png) top center no-repeat;
	background-size: contain;
	box-sizing: border-box;
	padding: 0 24rpx;
	padding-top: 441rpx;
}
.vsit-content-none {
	width: 100%;
	min-height: 1000rpx;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 52rpx 24rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.none-image {
		width: 260rpx;
		height: 260rpx;
		margin-bottom: 20rpx;
	}
	.none-text {
		font-size: $font-size-28;
		color: #999999;
		line-height: 44rpx;
	}
}
.vsit-content {
	width: 100%;
	min-height: 1000rpx;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 52rpx 24rpx;
	box-sizing: border-box;
	position: relative;
	.list-btn {
		box-sizing: border-box;
		padding: 0 28rpx;
		line-height: 64rpx;
		background-color: #ffe6dc;
		font-size: 28rpx;
		color: #ff5b00;
		text-align: center;
		position: absolute;
		top: 52rpx;
		right: 0;
		border-radius: 32rpx 0 0 32rpx;
	}
	.list {
		width: 100%;
		height: auto;
		margin-bottom: 80rpx;
		.list-title {
			width: 100%;
			height: 58rpx;
			margin-bottom: 20rpx;
			font-size: 42rpx;
			color: #333;
		}
		.list-main {
			width: 100%;
			height: auto;
			padding: 24rpx 16rpx 24rpx 70rpx;
			box-sizing: border-box;
			position: relative;
			&::before {
				content: '';
				height: 100%;
				border-left: 2px dashed #ffa880;
				position: absolute;
				left: 37rpx;
				top: 0;
			}
			.list-main-item {
				width: 565rpx;
				height: 120rpx;
				box-sizing: border-box;
				padding: 12rpx 35rpx;
				background: url(https://static.caimei365.com/app/img/bg/bg_visit_list@2x.png) no-repeat;
				background-size: cover;
				margin-bottom: 40rpx;
				position: relative;
				border-radius: 16rpx;
				&::after {
					content: '';
					width: 40rpx;
					height: 40rpx;
					background: url(https://static.caimei365.com/app/img/bg/bg_visit_radius@2x.png) no-repeat;
					background-size: cover;
					position: absolute;
					left: -52rpx;
				}
				.item-le {
					height: 100%;
					box-sizing: border-box;
					padding-right: 30rpx;
					position: relative;
					float: left;
					line-height: 96rpx;
					font-size: 30rpx;
					text-align: center;
					color: #333333;
					&::before {
						content: '';
						width: 1px;
						height: 48rpx;
						background-color: #ccc;
						position: absolute;
						top: 24rpx;
						right: 0;
					}
				}
				.item-ri {
					height: 96rpx;
					padding-left: 48rpx;
					float: left;
					.item-ri-i {
						padding-right: 60rpx;
						line-height: 96rpx;
						font-size: 28rpx;
						text-align: center;
						color: #999;
						float: left;
						&.none {
							font-size: 30rpx;
							color: #ff5b00;
						}
					}
				}
			}
		}
	}
}
</style>