condition.vue

<template>
	<view class="condition-wrapper">
		<headerComp :leftImgSrc="leftImg" @leftClick="backFun" :rightText="rightText" @rightClick="save"></headerComp>
		<view class="head-flex" :style="{ top: navheight + 'px'}">
			<!-- <view class="head-item" :class="{ 'active-item': activeType == 'mall' }" @tap="itemClick('mall')">{{ i18n.store }}</view> -->
		</view>
		<view class="handle-content">
			<view class="condition-item" @tap="goStoreList">
				<span class="ctitle">{{ i18n.store }}</span>
				<span class="select-item">{{ selectedMall.name }}</span>
				<image class="rarrow" src="../../static/analysis/rArrow.png" mode="widthFix"></image>
			</view>
			<view class="condition-item" @tap="goGateList">
				<span class="ctitle">监控点</span>
				<span class="select-item">{{ selectedGate.name }}</span>
				<image class="rarrow" src="../../static/analysis/rArrow.png" mode="widthFix"></image>
			</view>
			<view class="condition-item" @tap="goTypeList">
				<span class="ctitle">类型</span>
				<span class="select-item">{{ personType.name }}</span>
				<image class="rarrow" src="../../static/analysis/rArrow.png" mode="widthFix"></image>
			</view>
			<view class="condition-item" @tap="startDateHandle">
				<span class="ctitle">开始日期</span>
				<span class="select-item">{{ dateStartText }}</span>
				<image class="rarrow" src="../../static/analysis/rArrow.png" mode="widthFix"></image>
			</view>
			<view class="condition-item" @tap="endDateHandle">
				<span class="ctitle">结束日期</span>
				<span class="select-item">{{ dateEndText }}</span>
				<image class="rarrow" src="../../static/analysis/rArrow.png" mode="widthFix"></image>
			</view>
		</view>
		<awesome-picker
		  ref="pickerStart"
		  :data="dateData"
		  :textConfirm="picker.textConfirm"
		  :colorConfirm="picker.colorConfirm"
		  :textCancel="picker.textCancel"
		  :colorCancel="picker.colorCancel"
		  :anchor="currentStartDate"
		  @confirm="dateConfirm">
		 </awesome-picker>
		 <awesome-picker
		   ref="pickerEnd"
		   :data="dateData"
		   :textConfirm="picker.textConfirm"
		   :colorConfirm="picker.colorConfirm"
		   :textCancel="picker.textCancel"
		   :colorCancel="picker.colorCancel"
		   :anchor="currentEndDate"
		   @confirm="endDateConfirm">
		  </awesome-picker>
	</view>
</template>

