仿京东 选择年月日 实时显示时间段
HTML
<div class="content_css">
<div class="info_css just" @tap="openDialogTime">
<div>预计到店时间：</div>
<div style="flex: 1;width: 85%;justify-content: flex-end;align-items: center;">
<text v-if="form.estimateTime == ''">请选择</text>
<text class="typeText" v-else>{{ form.estimateTime }}</text>
<image src="../../static/change.png" mode=""></image>
</div>
</div>
<div class="btn" @tap="sumbit" >
提交
</div>
<!-- 预计到店弹框 -->
<div class="cu-modal bottom-modal" id="more-oprate" @tap="cancels" :class="modalNameTime == 'bottomModal' ? 'show' : ''">
<div class="cu-dialogBox">
<div class="cu-dialog">
<div class="cu-bar justify-end">
<div class="content">预计到店时间</div>
<view class="cuIcon-closes " @tap="cancel">
</view>
</div>
<div class="cu-modal bottom-modal" id="mores-oprate" @tap="timeCanles"
:class="timeModal == 'bottomModal' ? 'show' : ''">
<div class="cu-dialogBox">
<div class="cu-dialog">
<picker-view v-if="vade" :value="value" @change="bindChange" class="picker-view">
<picker-view-column style="border-radius: 10px;">
<view class="item" v-for="(item, index) in yearsList" :key="index">{{ item }}年
</view>
</picker-view-column>
<picker-view-column style="border-radius: 10px;">
<view class="item" v-for="(item, index) in monthsList" :key="index">{{ item }}月
</view>
</picker-view-column>
</picker-view>
</div>
<div class="cancel" style="color: #3666DB;" :style="{ marginBottom: bottomLift + 'px' }"
@tap="dateTime">确定</div>
</div>
</div>
<view class="postYear" @tap="changeDate()">
<text>{{ postYear }}年{{ postmonth || month }}月</text>
</view>
<div class="content_cssBox">
<view class="contentBoxLeft">
<view class="contentBoxLeftItem" v-for="(item, index) in dayList" :key="index"
@click="changeLeftItem(item, index)"
:class="{ 'activeLeft': changeLeftIndex == index }">
{{ item.label }}
</view>
</view>
<view class="contentBoxRight">
<view class="contentBoxRightItem" v-for="(item, index) in timeLists" :key="index"
@click="changeRightItem(item, index)"
:class="{ 'activeRight': changeRightIndex == index }">
{{ item }}
</view>
</view>
</div>
</div>
<div class="cancel" style="color: #3666DB;" :style="{ marginBottom: bottomLift + 'px' }"
@tap="dateComfire">确定</div>
</div>
</div>
</div>
JS
data() {
const time = [
'8:00',
'8:30',
'9:00',
'9:30',
'10:00',
'10:30',
'11:00',
'11:30',
'12:00',
'12:30',
'13:00',
'13:30',
'14:00',
'14:30',
'15:00',
'15:30',
'16:00',
'16:30',
'17:00',
]
const date = new Date()
const yearsList = []
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
for (let i = date.getFullYear(); i <= 2052; i++) {
yearsList.push(i)
}
return {
value: [9999, month - 1, day - 1],
date,
yearsList,
year,
month,
day,
time,
vade: true,
yearsList: [],
monthsList: [],
dayList: [],
timeLists: [],
modalNameTime: null,
modalNameType: null,
timeModal: null,
changeLeftIndex: -1,
changeRightIndex: -1,
form: {
orderServiceTypeIdsList: [],
changeOrderServiceTypeIdsList: [],
changeOrderName: [],
estimateTime: ""
},
postmonth: null,
changeDay: '',
changeTime: '',
postYear: null,
postTime: null,
timeIndex: 0,
changeDayCwoapital: ""
};
},
onLoad() {
this.timeLists = this.time
this.dayList = this.getEveryDay()
let year = new Date().getFullYear()
this.postYear = year
for (let i = year; i <= 2052; i++) {
this.yearsList.push(i)
}
for (let i = this.month; i <= 12; i++) {
this.monthsList.push(i)
}
this.ifTime()
},
methods: {
ifTime() {
var that = this
var date = new Date(),
hour = this.toDu(date.getHours())
if (hour < 9 || hour > 16) {
that.dayList.splice(0, 1)
}
},
getTime() {
if (this.changeDay == this.toDu(this.month) + '/' + this.toDu(this.day)) {
let arr = []
for (let i = this.toDu(this.date.getHours()); i < 18; i++) {
arr.push(i + ":00")
arr.push(i + ":30")
}
arr.splice(arr.length - 1, 1)
if (this.toDu(this.date.getMinutes()) < 30) {
this.timeLists = arr.slice(1)
} else {
this.timeLists = arr.slice(2)
}
} else {
this.timeLists = this.time
}
},
dateComfire() {
if (this.changeLeftIndex == -1) {
uni.showToast({
title: '请先选择到店日期',
icon: 'none'
})
return false
}
if (this.changeRightIndex == -1) {
uni.showToast({
title: '请先选择到店时间',
icon: 'none'
})
return false
}
this.form.estimateTime = this.postYear + '/' + this.changeDay + ' ' + this.changeTime
this.modalNameTime = null
},
toDu(val) {
if (val < 10) return '0' + val
return val
},
getEveryDay(val) {
let dayArry = [];
let day = this.getCountDays(val);
let date = new Date();
let pMonth = val ? val : date.getMonth() + 1
let pday = val ? 1 : date.getDate()
for (var k = pday; k <= day; k++) {
let getDates = {
label: pMonth + '月' + k + '日',
value: this.toDu(pMonth) + '/' + this.toDu(k)
}
dayArry.push(getDates);
}
return dayArry;
},
dateTime() {
setTimeout(() => {
this.timeModal = null
}, 100);
},
// 选择年月
bindChange(e) {
let val = e.target.value
let year = new Date().getFullYear()
this.postYear = this.yearsList[val[0]]
this.postmonth = this.monthsList[val[1]]
if ( year == this.postYear && this.postmonth == this.month) {
this.dayList = this.getEveryDay()
} else {
this.dayList = this.getEveryDay(this.postmonth)
}
},
changeDate(val) {
this.timeModal = 'bottomModal'
this.changeRightIndex = -1
this.changeLeftIndex = -1
},
getCountDays(val) {
let curDate = new Date();
let curMonth = val ? val - 1 : curDate.getMonth();
curDate.setMonth(curMonth + 1);
curDate.setDate(0);
return curDate.getDate();
},
changeLeftItem(item, index) {
this.changeLeftIndex = index;
this.changeDay = item.value
this.changeDayCwoapital = item.label
this.changeRightIndex = -1
this.getTime()
},
changeRightItem(item, index) {
if (this.changeLeftIndex == -1) {
uni.showToast({
title: '请选择到店日期',
icon: 'none'
})
return false
}
this.changeRightIndex = index;
this.changeTime = item
},
// 点空白关闭类型弹框
cancels(e) {
if (e.target.id != undefined && e.target.id === "more-oprate") {
this.modalNameTime = null;
this.modalNameType = null;
}
},
timeCanles(e) {
if (e.target.id != undefined && e.target.id === "mores-oprate") {
this.timeModal = null;
}
},
// 到店时间取消
cancel() {
this.modalNameTime = null;
this.modalNameType = null;
},
unique(newarr) {
const res = new Map();
return newarr.filter(
(arr) =>
!res.has(Number(arr.serviceTypeId)) && res.set(Number(arr.serviceTypeId), 1)
);
},
// 到店时间
openDialogTime() {
this.modalNameTime = "bottomModal";
},
hideModal() {
this.modalNameTime = null;
this.modalNameType = null;
},
},
CSS
<style lang="scss">
.cu-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1110;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
transform: scale(1.185);
backface-visibility: hidden;
perspective: 2000upx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
.cu-modal.show {
opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-y: hidden;
overflow-x: none;
pointer-events: auto;
}
.cu-dialog {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 95%;
max-width: 100%;
background-color: #f8f8f8;
border-radius: 10upx;
overflow: hidden;
}
.picker-view {
height: 750rpx;
}
.item {
align-items: center;
justify-content: center;
text-align: center;
line-height: 34px;
}
.just {
display: flex;
align-items: center;
justify-content: space-between;
}
.btn {
width: 70%;
height: 40px;
line-height: 40px;
margin: 22px auto;
border-radius: 20px;
text-align: center;
color: #ffffff;
background: #3666db;
}
.title {
height: 44px;
line-height: 44px;
background: #ececec;
border-radius: 10px;
margin: 10px 0 0;
}
.cu-dialogBox {
position: fixed;
bottom: 0;
width: 100%;
}
.cancel {
height: 44px;
width: 95%;
background: #fff;
border-radius: 10px;
text-align: center;
line-height: 44px;
color: #7d7d7d;
margin: 5px auto;
}
.content_cssBox {
display: flex;
}
.info_css {
margin: 5px auto;
padding: 14.5px 10px 15px;
div:first-child {
font-size: 14px;
color: #7e7e7e;
}
}
.just {
div:last-child {
display: flex;
align-items: center;
text {
font-size: 14px;
line-height: 14px;
color: #bdbdbd;
margin-right: 5px;
}
image {
width: 6px;
height: 12px;
}
}
}
.content {
font-size: 15px;
font-weight: bold;
color: #333;
line-height: 15px;
height: 15px;
margin-top: 15.5px;
position: static;
padding-bottom: 10px;
}
.cu-bar {
position: static;
}
.typeText {
color: #333 !important;
font-weight: bold;
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.contentBoxLeft {
display: flex;
flex-direction: column;
width: 35%;
background: #f4f5f6;
overflow-y: scroll;
height: 348px;
}
.contentBoxLeftItem {
height: 43px;
line-height: 43px;
text-align: center;
margin-bottom: 3px;
}
.contentBoxRight {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
overflow-y: scroll;
height: 348px;
}
.contentBoxRightItem {
margin: 0 10px 8px;
border: 1px solid #e1e2e2;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
border-radius: 5px;
}
.activeLeft {
color: #3666DB;
background: #fff;
}
.activeRight {
border: 1px solid #3666DB;
background: #F5F6FF;
color: #3666DB;
}
.cuIcon-closes {
position: absolute;
right: 9.5px;
top: 15.5px;
image {
width: 12px;
height: 12px;
}
}
.postYear {
text-align: left;
margin: .5px 10px 20px;
display: flex;
align-items: center;
text {
font-size: 15px;
font-weight: bold;
margin-right: 5px;
}
image {
width: 6px;
height: 12px;
}
}
.yearClose {
position: static;
display: flex;
justify-content: flex-end;
margin: 15px 15px 5px 10px;
}
</style>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
