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"
		></tui-skeleton>
		<template v-else>
			<au-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></au-custom>
			<view class="vsit-content" v-if="list.length>0">
				<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(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(visit){
				this.$api.navigateTo(`/pages/seller/club/club-visit-detail?clubId=${this.clubId}&accessDate=${visit.accessDate}&ip=${visit.ip}`)
			},
			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;
		.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>