iot-platform-app/components/commons-select-time/index.vue

<template>
	
	<view>
		<view class="" style="height:1rpx">
			
		</view>
		<view class="commons-time-box">
			<view 
				class="time-box" 
				:class="value.type == i.type ? 'active' : ''" 
				v-for="i in typeList" 
				:key="i.type"
				@click="changeTypeFn(i.type)">
				{{i.name}}
			</view>
			<view :class="value.type == 6 ? 'active' : ''" class="time-box time-box-icon" @click="openBotomModal">
				<uni-icons type="calendar" size="20"></uni-icons>
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="btn-box">
					<view class=""  style="color:red">
						取消
					</view>
					<view class="" style="color:#007AFF" @click="confirm">
						确认
					</view>
				</view>
				<view class="commons-time-box">
					<view 
					class="modal-select-box" 
					:class="modalTimeType == i.type ? 'active' : ''"
					v-for="i in modalTimeList" 
					@click="modalTimeSelect(i.type)" 
					:key="i.type">
						{{i.name}}
					</view>
				</view>
				<view>
					<view class="color-bl text-center" style="margin:30rpx">
						选择时间区间
					</view>
					<view class="">
						<uni-datetime-picker v-model="value.time" type="daterange" rangeSeparator="至" />
					</view>
					<view style="height:200rpx">
						
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
	
</template>

<script>
	import {format} from '../../util/uitl.js'
	export default {
		props: {
			value: {
				type: Object,
			}
		},
		watch: {

			value: {
				handler() {
					this.$emit("input", this.value)
				},
				deep: true,
				immediate: true,
				
			},
		},
		data() {
			return {
				typeList:[{
					name:"本日",
					type:0,
				},{
					name:"昨日",
					type:1,
				},{
					name:"本周",
					type:2,
				},{
					name:"上周",
					type:3,
				},{
					name:"本月",
					type:4,
				},{
					name:"上月",
					type:5,
				}],
				modalTimeList:[
					{
						name:"昨日",
						type:1,
					},{
						name:"前日",
						type:2,
					},{
						name:"上周",
						type:3,
					},{
						name:"上月",
						type:4,
					},{
						name:"近三个月",
						type:5,
					},{
						name:"近半年",
						type:6,
					}
				],
				modalTimeType:null,
			}
		},
		methods:{
			//确认
			confirm(){
				this.$emit('change')
				if(this.modalTimeType){
					this.value.type = 6
				}
				this.$refs.popup.close()
			},
			//外部选择时间
			changeTypeFn(_type){
				this.value.type = _type
				this.value.beginTime = null
				this.value.endTime = null
				this.value.time = []
				this.$emit('change')
			},
			modalTimeSelect(_type){
				const v = this
				v.modalTimeType = _type
				const todayNum = new Date(new Date().toLocaleDateString()).getTime()
				const today = new Date()
				//年
				var year = today.getFullYear();
				//月
				const month = today.getMonth() + 1
				//周
				const nows = today.getDay() || 7
				//天
				const day = today.getDate()
				if(_type == 1){
					v.value.beginTime = format(todayNum - 86400000)
					v.value.endTime =  format(todayNum)
				}
				if(_type == 2){
					v.value.beginTime = format(todayNum - (86400000 * 2))
					v.value.endTime =  format(todayNum - 86400000)
				}
				if(_type == 3){
					v.value.beginTime = format(todayNum - (86400000 * (nows + 6)))
					v.value.endTime =  format(todayNum - 86400000 * (nows - 1))
				}
				if(_type == 4){
					if(month == 1){
						v.value.beginTime = (year - 1) + '-' + 12 + '-' + '1 00:00:00'
						v.value.endTime = year + '-' + 1 + '-' + '1 00:00:00'
					}else{
						v.value.beginTime = year + '-' + (month - 1) + '-' + '1 00:00:00'
						v.value.endTime = year + '-' + month + '-' + '1 00:00:00'
					}
				}
				if(_type == 5){
					if(month < 4){
						v.value.beginTime = (year - 1) + '-' + (12 - 3 + month) + '-' + day + ' 00:00:00'
						v.value.endTime =  format(today.getTime())
					}else{
						v.value.beginTime = year + '-' + (month - 3) + '-' + day + ' 00:00:00'
						v.value.endTime =  format(today.getTime())
					}
				}
				if(_type == 6){
					if(month < 7){
						v.value.beginTime = (year - 1) + '-' + (12 - 6 + month) + '-' + day + ' 00:00:00'
						v.value.endTime =  format(today.getTime())
					}else{
						v.value.beginTime = year + '-' + (month - 6) + '-' + day + ' 00:00:00'
						v.value.endTime =  format(today.getTime())
					}
				}
				v.value.time = [v.value.beginTime,v.value.endTime]
				console.log(v.value)
			},
			openBotomModal(){
				console.log(this.value)
				this.$refs.popup.open('bottom')
			},
		},
		created() {

		},
	}
</script>

<style lang="less">
	.btn-box{
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 40rpx;
		font-weight: 600;
	}
	.commons-time-box {
		display: flex;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		margin: 30rpx 30rpx;
		border: 1px solid #dcdcdc;
		border-radius: 8rpx;
		.modal-select-box{
			width:16.66%;
			text-align: center;
		}
		.time-box {
			width: 15%;
			text-align: center;
		}

		.time-box-icon {
			width: 10%;
		}

		.time-box.active {
			background-color: #487CFF;
			color: #fff;
		}
		.active {
			background-color: #487CFF;
			color: #fff;
			text{
				color: #fff!important;
			}
		}
	}
</style>