@@ -29,7 +29,9 @@ | |||||
<view class="food-card-info"> | <view class="food-card-info"> | ||||
<view class="food-card-name"> | <view class="food-card-name"> | ||||
{{food.name}} | {{food.name}} | ||||
</view> | |||||
<view class="reservation-timerange" v-if="isReserve"> | |||||
{{new Date(food.startReserveTime).toLocaleTimeString() || '无'}} - {{new Date(food.endReserveTime).toLocaleTimeString() || '无'}} | |||||
</view> | </view> | ||||
<view class="food-card-no-vip"> | <view class="food-card-no-vip"> | ||||
非会员{{food.price}}起 | 非会员{{food.price}}起 | ||||
@@ -49,7 +51,7 @@ | |||||
<view class="food-card-count" :class="{'hidden-blank-data': food.shopCartNumber < 1}"> | <view class="food-card-count" :class="{'hidden-blank-data': food.shopCartNumber < 1}"> | ||||
{{food.shopCartNumber}} | {{food.shopCartNumber}} | ||||
</view> | </view> | ||||
<icon class="iconfont icon-zengjia" @click="onChooseFood(food)"></icon> | |||||
<icon :class="{'iconfont': true, 'icon-zengjia': true, 'over-time': isOverTime(food)}" @click="onChooseFood(food)"></icon> | |||||
</view> | </view> | ||||
<view class="card-price-right special-offer-btn" v-if="isSpecialOffer" @click="onChooseSpecial(food)"> | <view class="card-price-right special-offer-btn" v-if="isSpecialOffer" @click="onChooseSpecial(food)"> | ||||
<icon class="iconfont icon-wancheng"></icon> | <icon class="iconfont icon-wancheng"></icon> | ||||
@@ -166,6 +168,11 @@ | |||||
}, | }, | ||||
// 点击加号选择商品 | // 点击加号选择商品 | ||||
onChooseFood(food, type) { | onChooseFood(food, type) { | ||||
if (this.isReserve) { | |||||
if (this.isOverTime(food)) { | |||||
return; | |||||
} | |||||
} | |||||
food.count = 0; | food.count = 0; | ||||
food.sencondId = food.id; | food.sencondId = food.id; | ||||
if (food.addtoFoodList && food.addtoFoodList.length > 0) { | if (food.addtoFoodList && food.addtoFoodList.length > 0) { | ||||
@@ -256,6 +263,19 @@ | |||||
}, | }, | ||||
onImageErrorType(item) { | onImageErrorType(item) { | ||||
item.coverUrl = this.imageServer.concat('empty-image.png'); | item.coverUrl = this.imageServer.concat('empty-image.png'); | ||||
}, | |||||
isOverTime(food) { | |||||
if (this.isReserve) { | |||||
const now = new Date().toLocaleTimeString(); | |||||
const start = new Date(food.startReserveTime).toLocaleTimeString(); | |||||
const end = new Date(food.endReserveTime).toLocaleTimeString(); | |||||
if (now > end || now < start) { | |||||
return true; | |||||
} | |||||
return false; | |||||
} else { | |||||
return false; | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -483,4 +503,13 @@ | |||||
margin-left: 10rpx; | margin-left: 10rpx; | ||||
color: #F84352; | color: #F84352; | ||||
} | } | ||||
.reservation-timerange { | |||||
font-size: 28rpx; | |||||
color: #333; | |||||
} | |||||
.over-time { | |||||
color: #999; | |||||
} | |||||
</style> | </style> |
@@ -337,6 +337,16 @@ | |||||
} | } | ||||
} | } | ||||
,{ | |||||
"path" : "pages/reservationRecord/reservationRecord", | |||||
"style" : | |||||
{ | |||||
"navigationBarTitleText": "预定记录", | |||||
"enablePullDownRefresh": false, | |||||
"navigationBarBackgroundColor": "#FFF" | |||||
} | |||||
} | |||||
], | ], | ||||
"tabBar": { | "tabBar": { | ||||
"color": "#999999", | "color": "#999999", | ||||
@@ -86,7 +86,7 @@ | |||||
}, | }, | ||||
async onSearchUserLocation() { | async onSearchUserLocation() { | ||||
let response = await getApp().onGetUserLocation(); | let response = await getApp().onGetUserLocation(); | ||||
if (response) { | |||||
if (true) { | |||||
this.isShowLoactionAuth = false; | this.isShowLoactionAuth = false; | ||||
this.onFetchStoreList(); | this.onFetchStoreList(); | ||||
} else { | } else { | ||||
@@ -158,7 +158,7 @@ | |||||
}, | }, | ||||
async onGetUserLocation() { | async onGetUserLocation() { | ||||
const response = await getApp().onGetUserLocation(); | const response = await getApp().onGetUserLocation(); | ||||
if (response) { | |||||
if (true) { | |||||
this.isShowLoactionAuth = false; | this.isShowLoactionAuth = false; | ||||
this.onQueryStoreAndGoods(); | this.onQueryStoreAndGoods(); | ||||
} else { | } else { | ||||
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<view class="goods-list-container"> | <view class="goods-list-container"> | ||||
<!-- 店名 --> | <!-- 店名 --> | ||||
<view class="store-name" @click="onStoreList"> | |||||
<view class="store-name" @click="onStoreList" v-if="false"> | |||||
<view class="store-name-text text-overflow-one"> | <view class="store-name-text text-overflow-one"> | ||||
{{currentStore.store_Name}} | {{currentStore.store_Name}} | ||||
</view> | </view> | ||||
@@ -17,7 +17,7 @@ | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<LocationAuth v-if="isShowLoactionAuth" @onSuccessLocationAuth="onSuccessLocationAuth"></LocationAuth> | <LocationAuth v-if="isShowLoactionAuth" @onSuccessLocationAuth="onSuccessLocationAuth"></LocationAuth> | ||||
<uni-popup ref="popup" type="bottom"> | |||||
<uni-popup ref="popup" type="bottom" v-if="false"> | |||||
<view class="store-list"> | <view class="store-list"> | ||||
<view :class="{'store-list-item': true, 'selected-store': store.id === currentStore.id}" v-for="(store,index) in storeList" :key="index" @click="onChooseStore(store)"> | <view :class="{'store-list-item': true, 'selected-store': store.id === currentStore.id}" v-for="(store,index) in storeList" :key="index" @click="onChooseStore(store)"> | ||||
<view class="store-list-name"> | <view class="store-list-name"> | ||||
@@ -63,6 +63,32 @@ | |||||
</view> | </view> | ||||
<icon class="iconfont icon-guanbi activity-popuo-close" @click="onSwitchActivityPopup(false)"></icon> | <icon class="iconfont icon-guanbi activity-popuo-close" @click="onSwitchActivityPopup(false)"></icon> | ||||
</u-popup> | </u-popup> | ||||
<uni-popup ref="popup" type="bottom" v-if="isHKApp"> | |||||
<view class="popup-form"> | |||||
<view class="popup-form-title"> | |||||
会员绑定员工卡 | |||||
</view> | |||||
<view class="member-regis-item"> | |||||
<view class="member-regis-prev"> | |||||
姓名 | |||||
</view> | |||||
<view class="member-regis-content member-regis-input"> | |||||
<input type="text" class="weui-input" placeholder="请输入真实姓名" v-model="memberInfo.realName"/> | |||||
</view> | |||||
</view> | |||||
<view class="member-regis-item"> | |||||
<view class="member-regis-prev"> | |||||
工号 | |||||
</view> | |||||
<view class="member-regis-content member-regis-input"> | |||||
<input type="text" class="weui-input" placeholder="请输入员工卡号!" v-model="memberInfo.jobNumber"/> | |||||
</view> | |||||
</view> | |||||
<view class="wechat-register-btn" @click="onBindMemberInfo"> | |||||
绑定员工信息 | |||||
</view> | |||||
</view> | |||||
</uni-popup> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -309,9 +335,13 @@ | |||||
getApp().onSetUserStorage(memberRes.data); | getApp().onSetUserStorage(memberRes.data); | ||||
if (memberRes.data.memberInfo_Id && memberRes.data.phone) { | if (memberRes.data.memberInfo_Id && memberRes.data.phone) { | ||||
this.memberInfo = memberRes.data; | this.memberInfo = memberRes.data; | ||||
uni.navigateTo({ | |||||
url: '/pages/foodReservation/foodReservation' | |||||
}); | |||||
if (memberRes.data.jobNumber && memberRes.data.realName) { | |||||
uni.navigateTo({ | |||||
url: '/pages/foodReservation/foodReservation' | |||||
}); | |||||
} else { | |||||
this.$refs.popup.open('center'); | |||||
} | |||||
} else { | } else { | ||||
uni.navigateTo({ | uni.navigateTo({ | ||||
url: '/pages/memberRegister/memberRegister' | url: '/pages/memberRegister/memberRegister' | ||||
@@ -337,7 +367,47 @@ | |||||
}); | }); | ||||
} | } | ||||
}); | }); | ||||
}, 2000, true) | |||||
}, 2000, true), | |||||
/** | |||||
* 绑定员工信息 | |||||
*/ | |||||
async onBindMemberInfo() { | |||||
if (this.memberInfo.realName.trim().length === 0 || this.memberInfo.jobNumber.trim().length === 0) { | |||||
uni.showToast({ | |||||
title: '姓名或工号不能为空!', | |||||
icon: 'none', | |||||
duration: 2000, | |||||
mask: true | |||||
}); | |||||
} else { | |||||
let registerRes = await memberAPI.insertOrUpdateMember(this.memberInfo); | |||||
if (registerRes.isSuccess == true) { | |||||
this.$refs.popup.close(); | |||||
getApp().onSetUserStorage(this.memberInfo); | |||||
store.commit('onChangeUserIsVip', true); | |||||
uni.showToast({ | |||||
title: '绑定成功!', | |||||
icon: 'none', | |||||
duration: 1500, | |||||
mask: true, | |||||
complete: () => { | |||||
setTimeout(() => { | |||||
uni.redirectTo({ | |||||
url: '/pages/foodReservation/foodReservation' | |||||
}); | |||||
}, 1500); | |||||
} | |||||
}); | |||||
} else { | |||||
uni.showToast({ | |||||
title: registerRes.msg, | |||||
icon: 'none', | |||||
duration: 1000, | |||||
mask: true | |||||
}); | |||||
} | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
@@ -571,4 +641,42 @@ | |||||
border-radius: 50%; | border-radius: 50%; | ||||
font-size: 25rpx; | font-size: 25rpx; | ||||
} | } | ||||
.member-regis-item { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
font-size: 28rpx; | |||||
height: 110rpx; | |||||
} | |||||
.member-regis-content { | |||||
flex-grow: 1; | |||||
margin-left: 10px; | |||||
} | |||||
.wechat-register-btn { | |||||
width: 650rpx; | |||||
height: 80rpx; | |||||
line-height: 80rpx; | |||||
text-align: center; | |||||
background-color: $theme-color; | |||||
margin: 0 auto; | |||||
color: #FFF; | |||||
border-radius: 50rpx; | |||||
margin-top: 40rpx; | |||||
margin-bottom: 40rpx; | |||||
} | |||||
.popup-form-title { | |||||
text-align: center; | |||||
font-size: 28rpx; | |||||
margin: 20rpx 0; | |||||
} | |||||
.popup-form { | |||||
background-color: #FFF; | |||||
padding: 30rpx; | |||||
border-radius: 20rpx; | |||||
} | |||||
</style> | </style> |
@@ -75,7 +75,7 @@ | |||||
工号 | 工号 | ||||
</view> | </view> | ||||
<view class="member-regis-content member-regis-input"> | <view class="member-regis-content member-regis-input"> | ||||
<input type="text" class="weui-input" placeholder="请输入员工卡号!" v-model="userInfo.staffNum"/> | |||||
<input type="text" class="weui-input" placeholder="请输入员工卡号!" v-model="userInfo.jobNumber"/> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -120,7 +120,7 @@ | |||||
gender: '', | gender: '', | ||||
phone: '', | phone: '', | ||||
realName: '', | realName: '', | ||||
staffNum: '' | |||||
jobNumber: '' | |||||
}, | }, | ||||
backgroundIMG: 'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/gz/applet/133064030402220970.png' | backgroundIMG: 'https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/gz/applet/133064030402220970.png' | ||||
} | } | ||||
@@ -163,7 +163,7 @@ | |||||
const user = getApp().onGetUserStorage(); | const user = getApp().onGetUserStorage(); | ||||
if (this.isAgree) { | if (this.isAgree) { | ||||
if (this.isHKApp) { | if (this.isHKApp) { | ||||
if (this.userInfo.realName.trim().length === 0 || this.userInfo.staffNum.trim().length === 0) { | |||||
if (this.userInfo.realName.trim().length === 0 || this.userInfo.jobNumber.trim().length === 0) { | |||||
uni.showToast({ | uni.showToast({ | ||||
title: '姓名或卡号不能为空!', | title: '姓名或卡号不能为空!', | ||||
icon: 'none', | icon: 'none', | ||||
@@ -180,7 +180,7 @@ | |||||
"platformMemberId": user.openId, | "platformMemberId": user.openId, | ||||
"phone": this.userInfo.phone, | "phone": this.userInfo.phone, | ||||
"realName": this.userInfo.realName, | "realName": this.userInfo.realName, | ||||
"staffNum": this.userInfo.staffNum | |||||
"jobNumber": this.userInfo.jobNumber | |||||
} | } | ||||
let registerRes = await memberAPI.insertOrUpdateMember(registerJson); | let registerRes = await memberAPI.insertOrUpdateMember(registerJson); | ||||
if (registerRes.isSuccess == true) { | if (registerRes.isSuccess == true) { | ||||
@@ -3,13 +3,13 @@ | |||||
<view class="my-header-cover"> | <view class="my-header-cover"> | ||||
<image class="image-common-cover" :src="backgroundIMG"></image> | <image class="image-common-cover" :src="backgroundIMG"></image> | ||||
</view> | </view> | ||||
<view class="my-face" v-if="user != null"> | |||||
<view class="my-face" v-if="user != null" @click="onReservationRecord"> | |||||
<image v-if="user.memberInfo_Id != null" class="image-common-cover" :src="user.headImgUrl"></image> | <image v-if="user.memberInfo_Id != null" class="image-common-cover" :src="user.headImgUrl"></image> | ||||
<image v-else class="image-common-cover" :src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"></image> | <image v-else class="image-common-cover" :src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"></image> | ||||
</view> | </view> | ||||
<view class="my-face" v-else @click="onLogin"> | <view class="my-face" v-else @click="onLogin"> | ||||
<image class="image-common-cover" :src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"></image> | <image class="image-common-cover" :src="imageServer.concat('22161959-e963-4760-83e7-49aa42d1fdca.jpg')"></image> | ||||
<text class="my-face-login">请登录</text> | |||||
<!-- <text class="my-face-login">请登录</text> --> | |||||
</view> | </view> | ||||
<view class="my-info-box"> | <view class="my-info-box"> | ||||
<view class="my-grade gold-color" v-if="false"> | <view class="my-grade gold-color" v-if="false"> | ||||
@@ -257,6 +257,13 @@ | |||||
this.backgroundIMG = JSON.parse(findBack.materialPath)[0]; | this.backgroundIMG = JSON.parse(findBack.materialPath)[0]; | ||||
} | } | ||||
} | } | ||||
}, | |||||
onReservationRecord() { | |||||
if (getApp().onHKApp()) { | |||||
uni.navigateTo({ | |||||
url: '/pages/reservationRecord/reservationRecord' | |||||
}); | |||||
} | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -93,7 +93,7 @@ | |||||
工号 | 工号 | ||||
</view> | </view> | ||||
<view class="personal-card-content text-overflow-one"> | <view class="personal-card-content text-overflow-one"> | ||||
{{memberCard.jobNumber}} | |||||
{{memberCard.jobNumber || '暂无工号'}} | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -0,0 +1,188 @@ | |||||
<template> | |||||
<view class="reservation-record-container"> | |||||
<view class="record-head"> | |||||
<view class="record-start-end-time"> | |||||
<view class="start-end-item"> | |||||
开始时间 | |||||
</view> | |||||
<view class="start-end-item"> | |||||
结束时间 | |||||
</view> | |||||
</view> | |||||
<uni-datetime-picker v-model="range" type="daterange" :border="false" @change="onQueryRecordeByDate" :clear-icon="false" /> | |||||
</view> | |||||
<scroll-view scroll-y="true" class="record-list-view"> | |||||
<view class="record-food-item" v-for="i in 100" :key="i"> | |||||
<view class="record-food-top"> | |||||
<view class="food-top-time"> | |||||
2022-12-5 15:53:30 | |||||
</view> | |||||
<view class="food-top-people"> | |||||
取餐人:梅西 | |||||
</view> | |||||
</view> | |||||
<view class="record-food-info"> | |||||
<view class="food-info-img"> | |||||
<image src="https://hbl-test-1305371387.cos.ap-chengdu.myqcloud.com/Franchisee/gz@163.com/goods/133042248957589963.jpeg"></image> | |||||
</view> | |||||
<view class="food-info-box"> | |||||
<view class="food-info-name"> | |||||
牛肉面(细面) | |||||
</view> | |||||
<view class="food-info-type"> | |||||
早餐 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="record-food-line"></view> | |||||
<view class="record-food-btn"> | |||||
<view class="unsubscribe-btn" > | |||||
退订 | |||||
</view> | |||||
<view class="consumption-btn" v-if="false"> | |||||
已消费 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</scroll-view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
range: [new Date().toLocaleDateString(), new Date().toLocaleDateString()] | |||||
} | |||||
}, | |||||
methods: { | |||||
/** | |||||
* 根据选择时间 查询预定记录 | |||||
*/ | |||||
onQueryRecordeByDate(timerChange) { | |||||
console.log('timerChange', timerChange) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.reservation-record-container { | |||||
width: 100vw; | |||||
height: 100vh; | |||||
overflow: hidden; | |||||
} | |||||
.record-head { | |||||
height: 120rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
flex-shrink: 0; | |||||
justify-content: center; | |||||
} | |||||
.record-start-end-time { | |||||
flex-shrink: 0; | |||||
display: flex; | |||||
color: #666; | |||||
font-size: 30rpx; | |||||
} | |||||
.start-end-item { | |||||
width: 50%; | |||||
text-align: center; | |||||
} | |||||
.record-list-view { | |||||
box-sizing: border-box; | |||||
height: calc(100vh - 120rpx); | |||||
background: rgb(245,246,250); | |||||
padding: 0 20rpx; | |||||
} | |||||
.record-food-item { | |||||
padding: 30rpx; | |||||
background: #FFF; | |||||
margin: 20rpx 0; | |||||
border-radius: 30rpx; | |||||
} | |||||
.record-food-top { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
height: 60rpx; | |||||
align-items: center; | |||||
.food-top-time { | |||||
font-size: 30rpx; | |||||
color: #222; | |||||
} | |||||
.food-top-people { | |||||
font-size: 28rpx; | |||||
color: #999; | |||||
} | |||||
} | |||||
.record-food-info { | |||||
display: flex; | |||||
.food-info-img { | |||||
width: 150rpx; | |||||
height: 150rpx; | |||||
margin-right: 20rpx; | |||||
flex-shrink: 0; | |||||
image { | |||||
width: 100%; | |||||
height: 100%; | |||||
object-fit: cover; | |||||
border-radius: 10rpx; | |||||
} | |||||
} | |||||
.food-info-box { | |||||
flex-grow: 1; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-between; | |||||
.food-info-name { | |||||
font-size: 34rpx; | |||||
color: #222; | |||||
} | |||||
.food-info-type { | |||||
font-size: 30rpx; | |||||
color: #999; | |||||
text-align: end; | |||||
} | |||||
} | |||||
} | |||||
.record-food-line { | |||||
border-top: 2rpx dashed #F1F1F1; | |||||
margin: 20rpx 0; | |||||
} | |||||
.record-food-btn { | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
.consumption-btn { | |||||
font-size: 28rpx; | |||||
color: #999; | |||||
} | |||||
.unsubscribe-btn { | |||||
background-color: $theme-color; | |||||
width: 200rpx; | |||||
text-align: center; | |||||
font-size: 28rpx; | |||||
height: 70rpx; | |||||
line-height: 70rpx; | |||||
border-radius: 100rpx; | |||||
color: #FFF; | |||||
letter-spacing: 10rpx; | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,105 @@ | |||||
## 2.2.12(2022-12-01) | |||||
- 修复 vue3 下 i18n 国际化初始值不正确的bug | |||||
## 2.2.11(2022-09-19) | |||||
- 修复,支付宝小程序样式错乱,[详情](https://github.com/dcloudio/uni-app/issues/3861) | |||||
## 2.2.10(2022-09-19) | |||||
- 修复,反向选择日期范围,日期显示异常,[详情](https://ask.dcloud.net.cn/question/153401?item_id=212892&rf=false) | |||||
## 2.2.9(2022-09-16) | |||||
- 可以使用 uni-scss 控制主题色 | |||||
## 2.2.8(2022-09-08) | |||||
- 修复 close事件无效的 bug | |||||
## 2.2.7(2022-09-05) | |||||
- 修复 移动端 maskClick 无效的 bug,详见:[https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false](https://ask.dcloud.net.cn/question/140824?item_id=209458&rf=false) | |||||
## 2.2.6(2022-06-30) | |||||
- 优化 组件样式,调整了组件图标大小、高度、颜色等,与uni-ui风格保持一致 | |||||
## 2.2.5(2022-06-24) | |||||
- 修复 日历顶部年月及底部确认未国际化 bug | |||||
## 2.2.4(2022-03-31) | |||||
- 修复 Vue3 下动态赋值,单选类型未响应的 bug | |||||
## 2.2.3(2022-03-28) | |||||
- 修复 Vue3 下动态赋值未响应的 bug | |||||
## 2.2.2(2021-12-10) | |||||
- 修复 clear-icon 属性在小程序平台不生效的 bug | |||||
## 2.2.1(2021-12-10) | |||||
- 修复 日期范围选在小程序平台,必须多点击一次才能取消选中状态的 bug | |||||
## 2.2.0(2021-11-19) | |||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-datetime-picker](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) | |||||
## 2.1.5(2021-11-09) | |||||
- 新增 提供组件设计资源,组件样式调整 | |||||
## 2.1.4(2021-09-10) | |||||
- 修复 hide-second 在移动端的 bug | |||||
- 修复 单选赋默认值时,赋值日期未高亮的 bug | |||||
- 修复 赋默认值时,移动端未正确显示时间的 bug | |||||
## 2.1.3(2021-09-09) | |||||
- 新增 hide-second 属性,支持只使用时分,隐藏秒 | |||||
## 2.1.2(2021-09-03) | |||||
- 优化 取消选中时(范围选)直接开始下一次选择, 避免多点一次 | |||||
- 优化 移动端支持清除按钮,同时支持通过 ref 调用组件的 clear 方法 | |||||
- 优化 调整字号大小,美化日历界面 | |||||
- 修复 因国际化导致的 placeholder 失效的 bug | |||||
## 2.1.1(2021-08-24) | |||||
- 新增 支持国际化 | |||||
- 优化 范围选择器在 pc 端过宽的问题 | |||||
## 2.1.0(2021-08-09) | |||||
- 新增 适配 vue3 | |||||
## 2.0.19(2021-08-09) | |||||
- 新增 支持作为 uni-forms 子组件相关功能 | |||||
- 修复 在 uni-forms 中使用时,选择时间报 NAN 错误的 bug | |||||
## 2.0.18(2021-08-05) | |||||
- 修复 type 属性动态赋值无效的 bug | |||||
- 修复 ‘确认’按钮被 tabbar 遮盖 bug | |||||
- 修复 组件未赋值时范围选左、右日历相同的 bug | |||||
## 2.0.17(2021-08-04) | |||||
- 修复 范围选未正确显示当前值的 bug | |||||
- 修复 h5 平台(移动端)报错 'cale' of undefined 的 bug | |||||
## 2.0.16(2021-07-21) | |||||
- 新增 return-type 属性支持返回 date 日期对象 | |||||
## 2.0.15(2021-07-14) | |||||
- 修复 单选日期类型,初始赋值后不在当前日历的 bug | |||||
- 新增 clearIcon 属性,显示框的清空按钮可配置显示隐藏(仅 pc 有效) | |||||
- 优化 移动端移除显示框的清空按钮,无实际用途 | |||||
## 2.0.14(2021-07-14) | |||||
- 修复 组件赋值为空,界面未更新的 bug | |||||
- 修复 start 和 end 不能动态赋值的 bug | |||||
- 修复 范围选类型,用户选择后再次选择右侧日历(结束日期)显示不正确的 bug | |||||
## 2.0.13(2021-07-08) | |||||
- 修复 范围选择不能动态赋值的 bug | |||||
## 2.0.12(2021-07-08) | |||||
- 修复 范围选择的初始时间在一个月内时,造成无法选择的bug | |||||
## 2.0.11(2021-07-08) | |||||
- 优化 弹出层在超出视窗边缘定位不准确的问题 | |||||
## 2.0.10(2021-07-08) | |||||
- 修复 范围起始点样式的背景色与今日样式的字体前景色融合,导致日期字体看不清的 bug | |||||
- 优化 弹出层在超出视窗边缘被遮盖的问题 | |||||
## 2.0.9(2021-07-07) | |||||
- 新增 maskClick 事件 | |||||
- 修复 特殊情况日历 rpx 布局错误的 bug,rpx -> px | |||||
- 修复 范围选择时清空返回值不合理的bug,['', ''] -> [] | |||||
## 2.0.8(2021-07-07) | |||||
- 新增 日期时间显示框支持插槽 | |||||
## 2.0.7(2021-07-01) | |||||
- 优化 添加 uni-icons 依赖 | |||||
## 2.0.6(2021-05-22) | |||||
- 修复 图标在小程序上不显示的 bug | |||||
- 优化 重命名引用组件,避免潜在组件命名冲突 | |||||
## 2.0.5(2021-05-20) | |||||
- 优化 代码目录扁平化 | |||||
## 2.0.4(2021-05-12) | |||||
- 新增 组件示例地址 | |||||
## 2.0.3(2021-05-10) | |||||
- 修复 ios 下不识别 '-' 日期格式的 bug | |||||
- 优化 pc 下弹出层添加边框和阴影 | |||||
## 2.0.2(2021-05-08) | |||||
- 修复 在 admin 中获取弹出层定位错误的bug | |||||
## 2.0.1(2021-05-08) | |||||
- 修复 type 属性向下兼容,默认值从 date 变更为 datetime | |||||
## 2.0.0(2021-04-30) | |||||
- 支持日历形式的日期+时间的范围选择 | |||||
> 注意:此版本不向后兼容,不再支持单独时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker) | |||||
## 1.0.6(2021-03-18) | |||||
- 新增 hide-second 属性,时间支持仅选择时、分 | |||||
- 修复 选择跟显示的日期不一样的 bug | |||||
- 修复 chang事件触发2次的 bug | |||||
- 修复 分、秒 end 范围错误的 bug | |||||
- 优化 更好的 nvue 适配 |
@@ -0,0 +1,187 @@ | |||||
<template> | |||||
<view class="uni-calendar-item__weeks-box" :class="{ | |||||
'uni-calendar-item--disable':weeks.disable, | |||||
'uni-calendar-item--before-checked-x':weeks.beforeMultiple, | |||||
'uni-calendar-item--multiple': weeks.multiple, | |||||
'uni-calendar-item--after-checked-x':weeks.afterMultiple, | |||||
}" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)"> | |||||
<view class="uni-calendar-item__weeks-box-item" :class="{ | |||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover), | |||||
'uni-calendar-item--checked-range-text': checkHover, | |||||
'uni-calendar-item--before-checked':weeks.beforeMultiple, | |||||
'uni-calendar-item--multiple': weeks.multiple, | |||||
'uni-calendar-item--after-checked':weeks.afterMultiple, | |||||
'uni-calendar-item--disable':weeks.disable, | |||||
}"> | |||||
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text> | |||||
<text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text> | |||||
</view> | |||||
<view :class="{'uni-calendar-item--isDay': weeks.isDay}"></view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
weeks: { | |||||
type: Object, | |||||
default () { | |||||
return {} | |||||
} | |||||
}, | |||||
calendar: { | |||||
type: Object, | |||||
default: () => { | |||||
return {} | |||||
} | |||||
}, | |||||
selected: { | |||||
type: Array, | |||||
default: () => { | |||||
return [] | |||||
} | |||||
}, | |||||
lunar: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
checkHover: { | |||||
type: Boolean, | |||||
default: false | |||||
} | |||||
}, | |||||
methods: { | |||||
choiceDate(weeks) { | |||||
this.$emit('change', weeks) | |||||
}, | |||||
handleMousemove(weeks) { | |||||
this.$emit('handleMouse', weeks) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" > | |||||
$uni-primary: #007aff !default; | |||||
.uni-calendar-item__weeks-box { | |||||
flex: 1; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
margin: 1px 0; | |||||
position: relative; | |||||
} | |||||
.uni-calendar-item__weeks-box-text { | |||||
font-size: 14px; | |||||
// font-family: Lato-Bold, Lato; | |||||
font-weight: bold; | |||||
color: darken($color: $uni-primary, $amount: 40%); | |||||
} | |||||
.uni-calendar-item__weeks-lunar-text { | |||||
font-size: 12px; | |||||
color: #333; | |||||
} | |||||
.uni-calendar-item__weeks-box-item { | |||||
position: relative; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 40px; | |||||
height: 40px; | |||||
/* #ifdef H5 */ | |||||
cursor: pointer; | |||||
/* #endif */ | |||||
} | |||||
.uni-calendar-item__weeks-box-circle { | |||||
position: absolute; | |||||
top: 5px; | |||||
right: 5px; | |||||
width: 8px; | |||||
height: 8px; | |||||
border-radius: 8px; | |||||
background-color: #dd524d; | |||||
} | |||||
.uni-calendar-item__weeks-box .uni-calendar-item--disable { | |||||
// background-color: rgba(249, 249, 249, $uni-opacity-disabled); | |||||
cursor: default; | |||||
} | |||||
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable { | |||||
color: #D1D1D1; | |||||
} | |||||
.uni-calendar-item--isDay { | |||||
position: absolute; | |||||
top: 10px; | |||||
right: 17%; | |||||
background-color: #dd524d; | |||||
width:6px; | |||||
height: 6px; | |||||
border-radius: 50%; | |||||
} | |||||
.uni-calendar-item--extra { | |||||
color: #dd524d; | |||||
opacity: 0.8; | |||||
} | |||||
.uni-calendar-item__weeks-box .uni-calendar-item--checked { | |||||
background-color: $uni-primary; | |||||
border-radius: 50%; | |||||
box-sizing: border-box; | |||||
border: 3px solid #fff; | |||||
} | |||||
.uni-calendar-item--checked .uni-calendar-item--checked-text { | |||||
color: #fff; | |||||
} | |||||
.uni-calendar-item--multiple .uni-calendar-item--checked-range-text { | |||||
color: #333; | |||||
} | |||||
.uni-calendar-item--multiple { | |||||
background-color: #F6F7FC; | |||||
// color: #fff; | |||||
} | |||||
.uni-calendar-item--multiple .uni-calendar-item--before-checked, | |||||
.uni-calendar-item--multiple .uni-calendar-item--after-checked { | |||||
background-color: $uni-primary; | |||||
border-radius: 50%; | |||||
box-sizing: border-box; | |||||
border: 3px solid #F6F7FC; | |||||
} | |||||
.uni-calendar-item--before-checked .uni-calendar-item--checked-text, | |||||
.uni-calendar-item--after-checked .uni-calendar-item--checked-text { | |||||
color: #fff; | |||||
} | |||||
.uni-calendar-item--before-checked-x { | |||||
border-top-left-radius: 50px; | |||||
border-bottom-left-radius: 50px; | |||||
box-sizing: border-box; | |||||
background-color: #F6F7FC; | |||||
} | |||||
.uni-calendar-item--after-checked-x { | |||||
border-top-right-radius: 50px; | |||||
border-bottom-right-radius: 50px; | |||||
background-color: #F6F7FC; | |||||
} | |||||
</style> |
@@ -0,0 +1,924 @@ | |||||
<template> | |||||
<view class="uni-calendar" @mouseleave="leaveCale"> | |||||
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" | |||||
@click="clean();maskClick()"></view> | |||||
<view v-if="insert || show" class="uni-calendar__content" | |||||
:class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow, 'uni-calendar__content-mobile': aniMaskShow}"> | |||||
<view class="uni-calendar__header" :class="{'uni-calendar__header-mobile' :!insert}"> | |||||
<view v-if="left" class="uni-calendar__header-btn-box" @click.stop="pre"> | |||||
<view class="uni-calendar__header-btn uni-calendar--left"></view> | |||||
</view> | |||||
<picker mode="date" :value="date" fields="month" @change="bindDateChange"> | |||||
<text | |||||
class="uni-calendar__header-text">{{ (nowDate.year||'') + yearText + ( nowDate.month||'') + monthText}}</text> | |||||
</picker> | |||||
<view v-if="right" class="uni-calendar__header-btn-box" @click.stop="next"> | |||||
<view class="uni-calendar__header-btn uni-calendar--right"></view> | |||||
</view> | |||||
<view v-if="!insert" class="dialog-close" @click="clean"> | |||||
<view class="dialog-close-plus" data-id="close"></view> | |||||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view> | |||||
</view> | |||||
<!-- <text class="uni-calendar__backtoday" @click="backtoday">回到今天</text> --> | |||||
</view> | |||||
<view class="uni-calendar__box"> | |||||
<view v-if="showMonth" class="uni-calendar__box-bg"> | |||||
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text> | |||||
</view> | |||||
<view class="uni-calendar__weeks" style="padding-bottom: 7px;"> | |||||
<view class="uni-calendar__weeks-day"> | |||||
<text class="uni-calendar__weeks-day-text">{{SUNText}}</text> | |||||
</view> | |||||
<view class="uni-calendar__weeks-day"> | |||||
<text class="uni-calendar__weeks-day-text">{{MONText}}</text> | |||||
</view> | |||||
<view class="uni-calendar__weeks-day"> | |||||
<text class="uni-calendar__weeks-day-text">{{TUEText}}</text> | |||||
</view> | |||||
<view class="uni-calendar__weeks-day"> | |||||
<text class="uni-calendar__weeks-day-text">{{WEDText}}</text> | |||||
</view> | |||||
<view class="uni-calendar__weeks-day"> | |||||
<text class="uni-calendar__weeks-day-text">{{THUText}}</text> | |||||
</view> | |||||
<view class="uni-calendar__weeks-day"> | |||||
<text class="uni-calendar__weeks-day-text">{{FRIText}}</text> | |||||
</view> | |||||
<view class="uni-calendar__weeks-day"> | |||||
<text class="uni-calendar__weeks-day-text">{{SATText}}</text> | |||||
</view> | |||||
</view> | |||||
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex"> | |||||
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex"> | |||||
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" | |||||
:selected="selected" :lunar="lunar" :checkHover="range" @change="choiceDate" | |||||
@handleMouse="handleMouse"> | |||||
</calendar-item> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view v-if="!insert && !range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top" | |||||
style="padding: 0 80px;"> | |||||
<view class="uni-date-changed--time-date">{{tempSingleDate ? tempSingleDate : selectDateText}}</view> | |||||
<time-picker type="time" :start="reactStartTime" :end="reactEndTime" v-model="time" | |||||
:disabled="!tempSingleDate" :border="false" :hide-second="hideSecond" class="time-picker-style"> | |||||
</time-picker> | |||||
</view> | |||||
<view v-if="!insert && range && typeHasTime" class="uni-date-changed uni-calendar--fixed-top"> | |||||
<view class="uni-date-changed--time-start"> | |||||
<view class="uni-date-changed--time-date">{{tempRange.before ? tempRange.before : startDateText}} | |||||
</view> | |||||
<time-picker type="time" :start="reactStartTime" v-model="timeRange.startTime" :border="false" | |||||
:hide-second="hideSecond" :disabled="!tempRange.before" class="time-picker-style"> | |||||
</time-picker> | |||||
</view> | |||||
<view style="line-height: 50px;"> | |||||
<uni-icons type="arrowthinright" color="#999"></uni-icons> | |||||
</view> | |||||
<view class="uni-date-changed--time-end"> | |||||
<view class="uni-date-changed--time-date">{{tempRange.after ? tempRange.after : endDateText}}</view> | |||||
<time-picker type="time" :end="reactEndTime" v-model="timeRange.endTime" :border="false" | |||||
:hide-second="hideSecond" :disabled="!tempRange.after" class="time-picker-style"> | |||||
</time-picker> | |||||
</view> | |||||
</view> | |||||
<view v-if="!insert" class="uni-date-changed uni-date-btn--ok"> | |||||
<!-- <view class="uni-calendar__header-btn-box"> | |||||
<text class="uni-calendar__button-text uni-calendar--fixed-width">{{okText}}</text> | |||||
</view> --> | |||||
<view class="uni-datetime-picker--btn" @click="confirm">{{confirmText}}</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import Calendar from './util.js'; | |||||
import calendarItem from './calendar-item.vue' | |||||
import timePicker from './time-picker.vue' | |||||
import { | |||||
initVueI18n | |||||
} from '@dcloudio/uni-i18n' | |||||
import messages from './i18n/index.js' | |||||
const { | |||||
t | |||||
} = initVueI18n(messages) | |||||
/** | |||||
* Calendar 日历 | |||||
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等 | |||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=56 | |||||
* @property {String} date 自定义当前时间,默认为今天 | |||||
* @property {Boolean} lunar 显示农历 | |||||
* @property {String} startDate 日期选择范围-开始日期 | |||||
* @property {String} endDate 日期选择范围-结束日期 | |||||
* @property {Boolean} range 范围选择 | |||||
* @property {Boolean} insert = [true|false] 插入模式,默认为false | |||||
* @value true 弹窗模式 | |||||
* @value false 插入模式 | |||||
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容 | |||||
* @property {Array} selected 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] | |||||
* @property {Boolean} showMonth 是否选择月份为背景 | |||||
* @event {Function} change 日期改变,`insert :ture` 时生效 | |||||
* @event {Function} confirm 确认选择`insert :false` 时生效 | |||||
* @event {Function} monthSwitch 切换月份时触发 | |||||
* @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" /> | |||||
*/ | |||||
export default { | |||||
components: { | |||||
calendarItem, | |||||
timePicker | |||||
}, | |||||
props: { | |||||
date: { | |||||
type: String, | |||||
default: '' | |||||
}, | |||||
defTime: { | |||||
type: [String, Object], | |||||
default: '' | |||||
}, | |||||
selectableTimes: { | |||||
type: [Object], | |||||
default () { | |||||
return {} | |||||
} | |||||
}, | |||||
selected: { | |||||
type: Array, | |||||
default () { | |||||
return [] | |||||
} | |||||
}, | |||||
lunar: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
startDate: { | |||||
type: String, | |||||
default: '' | |||||
}, | |||||
endDate: { | |||||
type: String, | |||||
default: '' | |||||
}, | |||||
range: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
typeHasTime: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
insert: { | |||||
type: Boolean, | |||||
default: true | |||||
}, | |||||
showMonth: { | |||||
type: Boolean, | |||||
default: true | |||||
}, | |||||
clearDate: { | |||||
type: Boolean, | |||||
default: true | |||||
}, | |||||
left: { | |||||
type: Boolean, | |||||
default: true | |||||
}, | |||||
right: { | |||||
type: Boolean, | |||||
default: true | |||||
}, | |||||
checkHover: { | |||||
type: Boolean, | |||||
default: true | |||||
}, | |||||
hideSecond: { | |||||
type: [Boolean], | |||||
default: false | |||||
}, | |||||
pleStatus: { | |||||
type: Object, | |||||
default () { | |||||
return { | |||||
before: '', | |||||
after: '', | |||||
data: [], | |||||
fulldate: '' | |||||
} | |||||
} | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
show: false, | |||||
weeks: [], | |||||
calendar: {}, | |||||
nowDate: '', | |||||
aniMaskShow: false, | |||||
firstEnter: true, | |||||
time: '', | |||||
timeRange: { | |||||
startTime: '', | |||||
endTime: '' | |||||
}, | |||||
tempSingleDate: '', | |||||
tempRange: { | |||||
before: '', | |||||
after: '' | |||||
} | |||||
} | |||||
}, | |||||
watch: { | |||||
date: { | |||||
immediate: true, | |||||
handler(newVal, oldVal) { | |||||
if (!this.range) { | |||||
this.tempSingleDate = newVal | |||||
setTimeout(() => { | |||||
this.init(newVal) | |||||
}, 100) | |||||
} | |||||
} | |||||
}, | |||||
defTime: { | |||||
immediate: true, | |||||
handler(newVal, oldVal) { | |||||
if (!this.range) { | |||||
this.time = newVal | |||||
} else { | |||||
// console.log('-----', newVal); | |||||
this.timeRange.startTime = newVal.start | |||||
this.timeRange.endTime = newVal.end | |||||
} | |||||
} | |||||
}, | |||||
startDate(val) { | |||||
this.cale.resetSatrtDate(val) | |||||
this.cale.setDate(this.nowDate.fullDate) | |||||
this.weeks = this.cale.weeks | |||||
}, | |||||
endDate(val) { | |||||
this.cale.resetEndDate(val) | |||||
this.cale.setDate(this.nowDate.fullDate) | |||||
this.weeks = this.cale.weeks | |||||
}, | |||||
selected(newVal) { | |||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal) | |||||
this.weeks = this.cale.weeks | |||||
}, | |||||
pleStatus: { | |||||
immediate: true, | |||||
handler(newVal, oldVal) { | |||||
const { | |||||
before, | |||||
after, | |||||
fulldate, | |||||
which | |||||
} = newVal | |||||
this.tempRange.before = before | |||||
this.tempRange.after = after | |||||
setTimeout(() => { | |||||
if (fulldate) { | |||||
this.cale.setHoverMultiple(fulldate) | |||||
if (before && after) { | |||||
this.cale.lastHover = true | |||||
if (this.rangeWithinMonth(after, before)) return | |||||
this.setDate(before) | |||||
} else { | |||||
this.cale.setMultiple(fulldate) | |||||
this.setDate(this.nowDate.fullDate) | |||||
this.calendar.fullDate = '' | |||||
this.cale.lastHover = false | |||||
} | |||||
} else { | |||||
this.cale.setDefaultMultiple(before, after) | |||||
if (which === 'left') { | |||||
this.setDate(before) | |||||
this.weeks = this.cale.weeks | |||||
} else { | |||||
this.setDate(after) | |||||
this.weeks = this.cale.weeks | |||||
} | |||||
this.cale.lastHover = true | |||||
} | |||||
}, 16) | |||||
} | |||||
} | |||||
}, | |||||
computed: { | |||||
reactStartTime() { | |||||
const activeDate = this.range ? this.tempRange.before : this.calendar.fullDate | |||||
const res = activeDate === this.startDate ? this.selectableTimes.start : '' | |||||
return res | |||||
}, | |||||
reactEndTime() { | |||||
const activeDate = this.range ? this.tempRange.after : this.calendar.fullDate | |||||
const res = activeDate === this.endDate ? this.selectableTimes.end : '' | |||||
return res | |||||
}, | |||||
/** | |||||
* for i18n | |||||
*/ | |||||
selectDateText() { | |||||
return t("uni-datetime-picker.selectDate") | |||||
}, | |||||
startDateText() { | |||||
return this.startPlaceholder || t("uni-datetime-picker.startDate") | |||||
}, | |||||
endDateText() { | |||||
return this.endPlaceholder || t("uni-datetime-picker.endDate") | |||||
}, | |||||
okText() { | |||||
return t("uni-datetime-picker.ok") | |||||
}, | |||||
yearText() { | |||||
return t("uni-datetime-picker.year") | |||||
}, | |||||
monthText() { | |||||
return t("uni-datetime-picker.month") | |||||
}, | |||||
MONText() { | |||||
return t("uni-calender.MON") | |||||
}, | |||||
TUEText() { | |||||
return t("uni-calender.TUE") | |||||
}, | |||||
WEDText() { | |||||
return t("uni-calender.WED") | |||||
}, | |||||
THUText() { | |||||
return t("uni-calender.THU") | |||||
}, | |||||
FRIText() { | |||||
return t("uni-calender.FRI") | |||||
}, | |||||
SATText() { | |||||
return t("uni-calender.SAT") | |||||
}, | |||||
SUNText() { | |||||
return t("uni-calender.SUN") | |||||
}, | |||||
confirmText() { | |||||
return t("uni-calender.confirm") | |||||
}, | |||||
}, | |||||
created() { | |||||
// 获取日历方法实例 | |||||
this.cale = new Calendar({ | |||||
// date: new Date(), | |||||
selected: this.selected, | |||||
startDate: this.startDate, | |||||
endDate: this.endDate, | |||||
range: this.range, | |||||
// multipleStatus: this.pleStatus | |||||
}) | |||||
// 选中某一天 | |||||
// this.cale.setDate(this.date) | |||||
this.init(this.date) | |||||
// this.setDay | |||||
}, | |||||
methods: { | |||||
leaveCale() { | |||||
this.firstEnter = true | |||||
}, | |||||
handleMouse(weeks) { | |||||
if (weeks.disable) return | |||||
if (this.cale.lastHover) return | |||||
let { | |||||
before, | |||||
after | |||||
} = this.cale.multipleStatus | |||||
if (!before) return | |||||
this.calendar = weeks | |||||
// 设置范围选 | |||||
this.cale.setHoverMultiple(this.calendar.fullDate) | |||||
this.weeks = this.cale.weeks | |||||
// hover时,进入一个日历,更新另一个 | |||||
if (this.firstEnter) { | |||||
this.$emit('firstEnterCale', this.cale.multipleStatus) | |||||
this.firstEnter = false | |||||
} | |||||
}, | |||||
rangeWithinMonth(A, B) { | |||||
const [yearA, monthA] = A.split('-') | |||||
const [yearB, monthB] = B.split('-') | |||||
return yearA === yearB && monthA === monthB | |||||
}, | |||||
// 取消穿透 | |||||
clean() { | |||||
this.close() | |||||
}, | |||||
// 蒙版点击事件 | |||||
maskClick() { | |||||
this.$emit('maskClose') | |||||
}, | |||||
clearCalender() { | |||||
if (this.range) { | |||||
this.timeRange.startTime = '' | |||||
this.timeRange.endTime = '' | |||||
this.tempRange.before = '' | |||||
this.tempRange.after = '' | |||||
this.cale.multipleStatus.before = '' | |||||
this.cale.multipleStatus.after = '' | |||||
this.cale.multipleStatus.data = [] | |||||
this.cale.lastHover = false | |||||
} else { | |||||
this.time = '' | |||||
this.tempSingleDate = '' | |||||
} | |||||
this.calendar.fullDate = '' | |||||
this.setDate() | |||||
}, | |||||
bindDateChange(e) { | |||||
const value = e.detail.value + '-1' | |||||
this.init(value) | |||||
}, | |||||
/** | |||||
* 初始化日期显示 | |||||
* @param {Object} date | |||||
*/ | |||||
init(date) { | |||||
this.cale.setDate(date) | |||||
this.weeks = this.cale.weeks | |||||
this.nowDate = this.calendar = this.cale.getInfo(date) | |||||
}, | |||||
// choiceDate(weeks) { | |||||
// if (weeks.disable) return | |||||
// this.calendar = weeks | |||||
// // 设置多选 | |||||
// this.cale.setMultiple(this.calendar.fullDate, true) | |||||
// this.weeks = this.cale.weeks | |||||
// this.tempSingleDate = this.calendar.fullDate | |||||
// this.tempRange.before = this.cale.multipleStatus.before | |||||
// this.tempRange.after = this.cale.multipleStatus.after | |||||
// this.change() | |||||
// }, | |||||
/** | |||||
* 打开日历弹窗 | |||||
*/ | |||||
open() { | |||||
// 弹窗模式并且清理数据 | |||||
if (this.clearDate && !this.insert) { | |||||
this.cale.cleanMultipleStatus() | |||||
// this.cale.setDate(this.date) | |||||
this.init(this.date) | |||||
} | |||||
this.show = true | |||||
this.$nextTick(() => { | |||||
setTimeout(() => { | |||||
this.aniMaskShow = true | |||||
}, 50) | |||||
}) | |||||
}, | |||||
/** | |||||
* 关闭日历弹窗 | |||||
*/ | |||||
close() { | |||||
this.aniMaskShow = false | |||||
this.$nextTick(() => { | |||||
setTimeout(() => { | |||||
this.show = false | |||||
this.$emit('close') | |||||
}, 300) | |||||
}) | |||||
}, | |||||
/** | |||||
* 确认按钮 | |||||
*/ | |||||
confirm() { | |||||
this.setEmit('confirm') | |||||
this.close() | |||||
}, | |||||
/** | |||||
* 变化触发 | |||||
*/ | |||||
change() { | |||||
if (!this.insert) return | |||||
this.setEmit('change') | |||||
}, | |||||
/** | |||||
* 选择月份触发 | |||||
*/ | |||||
monthSwitch() { | |||||
let { | |||||
year, | |||||
month | |||||
} = this.nowDate | |||||
this.$emit('monthSwitch', { | |||||
year, | |||||
month: Number(month) | |||||
}) | |||||
}, | |||||
/** | |||||
* 派发事件 | |||||
* @param {Object} name | |||||
*/ | |||||
setEmit(name) { | |||||
let { | |||||
year, | |||||
month, | |||||
date, | |||||
fullDate, | |||||
lunar, | |||||
extraInfo | |||||
} = this.calendar | |||||
this.$emit(name, { | |||||
range: this.cale.multipleStatus, | |||||
year, | |||||
month, | |||||
date, | |||||
time: this.time, | |||||
timeRange: this.timeRange, | |||||
fulldate: fullDate, | |||||
lunar, | |||||
extraInfo: extraInfo || {} | |||||
}) | |||||
}, | |||||
/** | |||||
* 选择天触发 | |||||
* @param {Object} weeks | |||||
*/ | |||||
choiceDate(weeks) { | |||||
if (weeks.disable) return | |||||
this.calendar = weeks | |||||
this.calendar.userChecked = true | |||||
// 设置多选 | |||||
this.cale.setMultiple(this.calendar.fullDate, true) | |||||
this.weeks = this.cale.weeks | |||||
this.tempSingleDate = this.calendar.fullDate | |||||
const beforeStatus = this.cale.multipleStatus.before | |||||
const beforeDate = new Date(this.cale.multipleStatus.before).getTime() | |||||
const afterDate = new Date(this.cale.multipleStatus.after).getTime() | |||||
if (beforeDate > afterDate && afterDate) { | |||||
this.tempRange.before = this.cale.multipleStatus.after | |||||
this.tempRange.after = this.cale.multipleStatus.before | |||||
} else { | |||||
this.tempRange.before = this.cale.multipleStatus.before | |||||
this.tempRange.after = this.cale.multipleStatus.after | |||||
} | |||||
this.change() | |||||
}, | |||||
/** | |||||
* 回到今天 | |||||
*/ | |||||
backtoday() { | |||||
let date = this.cale.getDate(new Date()).fullDate | |||||
// this.cale.setDate(date) | |||||
this.init(date) | |||||
this.change() | |||||
}, | |||||
/** | |||||
* 比较时间大小 | |||||
*/ | |||||
dateCompare(startDate, endDate) { | |||||
// 计算截止时间 | |||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/')) | |||||
// 计算详细项的截止时间 | |||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/')) | |||||
if (startDate <= endDate) { | |||||
return true | |||||
} else { | |||||
return false | |||||
} | |||||
}, | |||||
/** | |||||
* 上个月 | |||||
*/ | |||||
pre() { | |||||
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate | |||||
this.setDate(preDate) | |||||
this.monthSwitch() | |||||
}, | |||||
/** | |||||
* 下个月 | |||||
*/ | |||||
next() { | |||||
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate | |||||
this.setDate(nextDate) | |||||
this.monthSwitch() | |||||
}, | |||||
/** | |||||
* 设置日期 | |||||
* @param {Object} date | |||||
*/ | |||||
setDate(date) { | |||||
this.cale.setDate(date) | |||||
this.weeks = this.cale.weeks | |||||
this.nowDate = this.cale.getInfo(date) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" > | |||||
$uni-primary: #007aff !default; | |||||
.uni-calendar { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: column; | |||||
} | |||||
.uni-calendar__mask { | |||||
position: fixed; | |||||
bottom: 0; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
background-color: rgba(0, 0, 0, 0.4); | |||||
transition-property: opacity; | |||||
transition-duration: 0.3s; | |||||
opacity: 0; | |||||
/* #ifndef APP-NVUE */ | |||||
z-index: 99; | |||||
/* #endif */ | |||||
} | |||||
.uni-calendar--mask-show { | |||||
opacity: 1 | |||||
} | |||||
.uni-calendar--fixed { | |||||
position: fixed; | |||||
bottom: calc(var(--window-bottom)); | |||||
left: 0; | |||||
right: 0; | |||||
transition-property: transform; | |||||
transition-duration: 0.3s; | |||||
transform: translateY(460px); | |||||
/* #ifndef APP-NVUE */ | |||||
z-index: 99; | |||||
/* #endif */ | |||||
} | |||||
.uni-calendar--ani-show { | |||||
transform: translateY(0); | |||||
} | |||||
.uni-calendar__content { | |||||
background-color: #fff; | |||||
} | |||||
.uni-calendar__content-mobile { | |||||
border-top-left-radius: 10px; | |||||
border-top-right-radius: 10px; | |||||
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1); | |||||
} | |||||
.uni-calendar__header { | |||||
position: relative; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
justify-content: center; | |||||
align-items: center; | |||||
height: 50px; | |||||
} | |||||
.uni-calendar__header-mobile { | |||||
padding: 10px; | |||||
padding-bottom: 0; | |||||
} | |||||
.uni-calendar--fixed-top { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
justify-content: space-between; | |||||
border-top-color: rgba(0, 0, 0, 0.4); | |||||
border-top-style: solid; | |||||
border-top-width: 1px; | |||||
} | |||||
.uni-calendar--fixed-width { | |||||
width: 50px; | |||||
} | |||||
.uni-calendar__backtoday { | |||||
position: absolute; | |||||
right: 0; | |||||
top: 25rpx; | |||||
padding: 0 5px; | |||||
padding-left: 10px; | |||||
height: 25px; | |||||
line-height: 25px; | |||||
font-size: 12px; | |||||
border-top-left-radius: 25px; | |||||
border-bottom-left-radius: 25px; | |||||
color: #fff; | |||||
background-color: #f1f1f1; | |||||
} | |||||
.uni-calendar__header-text { | |||||
text-align: center; | |||||
width: 100px; | |||||
font-size: 15px; | |||||
color: #666; | |||||
} | |||||
.uni-calendar__button-text { | |||||
text-align: center; | |||||
width: 100px; | |||||
font-size: 14px; | |||||
color: $uni-primary; | |||||
/* #ifndef APP-NVUE */ | |||||
letter-spacing: 3px; | |||||
/* #endif */ | |||||
} | |||||
.uni-calendar__header-btn-box { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
align-items: center; | |||||
justify-content: center; | |||||
width: 50px; | |||||
height: 50px; | |||||
} | |||||
.uni-calendar__header-btn { | |||||
width: 9px; | |||||
height: 9px; | |||||
border-left-color: #808080; | |||||
border-left-style: solid; | |||||
border-left-width: 1px; | |||||
border-top-color: #555555; | |||||
border-top-style: solid; | |||||
border-top-width: 1px; | |||||
} | |||||
.uni-calendar--left { | |||||
transform: rotate(-45deg); | |||||
} | |||||
.uni-calendar--right { | |||||
transform: rotate(135deg); | |||||
} | |||||
.uni-calendar__weeks { | |||||
position: relative; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
} | |||||
.uni-calendar__weeks-item { | |||||
flex: 1; | |||||
} | |||||
.uni-calendar__weeks-day { | |||||
flex: 1; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
height: 40px; | |||||
border-bottom-color: #F5F5F5; | |||||
border-bottom-style: solid; | |||||
border-bottom-width: 1px; | |||||
} | |||||
.uni-calendar__weeks-day-text { | |||||
font-size: 12px; | |||||
color: #B2B2B2; | |||||
} | |||||
.uni-calendar__box { | |||||
position: relative; | |||||
// padding: 0 10px; | |||||
padding-bottom: 7px; | |||||
} | |||||
.uni-calendar__box-bg { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
justify-content: center; | |||||
align-items: center; | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
} | |||||
.uni-calendar__box-bg-text { | |||||
font-size: 200px; | |||||
font-weight: bold; | |||||
color: #999; | |||||
opacity: 0.1; | |||||
text-align: center; | |||||
/* #ifndef APP-NVUE */ | |||||
line-height: 1; | |||||
/* #endif */ | |||||
} | |||||
.uni-date-changed { | |||||
padding: 0 10px; | |||||
// line-height: 50px; | |||||
text-align: center; | |||||
color: #333; | |||||
border-top-color: #DCDCDC; | |||||
; | |||||
border-top-style: solid; | |||||
border-top-width: 1px; | |||||
flex: 1; | |||||
} | |||||
.uni-date-btn--ok { | |||||
padding: 20px 15px; | |||||
} | |||||
.uni-date-changed--time-start { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
align-items: center; | |||||
} | |||||
.uni-date-changed--time-end { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
align-items: center; | |||||
} | |||||
.uni-date-changed--time-date { | |||||
color: #999; | |||||
line-height: 50px; | |||||
margin-right: 5px; | |||||
// opacity: 0.6; | |||||
} | |||||
.time-picker-style { | |||||
// width: 62px; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
justify-content: center; | |||||
align-items: center | |||||
} | |||||
.mr-10 { | |||||
margin-right: 10px; | |||||
} | |||||
.dialog-close { | |||||
position: absolute; | |||||
top: 0; | |||||
right: 0; | |||||
bottom: 0; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
align-items: center; | |||||
padding: 0 25px; | |||||
margin-top: 10px; | |||||
} | |||||
.dialog-close-plus { | |||||
width: 16px; | |||||
height: 2px; | |||||
background-color: #737987; | |||||
border-radius: 2px; | |||||
transform: rotate(45deg); | |||||
} | |||||
.dialog-close-rotate { | |||||
position: absolute; | |||||
transform: rotate(-45deg); | |||||
} | |||||
.uni-datetime-picker--btn { | |||||
border-radius: 100px; | |||||
height: 40px; | |||||
line-height: 40px; | |||||
background-color: $uni-primary; | |||||
color: #fff; | |||||
font-size: 16px; | |||||
letter-spacing: 2px; | |||||
} | |||||
/* #ifndef APP-NVUE */ | |||||
.uni-datetime-picker--btn:active { | |||||
opacity: 0.7; | |||||
} | |||||
/* #endif */ | |||||
</style> |
@@ -0,0 +1,22 @@ | |||||
{ | |||||
"uni-datetime-picker.selectDate": "select date", | |||||
"uni-datetime-picker.selectTime": "select time", | |||||
"uni-datetime-picker.selectDateTime": "select datetime", | |||||
"uni-datetime-picker.startDate": "start date", | |||||
"uni-datetime-picker.endDate": "end date", | |||||
"uni-datetime-picker.startTime": "start time", | |||||
"uni-datetime-picker.endTime": "end time", | |||||
"uni-datetime-picker.ok": "ok", | |||||
"uni-datetime-picker.clear": "clear", | |||||
"uni-datetime-picker.cancel": "cancel", | |||||
"uni-datetime-picker.year": "-", | |||||
"uni-datetime-picker.month": "", | |||||
"uni-calender.MON": "MON", | |||||
"uni-calender.TUE": "TUE", | |||||
"uni-calender.WED": "WED", | |||||
"uni-calender.THU": "THU", | |||||
"uni-calender.FRI": "FRI", | |||||
"uni-calender.SAT": "SAT", | |||||
"uni-calender.SUN": "SUN", | |||||
"uni-calender.confirm": "confirm" | |||||
} |
@@ -0,0 +1,8 @@ | |||||
import en from './en.json' | |||||
import zhHans from './zh-Hans.json' | |||||
import zhHant from './zh-Hant.json' | |||||
export default { | |||||
en, | |||||
'zh-Hans': zhHans, | |||||
'zh-Hant': zhHant | |||||
} |
@@ -0,0 +1,22 @@ | |||||
{ | |||||
"uni-datetime-picker.selectDate": "选择日期", | |||||
"uni-datetime-picker.selectTime": "选择时间", | |||||
"uni-datetime-picker.selectDateTime": "选择日期时间", | |||||
"uni-datetime-picker.startDate": "开始日期", | |||||
"uni-datetime-picker.endDate": "结束日期", | |||||
"uni-datetime-picker.startTime": "开始时间", | |||||
"uni-datetime-picker.endTime": "结束时间", | |||||
"uni-datetime-picker.ok": "确定", | |||||
"uni-datetime-picker.clear": "清除", | |||||
"uni-datetime-picker.cancel": "取消", | |||||
"uni-datetime-picker.year": "年", | |||||
"uni-datetime-picker.month": "月", | |||||
"uni-calender.SUN": "日", | |||||
"uni-calender.MON": "一", | |||||
"uni-calender.TUE": "二", | |||||
"uni-calender.WED": "三", | |||||
"uni-calender.THU": "四", | |||||
"uni-calender.FRI": "五", | |||||
"uni-calender.SAT": "六", | |||||
"uni-calender.confirm": "确认" | |||||
} |
@@ -0,0 +1,22 @@ | |||||
{ | |||||
"uni-datetime-picker.selectDate": "選擇日期", | |||||
"uni-datetime-picker.selectTime": "選擇時間", | |||||
"uni-datetime-picker.selectDateTime": "選擇日期時間", | |||||
"uni-datetime-picker.startDate": "開始日期", | |||||
"uni-datetime-picker.endDate": "結束日期", | |||||
"uni-datetime-picker.startTime": "開始时间", | |||||
"uni-datetime-picker.endTime": "結束时间", | |||||
"uni-datetime-picker.ok": "確定", | |||||
"uni-datetime-picker.clear": "清除", | |||||
"uni-datetime-picker.cancel": "取消", | |||||
"uni-datetime-picker.year": "年", | |||||
"uni-datetime-picker.month": "月", | |||||
"uni-calender.SUN": "日", | |||||
"uni-calender.MON": "一", | |||||
"uni-calender.TUE": "二", | |||||
"uni-calender.WED": "三", | |||||
"uni-calender.THU": "四", | |||||
"uni-calender.FRI": "五", | |||||
"uni-calender.SAT": "六", | |||||
"uni-calender.confirm": "確認" | |||||
} |
@@ -0,0 +1,45 @@ | |||||
// #ifdef H5 | |||||
export default { | |||||
name: 'Keypress', | |||||
props: { | |||||
disable: { | |||||
type: Boolean, | |||||
default: false | |||||
} | |||||
}, | |||||
mounted () { | |||||
const keyNames = { | |||||
esc: ['Esc', 'Escape'], | |||||
tab: 'Tab', | |||||
enter: 'Enter', | |||||
space: [' ', 'Spacebar'], | |||||
up: ['Up', 'ArrowUp'], | |||||
left: ['Left', 'ArrowLeft'], | |||||
right: ['Right', 'ArrowRight'], | |||||
down: ['Down', 'ArrowDown'], | |||||
delete: ['Backspace', 'Delete', 'Del'] | |||||
} | |||||
const listener = ($event) => { | |||||
if (this.disable) { | |||||
return | |||||
} | |||||
const keyName = Object.keys(keyNames).find(key => { | |||||
const keyName = $event.key | |||||
const value = keyNames[key] | |||||
return value === keyName || (Array.isArray(value) && value.includes(keyName)) | |||||
}) | |||||
if (keyName) { | |||||
// 避免和其他按键事件冲突 | |||||
setTimeout(() => { | |||||
this.$emit(keyName, {}) | |||||
}, 0) | |||||
} | |||||
} | |||||
document.addEventListener('keyup', listener) | |||||
this.$once('hook:beforeDestroy', () => { | |||||
document.removeEventListener('keyup', listener) | |||||
}) | |||||
}, | |||||
render: () => {} | |||||
} | |||||
// #endif |
@@ -0,0 +1,946 @@ | |||||
<template> | |||||
<view class="uni-datetime-picker"> | |||||
<view @click="initTimePicker"> | |||||
<slot> | |||||
<view class="uni-datetime-picker-timebox-pointer" | |||||
:class="{'uni-datetime-picker-disabled': disabled, 'uni-datetime-picker-timebox': border}"> | |||||
<text class="uni-datetime-picker-text">{{time}}</text> | |||||
<view v-if="!time" class="uni-datetime-picker-time"> | |||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text> | |||||
</view> | |||||
</view> | |||||
</slot> | |||||
</view> | |||||
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view> | |||||
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']" | |||||
:style="fixNvueBug"> | |||||
<view class="uni-title"> | |||||
<text class="uni-datetime-picker-text">{{selectTimeText}}</text> | |||||
</view> | |||||
<view v-if="dateShow" class="uni-datetime-picker__container-box"> | |||||
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd" | |||||
@change="bindDateChange"> | |||||
<picker-view-column> | |||||
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index"> | |||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> | |||||
</view> | |||||
</picker-view-column> | |||||
<picker-view-column> | |||||
<view class="uni-datetime-picker-item" v-for="(item,index) in months" :key="index"> | |||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> | |||||
</view> | |||||
</picker-view-column> | |||||
<picker-view-column> | |||||
<view class="uni-datetime-picker-item" v-for="(item,index) in days" :key="index"> | |||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> | |||||
</view> | |||||
</picker-view-column> | |||||
</picker-view> | |||||
<!-- 兼容 nvue 不支持伪类 --> | |||||
<text class="uni-datetime-picker-sign sign-left">-</text> | |||||
<text class="uni-datetime-picker-sign sign-right">-</text> | |||||
</view> | |||||
<view v-if="timeShow" class="uni-datetime-picker__container-box"> | |||||
<picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']" | |||||
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange"> | |||||
<picker-view-column> | |||||
<view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index"> | |||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> | |||||
</view> | |||||
</picker-view-column> | |||||
<picker-view-column> | |||||
<view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index"> | |||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> | |||||
</view> | |||||
</picker-view-column> | |||||
<picker-view-column v-if="!hideSecond"> | |||||
<view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index"> | |||||
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text> | |||||
</view> | |||||
</picker-view-column> | |||||
</picker-view> | |||||
<!-- 兼容 nvue 不支持伪类 --> | |||||
<text class="uni-datetime-picker-sign" :class="[hideSecond ? 'sign-center' : 'sign-left']">:</text> | |||||
<text v-if="!hideSecond" class="uni-datetime-picker-sign sign-right">:</text> | |||||
</view> | |||||
<view class="uni-datetime-picker-btn"> | |||||
<view @click="clearTime"> | |||||
<text class="uni-datetime-picker-btn-text">{{clearText}}</text> | |||||
</view> | |||||
<view class="uni-datetime-picker-btn-group"> | |||||
<view class="uni-datetime-picker-cancel" @click="tiggerTimePicker"> | |||||
<text class="uni-datetime-picker-btn-text">{{cancelText}}</text> | |||||
</view> | |||||
<view @click="setTime"> | |||||
<text class="uni-datetime-picker-btn-text">{{okText}}</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- #ifdef H5 --> | |||||
<!-- <keypress v-if="visible" @esc="tiggerTimePicker" @enter="setTime" /> --> | |||||
<!-- #endif --> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
// #ifdef H5 | |||||
import keypress from './keypress' | |||||
// #endif | |||||
import { | |||||
initVueI18n | |||||
} from '@dcloudio/uni-i18n' | |||||
import messages from './i18n/index.js' | |||||
const { t } = initVueI18n(messages) | |||||
/** | |||||
* DatetimePicker 时间选择器 | |||||
* @description 可以同时选择日期和时间的选择器 | |||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=xxx | |||||
* @property {String} type = [datetime | date | time] 显示模式 | |||||
* @property {Boolean} multiple = [true|false] 是否多选 | |||||
* @property {String|Number} value 默认值 | |||||
* @property {String|Number} start 起始日期或时间 | |||||
* @property {String|Number} end 起始日期或时间 | |||||
* @property {String} return-type = [timestamp | string] | |||||
* @event {Function} change 选中发生变化触发 | |||||
*/ | |||||
export default { | |||||
name: 'UniDatetimePicker', | |||||
components: { | |||||
// #ifdef H5 | |||||
keypress | |||||
// #endif | |||||
}, | |||||
data() { | |||||
return { | |||||
indicatorStyle: `height: 50px;`, | |||||
visible: false, | |||||
fixNvueBug: {}, | |||||
dateShow: true, | |||||
timeShow: true, | |||||
title: '日期和时间', | |||||
// 输入框当前时间 | |||||
time: '', | |||||
// 当前的年月日时分秒 | |||||
year: 1920, | |||||
month: 0, | |||||
day: 0, | |||||
hour: 0, | |||||
minute: 0, | |||||
second: 0, | |||||
// 起始时间 | |||||
startYear: 1920, | |||||
startMonth: 1, | |||||
startDay: 1, | |||||
startHour: 0, | |||||
startMinute: 0, | |||||
startSecond: 0, | |||||
// 结束时间 | |||||
endYear: 2120, | |||||
endMonth: 12, | |||||
endDay: 31, | |||||
endHour: 23, | |||||
endMinute: 59, | |||||
endSecond: 59, | |||||
} | |||||
}, | |||||
props: { | |||||
type: { | |||||
type: String, | |||||
default: 'datetime' | |||||
}, | |||||
value: { | |||||
type: [String, Number], | |||||
default: '' | |||||
}, | |||||
modelValue: { | |||||
type: [String, Number], | |||||
default: '' | |||||
}, | |||||
start: { | |||||
type: [Number, String], | |||||
default: '' | |||||
}, | |||||
end: { | |||||
type: [Number, String], | |||||
default: '' | |||||
}, | |||||
returnType: { | |||||
type: String, | |||||
default: 'string' | |||||
}, | |||||
disabled: { | |||||
type: [Boolean, String], | |||||
default: false | |||||
}, | |||||
border: { | |||||
type: [Boolean, String], | |||||
default: true | |||||
}, | |||||
hideSecond: { | |||||
type: [Boolean, String], | |||||
default: false | |||||
} | |||||
}, | |||||
watch: { | |||||
// #ifndef VUE3 | |||||
value: { | |||||
handler(newVal, oldVal) { | |||||
if (newVal) { | |||||
this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式 | |||||
this.initTime(false) | |||||
} else { | |||||
this.time = '' | |||||
this.parseValue(Date.now()) | |||||
} | |||||
}, | |||||
immediate: true | |||||
}, | |||||
// #endif | |||||
// #ifdef VUE3 | |||||
modelValue: { | |||||
handler(newVal, oldVal) { | |||||
if (newVal) { | |||||
this.parseValue(this.fixIosDateFormat(newVal)) //兼容 iOS、safari 日期格式 | |||||
this.initTime(false) | |||||
} else { | |||||
this.time = '' | |||||
this.parseValue(Date.now()) | |||||
} | |||||
}, | |||||
immediate: true | |||||
}, | |||||
// #endif | |||||
type: { | |||||
handler(newValue) { | |||||
if (newValue === 'date') { | |||||
this.dateShow = true | |||||
this.timeShow = false | |||||
this.title = '日期' | |||||
} else if (newValue === 'time') { | |||||
this.dateShow = false | |||||
this.timeShow = true | |||||
this.title = '时间' | |||||
} else { | |||||
this.dateShow = true | |||||
this.timeShow = true | |||||
this.title = '日期和时间' | |||||
} | |||||
}, | |||||
immediate: true | |||||
}, | |||||
start: { | |||||
handler(newVal) { | |||||
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'start') //兼容 iOS、safari 日期格式 | |||||
}, | |||||
immediate: true | |||||
}, | |||||
end: { | |||||
handler(newVal) { | |||||
this.parseDatetimeRange(this.fixIosDateFormat(newVal), 'end') //兼容 iOS、safari 日期格式 | |||||
}, | |||||
immediate: true | |||||
}, | |||||
// 月、日、时、分、秒可选范围变化后,检查当前值是否在范围内,不在则当前值重置为可选范围第一项 | |||||
months(newVal) { | |||||
this.checkValue('month', this.month, newVal) | |||||
}, | |||||
days(newVal) { | |||||
this.checkValue('day', this.day, newVal) | |||||
}, | |||||
hours(newVal) { | |||||
this.checkValue('hour', this.hour, newVal) | |||||
}, | |||||
minutes(newVal) { | |||||
this.checkValue('minute', this.minute, newVal) | |||||
}, | |||||
seconds(newVal) { | |||||
this.checkValue('second', this.second, newVal) | |||||
} | |||||
}, | |||||
computed: { | |||||
// 当前年、月、日、时、分、秒选择范围 | |||||
years() { | |||||
return this.getCurrentRange('year') | |||||
}, | |||||
months() { | |||||
return this.getCurrentRange('month') | |||||
}, | |||||
days() { | |||||
return this.getCurrentRange('day') | |||||
}, | |||||
hours() { | |||||
return this.getCurrentRange('hour') | |||||
}, | |||||
minutes() { | |||||
return this.getCurrentRange('minute') | |||||
}, | |||||
seconds() { | |||||
return this.getCurrentRange('second') | |||||
}, | |||||
// picker 当前值数组 | |||||
ymd() { | |||||
return [this.year - this.minYear, this.month - this.minMonth, this.day - this.minDay] | |||||
}, | |||||
hms() { | |||||
return [this.hour - this.minHour, this.minute - this.minMinute, this.second - this.minSecond] | |||||
}, | |||||
// 当前 date 是 start | |||||
currentDateIsStart() { | |||||
return this.year === this.startYear && this.month === this.startMonth && this.day === this.startDay | |||||
}, | |||||
// 当前 date 是 end | |||||
currentDateIsEnd() { | |||||
return this.year === this.endYear && this.month === this.endMonth && this.day === this.endDay | |||||
}, | |||||
// 当前年、月、日、时、分、秒的最小值和最大值 | |||||
minYear() { | |||||
return this.startYear | |||||
}, | |||||
maxYear() { | |||||
return this.endYear | |||||
}, | |||||
minMonth() { | |||||
if (this.year === this.startYear) { | |||||
return this.startMonth | |||||
} else { | |||||
return 1 | |||||
} | |||||
}, | |||||
maxMonth() { | |||||
if (this.year === this.endYear) { | |||||
return this.endMonth | |||||
} else { | |||||
return 12 | |||||
} | |||||
}, | |||||
minDay() { | |||||
if (this.year === this.startYear && this.month === this.startMonth) { | |||||
return this.startDay | |||||
} else { | |||||
return 1 | |||||
} | |||||
}, | |||||
maxDay() { | |||||
if (this.year === this.endYear && this.month === this.endMonth) { | |||||
return this.endDay | |||||
} else { | |||||
return this.daysInMonth(this.year, this.month) | |||||
} | |||||
}, | |||||
minHour() { | |||||
if (this.type === 'datetime') { | |||||
if (this.currentDateIsStart) { | |||||
return this.startHour | |||||
} else { | |||||
return 0 | |||||
} | |||||
} | |||||
if (this.type === 'time') { | |||||
return this.startHour | |||||
} | |||||
}, | |||||
maxHour() { | |||||
if (this.type === 'datetime') { | |||||
if (this.currentDateIsEnd) { | |||||
return this.endHour | |||||
} else { | |||||
return 23 | |||||
} | |||||
} | |||||
if (this.type === 'time') { | |||||
return this.endHour | |||||
} | |||||
}, | |||||
minMinute() { | |||||
if (this.type === 'datetime') { | |||||
if (this.currentDateIsStart && this.hour === this.startHour) { | |||||
return this.startMinute | |||||
} else { | |||||
return 0 | |||||
} | |||||
} | |||||
if (this.type === 'time') { | |||||
if (this.hour === this.startHour) { | |||||
return this.startMinute | |||||
} else { | |||||
return 0 | |||||
} | |||||
} | |||||
}, | |||||
maxMinute() { | |||||
if (this.type === 'datetime') { | |||||
if (this.currentDateIsEnd && this.hour === this.endHour) { | |||||
return this.endMinute | |||||
} else { | |||||
return 59 | |||||
} | |||||
} | |||||
if (this.type === 'time') { | |||||
if (this.hour === this.endHour) { | |||||
return this.endMinute | |||||
} else { | |||||
return 59 | |||||
} | |||||
} | |||||
}, | |||||
minSecond() { | |||||
if (this.type === 'datetime') { | |||||
if (this.currentDateIsStart && this.hour === this.startHour && this.minute === this.startMinute) { | |||||
return this.startSecond | |||||
} else { | |||||
return 0 | |||||
} | |||||
} | |||||
if (this.type === 'time') { | |||||
if (this.hour === this.startHour && this.minute === this.startMinute) { | |||||
return this.startSecond | |||||
} else { | |||||
return 0 | |||||
} | |||||
} | |||||
}, | |||||
maxSecond() { | |||||
if (this.type === 'datetime') { | |||||
if (this.currentDateIsEnd && this.hour === this.endHour && this.minute === this.endMinute) { | |||||
return this.endSecond | |||||
} else { | |||||
return 59 | |||||
} | |||||
} | |||||
if (this.type === 'time') { | |||||
if (this.hour === this.endHour && this.minute === this.endMinute) { | |||||
return this.endSecond | |||||
} else { | |||||
return 59 | |||||
} | |||||
} | |||||
}, | |||||
/** | |||||
* for i18n | |||||
*/ | |||||
selectTimeText() { | |||||
return t("uni-datetime-picker.selectTime") | |||||
}, | |||||
okText() { | |||||
return t("uni-datetime-picker.ok") | |||||
}, | |||||
clearText() { | |||||
return t("uni-datetime-picker.clear") | |||||
}, | |||||
cancelText() { | |||||
return t("uni-datetime-picker.cancel") | |||||
} | |||||
}, | |||||
mounted() { | |||||
// #ifdef APP-NVUE | |||||
const res = uni.getSystemInfoSync(); | |||||
this.fixNvueBug = { | |||||
top: res.windowHeight / 2, | |||||
left: res.windowWidth / 2 | |||||
} | |||||
// #endif | |||||
}, | |||||
methods: { | |||||
/** | |||||
* @param {Object} item | |||||
* 小于 10 在前面加个 0 | |||||
*/ | |||||
lessThanTen(item) { | |||||
return item < 10 ? '0' + item : item | |||||
}, | |||||
/** | |||||
* 解析时分秒字符串,例如:00:00:00 | |||||
* @param {String} timeString | |||||
*/ | |||||
parseTimeType(timeString) { | |||||
if (timeString) { | |||||
let timeArr = timeString.split(':') | |||||
this.hour = Number(timeArr[0]) | |||||
this.minute = Number(timeArr[1]) | |||||
this.second = Number(timeArr[2]) | |||||
} | |||||
}, | |||||
/** | |||||
* 解析选择器初始值,类型可以是字符串、时间戳,例如:2000-10-02、'08:30:00'、 1610695109000 | |||||
* @param {String | Number} datetime | |||||
*/ | |||||
initPickerValue(datetime) { | |||||
let defaultValue = null | |||||
if (datetime) { | |||||
defaultValue = this.compareValueWithStartAndEnd(datetime, this.start, this.end) | |||||
} else { | |||||
defaultValue = Date.now() | |||||
defaultValue = this.compareValueWithStartAndEnd(defaultValue, this.start, this.end) | |||||
} | |||||
this.parseValue(defaultValue) | |||||
}, | |||||
/** | |||||
* 初始值规则: | |||||
* - 用户设置初始值 value | |||||
* - 设置了起始时间 start、终止时间 end,并 start < value < end,初始值为 value, 否则初始值为 start | |||||
* - 只设置了起始时间 start,并 start < value,初始值为 value,否则初始值为 start | |||||
* - 只设置了终止时间 end,并 value < end,初始值为 value,否则初始值为 end | |||||
* - 无起始终止时间,则初始值为 value | |||||
* - 无初始值 value,则初始值为当前本地时间 Date.now() | |||||
* @param {Object} value | |||||
* @param {Object} dateBase | |||||
*/ | |||||
compareValueWithStartAndEnd(value, start, end) { | |||||
let winner = null | |||||
value = this.superTimeStamp(value) | |||||
start = this.superTimeStamp(start) | |||||
end = this.superTimeStamp(end) | |||||
if (start && end) { | |||||
if (value < start) { | |||||
winner = new Date(start) | |||||
} else if (value > end) { | |||||
winner = new Date(end) | |||||
} else { | |||||
winner = new Date(value) | |||||
} | |||||
} else if (start && !end) { | |||||
winner = start <= value ? new Date(value) : new Date(start) | |||||
} else if (!start && end) { | |||||
winner = value <= end ? new Date(value) : new Date(end) | |||||
} else { | |||||
winner = new Date(value) | |||||
} | |||||
return winner | |||||
}, | |||||
/** | |||||
* 转换为可比较的时间戳,接受日期、时分秒、时间戳 | |||||
* @param {Object} value | |||||
*/ | |||||
superTimeStamp(value) { | |||||
let dateBase = '' | |||||
if (this.type === 'time' && value && typeof value === 'string') { | |||||
const now = new Date() | |||||
const year = now.getFullYear() | |||||
const month = now.getMonth() + 1 | |||||
const day = now.getDate() | |||||
dateBase = year + '/' + month + '/' + day + ' ' | |||||
} | |||||
if (Number(value) && typeof value !== NaN) { | |||||
value = parseInt(value) | |||||
dateBase = 0 | |||||
} | |||||
return this.createTimeStamp(dateBase + value) | |||||
}, | |||||
/** | |||||
* 解析默认值 value,字符串、时间戳 | |||||
* @param {Object} defaultTime | |||||
*/ | |||||
parseValue(value) { | |||||
if (!value) { | |||||
return | |||||
} | |||||
if (this.type === 'time' && typeof value === "string") { | |||||
this.parseTimeType(value) | |||||
} else { | |||||
let defaultDate = null | |||||
defaultDate = new Date(value) | |||||
if (this.type !== 'time') { | |||||
this.year = defaultDate.getFullYear() | |||||
this.month = defaultDate.getMonth() + 1 | |||||
this.day = defaultDate.getDate() | |||||
} | |||||
if (this.type !== 'date') { | |||||
this.hour = defaultDate.getHours() | |||||
this.minute = defaultDate.getMinutes() | |||||
this.second = defaultDate.getSeconds() | |||||
} | |||||
} | |||||
if (this.hideSecond) { | |||||
this.second = 0 | |||||
} | |||||
}, | |||||
/** | |||||
* 解析可选择时间范围 start、end,年月日字符串、时间戳 | |||||
* @param {Object} defaultTime | |||||
*/ | |||||
parseDatetimeRange(point, pointType) { | |||||
// 时间为空,则重置为初始值 | |||||
if (!point) { | |||||
if (pointType === 'start') { | |||||
this.startYear = 1920 | |||||
this.startMonth = 1 | |||||
this.startDay = 1 | |||||
this.startHour = 0 | |||||
this.startMinute = 0 | |||||
this.startSecond = 0 | |||||
} | |||||
if (pointType === 'end') { | |||||
this.endYear = 2120 | |||||
this.endMonth = 12 | |||||
this.endDay = 31 | |||||
this.endHour = 23 | |||||
this.endMinute = 59 | |||||
this.endSecond = 59 | |||||
} | |||||
return | |||||
} | |||||
if (this.type === 'time') { | |||||
const pointArr = point.split(':') | |||||
this[pointType + 'Hour'] = Number(pointArr[0]) | |||||
this[pointType + 'Minute'] = Number(pointArr[1]) | |||||
this[pointType + 'Second'] = Number(pointArr[2]) | |||||
} else { | |||||
if (!point) { | |||||
pointType === 'start' ? this.startYear = this.year - 60 : this.endYear = this.year + 60 | |||||
return | |||||
} | |||||
if (Number(point) && Number(point) !== NaN) { | |||||
point = parseInt(point) | |||||
} | |||||
// datetime 的 end 没有时分秒, 则不限制 | |||||
const hasTime = /[0-9]:[0-9]/ | |||||
if (this.type === 'datetime' && pointType === 'end' && typeof point === 'string' && !hasTime.test( | |||||
point)) { | |||||
point = point + ' 23:59:59' | |||||
} | |||||
const pointDate = new Date(point) | |||||
this[pointType + 'Year'] = pointDate.getFullYear() | |||||
this[pointType + 'Month'] = pointDate.getMonth() + 1 | |||||
this[pointType + 'Day'] = pointDate.getDate() | |||||
if (this.type === 'datetime') { | |||||
this[pointType + 'Hour'] = pointDate.getHours() | |||||
this[pointType + 'Minute'] = pointDate.getMinutes() | |||||
this[pointType + 'Second'] = pointDate.getSeconds() | |||||
} | |||||
} | |||||
}, | |||||
// 获取 年、月、日、时、分、秒 当前可选范围 | |||||
getCurrentRange(value) { | |||||
const range = [] | |||||
for (let i = this['min' + this.capitalize(value)]; i <= this['max' + this.capitalize(value)]; i++) { | |||||
range.push(i) | |||||
} | |||||
return range | |||||
}, | |||||
// 字符串首字母大写 | |||||
capitalize(str) { | |||||
return str.charAt(0).toUpperCase() + str.slice(1) | |||||
}, | |||||
// 检查当前值是否在范围内,不在则当前值重置为可选范围第一项 | |||||
checkValue(name, value, values) { | |||||
if (values.indexOf(value) === -1) { | |||||
this[name] = values[0] | |||||
} | |||||
}, | |||||
// 每个月的实际天数 | |||||
daysInMonth(year, month) { // Use 1 for January, 2 for February, etc. | |||||
return new Date(year, month, 0).getDate(); | |||||
}, | |||||
//兼容 iOS、safari 日期格式 | |||||
fixIosDateFormat(value) { | |||||
if (typeof value === 'string') { | |||||
value = value.replace(/-/g, '/') | |||||
} | |||||
return value | |||||
}, | |||||
/** | |||||
* 生成时间戳 | |||||
* @param {Object} time | |||||
*/ | |||||
createTimeStamp(time) { | |||||
if (!time) return | |||||
if (typeof time === "number") { | |||||
return time | |||||
} else { | |||||
time = time.replace(/-/g, '/') | |||||
if (this.type === 'date') { | |||||
time = time + ' ' + '00:00:00' | |||||
} | |||||
return Date.parse(time) | |||||
} | |||||
}, | |||||
/** | |||||
* 生成日期或时间的字符串 | |||||
*/ | |||||
createDomSting() { | |||||
const yymmdd = this.year + | |||||
'-' + | |||||
this.lessThanTen(this.month) + | |||||
'-' + | |||||
this.lessThanTen(this.day) | |||||
let hhmmss = this.lessThanTen(this.hour) + | |||||
':' + | |||||
this.lessThanTen(this.minute) | |||||
if (!this.hideSecond) { | |||||
hhmmss = hhmmss + ':' + this.lessThanTen(this.second) | |||||
} | |||||
if (this.type === 'date') { | |||||
return yymmdd | |||||
} else if (this.type === 'time') { | |||||
return hhmmss | |||||
} else { | |||||
return yymmdd + ' ' + hhmmss | |||||
} | |||||
}, | |||||
/** | |||||
* 初始化返回值,并抛出 change 事件 | |||||
*/ | |||||
initTime(emit = true) { | |||||
this.time = this.createDomSting() | |||||
if (!emit) return | |||||
if (this.returnType === 'timestamp' && this.type !== 'time') { | |||||
this.$emit('change', this.createTimeStamp(this.time)) | |||||
this.$emit('input', this.createTimeStamp(this.time)) | |||||
this.$emit('update:modelValue', this.createTimeStamp(this.time)) | |||||
} else { | |||||
this.$emit('change', this.time) | |||||
this.$emit('input', this.time) | |||||
this.$emit('update:modelValue', this.time) | |||||
} | |||||
}, | |||||
/** | |||||
* 用户选择日期或时间更新 data | |||||
* @param {Object} e | |||||
*/ | |||||
bindDateChange(e) { | |||||
const val = e.detail.value | |||||
this.year = this.years[val[0]] | |||||
this.month = this.months[val[1]] | |||||
this.day = this.days[val[2]] | |||||
}, | |||||
bindTimeChange(e) { | |||||
const val = e.detail.value | |||||
this.hour = this.hours[val[0]] | |||||
this.minute = this.minutes[val[1]] | |||||
this.second = this.seconds[val[2]] | |||||
}, | |||||
/** | |||||
* 初始化弹出层 | |||||
*/ | |||||
initTimePicker() { | |||||
if (this.disabled) return | |||||
const value = this.fixIosDateFormat(this.value) | |||||
this.initPickerValue(value) | |||||
this.visible = !this.visible | |||||
}, | |||||
/** | |||||
* 触发或关闭弹框 | |||||
*/ | |||||
tiggerTimePicker(e) { | |||||
this.visible = !this.visible | |||||
}, | |||||
/** | |||||
* 用户点击“清空”按钮,清空当前值 | |||||
*/ | |||||
clearTime() { | |||||
this.time = '' | |||||
this.$emit('change', this.time) | |||||
this.$emit('input', this.time) | |||||
this.$emit('update:modelValue', this.time) | |||||
this.tiggerTimePicker() | |||||
}, | |||||
/** | |||||
* 用户点击“确定”按钮 | |||||
*/ | |||||
setTime() { | |||||
this.initTime() | |||||
this.tiggerTimePicker() | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss"> | |||||
$uni-primary: #007aff !default; | |||||
.uni-datetime-picker { | |||||
/* #ifndef APP-NVUE */ | |||||
/* width: 100%; */ | |||||
/* #endif */ | |||||
} | |||||
.uni-datetime-picker-view { | |||||
height: 130px; | |||||
width: 270px; | |||||
/* #ifndef APP-NVUE */ | |||||
cursor: pointer; | |||||
/* #endif */ | |||||
} | |||||
.uni-datetime-picker-item { | |||||
height: 50px; | |||||
line-height: 50px; | |||||
text-align: center; | |||||
font-size: 14px; | |||||
} | |||||
.uni-datetime-picker-btn { | |||||
margin-top: 60px; | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
cursor: pointer; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
justify-content: space-between; | |||||
} | |||||
.uni-datetime-picker-btn-text { | |||||
font-size: 14px; | |||||
color: $uni-primary; | |||||
} | |||||
.uni-datetime-picker-btn-group { | |||||
/* #ifndef APP-NVUE */ | |||||
display: flex; | |||||
/* #endif */ | |||||
flex-direction: row; | |||||
} | |||||
.uni-datetime-picker-cancel { | |||||
margin-right: 30px; | |||||
} | |||||
.uni-datetime-picker-mask { | |||||
position: fixed; | |||||
bottom: 0px; | |||||
top: 0px; | |||||
left: 0px; | |||||
right: 0px; | |||||
background-color: rgba(0, 0, 0, 0.4); | |||||
transition-duration: 0.3s; | |||||
z-index: 998; | |||||
} | |||||
.uni-datetime-picker-popup { | |||||
border-radius: 8px; | |||||
padding: 30px; | |||||
width: 270px; | |||||
/* #ifdef APP-NVUE */ | |||||
height: 500px; | |||||
/* #endif */ | |||||
/* #ifdef APP-NVUE */ | |||||
width: 330px; | |||||
/* #endif */ | |||||
background-color: #fff; | |||||
position: fixed; | |||||
top: 50%; | |||||
left: 50%; | |||||
transform: translate(-50%, -50%); | |||||
transition-duration: 0.3s; | |||||
z-index: 999; | |||||
} | |||||
.fix-nvue-height { | |||||
/* #ifdef APP-NVUE */ | |||||
height: 330px; | |||||
/* #endif */ | |||||
} | |||||
.uni-datetime-picker-time { | |||||
color: grey; | |||||
} | |||||
.uni-datetime-picker-column { | |||||
height: 50px; | |||||
} | |||||
.uni-datetime-picker-timebox { | |||||
border: 1px solid #E5E5E5; | |||||
border-radius: 5px; | |||||
padding: 7px 10px; | |||||
/* #ifndef APP-NVUE */ | |||||
box-sizing: border-box; | |||||
cursor: pointer; | |||||
/* #endif */ | |||||
} | |||||
.uni-datetime-picker-timebox-pointer { | |||||
/* #ifndef APP-NVUE */ | |||||
cursor: pointer; | |||||
/* #endif */ | |||||
} | |||||
.uni-datetime-picker-disabled { | |||||
opacity: 0.4; | |||||
/* #ifdef H5 */ | |||||
cursor: not-allowed !important; | |||||
/* #endif */ | |||||
} | |||||
.uni-datetime-picker-text { | |||||
font-size: 14px; | |||||
line-height: 50px | |||||
} | |||||
.uni-datetime-picker-sign { | |||||
position: absolute; | |||||
top: 53px; | |||||
/* 减掉 10px 的元素高度,兼容nvue */ | |||||
color: #999; | |||||
/* #ifdef APP-NVUE */ | |||||
font-size: 16px; | |||||
/* #endif */ | |||||
} | |||||
.sign-left { | |||||
left: 86px; | |||||
} | |||||
.sign-right { | |||||
right: 86px; | |||||
} | |||||
.sign-center { | |||||
left: 135px; | |||||
} | |||||
.uni-datetime-picker__container-box { | |||||
position: relative; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
margin-top: 40px; | |||||
} | |||||
.time-hide-second { | |||||
width: 180px; | |||||
} | |||||
</style> |
@@ -0,0 +1,410 @@ | |||||
class Calendar { | |||||
constructor({ | |||||
date, | |||||
selected, | |||||
startDate, | |||||
endDate, | |||||
range, | |||||
// multipleStatus | |||||
} = {}) { | |||||
// 当前日期 | |||||
this.date = this.getDate(new Date()) // 当前初入日期 | |||||
// 打点信息 | |||||
this.selected = selected || []; | |||||
// 范围开始 | |||||
this.startDate = startDate | |||||
// 范围结束 | |||||
this.endDate = endDate | |||||
this.range = range | |||||
// 多选状态 | |||||
this.cleanMultipleStatus() | |||||
// 每周日期 | |||||
this.weeks = {} | |||||
// this._getWeek(this.date.fullDate) | |||||
// this.multipleStatus = multipleStatus | |||||
this.lastHover = false | |||||
} | |||||
/** | |||||
* 设置日期 | |||||
* @param {Object} date | |||||
*/ | |||||
setDate(date) { | |||||
this.selectDate = this.getDate(date) | |||||
this._getWeek(this.selectDate.fullDate) | |||||
} | |||||
/** | |||||
* 清理多选状态 | |||||
*/ | |||||
cleanMultipleStatus() { | |||||
this.multipleStatus = { | |||||
before: '', | |||||
after: '', | |||||
data: [] | |||||
} | |||||
} | |||||
/** | |||||
* 重置开始日期 | |||||
*/ | |||||
resetSatrtDate(startDate) { | |||||
// 范围开始 | |||||
this.startDate = startDate | |||||
} | |||||
/** | |||||
* 重置结束日期 | |||||
*/ | |||||
resetEndDate(endDate) { | |||||
// 范围结束 | |||||
this.endDate = endDate | |||||
} | |||||
/** | |||||
* 获取任意时间 | |||||
*/ | |||||
getDate(date, AddDayCount = 0, str = 'day') { | |||||
if (!date) { | |||||
date = new Date() | |||||
} | |||||
if (typeof date !== 'object') { | |||||
date = date.replace(/-/g, '/') | |||||
} | |||||
const dd = new Date(date) | |||||
switch (str) { | |||||
case 'day': | |||||
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期 | |||||
break | |||||
case 'month': | |||||
if (dd.getDate() === 31) { | |||||
dd.setDate(dd.getDate() + AddDayCount) | |||||
} else { | |||||
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期 | |||||
} | |||||
break | |||||
case 'year': | |||||
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期 | |||||
break | |||||
} | |||||
const y = dd.getFullYear() | |||||
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0 | |||||
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0 | |||||
return { | |||||
fullDate: y + '-' + m + '-' + d, | |||||
year: y, | |||||
month: m, | |||||
date: d, | |||||
day: dd.getDay() | |||||
} | |||||
} | |||||
/** | |||||
* 获取上月剩余天数 | |||||
*/ | |||||
_getLastMonthDays(firstDay, full) { | |||||
let dateArr = [] | |||||
for (let i = firstDay; i > 0; i--) { | |||||
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate() | |||||
dateArr.push({ | |||||
date: beforeDate, | |||||
month: full.month - 1, | |||||
disable: true | |||||
}) | |||||
} | |||||
return dateArr | |||||
} | |||||
/** | |||||
* 获取本月天数 | |||||
*/ | |||||
_currentMonthDys(dateData, full) { | |||||
let dateArr = [] | |||||
let fullDate = this.date.fullDate | |||||
for (let i = 1; i <= dateData; i++) { | |||||
let isinfo = false | |||||
let nowDate = full.year + '-' + (full.month < 10 ? | |||||
full.month : full.month) + '-' + (i < 10 ? | |||||
'0' + i : i) | |||||
// 是否今天 | |||||
let isDay = fullDate === nowDate | |||||
// 获取打点信息 | |||||
let info = this.selected && this.selected.find((item) => { | |||||
if (this.dateEqual(nowDate, item.date)) { | |||||
return item | |||||
} | |||||
}) | |||||
// 日期禁用 | |||||
let disableBefore = true | |||||
let disableAfter = true | |||||
if (this.startDate) { | |||||
// let dateCompBefore = this.dateCompare(this.startDate, fullDate) | |||||
// disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate) | |||||
disableBefore = this.dateCompare(this.startDate, nowDate) | |||||
} | |||||
if (this.endDate) { | |||||
// let dateCompAfter = this.dateCompare(fullDate, this.endDate) | |||||
// disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate) | |||||
disableAfter = this.dateCompare(nowDate, this.endDate) | |||||
} | |||||
let multiples = this.multipleStatus.data | |||||
let checked = false | |||||
let multiplesStatus = -1 | |||||
if (this.range) { | |||||
if (multiples) { | |||||
multiplesStatus = multiples.findIndex((item) => { | |||||
return this.dateEqual(item, nowDate) | |||||
}) | |||||
} | |||||
if (multiplesStatus !== -1) { | |||||
checked = true | |||||
} | |||||
} | |||||
let data = { | |||||
fullDate: nowDate, | |||||
year: full.year, | |||||
date: i, | |||||
multiple: this.range ? checked : false, | |||||
beforeMultiple: this.isLogicBefore(nowDate, this.multipleStatus.before, this.multipleStatus.after), | |||||
afterMultiple: this.isLogicAfter(nowDate, this.multipleStatus.before, this.multipleStatus.after), | |||||
month: full.month, | |||||
disable: !(disableBefore && disableAfter), | |||||
isDay, | |||||
userChecked: false | |||||
} | |||||
if (info) { | |||||
data.extraInfo = info | |||||
} | |||||
dateArr.push(data) | |||||
} | |||||
return dateArr | |||||
} | |||||
/** | |||||
* 获取下月天数 | |||||
*/ | |||||
_getNextMonthDays(surplus, full) { | |||||
let dateArr = [] | |||||
for (let i = 1; i < surplus + 1; i++) { | |||||
dateArr.push({ | |||||
date: i, | |||||
month: Number(full.month) + 1, | |||||
disable: true | |||||
}) | |||||
} | |||||
return dateArr | |||||
} | |||||
/** | |||||
* 获取当前日期详情 | |||||
* @param {Object} date | |||||
*/ | |||||
getInfo(date) { | |||||
if (!date) { | |||||
date = new Date() | |||||
} | |||||
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate) | |||||
return dateInfo | |||||
} | |||||
/** | |||||
* 比较时间大小 | |||||
*/ | |||||
dateCompare(startDate, endDate) { | |||||
// 计算截止时间 | |||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/')) | |||||
// 计算详细项的截止时间 | |||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/')) | |||||
if (startDate <= endDate) { | |||||
return true | |||||
} else { | |||||
return false | |||||
} | |||||
} | |||||
/** | |||||
* 比较时间是否相等 | |||||
*/ | |||||
dateEqual(before, after) { | |||||
// 计算截止时间 | |||||
before = new Date(before.replace('-', '/').replace('-', '/')) | |||||
// 计算详细项的截止时间 | |||||
after = new Date(after.replace('-', '/').replace('-', '/')) | |||||
if (before.getTime() - after.getTime() === 0) { | |||||
return true | |||||
} else { | |||||
return false | |||||
} | |||||
} | |||||
/** | |||||
* 比较真实起始日期 | |||||
*/ | |||||
isLogicBefore(currentDay, before, after) { | |||||
let logicBefore = before | |||||
if (before && after) { | |||||
logicBefore = this.dateCompare(before, after) ? before : after | |||||
} | |||||
return this.dateEqual(logicBefore, currentDay) | |||||
} | |||||
isLogicAfter(currentDay, before, after) { | |||||
let logicAfter = after | |||||
if (before && after) { | |||||
logicAfter = this.dateCompare(before, after) ? after : before | |||||
} | |||||
return this.dateEqual(logicAfter, currentDay) | |||||
} | |||||
/** | |||||
* 获取日期范围内所有日期 | |||||
* @param {Object} begin | |||||
* @param {Object} end | |||||
*/ | |||||
geDateAll(begin, end) { | |||||
var arr = [] | |||||
var ab = begin.split('-') | |||||
var ae = end.split('-') | |||||
var db = new Date() | |||||
db.setFullYear(ab[0], ab[1] - 1, ab[2]) | |||||
var de = new Date() | |||||
de.setFullYear(ae[0], ae[1] - 1, ae[2]) | |||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000 | |||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000 | |||||
for (var k = unixDb; k <= unixDe;) { | |||||
k = k + 24 * 60 * 60 * 1000 | |||||
arr.push(this.getDate(new Date(parseInt(k))).fullDate) | |||||
} | |||||
return arr | |||||
} | |||||
/** | |||||
* 获取多选状态 | |||||
*/ | |||||
setMultiple(fullDate) { | |||||
let { | |||||
before, | |||||
after | |||||
} = this.multipleStatus | |||||
if (!this.range) return | |||||
if (before && after) { | |||||
if (!this.lastHover) { | |||||
this.lastHover = true | |||||
return | |||||
} | |||||
this.multipleStatus.before = fullDate | |||||
this.multipleStatus.after = '' | |||||
this.multipleStatus.data = [] | |||||
this.multipleStatus.fulldate = '' | |||||
this.lastHover = false | |||||
} else { | |||||
if (!before) { | |||||
this.multipleStatus.before = fullDate | |||||
this.lastHover = false | |||||
} else { | |||||
this.multipleStatus.after = fullDate | |||||
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { | |||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus | |||||
.after); | |||||
} else { | |||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus | |||||
.before); | |||||
} | |||||
this.lastHover = true | |||||
} | |||||
} | |||||
this._getWeek(fullDate) | |||||
} | |||||
/** | |||||
* 鼠标 hover 更新多选状态 | |||||
*/ | |||||
setHoverMultiple(fullDate) { | |||||
let { | |||||
before, | |||||
after | |||||
} = this.multipleStatus | |||||
if (!this.range) return | |||||
if (this.lastHover) return | |||||
if (!before) { | |||||
this.multipleStatus.before = fullDate | |||||
} else { | |||||
this.multipleStatus.after = fullDate | |||||
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) { | |||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after); | |||||
} else { | |||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before); | |||||
} | |||||
} | |||||
this._getWeek(fullDate) | |||||
} | |||||
/** | |||||
* 更新默认值多选状态 | |||||
*/ | |||||
setDefaultMultiple(before, after) { | |||||
this.multipleStatus.before = before | |||||
this.multipleStatus.after = after | |||||
if (before && after) { | |||||
if (this.dateCompare(before, after)) { | |||||
this.multipleStatus.data = this.geDateAll(before, after); | |||||
this._getWeek(after) | |||||
} else { | |||||
this.multipleStatus.data = this.geDateAll(after, before); | |||||
this._getWeek(before) | |||||
} | |||||
} | |||||
} | |||||
/** | |||||
* 获取每周数据 | |||||
* @param {Object} dateData | |||||
*/ | |||||
_getWeek(dateData) { | |||||
const { | |||||
fullDate, | |||||
year, | |||||
month, | |||||
date, | |||||
day | |||||
} = this.getDate(dateData) | |||||
let firstDay = new Date(year, month - 1, 1).getDay() | |||||
let currentDay = new Date(year, month, 0).getDate() | |||||
let dates = { | |||||
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天 | |||||
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数 | |||||
nextMonthDays: [], // 下个月开始几天 | |||||
weeks: [] | |||||
} | |||||
let canlender = [] | |||||
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length) | |||||
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData)) | |||||
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays) | |||||
let weeks = {} | |||||
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天 | |||||
for (let i = 0; i < canlender.length; i++) { | |||||
if (i % 7 === 0) { | |||||
weeks[parseInt(i / 7)] = new Array(7) | |||||
} | |||||
weeks[parseInt(i / 7)][i % 7] = canlender[i] | |||||
} | |||||
this.canlender = canlender | |||||
this.weeks = weeks | |||||
} | |||||
//静态方法 | |||||
// static init(date) { | |||||
// if (!this.instance) { | |||||
// this.instance = new Calendar(date); | |||||
// } | |||||
// return this.instance; | |||||
// } | |||||
} | |||||
export default Calendar |
@@ -0,0 +1,87 @@ | |||||
{ | |||||
"id": "uni-datetime-picker", | |||||
"displayName": "uni-datetime-picker 日期选择器", | |||||
"version": "2.2.12", | |||||
"description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择", | |||||
"keywords": [ | |||||
"uni-datetime-picker", | |||||
"uni-ui", | |||||
"uniui", | |||||
"日期时间选择器", | |||||
"日期时间" | |||||
], | |||||
"repository": "https://github.com/dcloudio/uni-ui", | |||||
"engines": { | |||||
"HBuilderX": "" | |||||
}, | |||||
"directories": { | |||||
"example": "../../temps/example_temps" | |||||
}, | |||||
"dcloudext": { | |||||
"sale": { | |||||
"regular": { | |||||
"price": "0.00" | |||||
}, | |||||
"sourcecode": { | |||||
"price": "0.00" | |||||
} | |||||
}, | |||||
"contact": { | |||||
"qq": "" | |||||
}, | |||||
"declaration": { | |||||
"ads": "无", | |||||
"data": "无", | |||||
"permissions": "无" | |||||
}, | |||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||||
"type": "component-vue" | |||||
}, | |||||
"uni_modules": { | |||||
"dependencies": [ | |||||
"uni-scss", | |||||
"uni-icons" | |||||
], | |||||
"encrypt": [], | |||||
"platforms": { | |||||
"cloud": { | |||||
"tcb": "y", | |||||
"aliyun": "y" | |||||
}, | |||||
"client": { | |||||
"App": { | |||||
"app-vue": "y", | |||||
"app-nvue": "n" | |||||
}, | |||||
"H5-mobile": { | |||||
"Safari": "y", | |||||
"Android Browser": "y", | |||||
"微信浏览器(Android)": "y", | |||||
"QQ浏览器(Android)": "y" | |||||
}, | |||||
"H5-pc": { | |||||
"Chrome": "y", | |||||
"IE": "y", | |||||
"Edge": "y", | |||||
"Firefox": "y", | |||||
"Safari": "y" | |||||
}, | |||||
"小程序": { | |||||
"微信": "y", | |||||
"阿里": "y", | |||||
"百度": "y", | |||||
"字节跳动": "y", | |||||
"QQ": "y" | |||||
}, | |||||
"快应用": { | |||||
"华为": "u", | |||||
"联盟": "u" | |||||
}, | |||||
"Vue": { | |||||
"vue2": "y", | |||||
"vue3": "y" | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,21 @@ | |||||
> `重要通知:组件升级更新 2.0.0 后,支持日期+时间范围选择,组件 ui 将使用日历选择日期,ui 变化较大,同时支持 PC 和 移动端。此版本不向后兼容,不再支持单独的时间选择(type=time)及相关的 hide-second 属性(时间选可使用内置组件 picker)。若仍需使用旧版本,可在插件市场下载*非uni_modules版本*,旧版本将不再维护` | |||||
## DatetimePicker 时间选择器 | |||||
> **组件名:uni-datetime-picker** | |||||
> 代码块: `uDatetimePicker` | |||||
该组件的优势是,支持**时间戳**输入和输出(起始时间、终止时间也支持时间戳),可**同时选择**日期和时间。 | |||||
若只是需要单独选择日期和时间,不需要时间戳输入和输出,可使用原生的 picker 组件。 | |||||
**_点击 picker 默认值规则:_** | |||||
- 若设置初始值 value, 会显示在 picker 显示框中 | |||||
- 若无初始值 value,则初始值 value 为当前本地时间 Date.now(), 但不会显示在 picker 显示框中 | |||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-datetime-picker) | |||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
@@ -1,8 +1,8 @@ | |||||
import Encrypt from "./crypto.js"; | import Encrypt from "./crypto.js"; | ||||
let BASE_URL = ''; | let BASE_URL = ''; | ||||
BASE_URL = 'https://witt.black-pa.com'; //线上正式 | |||||
// BASE_URL = 'https://bpa.black-pa.com:21527'; //线上开发 | |||||
// BASE_URL = 'https://bpa.black-pa.com:21528'; //线上测试 | |||||
// BASE_URL = 'https://witt.black-pa.com'; //线上正式 | |||||
// BASE_URL = 'https://bpa.black-pa.com:21527'; //线上开发 | |||||
BASE_URL = 'https://bpa.black-pa.com:21528'; //线上测试 | |||||
const Franchisee = '/kitchen'; //加盟商:0 | const Franchisee = '/kitchen'; //加盟商:0 | ||||
const Order = '/order'; //订单: 1 | const Order = '/order'; //订单: 1 | ||||
@@ -49,7 +49,7 @@ const request = (options) => { | |||||
header: Object.assign({}, options.header, { | header: Object.assign({}, options.header, { | ||||
'BlackApp': BlackApp, | 'BlackApp': BlackApp, | ||||
'AppId': getApp().globalData.appId, | 'AppId': getApp().globalData.appId, | ||||
'TenantId': '01911b43-8844-4d93-b916-34208e31ba66' || TenantId // | |||||
'TenantId': '78d635f7-8ee4-4be4-b26a-462016196826' || TenantId // | |||||
}), | }), | ||||
timeout: 20000, | timeout: 20000, | ||||
success: response => { | success: response => { | ||||