wangchen 2023-07-25 13:20:04 +08:00
parent afe74abe23
commit a10022ca65
8 changed files with 239 additions and 221 deletions

View File

@ -16,7 +16,9 @@
@import "/style/css/layout.css";
@import "style/css/main.css";
@import "style/css/flex-main.css";
@import "/style/iconfont.css";
/* @import "/style/iconfont.css"; */
/* @import "vant/lib/index.less";
@import url("./static/font/iconfont.css"); */
/deep/.uni-select {
background-color: #fff;

View File

@ -12,7 +12,7 @@
<script>
</script>
<style>
<style lang="less">
.headInfo {
width: 100%;
height: 40px;

View File

@ -23,7 +23,7 @@
}
</script>
<style>
<style lang="less">
.headInfo {
position: relative;
background-color: #fff;

40
main.js
View File

@ -22,27 +22,27 @@ import liuStepBar from './uni_modules/liu-step-bar/components/liu-step-bar/liu-s
Vue.component('uni-pop', uniPop)
Vue.component('liu-step-bar', liuStepBar)
import Vant from 'vant';
import 'vant/lib/index.less';
Vue.use(Vant);
import {
RadioGroup,
Radio,
Button,
Uploader,
Field,
Checkbox,
CheckboxGroup,
Progress
} from 'vant';
// import Vant from 'vant';
// import 'vant/lib/index.less';
// Vue.use(Vant);
// import {
// RadioGroup,
// Radio,
// Button,
// Uploader,
// Field,
// Checkbox,
// CheckboxGroup,
// Progress
// } from 'vant';
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Button);
Vue.use(Uploader);
Vue.use(Field);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
// Vue.use(Radio);
// Vue.use(RadioGroup);
// Vue.use(Button);
// Vue.use(Uploader);
// Vue.use(Field);
// Vue.use(Checkbox);
// Vue.use(CheckboxGroup);
const app = new Vue({

View File

@ -177,7 +177,7 @@
};
</script>
<style>
<style lang="less">
.container {
display: flex;
}

View File

@ -721,7 +721,7 @@
};
</script>
<style>
<style lang="less">
.blue {
color: #108ee9;
}

View File

@ -1,9 +1,8 @@
@font-face {
font-family: 'iconfont';
/* Project id 3979772 */
src: url('//at.alicdn.com/t/c/font_3979772_sd5890vlebd.woff2?t=1679996974313') format('woff2'),
url('//at.alicdn.com/t/c/font_3979772_sd5890vlebd.woff?t=1679996974313') format('woff'),
url('//at.alicdn.com/t/c/font_3979772_sd5890vlebd.ttf?t=1679996974313') format('truetype');
font-family: "liicon";
src: url('~@/static/font/iconfont.woff?t=1584513180461') format('woff'),
url('~@/static/font/iconfont.ttf?t=1584513180461') format('truetype'),
url('~@/static/font/iconfont.svg?t=1584513180461#iconfont') format('svg');
}
.iconfont {

View File

@ -2,10 +2,8 @@
<view class="uni-date">
<view class="uni-date-editor" @click="show">
<slot>
<view
class="uni-date-editor--x"
:class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}"
>
<view class="uni-date-editor--x"
:class="{'uni-date-editor--x__disabled': disabled,'uni-date-x--border': border}">
<view v-if="!isRange" class="uni-date-x uni-date-single">
<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
<view class="uni-date__x-input">{{ displayValue || singlePlaceholderText }}</view>
@ -13,11 +11,13 @@
<view v-else class="uni-date-x uni-date-range">
<uni-icons class="icon-calendar" type="calendar" color="#c0c4cc" size="22"></uni-icons>
<view class="uni-date__x-input text-center">{{ displayRangeValue.startDate || startPlaceholderText }}</view>
<view class="uni-date__x-input text-center">
{{ displayRangeValue.startDate || startPlaceholderText }}</view>
<view class="range-separator">{{rangeSeparator}}</view>
<view class="uni-date__x-input text-center">{{ displayRangeValue.endDate || endPlaceholderText }}</view>
<view class="uni-date__x-input text-center">
{{ displayRangeValue.endDate || endPlaceholderText }}</view>
</view>
<view v-if="showClearIcon" class="uni-date__icon-clear" @click.stop="clear">
@ -38,16 +38,16 @@
:placeholder="selectDateText" />
<time-picker type="time" v-model="pickerTime" :border="false" :disabled="!inputDate"
:start="timepickerStartTime" :end="timepickerEndTime" :hideSecond="hideSecond" style="width: 100%;">
<input class="uni-date__input text-center" type="text" v-model="pickerTime" :placeholder="selectTimeText"
:disabled="!inputDate" />
:start="timepickerStartTime" :end="timepickerEndTime" :hideSecond="hideSecond"
style="width: 100%;">
<input class="uni-date__input text-center" type="text" v-model="pickerTime"
:placeholder="selectTimeText" :disabled="!inputDate" />
</time-picker>
</view>
<Calendar ref="pcSingle" :showMonth="false" :start-date="calendarRange.startDate"
:end-date="calendarRange.endDate" :date="calendarDate" @change="singleChange"
:default-value="defaultValue"
style="padding: 0 8px;" />
:default-value="defaultValue" style="padding: 0 8px;" />
<view v-if="hasTime" class="popup-x-footer">
<text class="confirm-text" @click="confirmSingleChange">{{okText}}</text>
@ -61,8 +61,8 @@
<input class="uni-date__input uni-date-range__input" type="text" v-model="tempRange.startDate"
:placeholder="startDateText" />
<time-picker type="time" v-model="tempRange.startTime" :start="timepickerStartTime" :border="false"
:disabled="!tempRange.startDate" :hideSecond="hideSecond">
<time-picker type="time" v-model="tempRange.startTime" :start="timepickerStartTime"
:border="false" :disabled="!tempRange.startDate" :hideSecond="hideSecond">
<input class="uni-date__input uni-date-range__input" type="text"
v-model="tempRange.startTime" :placeholder="startTimeText"
:disabled="!tempRange.startDate" />
@ -102,8 +102,7 @@
<Calendar v-if="isPhone" ref="mobile" :clearDate="false" :date="calendarDate" :defTime="mobileCalendarTime"
:start-date="calendarRange.startDate" :end-date="calendarRange.endDate" :selectableTimes="mobSelectableTime"
:startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder"
:default-value="defaultValue"
:startPlaceholder="startPlaceholder" :endPlaceholder="endPlaceholder" :default-value="defaultValue"
:pleStatus="endMultipleStatus" :showMonth="false" :range="isRange" :hasTime="hasTime" :insert="false"
:hideSecond="hideSecond" @confirm="mobileChange" @maskClose="close" />
</view>
@ -133,9 +132,19 @@
**/
import Calendar from './calendar.vue'
import TimePicker from './time-picker.vue'
import { initVueI18n } from '@dcloudio/uni-i18n'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import i18nMessages from './i18n/index.js'
import { getDateTime, getDate, getTime, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat } from './util'
import {
getDateTime,
getDate,
getTime,
getDefaultSecond,
dateCompare,
checkDate,
fixIosDateFormat
} from './util'
export default {
name: 'UniDatetimePicker',
@ -373,7 +382,8 @@
return this.i18nT("uni-datetime-picker.clear")
},
showClearIcon() {
return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this.displayRangeValue.endDate))
return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this
.displayRangeValue.endDate))
}
},
created() {
@ -394,15 +404,15 @@
}
if (!Array.isArray(newVal) && !this.isRange) {
if(newVal){
if (newVal) {
this.displayValue = this.inputDate = this.calendarDate = getDate(newVal)
if (this.hasTime) {
this.pickerTime = getTime(newVal, this.hideSecond)
this.displayValue = `${this.displayValue} ${this.pickerTime}`
}
}else if(this.defaultValue){
} else if (this.defaultValue) {
this.inputDate = this.calendarDate = getDate(this.defaultValue)
if(this.hasTime){
if (this.hasTime) {
this.pickerTime = getTime(this.defaultValue, this.hideSecond)
}
}
@ -450,11 +460,13 @@
right.setDate(this.$refs.right.nowDate.fullDate)
},
platform() {
if(typeof navigator !== "undefined"){
if (typeof navigator !== "undefined") {
this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1
return
}
const { windowWidth } = uni.getSystemInfoSync()
const {
windowWidth
} = uni.getSystemInfoSync()
this.isPhone = windowWidth <= 500
this.windowWidth = windowWidth
},
@ -544,7 +556,7 @@
this.confirmSingleChange()
},
confirmSingleChange() {
if(!checkDate(this.inputDate)){
if (!checkDate(this.inputDate)) {
const now = new Date()
this.calendarDate = this.inputDate = getDate(now)
this.pickerTime = getTime(now, this.hideSecond)
@ -552,13 +564,13 @@
let startLaterInputDate = false
let startDate, startTime
if(this.start) {
if (this.start) {
let startString = this.start
if(typeof this.start === 'number'){
if (typeof this.start === 'number') {
startString = getDateTime(this.start, this.hideSecond)
}
[startDate, startTime] = startString.split(' ')
if(this.start && !dateCompare(startDate, this.inputDate)) {
if (this.start && !dateCompare(startDate, this.inputDate)) {
startLaterInputDate = true
this.inputDate = startDate
}
@ -566,25 +578,25 @@
let endEarlierInputDate = false
let endDate, endTime
if(this.end) {
if (this.end) {
let endString = this.end
if(typeof this.end === 'number'){
if (typeof this.end === 'number') {
endString = getDateTime(this.end, this.hideSecond)
}
[endDate, endTime] = endString.split(' ')
if(this.end && !dateCompare(this.inputDate, endDate)) {
if (this.end && !dateCompare(this.inputDate, endDate)) {
endEarlierInputDate = true
this.inputDate = endDate
}
}
if (this.hasTime) {
if(startLaterInputDate){
if (startLaterInputDate) {
this.pickerTime = startTime || getDefaultSecond(this.hideSecond)
}
if(endEarlierInputDate){
if (endEarlierInputDate) {
this.pickerTime = endTime || getDefaultSecond(this.hideSecond)
}
if(!this.pickerTime){
if (!this.pickerTime) {
this.pickerTime = getTime(Date.now(), this.hideSecond)
}
this.displayValue = `${this.inputDate} ${this.pickerTime}`
@ -624,9 +636,12 @@
},
mobileChange(e) {
if (this.isRange) {
const {before, after} = e.range
const {
before,
after
} = e.range
if(!before || !after){
if (!before || !after) {
return
}
@ -661,10 +676,10 @@
this.pickerVisible = false
return
}
if(!checkDate(this.tempRange.startDate)){
if (!checkDate(this.tempRange.startDate)) {
this.tempRange.startDate = getDate(Date.now())
}
if(!checkDate(this.tempRange.endDate)){
if (!checkDate(this.tempRange.endDate)) {
this.tempRange.endDate = getDate(Date.now())
}
@ -673,17 +688,17 @@
let startDateLaterRangeStartDate = false
let startDateLaterRangeEndDate = false
let startDate, startTime
if(this.start) {
if (this.start) {
let startString = this.start
if(typeof this.start === 'number'){
if (typeof this.start === 'number') {
startString = getDateTime(this.start, this.hideSecond)
}
[startDate,startTime] = startString.split(' ')
if(this.start && !dateCompare(this.start, this.tempRange.startDate)) {
[startDate, startTime] = startString.split(' ')
if (this.start && !dateCompare(this.start, this.tempRange.startDate)) {
startDateLaterRangeStartDate = true
this.tempRange.startDate = startDate
}
if(this.start && !dateCompare(this.start, this.tempRange.endDate)) {
if (this.start && !dateCompare(this.start, this.tempRange.endDate)) {
startDateLaterRangeEndDate = true
this.tempRange.endDate = startDate
}
@ -691,18 +706,18 @@
let endDateEarlierRangeStartDate = false
let endDateEarlierRangeEndDate = false
let endDate, endTime
if(this.end) {
if (this.end) {
let endString = this.end
if(typeof this.end === 'number'){
if (typeof this.end === 'number') {
endString = getDateTime(this.end, this.hideSecond)
}
[endDate,endTime] = endString.split(' ')
[endDate, endTime] = endString.split(' ')
if(this.end && !dateCompare(this.tempRange.startDate, this.end)) {
if (this.end && !dateCompare(this.tempRange.startDate, this.end)) {
endDateEarlierRangeStartDate = true
this.tempRange.startDate = endDate
}
if(this.end && !dateCompare(this.tempRange.endDate, this.end)) {
if (this.end && !dateCompare(this.tempRange.endDate, this.end)) {
endDateEarlierRangeEndDate = true
this.tempRange.endDate = endDate
}
@ -711,27 +726,27 @@
start = this.displayRangeValue.startDate = this.tempRange.startDate
end = this.displayRangeValue.endDate = this.tempRange.endDate
} else {
if(startDateLaterRangeStartDate){
if (startDateLaterRangeStartDate) {
this.tempRange.startTime = startTime || getDefaultSecond(this.hideSecond)
}else if(endDateEarlierRangeStartDate){
} else if (endDateEarlierRangeStartDate) {
this.tempRange.startTime = endTime || getDefaultSecond(this.hideSecond)
}
if(!this.tempRange.startTime){
if (!this.tempRange.startTime) {
this.tempRange.startTime = getTime(Date.now(), this.hideSecond)
}
if(startDateLaterRangeEndDate){
if (startDateLaterRangeEndDate) {
this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond)
}else if(endDateEarlierRangeEndDate){
} else if (endDateEarlierRangeEndDate) {
this.tempRange.endTime = endTime || getDefaultSecond(this.hideSecond)
}
if(!this.tempRange.endTime){
if (!this.tempRange.endTime) {
this.tempRange.endTime = getTime(Date.now(), this.hideSecond)
}
start = this.displayRangeValue.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}`
end = this.displayRangeValue.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}`
}
if(!dateCompare(start,end)){
if (!dateCompare(start, end)) {
[start, end] = [end, start]
}
this.displayRangeValue.startDate = start
@ -818,6 +833,7 @@
width: 100%;
flex: 1;
}
.uni-date-x {
display: flex;
flex-direction: row;
@ -829,10 +845,11 @@
font-size: 14px;
flex: 1;
.icon-calendar{
.icon-calendar {
padding-left: 3px;
}
.range-separator{
.range-separator {
height: 35px;
/* #ifndef MP */
padding: 0 2px;