BlockChainH5/pages/store/visitors.vue

<template>
	<view class="content">
		<!-- tabs -->
		<view class="tabs">
			<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日访客</view>
			<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月访客</view>
			<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年访客</view>
		</view>
		<!-- 统计信息 -->
		<view class="statistics">
			<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
				<view class="statistics-date">
					{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
				</view>
			</picker>
			<view class="statistics-text">
				<text>访客量 {{visitor.factor}} 人</text>
				<text>累计访客量 {{visitor.all}} 人</text>
			</view>
		</view>
		<!-- 数据列表 -->
		<block v-if="orders.length > 0">
			<view class="lists">
				<view class="item" v-for="(item, index) in orders" :key="index">
					<image class="cover" :src="item.avatar" mode="aspectFill"></image>
					<view class="title">{{item.nickname || '-'}}</view>
					<view class="sub-title">访问记录: {{item.content || '-'}}</view>
					<view class="sub-title">手机号码: {{item.mobile || '-'}}</view>
					<view class="sub-title">访问时间: {{item.date || '-'}}</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="list-null">
				<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
				<view class="sub-title">暂无相关访客记录</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { visitors } from '@/apis/interfaces/store'
	import getDate from '@/public/date'
	export default {
		data() {
			return {
				tabsIndex: 'day',
				dateValue: '',
				endDate	 : '',
				visitor	 : {
					factor: 0,
					all: 0
				},
				orders	: []
			};
		},
		created() {
			getDate().then(res => {
				this.dateValue = res
				this.endDate   = res
				this.getLists()
			})
		},
		methods:{
			// tabs筛选
			onTbas(type){
				getDate(type).then(res => {
					this.tabsIndex = type
					this.dateValue = res
					this.getLists()
				})
			},
			// 日期筛选
			pickerDate(e){
				let dateValue = e.detail.value
				this.dateValue = dateValue
				this.getLists()
			},
			// 获取列表
			getLists(){
				visitors({
					type: this.tabsIndex,
					date: this.dateValue
				}).then(res => {
					console.log(res)
					this.visitor = res.total
					this.orders  = res.lists.data
					this.pages   = res.lists.page
				}).catch(err => {
					uni.showToast({
						title: err,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	// 空提示
	.list-null{
		width: 100vw;
		height: 40vh;
		background: white;
		text-align: center;
		@extend .vertical;
		.sub-title{
			color: $text-gray;
			font-size: $title-size-m;
			@extend .nowrap;
		}
		.icon{
			width: 288rpx;
		}
	}
	// content
	.content{
		padding-top: 80rpx;
	}
	// tabs
	.tabs{
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		background: white;
		justify-content: space-around;
		line-height: 80rpx;
		font-size: $title-size-m;
		color: $text-gray;
		.item.show{
			color: $text-price;
			font-weight: bold;
		}
	}
	// 统计信息
	.statistics{
		margin-top: $margin;
		background-color: white;
		border-bottom: solid 1rpx $border-color;
		padding: $padding;
		.statistics-date{
			font-size: $title-size + 4;
			font-weight: bold;
			line-height: 60rpx;
			.arrowdown{
				margin-left: $margin/2;
			}
		}
		.statistics-text{
			font-size: $title-size-sm;
			color: gray;
			line-height: 50rpx;
			text{
				margin-left: $margin;
				&:first-child{
					margin: 0;
				}
			}
		}
	}
	// 客户列表
	.lists{
		padding: $padding/2 0;
		background: white;
		.item{
			padding: ($padding/2) $padding ($padding/2) ($padding*2 + 68);
			position: relative;
			min-height: 68rpx;
			&::after{
				position: absolute;
				left: $padding*2 + 68;
				top: 0;
				right: 0;
				content: ' ';
				border-bottom: solid 1rpx $border-color;
			}
			&:first-child::after{
				display: none;
			}
			.cover{
				position: absolute;
				left: $padding;
				top: $padding/2;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				background: #eee;
			}
			.title{
				position: relative;
				line-height: 58rpx;
				font-size: $title-size-lg;
			}
			.sub-title{
				line-height: 40rpx;
				font-size: $title-size-sm;
				color: $text-gray;
			}
		}
	}
</style>