<script>
	import headerComp from '../../components/header.vue'
	import leftImg from '../../static/header/backArrow.png'
	import { mapState, mapActions } from 'vuex'
	
	export default {
		components: {
			headerComp
		},
		onLoad(option) {
			uni.getStorage({
				key: 'personType',
				success: (res) => {
					this.personType = JSON.parse(res.data);
				}
			})
			console.log('this.personType', this.personType)
			uni.getStorage({
				key: 'statusBarH',
				success: (res) => {
					if(res.data) {
						this.navheight = res.data;
					}
				}
			})
		},
		data() {
			return {
				leftImg: leftImg,
				rightText: '保存',
				navheight: 0,
				activeType: 'mall',
// 				mallText: '',
// 				gateText: '',
				typeText: '',
				personType: {},
				// dateText: '',
				// dateData: [],
				picker: {
					textTitle:'选择',
					textConfirm:'确定',
					textCancel:'取消',
					colorConfirm:'#ffffff',
					colorCancel:'#ffffff',
				},
				cacheTimeStr: '',
				startCacheTimeStr: '',
				endCacheTimeStr: '',
				cachePickerIdx: [],
				startPickerIdx: [],
				endPickerIdx: []
			}
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
			...mapState({
				selectedMall: state => state.malls.checkedMallId,
				selectedGate: state => state.malls.checkedGateId,
				// dateData: state => state.malls.customTimeData,
// 				dateStartText: state => state.malls.selectedCustomStartDate,
// 				dateEndText: state => state.malls.selectedCustomEndDate,
// 				currentStartDate: state => state.malls.pickerCustomStartDate,
// 				currentEndDate: state => state.malls.pickerCustomEndDate,
				
				//
				dateData: state => state.malls.dayDateData,
				dateStartText: state => state.malls.startDayTime,
				dateEndText: state => state.malls.endDayTime,
				currentStartDate: state => state.malls.pickerStartDayDate,
				currentEndDate: state => state.malls.pickerEndDayDate
			})
		},
		methods: {
			backFun() {
				uni.navigateTo({
					url: `./captureReport/capture?type=${this.activeType}`
				})
			},
			save() {
				uni.navigateTo({
					url: `./captureReport/capture?type=${this.activeType}`
				})
			},
			itemClick() {
				
			},
			goStoreList() {
				uni.navigateTo({
					url:"../conditionList/mallList?backUrl=../passenger/condition&analysisLevel=" + this.activeType,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			goGateList() {
				uni.navigateTo({
					url:"../conditionList/gateList?backUrl=../passenger/condition&analysisLevel=" + this.activeType,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			goTypeList() {
				uni.navigateTo({
					url:"../conditionList/typeList?backUrl=../passenger/condition&analysisLevel=" + this.activeType,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			startDateHandle() {
				this.$refs.pickerStart.show();
			},
			endDateHandle() {
				console.log('endDateHandle', this.currentEndDate)
				this.$refs.pickerEnd.show();
			},
			dateConfirm(item) {
				this.startCacheTimeStr = this.formatterTimeToStr(item);
				console.log(this.startCacheTimeStr, item, !this.endCacheTimeStr, !this.endPickerIdx.length, this.comparsionSize(this.startPickerIdx, this.endPickerIdx))
// 				if(!this.endCacheTimeStr && !this.endPickerIdx.length) {
// 					return;
// 				} else {
// 					console.log(111)
					this.startPickerIdx = item;
					if(this.endPickerIdx.length && this.comparsionSize(this.startPickerIdx, this.endPickerIdx)) {
						this.$store.dispatch('malls/updateStartEndDate', {
							startDate: this.startCacheTimeStr,
							startPickerIdx: this.startPickerIdx
						})
					} else {
						this.$store.dispatch('malls/updateStartEndDate', {
							startDate: this.startCacheTimeStr,
							startPickerIdx: this.startPickerIdx
						})
// 						this.$store.dispatch('malls/updateStartEndDate', {
// 							endDate: '',
// 							endPickerIdx: []
// 						})
					}
					
				// }
			},
			endDateConfirm(item) {
				this.endCacheTimeStr = this.formatterTimeToStr(item);
// 				if(!this.startCacheTimeStr
// 					&& !this.startPickerIdx.length
// 					&& !this.comparsionSize(this.endPickerIdx, this.startPickerIdx)) {
// 					return;
// 				} else {
					this.endPickerIdx = item;
					if(this.startPickerIdx.length && this.comparsionSize(this.endPickerIdx, this.startPickerIdx)) {
						this.$store.dispatch('malls/updateStartEndDate', {
							endDate: this.endCacheTimeStr,
							endPickerIdx: this.endPickerIdx
						})
					} else {
						this.$store.dispatch('malls/updateStartEndDate', {
							endDate: this.endCacheTimeStr,
							endPickerIdx: this.endPickerIdx
						})
						this.$store.dispatch('malls/updateStartEndDate', {
// 							startDate: '',
// 							startPickerIdx: [],
							endDate: '',
							endPickerIdx: []
						})
					}
				// }
			},
			comparsionSize(item1, item2) {
				if(item1.length && item2.length) {
					console.log('comparsionSize', item1, item2)
					return item1.some((val1, idx1) => val1.value > item2[idx1].value);
				} else {
					return false;
				}
			},
// 			formatterTimeToStr(item) {
// 				return item.map(item => item.value)
// 					.join(',')
// 					.replace(/[\u4E00-\u9FA5]/g, '-')
// 					.replace(/\-/g, '')
// 					.replace(/(\d{4}),(\d{2}),(\d{2}),(\d{2}),(\d{2}),(\d{2})/, '$1-$2-$3 $4:$5:$6');
// 			},
			formatterTimeToStr(item) {
				return item.map(item => item.value)
					.join(',')
					.replace(/[\u4E00-\u9FA5]/g, '-')
					.replace(/\-/g, '')
					.replace(/,/g, '-');
				console.log('formatterTimeToStr', this.cacheTimeStr)
			}
		},
	}
</script>

<style>
	.head-flex {
		width: 543.47upx;
		display: flex;
		flex-direction: row;
		font-size: 32.6upx;
		color: #80b4ff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		height: 77.89upx;
		line-height: 77.89upx;
		right: 0;
		margin: auto;
	}
	
	.head-item {
		flex: 1;
		text-align: center;
		cursor: pointer;
	}
	
	.active-item {
		color: #fff;
	}
	
	.handle-content {
		
	}
	.condition-item {
		height: 90.57upx;
		line-height: 90.57upx;
		background: #FFFFFF;
		border-bottom: 1px solid #979797;
		position: relative;
	}
	.ctitle {
		font-size: 25.36upx;
		color: #333333;
		position: absolute;
		top: 0;
		left: 23.55upx;
	}
	.select-item {
		font-size: 25.36upx;
		color: #9B9B9B;
		position: absolute;
		top: 0;
		right: 45.28upx;
	}
	.rarrow {
		width: 10.86upx;
		height: 19.92upx;
		position: absolute!important;
		top: 38.04upx;
		right: 23.55upx;
	}
</style>