capture.vue

<template>
	<view>
		<headerComp
		  :leftImgSrc="leftImg"
		  :title="titleStr"
		  :rightImgSrc="rightImg"
		  @leftClick="backFun"
		  @rightClick="conditionFun"></headerComp>
		<view class="prefix-elem"></view>
		<view class="capture-main">
			<view class="capture-item" v-for="(item, index) in captureList" :key="item.pic">
				<view class="capture-image">
					<!-- <span class="capture-date">{{ item.counttime }}</span> -->
					<!-- <image class="capture-img" ref="imageRef" :src="item.pic" @error="imageError" :lazy-load="true" mode="widthFix"></image> -->
					<image class="capture-img" :class="{lazy:!item.show}" :data-index="index" @load="imageLoad" :src="item.show ? item.pic : ''" />
					<image class="capture-img placeholder" :class="{loaded:item.loaded}" :src="placeholderSrc" />
				</view>
				<view class="capture-info">
					<text>时间: {{ item.counttime }}</text>
				</view>
				<view class="capture-info">
					<span class="capture-text__left">{{ item.age }}岁</span>
					<span class="capture-text__right">{{ genderFormatter(item.gender) }}性</span>
				</view>
				<view class="capture-info">
					<span class="capture-text__left">{{ personTypeFormatter(item.personType) }}</span>
					<span class="capture-text__right">{{ moodFormatter(item.mood) }}</span>
				</view>
			</view>
		</view>
		<view class="pagination-wrapper" v-show="captureList.length > 0">
			<uniPagination
				:current="pagination.current"
				:total="pagination.total"
				:pageSize="pagination.pageSize"
				@change="paginationChangeHandle">
			</uniPagination>
		</view>
		
		<!-- <view class="uni-loadmore" v-if="showLoadMore">{{ loadMoreText }}</view> -->
	</view>
</template>

<script>
	import headerComp from '../../../components/header.vue'
	import leftImg from '../../../static/header/backArrow.png'
	import rightImg from '../../../static/header/other.png'
	import defaultImg from '../img/default.png'
	import defaultMaleImg from '../img/male.png'
	import defaultFemaleImg from '../img/female.png'
	import { mapState } from 'vuex'
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	
	export default {
		components: {
			headerComp,
			uniPagination
		},
		data() {
			return {
				titleStr: '抓拍记录',
				leftImg: leftImg,
				rightImg: rightImg,
				curCustomDate: [],	// 当前自定义事件
				captureList: [],
				pagination: {
					total: 0,
					current: 1,
					pageSize: 40
				},
				canLoadGateId: false,
				capturePersonType: {},
				showLoadMore: false,	// 无限加载
				itemMax: 0,
				loadMoreText: '加载中...',
				placeholderSrc: defaultImg,
				windowHeight: 0
			}
		},
		onUnload() {
// 			this.itemMax = 0,
// 			this.loadMoreText = "加载更多",
// 			this.showLoadMore = false;
		},
		onLoad(options) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			if(options.type) {
				this.canLoadGateId = true;
			}
			this.capturePersonType = this.getStorage('capturePersonType');
			this.apiDics('mood');
			this.apiDics('gender');
			this.apiDics('personType');
			this.getCaptureList();
		},
		onPageScroll() {
			this.load();
		},
		onReachBottom() {
// 			if(this.itemMax >= this.pagination.total) {
// 				this.loadMoreText = "没有更多数据了!"
// 				return;
// 			}
// 			this.showLoadMore = true;
// 			setTimeout(() => {
// 				this.getCaptureList()
// 			}, 300)
		},
		created() {
			if(!this.checkedMallId) {	// 处理刷新获取参数失败
				this.$store.dispatch('malls/getMallList', {
					data: {
						accountId: this.getStorage('accountId'),
						_t:Date.parse(new Date()) / 1000
					},
					header: {
						'Authorization': this.getStorage('atoken') //自定义请求头信息
					},
					isMultiple: true
				})
			}
			if(!this.selectedStartTime || !this.selectedEndTime) {
				this.$store.dispatch('malls/getDateData', 15);
			}
		},
		computed: {
			...mapState({
				checkedMallId: state => state.malls.checkedMallId,
				checkedGateId: state => state.malls.checkedGateId,
				selectedStartTime: state => state.malls.startDayTime,
				selectedEndTime: state => state.malls.endDayTime
			})
		},
		watch: {
			checkedMallId(val) {
				this.$store.dispatch('malls/getGateList', {
					data: {
						mallId: val.id,
						status: 1,
						isHasFace: 1,
						_t:Date.parse(new Date()) / 1000
					},
					header: {
						'Authorization': this.getStorage('atoken') //自定义请求头信息
					},
					isMultiple: true
				})
				this.getCaptureList();
			},
		},
		methods: {
			backFun() {
				uni.reLaunch({
					url:"../passenger",
				})
			},
			getCaptureList() {
				if(!this.checkedMallId && !this.selectedStartTime && !this.selectedEndTime) return;
				// console.log('getCaptureList:', this.checkedMallId, this.checkedGateId)
				let atoken = this.getStorage('atoken');
				this.captureList = [];
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: window.url + '/faceRecognitions',
					data: {
						counttime_gte: `${this.selectedStartTime} 00:00:00`,
						counttime_lte: `${this.selectedEndTime} 23:59:59`,
						accountId: this.getStorage('accountId'),
						mallId: this.checkedMallId.id,
						gateId: this.canLoadGateId
							? this.checkedGateId
								? this.checkedGateId.id
								: ''
							: '',
						personType: this.capturePersonType.value || '',
						age_gt: 0,
						direction: 1,
						page: this.pagination.current,
						pageSize: this.pagination.pageSize,
						sortName: 'counttime',
						sortOrder: 'DESC'
					},
					header: {
						'Authorization': atoken
					},
					method: 'GET',
					success: (res) => {
						uni.hideLoading()
						let result = res.data;
						this.itemMax += this.pagination.pageSize;
						this.pagination.total = result.data.total;
						this.captureList = result.data.list.map((item, index) => {
							// let dateStr = item.counttime.match(/^\d{4}\-\d{2}\-\d{2}/)[0].replace('-', '');
							item.show = false;
							item.loaded = false;
							item.pic = 'https://vion-retail.oss-cn-beijing.aliyuncs.com/picture/' + (item.facePath && item.facePic
								? item.facePath + item.facePic
								: item.bodyPath + item.bodyPic);
							item.orderIdx = ++index;
							item.faceImagePath = item.pic || this.dealDefaultImg(item.gender);
							item.age = item.age && item.age >= 0 ? item.age : 'unknown';
							// item.genderText = typeof(item.gender) === 'number' ? this.dealGender(item.gender) : 'unknown';
							item.mood = typeof(item.mood) === 'number' ? item.mood : 'unknown';
							item.counttime = item.counttime ? item.counttime.split(' ')[1] : 'unknown';
							// item.personType = item.personType == 0 ? '顾客' : '店员'
							return item;
						})
						setTimeout(() => {
							this.load()
						}, 100)
					}
				})
			},
			dealGender(genderCode) {
				return genderCode == 1 ? '男' : (genderCode == 0 ? '女' : 'unknown');
			},
			dealDefaultImg(genderCode) {
				let imagePath = '';
				imagePath = genderCode == 1
					? defaultMaleImg : genderCode == 0
						? defaultFemaleImg : defaultImg;
				return imagePath;
			},
			imageError(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
				// this.$refs.imageRef.src = defaultImg;
			},
			genderFormatter(genderCode) {
				return this.getStorage('gender-' + genderCode) || 'unknown';
			},
			personTypeFormatter(personTypeCode) {
				return this.getStorage('personType-' + personTypeCode) || 'unknown';
			},
			moodFormatter(moodCode) {
				return this.getStorage('mood-' + moodCode) || 'unknown';
			},
			paginationChangeHandle(backVal) {
				let { current } = backVal;
				this.pagination.current = current;
				this.getCaptureList()
			},
			imageLoad(e) {
				this.captureList[e.target.dataset.index].loaded = true;
			},
			load() {
				uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => {
					images.forEach((image, index) => {
						if(image.top <= this.windowHeight) {
							this.captureList[image.dataset.index].show = true;
						}
					})
				}).exec();
			},
			conditionFun() {
				uni.navigateTo({
					url: '../conditions/captureOption'
				})
			},
			apiDics(dicType) {
				uni.request({
					url: window.url + '/dataDics',
					header: {
						'Authorization': this.getStorage('atoken')
					},
					method: 'GET',
					data: {
						type: dicType,
						_t: Date.parse(new Date()) / 1000
					},
					success: (res) => {
						let result = res.data;
						result.data.forEach(item =>{
							uni.setStorage({
								key: `${item.type}-${item.key}`,
								data: item.value	// valueEn i18n
							})
						})
					}
				})
			}
		},
	}
