初始化商家端
This commit is contained in:
wangxiaowei
269
components/benben-picker/shortterm-picker.vue
Normal file
269
components/benben-picker/shortterm-picker.vue
Normal file
@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view class="w-picker-view">
|
||||
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item, index) in range.dates" :key="index">{{ item.label }}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item, index) in range.hours" :key="index">{{ item.label }}时</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="w-picker-item" v-for="(item, index) in range.minutes" :key="index">{{ item.label }}分</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickVal: [],
|
||||
range: {},
|
||||
checkObj: {},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
itemHeight: {
|
||||
type: String,
|
||||
default: '44px',
|
||||
},
|
||||
value: {
|
||||
type: [String, Array, Number],
|
||||
default: '',
|
||||
},
|
||||
current: {
|
||||
//是否默认选中当前日期
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
expand: {
|
||||
type: [Number, String],
|
||||
default: 30,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.initData()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
formatNum(n) {
|
||||
return Number(n) < 10 ? '0' + Number(n) : Number(n) + ''
|
||||
},
|
||||
checkValue(value) {
|
||||
let strReg = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/,
|
||||
example = '2019-12-12 18:05:00或者2019-12-12 18:05'
|
||||
if (!strReg.test(value)) {
|
||||
console.log(new Error('请传入与mode、fields匹配的value值，例value=' + example + ''))
|
||||
}
|
||||
return strReg.test(value)
|
||||
},
|
||||
resetData(year, month, day) {
|
||||
let curDate = this.getCurrenDate()
|
||||
let curFlag = this.current
|
||||
let curYear = curDate.curYear
|
||||
let curMonth = curDate.curMonth
|
||||
let curDay = curDate.curDay
|
||||
let curHour = curDate.curHour
|
||||
let months = [],
|
||||
days = [],
|
||||
sections = []
|
||||
let disabledAfter = this.disabledAfter
|
||||
let monthsLen = disabledAfter ? (year * 1 < curYear ? 12 : curMonth) : 12
|
||||
let totalDays = new Date(year, month, 0).getDate() //计算当月有几天;
|
||||
for (let month = 1; month <= monthsLen; month++) {
|
||||
months.push(this.formatNum(month))
|
||||
}
|
||||
for (let day = 1; day <= daysLen; day++) {
|
||||
days.push(this.formatNum(day))
|
||||
}
|
||||
return {
|
||||
months,
|
||||
days,
|
||||
sections,
|
||||
}
|
||||
},
|
||||
getData(dVal) {
|
||||
//用来处理初始化数据
|
||||
let curFlag = this.current
|
||||
let disabledAfter = this.disabledAfter
|
||||
let dates = [],
|
||||
hours = [],
|
||||
minutes = []
|
||||
let curDate = new Date()
|
||||
let curYear = curDate.getFullYear()
|
||||
let curMonth = curDate.getMonth()
|
||||
let curDay = curDate.getDate()
|
||||
let aDate = new Date(curYear, curMonth, curDay)
|
||||
for (let i = 0; i < this.expand * 1; i++) {
|
||||
aDate = new Date(curYear, curMonth, curDay + i)
|
||||
let year = aDate.getFullYear()
|
||||
let month = aDate.getMonth() + 1
|
||||
let day = aDate.getDate()
|
||||
let label = year + '-' + this.formatNum(month) + '-' + this.formatNum(day)
|
||||
switch (i) {
|
||||
case 0:
|
||||
label = '今天'
|
||||
break
|
||||
case 1:
|
||||
label = '明天'
|
||||
break
|
||||
case 2:
|
||||
label = '后天'
|
||||
break
|
||||
}
|
||||
dates.push({
|
||||
label: label,
|
||||
value: year + '-' + this.formatNum(month) + '-' + this.formatNum(day),
|
||||
})
|
||||
}
|
||||
for (let i = 0; i < 24; i++) {
|
||||
hours.push({
|
||||
label: this.formatNum(i),
|
||||
value: this.formatNum(i),
|
||||
})
|
||||
}
|
||||
for (let i = 0; i < 60; i++) {
|
||||
minutes.push({
|
||||
label: this.formatNum(i),
|
||||
value: this.formatNum(i),
|
||||
})
|
||||
}
|
||||
return {
|
||||
dates,
|
||||
hours,
|
||||
minutes,
|
||||
}
|
||||
},
|
||||
getDefaultDate() {
|
||||
let value = this.value
|
||||
let reg = /-/g
|
||||
let defaultDate = value ? new Date(value.replace(reg, '/')) : new Date()
|
||||
let defaultYear = defaultDate.getFullYear()
|
||||
let defaultMonth = defaultDate.getMonth() + 1
|
||||
let defaultDay = defaultDate.getDate()
|
||||
let defaultDays = new Date(defaultYear, defaultMonth, 0).getDate() * 1
|
||||
return {
|
||||
defaultDate,
|
||||
defaultYear,
|
||||
defaultMonth,
|
||||
defaultDay,
|
||||
defaultDays,
|
||||
}
|
||||
},
|
||||
getDval() {
|
||||
let value = this.value
|
||||
let dVal = null
|
||||
let aDate = new Date()
|
||||
let year = this.formatNum(aDate.getFullYear())
|
||||
let month = this.formatNum(aDate.getMonth() + 1)
|
||||
let day = this.formatNum(aDate.getDate())
|
||||
let date = this.formatNum(year) + '-' + this.formatNum(month) + '-' + this.formatNum(day)
|
||||
let hour = aDate.getHours()
|
||||
let minute = aDate.getMinutes()
|
||||
if (value) {
|
||||
let flag = this.checkValue(value)
|
||||
if (!flag) {
|
||||
dVal = [date, hour, minute]
|
||||
} else {
|
||||
let v = value.split(' ')
|
||||
dVal = [v[0], ...v[1].split(':')]
|
||||
}
|
||||
} else {
|
||||
dVal = [date, hour, minute]
|
||||
}
|
||||
return dVal
|
||||
},
|
||||
initData() {
|
||||
let startDate, endDate, startYear, endYear, startMonth, endMonth, startDay, endDay
|
||||
let dates = [],
|
||||
hours = [],
|
||||
minutes = []
|
||||
let dVal = [],
|
||||
pickVal = []
|
||||
let value = this.value
|
||||
let reg = /-/g
|
||||
let range = {}
|
||||
let result = '',
|
||||
full = '',
|
||||
date,
|
||||
hour,
|
||||
minute,
|
||||
obj = {}
|
||||
let defaultDate = this.getDefaultDate()
|
||||
let defaultYear = defaultDate.defaultYear
|
||||
let defaultMonth = defaultDate.defaultMonth
|
||||
let defaultDay = defaultDate.defaultDay
|
||||
let defaultDays = defaultDate.defaultDays
|
||||
let curFlag = this.current
|
||||
let disabledAfter = this.disabledAfter
|
||||
let dateData = []
|
||||
dVal = this.getDval()
|
||||
dateData = this.getData(dVal)
|
||||
dates = dateData.dates
|
||||
hours = dateData.hours
|
||||
minutes = dateData.minutes
|
||||
pickVal = [
|
||||
dates.findIndex((n) => n.value == dVal[0]) != -1 ? dates.findIndex((n) => n.value == dVal[0]) : 0,
|
||||
hours.findIndex((n) => n.value == dVal[1]) != -1 ? hours.findIndex((n) => n.value == dVal[1]) : 0,
|
||||
minutes.findIndex((n) => n.value == dVal[2]) != -1 ? minutes.findIndex((n) => n.value == dVal[2]) : 0,
|
||||
]
|
||||
range = { dates, hours, minutes }
|
||||
date = dVal[0] ? dVal[0] : dates[0].label
|
||||
hour = dVal[1] ? dVal[1] : hours[0].label
|
||||
minute = dVal[2] ? dVal[2] : minutes[0].label
|
||||
result = full = `${date + ' ' + hour + ':' + minute}`
|
||||
obj = {
|
||||
date,
|
||||
hour,
|
||||
minute,
|
||||
}
|
||||
this.range = range
|
||||
this.checkObj = obj
|
||||
this.$nextTick(() => {
|
||||
this.pickVal = pickVal
|
||||
})
|
||||
this.$emit('change', {
|
||||
result: result,
|
||||
value: full,
|
||||
obj: obj,
|
||||
})
|
||||
},
|
||||
handlerChange(e) {
|
||||
let arr = [...e.detail.value]
|
||||
let data = this.range
|
||||
let date = '',
|
||||
hour = '',
|
||||
minute = ''
|
||||
let result = '',
|
||||
full = '',
|
||||
obj = {}
|
||||
let disabledAfter = this.disabledAfter
|
||||
date = arr[0] || arr[0] == 0 ? data.dates[arr[0]] || data.dates[data.dates.length - 1] : ''
|
||||
hour = arr[1] || arr[1] == 0 ? data.hours[arr[1]] || data.hours[data.hours.length - 1] : ''
|
||||
minute = arr[2] || arr[2] == 0 ? data.minutes[arr[2]] || data.minutes[data.minutes.length - 1] : ''
|
||||
result = `${date.label + ' ' + hour.label + ':' + minute.label + ':00'}`
|
||||
full = `${date.value + ' ' + hour.label + ':' + minute.label + ':00'}`
|
||||
obj = {
|
||||
date,
|
||||
hour,
|
||||
minute,
|
||||
}
|
||||
this.checkObj = obj
|
||||
this.$emit('change', {
|
||||
result: result,
|
||||
value: full,
|
||||
obj: obj,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './w-picker.css';
|
||||
</style>
|
||||
Reference in New Issue
Block a user