uniapp 自定义日期选择器
发布时间
阅读量：
阅读量
<template>
<view class="pick-component" :class="{active: show}">
<view class="conver-bg" />
<view class="footer-modal">
<view class="z-flex">
<text @click="handleCancel">取消</text>
<text @click="handleSure" class="sure-txt">确定</text>
</view>
<picker-view class="picker-view-main" :indicator-style="indicatorStyle"
:value="sureValue"
@change="handleValueChange"
>
<picker-view-column>
<view class="item" v-for="(item,index) in dateList" :key="index">{{item.text}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in showHoursList" :key="index">{{item}}{{sureValue[0] === 0 ? '' : '时'}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in showMinuteList" :key="index">{{item}}{{sureValue[0] === 0 ? '' : '分'}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</template>
<script>
function addZ (v) {
return v < 10 ? ('0' + v ) : v;
}
export default {
name:"date-pick",
data() {
const startDate = new Date(new Date() - 0);
const month = startDate.getMonth();
const dateList = [{
text: '立即送达',
date: `${startDate.getFullYear()}/${month+1}/${startDate.getDate()}`
}];
const hoursList = [];
const minuteList = ['00', '30'];
for (let i = 0; i < 24; i++) {
const d = new Date(startDate.getTime() + 86400000 * i);
if (i < 15) {
dateList.push({
text: `${d.getMonth() !== month ? (addZ(d.getMonth()+1) + '月') : ''}${addZ(d.getDate())}日`,
date: `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`
});
}
hoursList.push(`${addZ(i)}`);
}
return {
indicatorStyle: `height: 50px;`,
dateList,
hoursList,
minuteList,
showHoursList: ['- -'],
showMinuteList: ['- -'],
sureValue: [0, 0, 0]
};
},
props:{
show: Boolean
},
mounted() {
},
methods:{
handleValueChange(e) {
const value = e.detail.value;
console.log(this.hoursList)
if (value[0] === 0) {
this.showHoursList = ['- -'];
this.showMinuteList = ['- -'];
} else {
this.showHoursList = this.hoursList;
this.showMinuteList = this.minuteList;
}
this.sureValue = value;
},
handleCancel() {
this.$emit('callback', { sure: false });
},
handleSure() {
const d = this.sureValue;
let value = '';
if (d[0] === 0) {
value = '立即配送'
} else {
value = `${this.dateList[d[0]].date} ${this.showHoursList[d[1]]}:${this.showMinuteList[d[2]]}:00`
}
this.$emit('callback', { sure: true, value});
}
}
}
</script>
<style lang="scss">
.pick-component {
&.active{
.conver-bg{
display: block;
}
.footer-modal{
transform: translate(0, 0);
}
}
.conver-bg {
position: fixed;
z-index: 998;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,.2);
display: none;
}
.footer-modal{
position: fixed;
z-index: 999;
width: 100%;
height: 500rpx;
box-sizing: border-box;
padding-top: 90rpx;
left: 0;
bottom: 0;
background-color: #fff;
border-top-right-radius: 15rpx;
border-top-left-radius: 15rpx;
transform: translate(0, 100%);
transition: all .3s ease-in-out 0s;
.z-flex{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 90rpx;
box-sizing: border-box;
padding: 0 40rpx;
justify-content: space-between;
font-size: 32rpx;
color: #666;
border-bottom: 1px solid #E6E6E6;
.sure-txt{
color: #3387FF;
}
}
}
.picker-view-main{
width: 100%;
height: 600rpx;
margin-top:20rpx;
}
.item {
height: 50px;
align-items: center;
justify-content: center;
text-align: center;
}
.item {
line-height: 100rpx;
text-align: center;
}
}
</style>全部评论 (0)
还没有任何评论哟~