partnerApp/pages/components/seach.vue

<template>
	<view class="partner-head">
		<view class=" dis j-s" style="border: 1px solid #EEEEEE;padding: 10px;color: #666666;">
			<view class="dis ">
			<text style="margin-right: 10px;" @click="industryShow = true">{{industryData}}<i></i></text>
			<u-select mode="single-column" :list="industryoptions" v-model="industryShow"
				label-name="lable" value-name="value"
				@confirm="industryopConfirm($event)"></u-select>
			<!-- <text v-if="partnerHierarchy" @click="cimodelclassShow = true">{{cimodelclassData}}<i></i></text>
			<u-select mode="single-column" :list="vehicleTypeoptions" v-model="cimodelclassShow"
				label-name="lable" value-name="value"
				@confirm="dictionaryConfirm($event)"></u-select> -->
				</view>
			<view class="search-data" >
				<text v-for="(val,index) in year" :key="index" :class="val.startShow? 'active' :''" @click="onSeachYear(val,index)">{{val.lable}}</text>
			</view>
		</view>
		<view class="sum-insurance dis j-c a-c" v-if="!partnerHierarchy">
			<view >
				<text>{{directLsit.sumPremium}}</text>
				<text>总保费</text>
			</view>
			<view>
				<text>{{directLsit.teamManNum}}</text>
				<text>会员总人数</text>
			</view>
			<view style="border-right:none">
				<text>{{directLsit.extractFee}}</text>
				<text>我的佣金</text>
			</view>
		</view>
		<my-date-picker   ref="datePicker"  @confirmPickDate="confirmPickDate" />
	</view>
</template>

<script>
import myDatePicker from './date-picker.vue';
	export default {
		components:{myDatePicker},
		props:{
			directLsit: {
			  type: Object,
			 default() {
			 	return {};
			 }
			
			},
			partnerHierarchy: {
			  type: Boolean,
			 default() {
			 	return false;
			 }
			},
		},
		data() {
			return {
				cimodelclassData:'合伙人层级',
				cimodelclassShow:false,
				industryShow:false,
				industryData:'行业分类',
				startShow:false,
				vehicleTypeoptions:[{
					lable:'全部合伙人',
					value:0
				},{
					lable:'一级合伙人',
					value:1
				},{
					lable:'二级合伙人',
					value:2
				},{
					lable:'三级合伙人',
					value:3
				},{
					lable:'四级合伙人',
					value:4
				},{
					lable:'五级合伙人',
					value:5
				},
				],
				industryoptions:[{
					lable:'全部行业',
					value:0
				},{
					lable:'汽车服务',
					value:1
				},{
					lable:'保险',
					value:2
				},
				],
				year:[{
					lable:'日',
					startShow:false
				},{
					lable:'月',
					startShow:false
				},{
					lable:'季',
					startShow:false
				},{
					lable:'年',
					startShow:false
				},{
					lable:'自定义',
					startShow:false
				}],
			}
		},
		async onLoad(e) {
		
		},
		methods: {
			dictionaryConfirm(e){
				this.cimodelclassData=e[0].label
				this.$emit('queryData',{partnerType:e[0].value==0?null:e[0].value})
			},
			// 行业分类
			industryopConfirm(e){
				this.industryData=e[0].label
				this.$emit('queryData',{industrySector:e[0].value==0?null:e[0].value})
			},
			onSeachYear(val,index){
				this.year.map((value, i) => i === index ? value.startShow=!value.startShow : value.startShow=false);
				let now = new Date();
				let year = now.getFullYear();
				let month = now.getMonth() + 1; // 月份是从0开始的，所以需要加1
				let day = now.getDate();
				if(index==0 && val.startShow){
					let theDay=`${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
					this.$emit('queryData',{beginTime:theDay+' 00:00:01' ,endTime:theDay+ ' 23:59:59'})
				}
				else if(index==1 && val.startShow){
					this.$emit('queryData',{beginTime:this.getCurrentMonthFirst()+' 00:00:01' ,endTime:this.getCurrentMonthLast()+ ' 23:59:59'})
				}
				else if(index==2 && val.startShow){
					let months = [];
					// 获取当前季度的第一个月
					let startMonth = month - (month % 3) + 1;
					// 获取当前季度的下三个月
					for (let i = 0; i < 3; i++) {
					  months.push(startMonth + i);
					}
					this.$emit('queryData',{beginTime: year +'-'+ months[0]+'-01 00:00:01' ,endTime: year+'-'+ months[2] + '-31 23:59:59'})
				}
				else if(index==3 && val.startShow){
					this.$emit('queryData',{beginTime:year+'-01-01 00:00:01' ,endTime:year+ '-12-31 23:59:59'})
				}
				else if(index==4 && val.startShow){
					this.$refs.datePicker.open()
				}
				else{
					this.$emit('queryData',{beginTime:'' ,endTime:''})
				}
				
			},
			 getCurrentMonthFirst() {
				 // 获取当月第一天数据
			      let date = new Date()
			      date.setDate(1)
			      let month = parseInt(date.getMonth() + 1)
			      let day = date.getDate()
			      if (month < 10) month = '0' + month
			      if (day < 10) day = '0' + day
			      return  date.getFullYear() + '-' + month + '-' + day
			},
			getCurrentMonthLast() {
				// 获取当月最后一天数据
			  let date = new Date()
			  let year = date.getFullYear()
			  let month = date.getMonth() + 1
			  month = month < 10 ? '0' + month : month
			  let day = new Date(year, month, 0)
			  return year + '-' + month + '-' + day.getDate()
			},
			confirmPickDate(dateStr,dateStr1){
				if(dateStr){
					dateStr+=' 00:00:01'
				}
				if(dateStr1){
					dateStr1+=' 23:59:59'
				}
				this.$emit('queryData', {beginTime:dateStr ,endTime:dateStr1})
			},
		}
	}
</script>

<style lang="scss" scoped>
.partner-head{
		background: #FFFFFF;
		color: #333333;
		font-size: 14px;
		i{
			margin-left: 2px;
			display:inline-block;
			width: 0;
			height: 0;
			border: 4px solid;
			border-color: #666666;
			border-bottom: 4px solid transparent; 
			border-right: 4px solid transparent;
			border-left: 4px solid transparent;
		}
		.search-data{
			color: #666666;
			border: 1px solid #EEEEEE;
			.active{
				color: #FFFFFF;
				background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);
			}
			text{
				padding: 5px 6px;
				border-left: 1px solid #EEEEEE;
			}
			text:first-child{
				border-left: none
			}
		}
	}
	.sum-insurance{
		padding: 10px 0;
		view{
			text-align: center;
			width: 33.33%;
			border-right: 1px solid #EEEEEE;
				text{
					display: block;
				}
				text:first-child{
					font-weight: 600;
					font-size: 18px;
					color: #333333;
				}
				text:last-child{
					font-size: 10px;
					color: #999999;
				}
			}
	}
</style>