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 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>
				</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">{{ item.genderText }}性</span>
				</view>
				<view class="capture-info">
					<span class="capture-text__left">{{ item.personType }}</span>
					<span class="capture-text__right">{{ item.mood }}</span>
				</view>
			</view>
		</view>
		<uniPagination
			class="pagination-wrapper"
			v-show="captureList.length > 0"
			:current="pagination.current"
			:total="pagination.total"
			:pageSize="pagination.pageSize"
			@change="paginationChangeHandle">
		</uniPagination>
		<!-- <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,
				personType: {},
				showLoadMore: false,
				itemMax: 0,
				loadMoreText: '加载中...'
			}
		},
		onUnload() {
// 			this.itemMax = 0,
// 			this.loadMoreText = "加载更多",
// 			this.showLoadMore = false;
		},
		onLoad(options) {
			if(options.type) {
				this.canLoadGateId = true;
			}
			this.personType = this.getStorage('personType');
			this.getCaptureList();
		},
		onReachBottom() {
// 			if(this.itemMax >= this.pagination.total) {
// 				this.loadMoreText = "没有更多数据了!"
// 				return;
// 			}
// 			this.showLoadMore = true;
// 			setTimeout(() => {
// 				this.getCaptureList()
// 			}, 300)
		},
		created() {
		},
		computed: {
			...mapState({
				checkedMallId: state => state.malls.checkedMallId,
				checkedGateId: state => state.malls.checkedGateId,
				selectedStartTime: state => state.malls.startDayTime,
				selectedEndTime: state => state.malls.endDayTime
			})
		},
		methods: {
			backFun() {
				uni.reLaunch({
					url:"../passenger",
				})
			},
			getStorage(key) {
				let storageVal = '';
				uni.getStorage({
					key: key,
					success: (res) => {
						console.log('storage', res)
						storageVal = res.data;
					}
				})
				return storageVal
			},
			getCaptureList() {
				console.log('getCaptureList:', this.selectedTime, 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.id || '') : '',
						personType: this.personType.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;
						console.log(result);
						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.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(() => {
					// uni.hideLoading()
				// }, 1000)
			},
			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.log(e, this.$refs.imageRef)
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
				// this.$refs.imageRef.src = defaultImg;
			},
			paginationChangeHandle(backVal) {
				console.log('paginationChangeHandle', backVal)
				console.log(this.pagination)
				let { current } = backVal;
				this.pagination.current = current;
				this.getCaptureList()
			},
			conditionFun() {
				// console.log(this.mallList)
				console.log('condition function:', uni)
				uni.navigateTo({
					url: '../condition'
				})
			}
		},
	}
</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; */
		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.3333333%;
		margin-right: 1.333333%;
	}
	.capture-item:nth-child(4n-2) {
		margin-left: 1.333333%;
	}
	.capture-image {
		position: relative;
	}
	.capture-date {
		position: absolute;
		top: 7.24upx;
		left: 50%;
		margin-left: -123.18upx;
		font-size: 21.73upx;
		color: #fff;
		z-index: 1;
	}
	.capture-img {
		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 {
	}
</style>