wx_oms/salesRanking/components/datePopup.vue

<template>
	<view>
		<uni-popup @change="change" ref="popup" type="center">
			<view class="datebody">
				<view style="text-align: end;">
					<uni-icons @click="change({show:false})" type="clear" size="30"></uni-icons>
				</view>
				<view style="flex: 1;display: flex;flex-wrap: wrap;align-content: flex-start; gap:25rpx">
					<view @click="seleFn(index)" v-for="(item,index) in dateOptions"
						:class=" seleIndex==index?'seledatebody_item': 'datebody_item'">{{item.label}}</view>
					<uni-datetime-picker @change='pickerClick' type="datetimerange" :start="starDate"  :end="endDate"
						rangeSeparator="至" v-model="single">
						<view @click="seleIndex=4" :class=" seleIndex==4?'seledatebody_item':'datebody_item'">自定义</view>
					</uni-datetime-picker>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => {
					return [{
							value: '1',
							label: '江'
						},
						{
							value: '2',
							label: '湖'
						}
					]
				}
			}
		},
		watch: {
			value: function(n, o) {
				console.log('监听', n)
				if (n) {
					this.$refs.popup.open('center')
				} else {
					this.$refs.popup.close()
				}
			}
		},
		data() {
			return {
				single: '',
				endDate:'',
				starDate:'',
				seleIndex: 1,
				seachValue: '',
				dateOptions: [{
						value: 0,
						label: '当天'
					},
					{
						value: 1,
						label: '昨日'
					},
					{
						value: 2,
						label: '上周'
					},
					{
						value: 3,
						label: '上月'
					}
				]
			}
		},
		created() {
			  let date = new Date
			  this.starDate  = new Date
			  this.starDate.setMonth((date.getMonth()-1 ==0?12:date.getMonth()-1))
			  this.starDate.setDate(1)
			  this.starDate = `${this.starDate.getFullYear()}-${this.starDate.getMonth()+1}-${this.starDate.getDate()} ${this.starDate.getHours()}:${this.starDate.getMinutes()}`
			  this.endDate = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
		},
		methods: {
			pickerClick(e){
				this.$emit('input', false)
				this.$emit('datePopupChange',e)
			},
			seleFn(index) {
				this.seleIndex = index
				let date = new Date
				switch (this.seleIndex) {
					case 0:
						this.$emit('datePopupChange',[`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate()} 00:00:00`,`${date.getFullYear()}-${date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1}-${date.getDate()<10?'0'+date.getDate():date.getDate() } 23:59:59`])
						break;
					case 1:
					    let yesterday = new Date((date.getTime() - (86400000)))
						this.$emit('datePopupChange',[`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()} 00:00:00`,`${yesterday.getFullYear()}-${yesterday.getMonth()+1<10?'0'+(yesterday.getMonth()+1):yesterday.getMonth()+1}-${yesterday.getDate()<10?'0'+yesterday.getDate():yesterday.getDate()} 23:59:59`])
						break;
					case 2:
						let endLastWeek = new Date(date.getTime() - ((date.getDay() == 0 ? 7 : date.getDay()) * 86400000 ))
						let starLastWeek = new Date(endLastWeek.getTime() - (6*86400000))
						this.$emit('datePopupChange',[`${starLastWeek.getFullYear()}-${starLastWeek.getMonth()+1<10?'0'+(starLastWeek.getMonth()+1):starLastWeek.getMonth()+1}-${starLastWeek.getDate()<10?'0'+starLastWeek.getDate():starLastWeek.getDate()} 00:00:00`,`${endLastWeek.getFullYear()}-${endLastWeek.getMonth()+1<10?'0'+(endLastWeek.getMonth()+1):endLastWeek.getMonth()+1}-${endLastWeek.getDate()<10?'0'+endLastWeek.getDate():endLastWeek.getDate()} 23:59:59`])
						break;
					case 3:
						let LastMonth = new Date(date.getTime() - ((86400000 * date.getDate())))
						this.$emit('datePopupChange',[`${LastMonth.getFullYear()}-${LastMonth.getMonth()+1<10?'0'+(LastMonth.getMonth()+1):LastMonth.getMonth()+1}-01 00:00:00`,`${LastMonth.getFullYear()}-${LastMonth.getMonth()+1<10?'0'+(LastMonth.getMonth()+1):LastMonth.getMonth()+1}-${LastMonth.getDate()<10?'0'+LastMonth.getDate():LastMonth.getDate()} 23:59:59`])
						break;
				}
				this.$emit('input',false)
			},
			pickerChange(e) {
				this.$emit('pickerChange', this.list[e.detail.value[0]])
			},
			change(e) {
				this.$emit('input',e.show)
			},
			confirmFn() {
				
			}
		}
	}
</script>

<style scoped>
	.seledatebody_item {
		width: 140rpx;
		height: 60rpx;
		background: #ADCEFF;
		border-radius: 10px;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 18rpx;
	}

	.datebody_item {
		width: 140rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 10px;
		color: #BBBBBB;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 18rpx;
	}

	.datebody {
		width: 520rpx;
		height: 500rpx;
		background: #F0F0F0;
		border-radius: 20px !important;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		padding: 15rpx 23rpx;
	}
</style>