完善功能
This commit is contained in:
wangxiaowei
179
components/reserve-time.vue
Normal file
179
components/reserve-time.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view style="position: relative;">
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="" style="font-size: 36rpx; line-height: 50rpx; color: #121212; text-align: center;width: 100%;margin-top: 52rpx;">选择时间</view>
|
||||
<image src="@/static/icon/close2.png" style="width: 60rpx;height: 60rpx; position: absolute; top: 30rpx; right: 30rpx;" @click="closePopup"/>
|
||||
</view>
|
||||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in dateList" :key="index">{{item.label}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in hourList" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in minuteList" :key="index">{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view class="line"></view>
|
||||
<view class="btn">
|
||||
<view class="btn1" @click="reset">重置</view>
|
||||
<view class="btn2" @click="confirm">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
const date = new Date();
|
||||
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
// 生成前天、昨天、今天、明天、后天
|
||||
const dateList = [];
|
||||
for (let i = -2; i <= 2; i++) {
|
||||
const d = new Date(date.getFullYear(), date.getMonth(), date.getDate() + i);
|
||||
const mm = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||
const dd = d.getDate().toString().padStart(2, '0');
|
||||
const week = weekMap[d.getDay()];
|
||||
dateList.push({
|
||||
label: `${mm}月${dd}日周${week}`,
|
||||
date: d
|
||||
});
|
||||
}
|
||||
// 小时 6-22
|
||||
const hourList = [];
|
||||
for (let i = 6; i <= 22; i++) {
|
||||
hourList.push(i < 10 ? `0${i}` : `${i}`);
|
||||
}
|
||||
// 分钟 00\10\20\30\40\50
|
||||
const minuteList = [];
|
||||
for (let i = 0; i < 60; i += 10) {
|
||||
minuteList.push(i < 10 ? `0${i}` : `${i}`);
|
||||
}
|
||||
// 默认选中今天
|
||||
let dateIndex = 2;
|
||||
// 当前小时和分钟
|
||||
const now = new Date();
|
||||
let hourIndex = hourList.findIndex(h => parseInt(h) === now.getHours());
|
||||
if (hourIndex === -1) hourIndex = 0;
|
||||
let minuteIndex = minuteList.findIndex(m => parseInt(m) === now.getMinutes());
|
||||
if (minuteIndex === -1) minuteIndex = 0;
|
||||
return {
|
||||
title: 'picker-view',
|
||||
dateList,
|
||||
hourList,
|
||||
minuteList,
|
||||
value: [dateIndex, hourIndex, minuteIndex], // 默认选中今天、当前小时、当前分钟
|
||||
visible: true,
|
||||
indicatorStyle: `height: 50px;`
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
bindChange: function (e) {
|
||||
const val = e.detail.value;
|
||||
// 选中项索引分别为dateList、hourList、minuteList
|
||||
this.value = val;
|
||||
},
|
||||
|
||||
// 重置
|
||||
reset: function () {
|
||||
const now = new Date();
|
||||
// 日期始终选中“今天”
|
||||
let dateIndex = 2;
|
||||
// 重新生成小时列表，确保与当前小时对齐
|
||||
const hourList = [];
|
||||
for (let i = 6; i <= 21; i++) {
|
||||
hourList.push(i < 10 ? `0${i}` : `${i}`);
|
||||
}
|
||||
let hourIndex = hourList.findIndex(h => parseInt(h) === now.getHours());
|
||||
if (hourIndex === -1) hourIndex = 0;
|
||||
// 重新生成分钟列表，确保与当前分钟对齐
|
||||
const minuteList = [];
|
||||
for (let i = 0; i < 60; i += 10) {
|
||||
minuteList.push(i < 10 ? `0${i}` : `${i}`);
|
||||
}
|
||||
let minuteIndex = minuteList.findIndex(m => parseInt(m) === now.getMinutes());
|
||||
if (minuteIndex === -1) minuteIndex = 0;
|
||||
this.value = [dateIndex, hourIndex, minuteIndex];
|
||||
},
|
||||
|
||||
// 确认
|
||||
confirm() {
|
||||
// 获取选中索引
|
||||
const [dateIdx, hourIdx, minuteIdx] = this.value;
|
||||
const dateObj = this.dateList[dateIdx];
|
||||
const hour = this.hourList[hourIdx];
|
||||
const minute = this.minuteList[minuteIdx];
|
||||
// 传递给父组件
|
||||
this.$emit('confirm', {
|
||||
date: dateObj.date,
|
||||
dateLabel: dateObj.label,
|
||||
hour,
|
||||
minute,
|
||||
value: `${dateObj.label} ${hour}:${minute}`
|
||||
});
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
closePopup() {
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.uni-padding-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.picker-view {
|
||||
width: 750rpx;
|
||||
height: 600rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-top: 62rpx;
|
||||
height: 2rpx;
|
||||
background: #E5E5E5;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.btn1, .btn2 {
|
||||
width: 335rpx;
|
||||
height: 90rpx;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.btn1 {
|
||||
background: #F6F7F8;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.btn2 {
|
||||
background: #365A9A;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user