下载地址https://ext.dcloud.net.cn/plugin?id=5458
<template>
<view class="container">
<view class="fenlei">
<view class="mb-20">
时间筛选
</view>
<DateSelector
:mode="selectDateType"
@onChange="onDateSelectorChange"
/>
</view>
<view class="">
</view>
<view class="nextbox">
<button type="default" class='nextbtn' hover-class="login-hover" @click="tobackasset()">确定</button>
</view>
</view>
</template>
<script>
import { ref, reactive, getCurrentInstance, watch, computed } from 'vue'
import DateTimePicker from '@/components/dateTimePicker/index.vue';
import DateSelector from '@/components/dateSelector/index.vue';
export default {
data() {
return {
selectDateType:1,
starttime:'',
endtime:''
}
},
components: {
DateTimePicker,
DateSelector
},
onLoad(options) {
this.id=options.id
},
methods: {
onDateSelectorChange({ startDate, endDate }) {
// console.log('11111', startDate, endDate);
this.starttime=startDate
this.endtime=endDate
},
tobackasset(){
uni.navigateTo({
url: '/pages/checknum/aseetdetail?id='+this.id+'&starttime='+this.starttime+'&endtime='+this.endtime
})
}
}
}
</script>
<style>
.container{
height: 100%;
background: #fff;
.fenlei{
padding: 30rpx;
}
.mb-20{
margin-bottom: 20rpx;
}
.nextbox{
width:100%;
position:fixed;
bottom:0px;
}
.chognzhibtn{
float: left;
display: inline-block;
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
margin-bottom: 30rpx;
margin-left: 30rpx;
color: #4690FE;
font-size: 22rpx;
border-radius: 50rpx;
background: linear-gradient(90deg, #fff, #fff);
box-shadow: 0px 3px 12px 0px rgba(146, 146, 146, 0.25);
border: 0;
&::after {
display: none;
}
}
.nextbtn{
float: right;
display: inline-block;
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
margin-bottom: 30rpx;
margin-right: 30rpx;
color: #fff;
font-size: 22rpx;
border-radius: 50rpx;
box-shadow: 0px 3px 12px 0px rgba(146, 146, 146, 0.25);
background: linear-gradient(90deg, #4690FE, #4690FE);
border: 0;
&::after {
display: none;
}
}
.login-hover {
background: linear-gradient(90deg, #1d479b, #0f2186);
border: 0;
transform: translate(0);
&::after {
display: none;
}
}
}
</style>