new-cashier/jeepay-ui-uapp-agent/components/jeepayDatePicker/jeepayDatePicker.vue

<template>
	<view>
		<view class="picker-box animation-close" :style="{height:(vdata.isA?'232rpx':'120rpx')}">
			<view class="date-filter">
				<view class="date " :class="vdata.selectFlge ==item.index?'select':''" v-for="(item,index) in vdata.selectList" :key="index" @click="onSelsct(index)">
					<text>{{item.text}}</text>
				</view>	
			</view>
			<view class="time-picker  " >
				<xp-picker   @confirm="confirm" mode="ymdhi" :startTime="vdata.startDate">{{vdata.startDate}}</xp-picker>
				<text>——</text>
				<xp-picker @confirm="confirmEnd" mode="ymdhi" :startTime="vdata.endDate">{{vdata.endDate}}</xp-picker>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive,toRaw } from 'vue'
import {getDay} from '@/util/timeInterval.js'
import { onLoad,onShow } from '@dcloudio/uni-app'

const emit = defineEmits(['confirmEnd','onSelsct','confirmStart'])
let params = {} //搜索参数
const vdata = reactive({
	isA:false, //动画
	selectFlge:1,
	selectList:[
		{index:0,value:'all',text:'全部'},
		{index:1,value:'today',text:'今天'},
		{index:2,value:'yesterday',text:'昨天'},
		{index:3,value:'mouth',text:'本月'},
		{index:4,value:'week',text:'上月'},
		{index:5,value:'customer',text:'自定义'},
	],
})
onLoad((option) => {
	vdata.startDate =`${getDay(0,'-')} 00:00`
	vdata.endDate = `${getDay(0,'-')} 23:59`
})
 //时间选择器确定
 const confirm =(e)=>{
	 vdata.startDate = e.value
	 // vdata.endDate = e.value
	 params.queryDateRange = `customDate_${vdata.startDate}:00_${vdata.endDate}:59`
	 console.log(params)
	 emit('confirmStart',params)
 }
const  confirmEnd=(e)=>{
	vdata.endDate = e.value
	params.queryDateRange = `customDate_${vdata.startDate}:00_${vdata.endDate}:59`
	console.log(params)
	emit('confirmEnd',params)
	// getDevDetail(params)	
} 
const switchState = (e, item) =>{
	item.state = Number(e.detail.value);
	switchStatePopup.value.comfirmOpen(
		() => {
			$editAgent(item.agentNo, item);
		},
		undefined,
		() => {
			item.state = Number(!e.detail.value);
		}
	);
	
}
const onSelsct = (index) =>{
 	vdata.selectFlge = index
 	
 	switch(index){
		case 0:
		vdata.isA = false
		params.queryDateRange = ''
		params.isQueryAll = true
		// getDevDetail(params)
		emit('onSelsct',params)
		break;
 		case 1:
		vdata.isA = false
		params.queryDateRange = 'today'
		delete params.isQueryAll
		// getDevDetail(params)
		emit('onSelsct',params)
		break;
		case 2:
		vdata.isA = false
		
		params.queryDateRange = 'yesterday'
		// getDevDetail(params)
		delete params.isQueryAll
		emit('onSelsct',params)
		break;
		case 3:
		vdata.isA = false
		params.queryDateRange = 'near2now_30'
		delete params.isQueryAll
		// getDevDetail(params)
		emit('onSelsct',params)
		break;
		case 4:
		
		vdata.isA = false
		params.queryDateRange = 'prevMonth'
		delete params.isQueryAll
		// getDevDetail(params)
		emit('onSelsct',params)
		break;
		case 5:
		vdata.isA = true
		break;
 	}
}
</script>

<style lang="scss">
.animation-close{
	transition: height 0.3s;
}
.picker-box{
		width: 650rpx;
		//height: 252rpx;
		background-color: #FFFFFF;
		margin: 0rpx auto;
		
		border-radius: 20rpx;
		overflow: hidden;
		.select{
		 		padding: 10rpx 10rpx;
		 		border-radius: 10rpx;
		 		background: rgba(57, 129, 255, 0.1);
		 		font-weight: 500;
		 		color: #3981ff;
		 	}
		.date-filter{
			box-sizing: border-box;
			height: 90rpx;
			width: 650rpx;
		
			margin: 0rpx auto;
			margin-bottom: 0;
			background-color: #FFFFFF;
			
			// border-bottom: 2rpx solid #FAFBFC;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-top: 30rpx;
			
			
			.date{
				//width: 92rpx;
				//height: 53rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				padding: 10rpx 10rpx;
			}
			.close{
				height: 40rpx;
				width: 40rpx;
				// background-color: #007AFF;
				image{
					height: 20rpx;
					width: 20rpx;
					transition: transform .5s;
				}
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center; 
			}
		}
	}
	.time-picker{
	 			box-sizing: border-box;
	 			width: 590rpx;
	 			height: 72rpx;
	 			border-radius: 10rpx;
	 			background: #F5F6FC;
	 			
	 			margin: 30rpx auto;
			
	 			
	 			display: flex;
	 			justify-content: space-between;
	 			align-items: center;
	 			
	 			padding-left: 20rpx;
	 			padding-right: 20rpx;
				
				font-size: 25rpx;
				
				overflow: hidden;
				
				
	 		}
</style>