109 lines
2.3 KiB
Vue
109 lines
2.3 KiB
Vue
<template>
|
|
<view>
|
|
<view @click="open">
|
|
<slot v-if="$slots.default"> </slot>
|
|
<view v-else class="choose-goods u-flex u-row-between">
|
|
<text class="color-999" v-if="!startTime && !endTime"
|
|
>请选择日期范围</text
|
|
>
|
|
<text class="color-333 u-font-24 u-m-r-32 " v-else
|
|
>{{ startTime }} - {{ endTime }}</text
|
|
>
|
|
<view class="u-flex" v-if="startTime&&endTime" @click.stop="clear">
|
|
<up-icon name="close" size="14"></up-icon>
|
|
</view>
|
|
<up-icon size="14" name="arrow-right" v-else ></up-icon>
|
|
|
|
</view>
|
|
</view>
|
|
<my-date-pickerview
|
|
@confirm="datePickerConfirm"
|
|
mode="all"
|
|
ref="datePicker"
|
|
></my-date-pickerview>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
const datePicker = ref(null);
|
|
const startTime = defineModel("startTime", {
|
|
default: () => "",
|
|
type: String,
|
|
});
|
|
const endTime = defineModel("endTime", {
|
|
default: () => "",
|
|
type: String,
|
|
});
|
|
|
|
function clear(){
|
|
startTime.value = "";
|
|
endTime.value = "";
|
|
}
|
|
function open() {
|
|
datePicker.value.toggle();
|
|
}
|
|
function datePickerConfirm(e) {
|
|
startTime.value = e.start;
|
|
endTime.value = e.end;
|
|
console.log(e);
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.popup-content {
|
|
background: #fff;
|
|
width: 640rpx;
|
|
border-radius: 18rpx;
|
|
}
|
|
.top {
|
|
padding: 40rpx 48rpx;
|
|
border-bottom: 1px solid #d9d9d9;
|
|
}
|
|
.bottom {
|
|
padding: 48rpx 52rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-top: 1px solid #d9d9d9;
|
|
gap: 50rpx;
|
|
.btn {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 18rpx 60rpx;
|
|
border-radius: 100rpx;
|
|
font-size: 32rpx;
|
|
border: 2rpx solid transparent;
|
|
&.success {
|
|
background-color: $my-main-color;
|
|
color: #fff;
|
|
}
|
|
&.cancel {
|
|
border-color: #d9d9d9;
|
|
box-shadow: 0 4rpx 0 0 #00000005;
|
|
}
|
|
}
|
|
}
|
|
.item {
|
|
padding: 10rpx 30rpx;
|
|
border: 1px solid #d9d9d9;
|
|
margin: 10rpx;
|
|
border-radius: 8rpx;
|
|
transition: all 0.3s ease-in-out;
|
|
box-shadow: 0 0 10px transparent;
|
|
&.selected {
|
|
border-color: $my-main-color;
|
|
box-shadow: 0 0 10px $my-main-color;
|
|
}
|
|
}
|
|
.choose-goods {
|
|
display: flex;
|
|
padding: 24rpx;
|
|
align-items: center;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #d9d9d9;
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
min-height: 90rpx;
|
|
}
|
|
</style>
|