</script>

<style>
	.prefix-elem {
		height: 18.11upx;
	}
	.capture-info:after,
	.capture-info:before,
	.capture-main:after,
	.capture-main:before {
		content: '';
		display: table;
	}
	.capture-info:after,
	.capture-main:after {
		clear: both;
	}
	.capture-main {
		/* padding: 0 18.11upx; */
		margin-bottom: 101.44upx;
		box-sizing: border-box;
	}
	.capture-item {
		float: left;
		width: 24%;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0 7.24upx 0 rgba(200, 200, 200, .64);
		border-radius: 3.62upx;
		margin: 0 0 10.86upx;
		box-sizing: border-box;
	}
	.capture-item:nth-child(4n-1) {
		margin-left: 1.3333333333%;
		margin-right: 1.333333333%;
	}
	.capture-item:nth-child(4n-2) {
		margin-left: 1.333333333%;
	}
	.capture-image {
		position: relative;
		width: 100%;
		height: 181.15upx;
	}
	.capture-date {
		position: absolute;
		top: 7.24upx;
		left: 50%;
		margin-left: -123.18upx;
		font-size: 21.73upx;
		color: #fff;
		z-index: 1;
	}
	.capture-image uni-image {
		width: 100%;
		height: 100%;
	}
	.capture-img {
		position: absolute;
		/* max-width: 100%;
		max-height: 100%;
		width: 100%; */
	}
	.capture-info {
		font-size: 21.73upx;
		color: #555;
		text-align: left;
		padding-left: 7.24upx;
		padding-right: 7.24upx;
		margin-top: 7.24upx;
		margin-bottom: 7.24upx;
		box-sizing: border-box;
	}
	.capture-text__left {
		float: left;
		width: 50%;
	}
	.capture-text__right {
		float: right;
		width: 50%;
	}
	.pagination-wrapper {
		width: 100%;
		background-color: #fff;
		padding-top: 18.11upx;
		padding-bottom: 18.11upx;
		position: fixed;
		bottom: 0;
	}
	.placeholder {
		opacity: 1;
		transition: opacity .4s linear;
	}
	.placeholder.loaded {
		opacity: 0;
	}
	
</style>