170 lines
3.9 KiB
Vue
170 lines
3.9 KiB
Vue
<template>
|
|
<view class="s-wrapper" :style="{ borderRadius: props.bdR, backgroundColor: bgColor }">
|
|
<view class="s-screening">
|
|
<block v-for="(v, i) in list" :key="v.value">
|
|
<view class="s-scr-item" :class="{ selected: i == index }" @tap="onSelect(v, i)"> {{ v.text }} </view>
|
|
</block>
|
|
</view>
|
|
<view class="theCustom" :class="{ customer: index === props.list.findIndex((v) => v.value == 'customer') }">
|
|
<view class="time-picker">
|
|
<xp-picker
|
|
ref="star"
|
|
@confirm="confirm"
|
|
@cancel="emits('close')"
|
|
@tap="isShow"
|
|
mode="ymdhi"
|
|
:startTime="time.startDate"
|
|
>{{ time.startDate }}</xp-picker
|
|
>
|
|
<text></text>
|
|
<xp-picker
|
|
ref="end"
|
|
@confirm="confirmEnd"
|
|
@cancel="emits('close')"
|
|
mode="ymdhi"
|
|
@tap="isShow"
|
|
:startTime="time.endDate"
|
|
>{{ time.endDate }}</xp-picker
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, reactive, ref } from "vue"
|
|
import { getDay } from "@/util/timeInterval.js"
|
|
const time = ref({
|
|
startDate: `${getDay(0, "-")} 00:00`,
|
|
endDate: `${getDay(0, "-")} 23:59`,
|
|
})
|
|
|
|
const emits = defineEmits(["search", "open", "close"])
|
|
const props = defineProps({
|
|
bdR: {
|
|
type: String,
|
|
default: "20rpx",
|
|
},
|
|
bgColor: { type: String },
|
|
list: {
|
|
type: Array,
|
|
default: [
|
|
// { value: 'all', text: '全部' },
|
|
{ value: "today", text: "今天" },
|
|
{ value: "yesterday", text: "昨天" },
|
|
{ value: "currMonth", text: "本月" },
|
|
{ value: "prevMonth", text: "上月" },
|
|
{ value: "customer", text: "自定义" },
|
|
],
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
})
|
|
const star = ref(null)
|
|
const end = ref(null)
|
|
const scrInfo = ref(0)
|
|
|
|
const isOpen = ref(false)
|
|
const onSelect = (val, i) => {
|
|
if (val.value != "customer") {
|
|
emits("search", { val, i })
|
|
} else {
|
|
emits("search", {
|
|
val: {
|
|
text: "自定义",
|
|
value: "customer",
|
|
time: `customDate_${time.value.startDate}:00_${time.value.endDate}:00`,
|
|
},
|
|
i,
|
|
})
|
|
props.index = props.list.findIndex((v) => v.value == "customer")
|
|
isOpen.value = true
|
|
}
|
|
}
|
|
|
|
//时间选择器确定
|
|
const confirm = (e) => {
|
|
time.value.startDate = e.value
|
|
confirmEnd({ value: time.value.endDate })
|
|
emits("close")
|
|
}
|
|
const confirmEnd = (e) => {
|
|
time.value.endDate = e.value
|
|
let i = props.list.findIndex((v) => v.value == "customer")
|
|
emits("search", {
|
|
val: {
|
|
text: "自定义",
|
|
value: `customDate_${time.value.startDate}:00_${time.value.endDate}:00`,
|
|
},
|
|
i,
|
|
})
|
|
|
|
emits("close")
|
|
}
|
|
const isShow = (e) => {
|
|
if (star.value.pickerVisible || end.value.pickerVisible) {
|
|
emits("open")
|
|
} else {
|
|
emits("close")
|
|
}
|
|
}
|
|
// const endIsShow = () => {
|
|
// if (end.value.pickerVisible) {
|
|
// emits("open")
|
|
// } else {
|
|
// emits("close")
|
|
// }
|
|
// }
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.s-wrapper {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
padding: 20rpx 20rpx 20rpx 20rpx;
|
|
.s-screening {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.s-scr-item {
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
white-space: nowrap;
|
|
border-radius: 7rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
.selected {
|
|
background-color: #fff;
|
|
color: #7737fe;
|
|
}
|
|
}
|
|
.theCustom {
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: height 0.3s ease-in;
|
|
.time-picker {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 90rpx;
|
|
padding: 0 30rpx;
|
|
margin-top: 10rpx;
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
border-radius: 7rpx;
|
|
color: $primaryColor;
|
|
|
|
text {
|
|
width: 40rpx;
|
|
height: 2rpx;
|
|
background-color: $primaryColor;
|
|
}
|
|
}
|
|
}
|
|
.customer {
|
|
height: 100rpx;
|
|
transition: height 0.3s ease-in;
|
|
}
|
|
}
|
|
</style>
|