groupTimeCondition.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 class="head-item" :class="{ 'active-item': activeType == 'gate' }" @tap="itemClick('gate')">出入口</view>
		</view>
		<view class="handle-content" v-show="activeType === 'mall'">
			<view class="condition-item" @tap="goStoreList">
				<span class="ctitle">{{ i18n.store }}</span>
				<span class="select-item">{{ multiSelectedMall.length ? multiSelectedMall[multiSelectedMall.length - 1].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="dateHandle">
				<span class="ctitle">日期</span>
				<span class="select-item">{{ dateText }}</span>
				<image class="rarrow" src="../../static/analysis/rArrow.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="handle-content" v-show="activeType === 'gate'">
			<view class="condition-item" @tap="goSingleStoreList">
				<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="dateHandle">
				<span class="ctitle">日期</span>
				<span class="select-item">{{ dateText }}</span>
				<image class="rarrow" src="../../static/analysis/rArrow.png" mode="widthFix"></image>
			</view>
		</view>
		<awesome-picker
		  ref="picker"
		  :data="dateData"
		  :textConfirm="picker.textConfirm"
		  :colorConfirm="picker.colorConfirm"
		  :textCancel="picker.textCancel"
		  :colorCancel="picker.colorCancel"
		  :anchor="currentDate"
		  @confirm="dateConfirm">
		</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(options) {
			this.activeType = options.type || 'mall';
			uni.getStorage({
				key: 'statusBarH',
				success: (res) => {
					if(res.data) {
						this.navheight = res.data;
					}
				}
			})
		},
		data() {
			return {
				rightText: '保存',
				leftImg: leftImg,
				activeType: '',
				navheight: 0,
				picker: {
					textTitle:'选择',
					textConfirm:'确定',
					textCancel:'取消',
					colorConfirm:'#ffffff',
					colorCancel:'#ffffff',
				},
				cacheTimeStr: '',
				cachePickerIdx: []
			}
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
			...mapState({
				selectedMall: state => state.malls.checkedMallId,
				multiSelectedMall: state => state.malls.multiCheckedMallId,
				selectedGate: state => state.malls.checkedGateId,
				dateData: state => state.malls.dayDateData,
				dateText: state => state.malls.selectedDayTime,
				currentDate: state => state.malls.pickerDayDate
			})
		},
		watch: {
			selectedMall(val) {
				console.log('watch val', val)
			}
		},
		methods: {
			backFun() {
				uni.navigateTo({
					url: './groupTimeReport/groupTime'
				})
			},
			save() {
				uni.navigateTo({
					url: `./groupTimeReport/groupTime?analysisLevel=${this.activeType}`
				})
			},
			itemClick(val) {
				this.activeType = val;
			},
			goStoreList() {
				uni.navigateTo({
					url:"../conditionList/multiMallList?backUrl=../passenger/groupTimeCondition&analysisLevel=" + this.activeType,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			goSingleStoreList() {
				uni.navigateTo({
					url:"../conditionList/mallList?backUrl=../passenger/groupTimeCondition&analysisLevel=" + this.activeType,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			goGateList() {
				uni.navigateTo({
					url:"../conditionList/multiGateList?backUrl=../passenger/groupTimeCondition&analysisLevel=" + this.activeType,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			dateHandle() {
				this.$refs.picker.show();
				// console.log('currentDate', this.currentDate, this.dateData)
			},
			dateConfirm(item) {
				console.log(item);
				this.formatterTimeToStr(item);
				this.cachePickerIdx = item;
				if(this.cacheTimeStr && this.cachePickerIdx.length) {
					this.$store.dispatch('malls/updateDayDate', {
						dayTimeText: this.cacheTimeStr,
						dayPickerIdx: this.cachePickerIdx
					})
				}
				// console.log(this.cacheTimeStr, this.cachePickerIdx)
			},
			formatterTimeToStr(item) {
				this.cacheTimeStr = 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>