lcoco/pages/wallet/visitor.vue

<template>
	<view class="visitor flex-common-css box-sizing-border iPhone-bottom">
		<Nav title='最近访客' titleColor='#333' :rightShow='true' :rightType='2'>
			<template v-slot:right>
				<view class="add-view">
					<image src="@/static/img/wallet/add.png" mode="aspectFill"></image>
					<view class="sys-size-24 sys-color-gray-3 sys-weight-600">增加来访</view>
				</view>
			</template>
		</Nav>
		
		<view v-if="false" class="no-list sys-size-28 sys-color-gray-9">暂无访客</view>
		
		<scroll-view v-else scroll-y="true" class="list-scroll box-sizing-border" @scrolltolower="scrolltolower">
			<view class="list-home">
				<view class="list-box box-sizing-border" v-for="(item,i) in 10" :key="i">
					<view class="box-head">
						<image src="@/static/img/circle/1.png" mode="aspectFill"></image>
						<view class="head-icon" :class="true?'view-1':'view-2'">
							<uni-icons v-if="true" type="checkmarkempty" size="10" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="box-right">
						<view class="box-1">
							<view class="">
								<view class="box-name sys-size-32 sys-color-gray-3 sys-weight-600">
									WANGXIAOMI
									<image class="img-vip" src="@/static/img/wallet/vip-type.png" mode="aspectFill"></image>
									<!-- <image class="img-svip" src="@/static/img/wallet/vip-type.png" mode="aspectFill"></image> -->
								</view>
								<view class="sys-size-28 sys-color-gray-9">2小时前 8.06km</view>
							</view>
							<view class="list-h">
								<image src="@/static/img/wallet/h.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="img-list" v-if="i>5">
							<image v-for="(v,x) in 4" :key="x"
							src="@/static/img/circle/1.png" mode="aspectFill"></image>
							<view class="img-oly" v-if="4>3&&4%3!=0"></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				page:1,
				total:0,
				list:[],
			}
		},
		methods:{
			scrolltolower(){
				// 触底
			},
		},
	}
</script>

<style scoped lang="scss">
	.visitor{
		.add-view{
			width: 154rpx;
			height: 52rpx;
			background: #F2F2F2;
			border-radius: 200rpx;
			display: flex;
			align-items: center;
			line-height: 52rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin: 0 4rpx;
			}
		}
		.no-list{
			margin-top: 100rpx;
			text-align: center;
		}
		.list-scroll{
			flex: 1;
			overflow: auto;
			padding: 32rpx;
			.list-home{
				.list-box{
					margin-bottom: 40rpx;
					display: flex;
					.box-head{
						width: 112rpx;
						height: 112rpx;
						position: relative;
						margin-right: 20rpx;	
						image{
							width: 112rpx;
							height: 112rpx;
							border-radius: 50%;
						}
						.head-icon{
							position: absolute;
							right: 0;
							bottom: 0;
							z-index: 10;
							width: 25rpx;
							height: 25rpx;
							line-height: 20rpx;
							text-align: center;
							border-radius: 50%;
							border: 2rpx solid #fff;
						}
						.view-1{
							background: #FEC631;
						}
						.view-2{
							background: #4BC285;
						}
					}
					.box-right{
						flex: 1;
						.box-1{
							display: flex;
							justify-content: space-between;
							.list-h{
								width: 80rpx;
								height: 80rpx;
								background-color: #eee;
								border-radius: 50%;
								text-align: center;
								margin-top: 16rpx;
								image{
									width: 52rpx;
									height: 52rpx;
									margin-top: 14rpx;
								}
							}
							.box-name{
								display: flex;
								align-items: center;
								margin: 10rpx 0 4rpx 0;
								.img-vip{
									width: 84rpx;
									height: 28rpx;
								}
								.img-svip{
									width: 92rpx;
									height: 28rpx;
								}
							}
						}
						.img-list{
							margin-top: 18rpx;
							display: flex;
							justify-content: space-between;
							flex-flow: row wrap; 
							image{
								width: 180rpx;
								height: 180rpx;
								border-radius: 16rpx;
								margin-bottom: 8rpx;
							}
							.img-oly{
								width: 180rpx;
								height: 180rpx;
							}
						}
					}
				}
			}
		}
	}
</style>