Ci2Order.vue/App/pages/center/report/sub/search.vue

<template>
	<view class="date-search">
		<z-slide :visible.sync="show" ref="slide">
			<scroll-view scroll-y class="data-search-place">
				<view class="data-search-title mt-30">下单日期</view>
				<view class="flex-n fac data-search-range mt-10">
					<image class="common_icon" src="../../../../static/icon_time.png"></image>
					<view class="flex-n fac fjb">
						<view class="data-search-range-item" @click="lookCreateStartTime=true" v-if="!createStartTime">开始日期</view>
						<div class="data-search-range-itemselect" @click="lookCreateStartTime=true" v-else>{{createStartTime}}</div>
						<view class="">
							-
						</view>
						<view class="data-search-range-item" @click="lookCreateEndTime=true" v-if="!createEndTime">结束日期</view>
						<div class="data-search-range-itemselect" @click="lookCreateEndTime=true" v-else>{{createEndTime}}</div>
					</view>
					<view class="iconfont iconjuxing27kaobei" v-if="createStartTime||createEndTime" @click="createStartTime='';createEndTime=''"></view>
				</view>
				<view class="data-search-title mt-30">订单日期</view>
				<view class="flex-n fac data-search-range mt-10">
					<image class="common_icon" src="../../../../static/icon_time.png"></image>
					<view class="flex-n fac fjb">
						<view class="data-search-range-item" @click="lookOrderStartTime=true" v-if="!orderStartTime">开始日期</view>
						<div class="data-search-range-itemselect" @click="lookOrderStartTime=true" v-else>{{orderStartTime}}</div>
						<view class="">
							-
						</view>
						<view class="data-search-range-item" @click="lookOrderEndTime=true" v-if="!orderEndTime">结束日期</view>
						<div class="data-search-range-itemselect" @click="lookOrderEndTime=true" v-else>{{orderEndTime}}</div>
					</view>
					<view class="iconfont iconjuxing27kaobei" v-if="orderStartTime||orderEndTime" @click="orderStartTime='';orderEndTime=''"></view>
				</view>
				<z-collapse title="销售" class="mt-20">
					<view class="flex-w fac data-search-area">
						<view class="data-search-item line-1" :key="index" :class="chooseSaler.indexOf(index)>-1?'data-select':''" v-for="(item,index) in salerList"
						 @click="chooseSalerArea(index,item)">{{item.userName}}</view>
					</view>
				</z-collapse>
				<z-collapse title="订单状态">
					<view class="flex-w fac data-search-area">
						<view class="data-search-item line-1" :key="index" :class="chooseOrderState==index?'data-select':''" v-for="(item,index) in orderStateList"
						 @click="chooseOrderStateArea(index,item)">{{item.dicName}}</view>
					</view>
				</z-collapse>
				<z-collapse title="套餐类型">
					<view class="flex-w fac data-search-area">
						<view class="data-search-item line-1" :key="index" :class="choosePackage.indexOf(index)>-1?'data-select':''" v-for="(item,index) in packageList"
						 @click="choosePackageListArea(index,item)">{{item.packageName}}</view>
					</view>
				</z-collapse>
				<z-collapse title="场地">
					<view class="flex-w fac data-search-area">
						<view class="data-search-item line-1" :key="index" :class="chooseHouse.indexOf(index)>-1?'data-select':''" v-for="(item,index) in houseList"
						 @click="chooseHouseListArea(index,item)">{{item.houseName}}</view>
					</view>
				</z-collapse>
				<view class="data-search-btn" @click="submit">
					确定
				</view>
			</scroll-view>
			<z-date-select :visible.sync="lookCreateStartTime" v-model="createStartTime" :endDate="createEndTime"></z-date-select>
			<z-date-select :visible.sync="lookCreateEndTime" v-model="createEndTime" :startDate="createStartTime"></z-date-select>
			<z-date-select :visible.sync="lookOrderStartTime" v-model="orderStartTime" :endDate="orderEndTime"></z-date-select>
			<z-date-select :visible.sync="lookOrderEndTime" v-model="orderEndTime" :startDate="orderStartTime"></z-date-select>
		</z-slide>
		<z-date-select></z-date-select>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		name: 'search',
		props: {
			visible: Boolean
		},
		data() {
			return {
				show: false,
				
				lookCreateStartTime:false,
				lookCreateEndTime:false,
				lookOrderStartTime:false,
				lookOrderEndTime:false,
				
				createStartTime:'',
				createEndTime:'',
				orderStartTime:'',
				orderEndTime:'',
				
				choose: -1,

				salerList: [],
				checkSalerList: [],
				chooseSaler: [],

				orderStateList: [],
				checkOrderState: '',
				chooseOrderState: -1,
				
				packageList:[],
				checkPackageList:[],
				choosePackage:[],
				
				houseList:[],
				checkHouseList:[],
				chooseHouse:[],

			}
		},
		watch: {
			show(newval, oldval) {
				this.$emit('update:visible', this.show);
			},
			visible(newval, oldval) {
				this.show = this.visible;
				if (newval) {
					//获取销售
					this.getSalerList();
					//获取订单状态
					this.getOrderStateList();
					//获取套餐类型
					this.getPackageList();
					//获取场地
					this.getHouseList();
				}
			},
			beginTime(newval, oldval) {
				if (newval) {
					this.choose = -1;
				}
			},
			endTime(newval, oldval) {
				if (newval) {
					this.choose = -1;
				}
			}
		},
		methods: {
			getSalerList() {
				this.$axios.post('/user/userList', {
					"storeId": uni.getStorageSync('storeId')
				}).then(res => {
					console.log(res)
					this.salerList = res.data.list;
				}).catch(err => {})
			},
			chooseSalerArea(index, item) {
				var num = -1;
				//先判断存不存在
				for (var i in this.checkSalerList) {
					if (this.checkSalerList[i] == item.id) {
						num = i;
						break;
					}
				}
				if (num > -1) {
					this.chooseSaler.splice(num, 1);
				} else {
					this.chooseSaler.push(index);
				}
				var checkSalerList = [];
				for (var i in this.chooseSaler) {
					checkSalerList.push(this.salerList[this.chooseSaler[i]].id);
				}
				this.checkSalerList = checkSalerList;
				console.log(this.checkSalerList)
			},
			getOrderStateList() {
				this.orderStateList = uni.getStorageSync('dic').orderConfirmState;
				console.log(this.orderStateList)
			},
			chooseOrderStateArea(index, item) {
				if(this.chooseOrderState==index){
					this.chooseOrderState=-1;
				}else{
					this.chooseOrderState=index;
				}
				this.checkOrderState=item.dicCode;
			},
			getPackageList(){
				   this.$axios.get("/foodPackage/foodPackageListByStoreId/"+uni.getStorageSync('storeId')).then(res => {
				                    // console.log('套餐类型',res)
				                    this.packageList = res.data.list;
				                }).catch(err => {
				                })
			},
			choosePackageListArea(index,item){
		
				var num = -1;
				//先判断存不存在
				for (var i in this.checkPackageList) {
					if (this.checkPackageList[i] == item.packageTypeCode) {
						num = i;
						break;
					}
				}
				if (num > -1) {
					this.choosePackage.splice(num, 1);
				} else {
					this.choosePackage.push(index);
				}
				var checkPackageList = [];
				for (var i in this.choosePackage) {
					checkPackageList.push(this.packageList[this.choosePackage[i]].packageTypeCode);
				}
				this.checkPackageList = checkPackageList;
				console.log(this.checkPackageList)
			},
			getHouseList(){
				 this.$axios.get("/house/houseListByStoreId/"+uni.getStorageSync('storeId')).then(res=>{
				                   console.log(res.data.list)
				                    this.houseList=res.data.list;
				                }).catch(err=>{
				                })
			},
			chooseHouseListArea(index,item){
				var num = -1;
				//先判断存不存在
				for (var i in this.checkHouseList) {
					if (this.checkHouseList[i] == item.id) {
						num = i;
						break;
					}
				}
				if (num > -1) {
					this.chooseHouse.splice(num, 1);
				} else {
					this.chooseHouse.push(index);
				}
				var checkHouseList = [];
				for (var i in this.chooseHouse) {
					checkHouseList.push(this.houseList[this.chooseHouse[i]].id);
				}
				this.checkHouseList = checkHouseList;
				console.log(this.checkHouseList)
			},
			chooseArea(num) {
				if (num == this.choose) {
					this.choose = -1;
				} else {
					this.choose = num;
				}
			},
			submit() {
					var createStartTime='',
					createEndTime='',
					orderStartTime='',
					orderEndTime='';
				if (this.createStartTime != '' && this.createEndTime == '' || this.createStartTime == '' && this.createEndTime != '') {
					return uni.showToast({
						title: '请选择完整下单时间段',
						icon: 'none'
					})
				}
				if (this.orderStartTime != '' && this.orderEndTime == '' || this.orderStartTime == '' && this.orderEndTime != '') {
					return uni.showToast({
						title: '请选择完整订单时间段',
						icon: 'none'
					})
				}
				this.$emit('searchData', {
					createStartTime:this.createStartTime,
					createEndTime:this.createEndTime,
					orderStartTime:this.orderStartTime,
					orderEndTime:this.orderEndTime,
					createUserIds:this.checkSalerList,
					orderStates:this.checkOrderState,
					packageIds:this.checkPackageList,
					houseIds:this.checkHouseList
				});
				this.$refs.slide.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.date-search {
		.data-search-place {
			height: calc(100vh - 120rpx);
		}

		.data-search-title {
			color: #999999;
			font-size: 28rpx;
			line-height: 60rpx;

			padding: {
				left: 50rpx;
				right: 50rpx;
			}

			;
		}

		.data-search-btn {
			width: calc(100% - 80rpx);
			margin-left: 40rpx;
			margin-top: 50rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			background-color: #007AFF;
		}

		.data-search-area {
			width: calc(100% - 40rpx);
			margin-left: 20rpx;

			.data-search-item {
				color: #999999;
				border: 1px solid #f2f2f2;
				width: 160rpx;
				height: 60rpx;
				margin: 0 10rpx;
				margin-top: 20rpx;
				line-height: 60rpx;
				text-align: center;
				font-size: 32rpx;
			}

			.data-select {
				border: 1px solid #52c1f5 !important;
				color: #52c1f5 !important;
				background: #f8fbff !important;
			}
		}
	}

	.data-search-range {
		margin-left: 40rpx;
		width: calc(100% - 80rpx);
		padding: 10rpx 0;
		background: #eff1f6;

		.data-search-range-item {
			color: #ccc;
			font-size: 32rpx;
			width: 200rpx;
			text-align: center;
		}

		.data-search-range-itemselect {
			font-size: 32rpx;
			width: 200rpx;
			text-align: center;
		}
	}

	.common_icon {
		width: 58rpx;
		height: 58rpx;
		min-width: 58rpx;
	}
</style>