hls_crm/pages/index/screen.vue

<template>
	<view class="">
		<uni-popup ref="screenpopup" type="bottom" background-color="#fff">
			<scroll-view scroll-y class="scrollbox" style="height:540rpx;background:#fff;">
				<view class="screen_content">
					<view class="fir_li">
						<view class="li_label">时间筛选</view>
						<view class="rightbox">
							<view class="listwarp">
								<view 
									class="li" 
									:class="index == timeIndex ?'liactive':''" 
									@click="changeTime(index)" 
									v-for="(item,index) in timeList" 
									:key="index">{{item.name}}</view>
							</view>
							<view class="time_warp" v-if="timeList[timeIndex] && timeList[timeIndex].value == 'zidingyi'">
								<picker @change="changeStartTime" mode="date">
									<view class="timebox">
										{{start_time ? start_time : '开始时间'}}
									</view>
								</picker>
								<view class="xian"></view>
								<picker @change="changeEndTime" mode="date">
									<view class="timebox">
										{{end_time ? end_time : '结束时间'}}
									</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="button_bottom">
				<view @tap.stop="reset">重置</view>
				<view @tap.stop="sureQuery">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { netTime } from '@/api/index.js'
	
	export default{
		data() {
			return{
				timeList:[
					{value:'today',name:'今天'},
					{value:'yesterday',name:'昨天'},
					{value:'thisweek',name:'本周'},
					{value:'lastweek',name:'上周'},
					{value:'thismonth',name:'本月'},
					{value:'lastmonth',name:'上月'},
					{value:'thisquarter',name:'本季'},
					{value:'lastquarter',name:'上季'},
					{value:'thisyear',name:'今年'},
					{value:'lastyear',name:'去年'},
					{value:'zidingyi',name:'自定义'}
				],
				timeIndex:null,
				start_time:'',
				end_time:'',
				s_time:'',
				e_time:''
			}
		},
		methods:{
			init() {
				this.$refs.screenpopup.open()
			},
			changeTime(index) {
				this.timeIndex = index
				this.getTime()
			},
			getTime() {
				netTime({times:this.timeList[this.timeIndex].value}).then(res=>{
					res = res.data
					this.s_time = res.times[0]
					this.e_time = res.times[1]
				})
			},
			changeStartTime(e) {
				this.start_time = e.detail.value
			},
			changeEndTime(e) {
				this.end_time = e.detail.value
			},
			reset() {
				this.timeIndex = null
				this.start_time = ''
				this.end_time = ''
			},
			sureQuery() {
				let params = {
					text:this.timeList[this.timeIndex]?this.timeList[this.timeIndex].name:'',
					start_time:this.timeList[this.timeIndex] && this.timeList[this.timeIndex].value != 'zidingyi'?this.s_time:this.start_time,
					end_time:this.timeList[this.timeIndex] && this.timeList[this.timeIndex].value != 'zidingyi'?this.e_time:this.end_time,
				}
				this.$refs.screenpopup.close()
				this.$emit('sureTime',params)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.screen_content {
		z-index: 2;
		border-top: 1rpx solid #CCCCCC;
		background-color: #fff;
		padding: 24rpx;
		.fir_li {
			margin-bottom: 20rpx;
			.li_label {
				font-size: 28rpx;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
				text-align: center;
			}
			.classify {
				display: flex;
				justify-content: space-around;
				.classify_flex {
					padding: 5rpx 16rpx;
					color: #999;
					font-size: 30rpx;
					border: 1px solid #999;
					border-radius: 10rpx;
				}
				.c_f {
					background: $uni-text-color !important;
					color: #fff;
				}
			}
			.li_box {
				border-radius: 15rpx;border: 1rpx solid #CCCCCC;
				width:690rpx;
				height: 60rpx;
				padding: 0 35rpx;
				line-height: 60rpx;
				display: flex;
				justify-content: space-around;
				color: #999;
				box-sizing: border-box;
			}
			.listwarp{
				width:600rpx;
				margin:0 auto;
				padding:25rpx 0;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				align-items: center;
				.li{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 172rpx;
					height: 54rpx;
					background: #ededed;
					border: 1rpx solid #ededed;
					border-radius: 10rpx;
					font-size:27rpx;
					color:#999;
					margin-right:40rpx;
					margin-bottom:20rpx;
					position: relative;
					&:nth-child(3n){
						margin-right:0;
					}
					
					.clearStaff{
						position: absolute;
						right:-20rpx;
						top:-20rpx;
						font-size:28rpx;
						width:40rpx;
						height:40rpx;
						background:rgba(0,0,0,0.5);
						border-radius: 50%;
						text-align: center;
						line-height: 38rpx;
						color:#fff;
					}
				}
				.liactive{
					color:#666;
					border: 1rpx solid $uni-text-color;
					background:#fff;
				}
			}
			.time_warp{
				margin:0 auto;
				width:600rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.timebox{
					width: 172rpx;
					height: 54rpx;
					border-radius: 10rpx;
					text-align: center;
					line-height: 50rpx;
					font-size:27rpx;
					color:#666;
					border:1rpx solid $uni-text-color;
				}
				.xian{
					width:85rpx;
					height:7rpx;
					background:#ededed;
					margin:0 20rpx;
				}
				.timeactive{
					background:#0287FF;
					color:#fff;
				}
			}
		}
	}
	.button_bottom {
		display: flex;
		width: 100%;
		height: 190rpx;
		background-color: #fff;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		justify-content: space-around;
		padding-bottom: 100rpx;
	
		:first-child {
			color: #999;
			border: 1rpx solid #999;
			width: 260rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 20rpx;
		}
	
		:last-child {
			background-color: $uni-text-color;
			color: #fff;
			width: 260rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 20rpx;
		}
	}
</style>