wangxiaowei/wanjiashangchao-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化万家商超用户端仓库

Browse Source
This commit is contained in:
wangxiaowei
2025-04-30 14:04:34 +08:00
commit 022c640d89
425 changed files with 160005 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15808
components/benben-picker/areadata/areadata.json Normal file
View File

File diff suppressed because it is too large Load Diff

487
components/benben-picker/benben-picker.vue Normal file
View File

@ -0,0 +1,487 @@
<template name="w-picker">
<view class="w-picker" :key="createKey" :data-key="createKey">
<view class="mask" :class="{ mask_show: maskShow, visible: isShow }" @tap="cancel" @touchmove.stop.prevent catchtouchmove="true"></view>
<view class="w-picker-cnt" :class="{ visible: isShow }">
<view>
<slot name="picker-header"></slot>
</view>
<date-picker
v-if="mode == 'date'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:fields="fields"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></date-picker>
<range-picker
v-if="mode == 'range'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="defaultValue"
:item-height="itemHeight"
:current="current"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></range-picker>
<half-picker
v-if="mode == 'half'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></half-picker>
<shortterm-picker
v-if="mode == 'shortTerm'"
class="w-picker-wrapper"
:startYear="startYear"
:endYear="endYear"
:value="value"
:item-height="itemHeight"
:current="current"
:expand="expand"
:disabled-after="disabledAfter"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></shortterm-picker>
<time-picker
v-if="mode == 'time'"
class="w-picker-wrapper"
:value="value"
:item-height="itemHeight"
:current="current"
:disabled-after="disabledAfter"
:second="second"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></time-picker>
<selector-picker
v-if="mode == 'selector'"
class="w-picker-wrapper"
:value="value"
:item-height="itemHeight"
:options="options"
:default-type="defaultType"
:default-props="defaultProps"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></selector-picker>
<region-picker
v-if="mode == 'region'"
class="w-picker-wrapper"
:value="defaultValue"
:hide-area="hideArea"
:item-height="itemHeight"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></region-picker>
<linkage-picker
v-if="mode == 'linkage'"
class="w-picker-wrapper"
:value="defaultValue"
:options="options"
:level="level"
:default-type="defaultType"
:default-props="defaultProps"
:item-height="itemHeight"
@change="handlerChange"
@touchstart="touchStart"
@touchend="touchEnd"
></linkage-picker>
</view>
</view>
</template>
<script>
import datePicker from './date-picker.vue'
import rangePicker from './range-picker.vue'
import halfPicker from './half-picker.vue'
import shorttermPicker from './shortterm-picker.vue'
import timePicker from './time-picker.vue'
import selectorPicker from './selector-picker.vue'
import regionPicker from './region-picker.vue'
import linkagePicker from './linkage-picker.vue'
export default {
name: 'benben-picker',
components: {
datePicker,
rangePicker,
halfPicker,
timePicker,
selectorPicker,
shorttermPicker,
regionPicker,
linkagePicker,
},
props: {
mode: {
type: String,
default: 'date',
},
pickerHeight: {
type: [String, Number],
default: '88',
},
value: {
//默认值
type: [String, Array, Number],
default: '',
},
current: {
//是否默认显示当前时间，如果是，传的默认值将失效
type: Boolean,
default: false,
},
fields: {
//日期颗粒度:year、month、day、hour、minute、second
type: String,
default: 'day',
},
disabledAfter: {
//是否禁用当前之后的日期
type: Boolean,
default: false,
},
second: {
//time-picker是否显示秒
type: Boolean,
default: true,
},
options: {
//selector,region数据源
type: [Array, Object],
default() {
return []
},
},
defaultProps: {
//selector,linkagle字段转换配置
type: Object,
default: () => {
return {
label: 'label',
value: 'value',
children: 'children',
}
},
},
defaultType: {
type: String,
default: 'label',
},
hideArea: {
//mode=region时，是否隐藏区县列
type: Boolean,
default: false,
},
level: {
//多级联动层级，表示几级联动,区间2-4;
type: [Number, String],
default: 2,
},
timeout: {
//是否开启点击延迟,当快速滚动 还没有滚动完毕点击关闭时得到的值是不准确的
type: Boolean,
default: false,
},
expand: {
//mode=shortterm 默认往后拓展天数
type: [Number, String],
default: 30,
},
startYear: {
type: [String, Number],
default: 1970,
},
endYear: {
type: [String, Number],
default: new Date().getFullYear(),
},
//是否展示选择器
visible: {
type: Boolean,
default: false,
},
maskShow: {
type: Boolean,
default: true,
},
province: {
//省
type: [String, Number],
default: '',
},
city: {
//市
type: [String, Number],
default: '',
},
area: {
//区
type: [String, Number],
default: '',
},
startValue: {
//开始时间
type: [String, Number],
default: '',
},
endValue: {
//结束时间
type: [String, Number],
default: '',
},
},
computed: {
itemHeight() {
return `height: ${uni.upx2px(this.pickerHeight)}px;`
},
defaultValue() {
let defaultValue = []
switch (this.mode) {
case 'range':
if (this.startValue) {
defaultValue.push(this.startValue)
}
if (this.endValue) {
defaultValue.push(this.endValue)
}
break
case 'region':
if (this.province) {
defaultValue.push(this.province)
}
if (this.city) {
defaultValue.push(this.city)
}
if (this.area) {
defaultValue.push(this.area)
}
break
case 'linkage':
if (this.value) {
//判断this.value是否是数组
if (this.value.constructor === Array) {
defaultValue = this.value
} else {
defaultValue = this.value.split(',')
}
}
break
default:
break
}
console.log('defaultValue', defaultValue)
return defaultValue
},
},
watch: {
visible(newValue, oldValue) {
this.isShow = newValue
},
},
created() {
this.createKey = Math.random() * 1000
this.isShow = this.visible
},
data() {
return {
LANGUAGE: '',
isShow: false,
result: {},
confirmFlag: true,
}
},
methods: {
headerHandle(e) {
let { type } = e.target.dataset
console.log(e)
if (type == 'cancel') {
this.cancel()
}
if (type == 'confirm') {
this.pickerConfirm()
}
},
touchStart() {
if (this.timeout) {
this.confirmFlag = false
}
},
touchEnd() {
if (this.timeout) {
setTimeout(() => {
this.confirmFlag = true
}, 500)
}
},
handlerChange(res) {
let _this = this
this.result = { ...res }
},
show() {
this.isShow = true
this.$emit('update:visible', true)
},
hide() {
this.isShow = false
this.$emit('update:visible', false)
},
cancel(res) {
this.isShow = false
this.$emit('update:visible', false)
this.$emit('cancel')
},
pickerConfirm() {
if (!this.confirmFlag) {
return
}
let { result, value, obj } = this.result
console.log('result', this.result)
switch (this.mode) {
case 'date':
case 'half':
case 'shortTerm':
case 'time':
this.$emit('update:value', value)
this.$emit('update:label', result)
break
case 'range':
this.$emit('update:start-value', `${obj.fyear}-${obj.fmonth}-${obj.fday}`)
this.$emit('update:end-value', `${obj.tyear}-${obj.tmonth}-${obj.tday}`)
this.$emit('update:label', result)
break
case 'region':
this.$emit('update:province', value[0])
this.$emit('update:city', value[1])
if (value[2]) {
this.$emit('update:area', value[2])
}
this.$emit('update:label', result)
break
case 'selector':
this.$emit('update:value', obj[this.defaultType])
this.$emit('update:label', result)
break
case 'linkage':
if (!(this.defaultProps.label && this.defaultProps.value)) return false
let confirmValue = {
[this.defaultProps.label]: [],
[this.defaultProps.value]: [],
}
Object.keys(obj).map((key) => {
if (obj[key] && this.defaultProps.value && obj[key][this.defaultProps.value]) {
confirmValue[this.defaultProps.value].push(obj[key][this.defaultProps.value])
}
if (obj[key] && this.defaultProps.label && obj[key][this.defaultProps.value]) {
confirmValue[this.defaultProps.label].push(obj[key][this.defaultProps.label])
}
})
Object.keys(confirmValue).map((key) => {
if (this.defaultType == key) {
this.$emit('update:value', confirmValue[key].join(','))
} else {
this.$emit('update:label', confirmValue[key].join(','))
}
})
break
default:
break
}
this.$emit('change', this.result)
this.isShow = false
this.$emit('update:visible', false)
},
},
}
</script>
<style lang="scss">
@import './w-picker.css';
.w-picker-item {
text-align: center;
width: 100%;
height: 88upx;
line-height: 88upx;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30upx;
}
.w-picker {
z-index: 888;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.mask_show {
opacity: 1;
}
.mask.visible {
visibility: visible;
}
.w-picker-cnt {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 3000;
}
.w-picker-cnt.visible {
transform: translateY(0);
}
.w-picker-header {
display: flex;
align-items: center;
padding: 0 30upx;
// height: 88upx;
background-color: #fff;
position: relative;
text-align: center;
font-size: 32upx;
justify-content: space-between;
border-bottom: solid 1px #eee;
.w-picker-btn {
font-size: 30upx;
}
}
.w-picker-hd:after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
}
</style>

460
components/benben-picker/date-picker.vue Normal file
View File

@ -0,0 +1,460 @@
<template>
<view class="w-picker-view">
<picker-view v-if="fields == 'year'" class="d-picker-view" :indicator-style="itemHeight" :value="pickerVal" @change="bindChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
</picker-view-column>
</picker-view>
<picker-view v-else-if="fields == 'month'" class="d-picker-view" :indicator-style="itemHeight" :value="pickerVal" @change="bindChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
</picker-view-column>
</picker-view>
<picker-view v-if="fields == 'day'" class="d-picker-view" :indicator-style="itemHeight" :value="pickerVal" @change="bindChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
</picker-view-column>
</picker-view>
<picker-view v-else-if="fields == 'hour'" class="d-picker-view" :indicator-style="itemHeight" :value="pickerVal" @change="bindChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
</picker-view-column>
</picker-view>
<picker-view v-else class="d-picker-view" :indicator-style="itemHeight" :value="pickerVal" @change="bindChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
import dayjs from '@/libs/day.js'
export default {
name: 'date-picker',
props: {
startYear: {
type: [String, Number],
default: '2010/01/01 00:00',
},
endYear: {
type: [String, Number],
default: '2050/12/31 23:59',
},
value: {
type: [String, Number],
default: '',
},
itemHeight: {
type: String,
default: '44px',
},
fields: {
type: String,
default: 'day',
},
},
data() {
const baseArr = ['', '']
return {
date: '',
presentTime: new Date(),
years: baseArr,
months: baseArr,
days: baseArr,
hours: baseArr,
minutes: baseArr,
days28: [],
pickerVal: [],
startObj: {
months: [],
days: [],
},
endObj: {
months: [],
days: [],
},
changeDisabled: false,
moveFlag: false,
showCover: false,
hasChange: false,
}
},
watch: {
startYear() {
this.setStartEnd()
const date = this.value ? this.value : new Date()
this.initCurr(date)
},
endYear() {
this.setStartEnd()
const date = this.value ? this.value : new Date()
this.initCurr(date)
},
value: {
handler(val) {
const date = val ? val : new Date()
this.initCurr(date)
const { y, m, d, h, minu } = this.trimDate(this.value)
const trimN = this.trimNum
this.date = `${y}-${trimN(m)}-${trimN(d)} ${trimN(h)}:${trimN(minu)}`
},
// immediate: true,
},
},
created() {
this.days28 = this.setArray(1, 28)
this.setStartEnd()
if (this.value) {
const { y, m, d, h, minu } = this.trimDate(this.value)
const trimN = this.trimNum
this.date = `${y}-${trimN(m)}-${trimN(d)} ${trimN(h)}:${trimN(minu)}`
}
const date = this.value ? this.value : new Date()
this.initCurr(date)
this.$nextTick(() => {
this.confirm()
})
},
methods: {
// 当滚动选择
bindChange: function (e) {
if (this.changeDisabled) return
this.changeDisabled = true
const prev = this.pickerVal
const val = e.detail.value
const y = this.years[val[0]] ? this.years[val[0]] : this.years[this.years.length - 1]
const m = this.months[val[1]] ? this.months[val[1]] : this.months[this.months.length - 1]
const d = this.days[val[2]] ? this.days[val[2]] : this.days[this.days.length - 1]
const h = this.hours[val[3]] >= 0 ? this.hours[val[3]] : this.hours[this.hours.length - 1]
const minu = this.minutes[val[4]] >= 0 ? this.minutes[val[4]] : this.minutes[this.minutes.length - 1]
const date = `${y}/${m}/${d} ${h}:${minu}`
if (prev[1] != val[1]) {
this.initCurr(date, m, d)
} else {
this.initCurr(date)
}
},
// 点击确定
confirm() {
const val = this.pickerVal
const trimN = this.trimNum
let date = ''
let obj = {}
switch (this.fields) {
case 'year':
date = `${this.years[val[0]]}`
obj = {
year: this.years[val[0]],
}
break
case 'month':
date = `${this.years[val[0]]}-${trimN(this.months[val[1]])}`
obj = {
year: this.years[val[0]],
month: this.months[val[1]],
}
break
case 'day':
date = `${this.years[val[0]]}-${trimN(this.months[val[1]])}-${trimN(this.days[val[2]])}`
obj = {
year: this.years[val[0]],
month: this.months[val[1]],
day: this.days[val[2]],
}
break
case 'hour':
date = `${this.years[val[0]]}-${trimN(this.months[val[1]])}-${trimN(this.days[val[2]])} ${trimN(this.hours[val[3]])}`
obj = {
year: this.years[val[0]],
month: this.months[val[1]],
day: this.days[val[2]],
hour: this.hours[val[3]],
}
break
default:
date = `${this.years[val[0]]}-${trimN(this.months[val[1]])}-${trimN(this.days[val[2]])} ${trimN(this.hours[val[3]])}:${trimN(
this.minutes[val[4]]
)}`
obj = {
year: this.years[val[0]],
month: this.months[val[1]],
day: this.days[val[2]],
hour: this.hours[val[3]],
minute: this.minutes[val[4]],
}
break
}
this.date = date
this.$emit('change', {
result: date,
value: date,
obj: obj,
})
},
setDays(year, month, start = 1) {
let newDays = []
const monthReg = /^4|6|9|11$/
let maxDay = ''
if (monthReg.test(month)) {
maxDay = 30
} else if (month === 2) {
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
maxDay = 29
} else {
maxDay = 28
}
} else {
maxDay = 31
}
newDays = this.setArray(start, maxDay)
return newDays
},
// 设置最大最小月日时分
setStartEnd() {
const { sy, ey, sm, em, sd, ed, sh, eh, sminu, eminu } = this.getSE()
this.years = this.setArray(sy, ey)
// 设置最大最小月
if (sy === ey) {
this.startObj.months = this.endObj.months = this.setArray(sm, em)
} else {
this.startObj.months = this.setArray(sm, 12)
this.endObj.months = this.setArray(1, em)
}
// 设置最大最小日
if (sy === ey && sm === em) {
this.startObj.days = this.endObj.days = this.setArray(sd, ed)
} else {
this.startObj.days = this.setDays(sy, sm, sd)
this.endObj.days = this.setArray(1, ed)
}
// 设置最大最小时
if (sy === ey && sm === em && sd === ed) {
this.startObj.hours = this.endObj.hours = this.setArray(sh, eh)
} else {
this.startObj.hours = this.setArray(sh, 23)
this.endObj.hours = this.setArray(0, eh)
}
// 设置最大最小分钟
if (sy === ey && sm === em && sd === ed && sh === eh) {
this.startObj.minutes = this.endObj.minutes = this.setArray(sminu, eminu)
} else {
this.startObj.minutes = this.setArray(sminu, 59)
this.endObj.minutes = this.setArray(0, eminu)
}
},
// 初始化选中项
initCurr(val, month, day) {
const { start, end, sy, ey, sm, em, sd, ed, sh, eh, sminu, eminu } = this.getSE()
const { val: curr, y: cy, m: cm, d: cd, h: ch, minu: cminu } = this.trimDate(val, month, day)
let cyi = this.years.indexOf(cy)
let cmi = 0
let cdi = 0
let chi = 0
let cminui = 0
let endSIFlag = true // 是否在最后统一设置index
if (curr.getTime() >= end.getTime()) {
// 值大于等于结束时间
// console.log(11)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.endObj.hours
this.minutes = this.endObj.minutes
cyi = this.years.length - 1
cmi = this.months.length - 1
cdi = this.days.length - 1
chi = this.hours.length - 1
cminui = this.minutes.length - 1
endSIFlag = false
} else if (curr.getTime() <= start.getTime()) {
// 值小于等于开始时间
// console.log(22)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.startObj.hours
this.minutes = this.startObj.minutes
cyi = cmi = cdi = chi = cminui = 0
endSIFlag = false
} else if (cy === ey && cm === em && cd === ed && ch === eh) {
// 值与结束时间年/月/日/时相同
// console.log(222)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.endObj.hours
this.minutes = this.endObj.minutes
} else if (cy === ey && cm === em && cd === ed) {
// 值与结束时间年/月/日相同
// console.log(111)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.endObj.hours
// console.log(this.hours)
this.minutes = this.setArray(0, 59)
} else if (cy === ey && cm === em) {
// 值与结束时间年、月相同
// console.log(33)
this.months = this.endObj.months
this.days = this.endObj.days
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else if (cy === ey) {
// 值与结束时间年份相同
// console.log(44)
this.months = this.endObj.months
this.days = this.setDays(cy, cm)
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else if (cy === sy && cm === sm && cd === sd && ch === sh) {
// 值与开始时间年/月/日/时相同
// console.log(99)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.startObj.hours
this.minutes = this.startObj.minutes
} else if (cy === sy && cm === sm && cd === sd) {
// 值与开始时间年/月/日相同
// console.log(88)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.startObj.hours
this.minutes = this.setArray(0, 59)
} else if (cy === sy && cm === sm) {
// 值与开始时间年、月相同
// console.log(55)
this.months = this.startObj.months
this.days = this.startObj.days
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else if (cy === sy) {
// 值与开始时间年份相同
// console.log(66)
this.months = this.startObj.months
this.days = this.setDays(cy, cm)
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
} else {
// 值与开始时间、结束时间不同年月
// console.log(77)
this.months = this.setArray(1, 12)
this.days = this.setDays(cy, cm)
this.hours = this.setArray(0, 23)
this.minutes = this.setArray(0, 59)
}
if (endSIFlag) {
const di = this.days.indexOf(cd)
cmi = this.months.indexOf(cm)
cdi = di === -1 ? this.days.length - 1 : di
chi = this.hours.indexOf(ch)
cminui = this.minutes.indexOf(cminu)
}
setTimeout((item) => {
this.pickerVal = [cyi, cmi, cdi, chi, cminui]
this.confirm()
this.changeDisabled = false
}, 50)
// this.$nextTick(() => {
// this.pickerVal = [cyi, cmi, cdi, chi, cminui]
// this.confirm()
// this.changeDisabled = false
// // this.showCover = false
// // this.hasChange = false
// })
},
// 设置开始/结束时间相关变量
getSE() {
let s = this.startYear
let e = this.endYear
s = s ? s : '2010-01-01 00:00'
e = e ? e : '2050-12-31 23:59'
const { val: start, y: sy, m: sm, d: sd, h: sh, minu: sminu } = this.trimDate(s)
const { val: end, y: ey, m: em, d: ed, h: eh, minu: eminu } = this.trimDate(e)
return {
start,
sy,
sm,
sd,
sh,
sminu,
end,
ey,
em,
ed,
eh,
eminu,
}
},
trimDate(val, month, day) {
// const reg = /^\d{4}-\d{1,2}-\d{1,2}( \d{1,2}:\d{1,2})?(:\d{1,2})?$/
let curr = ''
if (val == '现在') {
curr = this.presentTime
} else {
if (typeof val === 'string') {
curr = dayjs(val, ['YYYY', 'YYYY-MM-DD', 'YYYY-MM-DD HH', 'YYYY-MM-DD HH:m'], 'es', true).$d
} else {
curr = new Date(val)
}
}
return {
val: curr,
y: curr.getFullYear(),
m: month ? month : curr.getMonth() + 1,
d: day ? day : curr.getDate(),
h: curr.getHours(),
minu: curr.getMinutes(),
}
},
// 获取一个范围内的整数，返回数组
setArray(start, end) {
const arr = []
for (let i = start; i <= end; i++) {
arr.push(i)
}
return arr
},
// 将数字转换成两位
trimNum(num) {
num = num >= 10 ? num : `0${num}`
return num
},
},
}
</script>
<style scoped>
@import './w-picker.css';
</style>

341
components/benben-picker/half-picker.vue Normal file
View File

@ -0,0 +1,341 @@
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickerVal" @change="bindChange">
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in sections" :key="index">{{ item }}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
name: 'half-picker',
props: {
startYear: {
type: [String, Number],
default: '2010-01-01',
},
endYear: {
type: [String, Number],
default: '2050-12-31',
},
value: {
type: [String, Number],
default: '',
},
itemHeight: {
type: String,
default: '44px',
},
},
data() {
const baseArr = ['', '']
return {
date: '',
presentTime: new Date(),
years: baseArr,
months: baseArr,
days: baseArr,
sections: ['上午', '下午'],
minutes: baseArr,
days28: [],
pickerVal: [0, 0, 0, 0],
startObj: {
months: [],
days: [],
},
endObj: {
months: [],
days: [],
},
changeDisabled: false,
moveFlag: false,
showCover: false,
}
},
watch: {
startYear() {
this.setStartEnd()
const date = this.value ? this.value : new Date()
this.initCurr(date)
},
endYear() {
this.setStartEnd()
const date = this.value ? this.value : new Date()
this.initCurr(date)
},
value(val) {
let value = val.split(' ')
const date = val ? val : new Date()
this.initCurr(date)
},
},
created() {
this.days28 = this.setArray(1, 28)
this.setStartEnd()
const date = this.value ? this.value : new Date()
this.initCurr(date)
// this.$nextTick(() => {
// this.confirm()
// })
},
methods: {
// 当滚动选择
bindChange(e) {
if (this.changeDisabled) return
this.changeDisabled = true
const prev = this.pickerVal
const val = e.detail.value
const y = this.years[val[0]] ? this.years[val[0]] : this.years[this.years.length - 1]
const m = this.months[val[1]] ? this.months[val[1]] : this.months[this.months.length - 1]
const d = this.days[val[2]] ? this.days[val[2]] : this.days[this.days.length - 1]
const sections = this.sections[val[3]] || this.sections[this.sections.length - 1]
const date = `${y}-${m}-${d} ${sections}`
this.initCurr(date, m, d)
// if (prev[1] != val[1]) {
// this.initCurr(date, m, d)
// } else {
// this.initCurr(date)
// }
// this.pickerVal = val
},
// 点击确定
confirm() {
const val = this.pickerVal
const trimN = this.trimNum
let date = ''
let obj = {}
date = `${this.years[val[0]]}-${trimN(this.months[val[1]])}-${trimN(this.days[val[2]])} ${this.sections[val[3]]}`
obj = {
year: this.years[val[0]],
month: this.months[val[1]],
day: this.days[val[2]],
sections: this.sections[val[3]],
}
this.date = date
this.$emit('change', {
result: date,
value: date,
obj: obj,
})
},
// 根据年月,设置日期(不同月份，日期不同)
setDays(year, month, start = 1) {
let newDays = []
const monthReg = /^4|6|9|11$/
let maxDay = ''
if (monthReg.test(month)) {
maxDay = 30
} else if (month === 2) {
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
maxDay = 29
} else {
maxDay = 28
}
} else {
maxDay = 31
}
newDays = this.setArray(start, maxDay)
return newDays
},
// 设置最大最小月日时分
setStartEnd() {
const { sy, ey, sm, em, sd, ed, sh, eh, sminu, eminu } = this.getSE()
this.years = this.setArray(sy, ey)
// 设置最大最小月
if (sy === ey) {
this.startObj.months = this.endObj.months = this.setArray(sm, em)
} else {
this.startObj.months = this.setArray(sm, 12)
this.endObj.months = this.setArray(1, em)
}
// 设置最大最小日
if (sy === ey && sm === em) {
this.startObj.days = this.endObj.days = this.setArray(sd, ed)
} else {
this.startObj.days = this.setDays(sy, sm, sd)
this.endObj.days = this.setArray(1, ed)
}
// 设置最大最小时
this.startObj.sections = sh > 12 ? ['下午'] : ['上午', '下午']
this.endObj.sections = eh > 12 ? ['上午', '下午'] : ['上午']
},
// 初始化选中项
initCurr(val, month, day) {
const { start, end, sy, ey, sm, em, sd, ed, sh, eh, sminu, eminu } = this.getSE()
const { val: curr, y: cy, m: cm, d: cd, h: ch, minu: cminu, sections } = this.trimDate(val, month, day)
let cyi = this.years.indexOf(cy)
let cmi = 0
let cdi = 0
let chi = 0
let endSIFlag = true // 是否在最后统一设置index
if (curr.getTime() >= end.getTime()) {
// 值大于等于结束时间
// console.log(11)
this.months = this.endObj.months
this.days = this.endObj.days
this.sections = this.endObj.sections
cyi = this.years.length - 1
cmi = this.months.length - 1
cdi = this.days.length - 1
chi = this.sections.indexOf(sections) == -1 ? 0 : this.sections.indexOf(sections)
endSIFlag = false
} else if (curr.getTime() <= start.getTime()) {
// 值小于等于开始时间
// console.log(22)
this.months = this.startObj.months
this.days = this.startObj.days
this.sections = this.startObj.sections
chi = this.sections.indexOf(sections) == -1 ? 0 : this.sections.indexOf(sections)
cyi = cmi = cdi = 0
endSIFlag = false
} else if (cy === ey && cm === em && cd === ed) {
// 值与结束时间年/月/日相同
// console.log(111)
this.months = this.endObj.months
this.days = this.endObj.days
this.sections = this.endObj.sections
// console.log(this.sections)
} else if (cy === ey && cm === em) {
// 值与结束时间年、月相同
// console.log(33)
this.months = this.endObj.months
this.days = this.endObj.days
this.sections = ['上午', '下午']
} else if (cy === ey) {
// 值与结束时间年份相同
// console.log(44)
this.months = this.endObj.months
this.days = this.setDays(cy, cm)
this.sections = ['上午', '下午']
} else if (cy === sy && cm === sm && cd === sd) {
// 值与开始时间年/月/日相同
console.log(88)
this.months = this.startObj.months
this.days = this.startObj.days
this.sections = this.startObj.sections
} else if (cy === sy && cm === sm) {
// 值与开始时间年、月相同
// console.log(55)
this.months = this.startObj.months
this.days = this.startObj.days
this.sections = ['上午', '下午']
} else if (cy === sy) {
// 值与开始时间年份相同
// console.log(66)
this.months = this.startObj.months
this.days = this.setDays(cy, cm)
this.sections = ['上午', '下午']
} else {
// 值与开始时间、结束时间不同年月
// console.log(77)
this.months = this.setArray(1, 12)
this.days = this.setDays(cy, cm)
this.sections = ['上午', '下午']
}
if (endSIFlag) {
const di = this.days.indexOf(cd)
cmi = this.months.indexOf(cm)
cdi = di === -1 ? this.days.length - 1 : di
chi = this.sections.indexOf(sections) == -1 ? 0 : this.sections.indexOf(sections)
}
setTimeout((item) => {
this.pickerVal = [cyi, cmi, cdi, chi, cminui]
this.confirm()
this.changeDisabled = false
}, 50)
// this.$nextTick((_) => {
// this.pickerVal = [cyi, cmi, cdi, chi]
// this.confirm()
// this.changeDisabled = false
// this.showCover = false
// })
},
// 设置开始/结束时间相关变量
getSE() {
let s = this.startYear
let e = this.endYear
s = s ? s : '2010-01-01 00:00'
e = e ? e : '2050-12-31 23:59'
const { val: start, y: sy, m: sm, d: sd, h: sh, minu: sminu } = this.trimDate(s)
const { val: end, y: ey, m: em, d: ed, h: eh, minu: eminu } = this.trimDate(e)
return {
start,
sy,
sm,
sd,
sh,
sminu,
end,
ey,
em,
ed,
eh,
eminu,
}
},
// 返回时间信息
trimDate(val, month, day) {
//检测时间格式 2050-12-31 或 2022-06-09 下午 或 2022-06-09 上午 或 2050/5/8 上午 正则匹配
const reg = /^(\d{4})-(\d{1,2})-(\d{1,2})[\s]{0,1}([上下]{1,2}午)$/
let curr = ''
let sections = ''
if (val == '现在') {
curr = this.presentTime
} else if (typeof val === 'string') {
if (reg.test(val)) {
const arr = val.split(' ')
val = arr[0]
sections = arr[1]
}
val = val.replace(/-/g, '/')
}
if (!curr) {
curr = new Date(val)
}
if (!sections) {
sections = curr.getHours() > 12 ? '下午' : '上午'
}
return {
val: curr,
y: curr.getFullYear(),
m: month ? month : curr.getMonth() + 1,
d: day ? day : curr.getDate(),
h: curr.getHours(),
sections: sections,
}
},
// 获取一个范围内的整数，返回数组
setArray(start, end) {
const arr = []
for (let i = start; i <= end; i++) {
arr.push(i)
}
return arr
},
// 将数字转换成两位
trimNum(num) {
num = num >= 10 ? num : `0${num}`
return num
},
},
}
</script>
<style scoped>
@import './w-picker.css';
</style>

5
components/benben-picker/lang.js Normal file
View File

@ -0,0 +1,5 @@
export default {
"zh": {
}
}

300
components/benben-picker/linkage-picker.vue Normal file
View File

@ -0,0 +1,300 @@
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column v-for="(group, gIndex) in range" :key="gIndex">
<view class="w-picker-item" v-for="(item, index) in group" :key="index">{{ item[nodeKey] }}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
return {
pickVal: [],
range: [],
checkObj: {},
}
},
props: {
itemHeight: {
type: String,
default: '44px',
},
value: {
type: [Array, String],
default: '',
},
defaultType: {
type: String,
default: 'label',
},
options: {
type: Array,
default() {
return []
},
},
defaultProps: {
type: Object,
default() {
return {
lable: 'label',
value: 'value',
children: 'children',
}
},
},
level: {
//多级联动层级，表示几级联动
type: [Number, String],
default: 2,
},
},
computed: {
nodeKey() {
return this.defaultProps.label
},
nodeVal() {
return this.defaultProps.value
},
nodeChild() {
return this.defaultProps.children
},
},
watch: {
value(val) {
if (this.options.length != 0) {
this.initData()
}
},
options(val) {
this.initData()
},
},
created() {
if (this.options.length != 0) {
this.initData()
}
},
methods: {
getData() {
//用来处理初始化数据
let options = this.options
let col1 = {},
col2 = {},
col3 = {},
col4 = {}
let arr1 = options,
arr2 = [],
arr3 = [],
arr4 = []
let col1Index = 0,
col2Index = 0,
col3Index = 0,
col4Index = 0
let a1 = '',
a2 = '',
a3 = '',
a4 = ''
let dVal = [],
obj = {}
let value = this.value
let data = []
a1 = value[0]
a2 = value[1]
if (this.level > 2) {
a3 = value[2]
}
if (this.level > 3) {
a4 = value[3]
}
/*第1列*/
col1Index = arr1.findIndex((v) => {
return v[this.defaultType] == a1
})
col1Index = value ? (col1Index != -1 ? col1Index : 0) : 0
col1 = arr1[col1Index]
/*第2列*/
arr2 = arr1[col1Index][this.nodeChild]
col2Index = arr2.findIndex((v) => {
return v[this.defaultType] == a2
})
col2Index = value ? (col2Index != -1 ? col2Index : 0) : 0
col2 = arr2[col2Index]
/*第3列*/
if (this.level > 2) {
arr3 = arr2[col2Index][this.nodeChild]
col3Index = arr3.findIndex((v) => {
return v[this.defaultType] == a3
})
col3Index = value ? (col3Index != -1 ? col3Index : 0) : 0
col3 = arr3[col3Index]
}
/*第4列*/
if (this.level > 3) {
arr4 = arr3[col4Index][this.nodeChild]
col4Index = arr4.findIndex((v) => {
return v[this.defaultType] == a4
})
col4Index = value ? (col4Index != -1 ? col4Index : 0) : 0
col4 = arr4[col4Index]
}
switch (this.level * 1) {
case 2:
dVal = [col1Index, col2Index]
obj = {
col1,
col2,
}
data = [arr1, arr2]
break
case 3:
dVal = [col1Index, col2Index, col3Index]
obj = {
col1,
col2,
col3,
}
data = [arr1, arr2, arr3]
break
case 4:
dVal = [col1Index, col2Index, col3Index, col4Index]
obj = {
col1,
col2,
col3,
col4,
}
data = [arr1, arr2, arr3, arr4]
break
}
return {
data,
dVal,
obj,
}
},
initData() {
let dataData = this.getData()
let data = dataData.data
let arr1 = data[0]
let arr2 = data[1]
let arr3 = data[2] || []
let arr4 = data[3] || []
let obj = dataData.obj
let col1 = obj.col1,
col2 = obj.col2,
col3 = obj.col3 || {},
col4 = obj.col4 || {}
let result = '',
value = []
let range = []
switch (this.level) {
case 2:
value = [col1[this.nodeVal], col2[this.nodeVal]]
result = `${col1[this.nodeKey] + col2[this.nodeKey]}`
range = [arr1, arr2]
break
case 3:
value = [col1[this.nodeVal], col2[this.nodeVal], col3[this.nodeVal]]
result = `${col1[this.nodeKey] + col2[this.nodeKey] + col3[this.nodeKey]}`
range = [arr1, arr2, arr3]
break
case 4:
value = [col1[this.nodeVal], col2[this.nodeVal], col3[this.nodeVal], col4[this.nodeVal]]
result = `${col1[this.nodeKey] + col2[this.nodeKey] + col3[this.nodeKey] + col4[this.nodeKey]}`
range = [arr1, arr2, arr3, arr4]
break
}
this.range = range
this.checkObj = obj
this.$nextTick(() => {
this.pickVal = dataData.dVal
})
this.$emit('change', {
result: result,
value: value,
obj: obj,
})
},
handlerChange(e) {
let arr = [...e.detail.value]
let col1Index = arr[0],
col2Index = arr[1],
col3Index = arr[2] || 0,
col4Index = arr[3] || 0
let arr1 = [],
arr2 = [],
arr3 = [],
arr4 = []
let col1,
col2,
col3,
col4,
obj = {}
let result = '',
value = []
arr1 = this.options
arr2 = (arr1[col1Index] && arr1[col1Index][this.nodeChild]) || arr1[arr1.length - 1][this.nodeChild] || []
col1 = arr1[col1Index] || arr1[arr1.length - 1] || {}
col2 = arr2[col2Index] || arr2[arr2.length - 1] || {}
if (this.level > 2) {
arr3 = (arr2[col2Index] && arr2[col2Index][this.nodeChild]) || arr2[arr2.length - 1][this.nodeChild]
col3 = arr3[col3Index] || arr3[arr3.length - 1] || {}
}
if (this.level > 3) {
arr4 = (arr3[col3Index] && arr3[col3Index][this.nodeChild]) || arr3[arr3.length - 1][this.nodeChild] || []
col4 = arr4[col4Index] || arr4[arr4.length - 1] || {}
}
switch (this.level) {
case 2:
obj = {
col1,
col2,
}
this.range = [arr1, arr2]
result = `${(col1[this.nodeKey] || '') + (col2[this.nodeKey] || '')}`
value = [col1[this.nodeVal] || '', col2[this.nodeVal] || '']
break
case 3:
obj = {
col1,
col2,
col3,
}
this.range = [arr1, arr2, arr3]
result = `${(col1[this.nodeKey] || '') + (col2[this.nodeKey] || '') + (col3[this.nodeKey] || '')}`
value = [col1[this.nodeVal] || '', col2[this.nodeVal] || '', col3[this.nodeVal] || '']
break
case 4:
obj = {
col1,
col2,
col3,
col4,
}
this.range = [arr1, arr2, arr3, arr4]
result = `${(col1[this.nodeKey] || '') + (col2[this.nodeKey] || '') + (col3[this.nodeKey] || '') + (col4[this.nodeKey] || '')}`
value = [col1[this.nodeVal] || '', col2[this.nodeVal] || '', col3[this.nodeVal] || '', col4[this.nodeVal] || '']
break
}
this.checkObj = obj
this.pickVal = arr
this.$emit('change', {
result: result,
value: value,
obj: obj,
})
},
},
}
</script>
<style lang="scss">
@import './w-picker.css';
</style>

394
components/benben-picker/range-picker.vue Normal file
View File

@ -0,0 +1,394 @@
<template>
<view class="w-picker-view">
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.fyears" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.fmonths" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.fdays" :key="index">{{item}}日</view>
</picker-view-column>
<picker-view-column class="w-picker-flex1">
<view class="w-picker-item">-</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.tyears" :key="index">{{item}}年</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.tmonths" :key="index">{{item}}月</view>
</picker-view-column>
<picker-view-column class="w-picker-flex2">
<view class="w-picker-item" v-for="(item,index) in range.tdays" :key="index">{{item}}日</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],
default() {
return []
},
},
current: {
//是否默认选中当前日期
type: Boolean,
default: false,
},
startYear: {
type: [String, Number],
default: 1970,
},
endYear: {
type: [String, Number],
default: new Date().getFullYear(),
},
},
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}$/,
example = '2020-04-03'
if (!strReg.test(value[0]) || !strReg.test(value[1])) {
console.log(new Error('请传入与mode匹配的value值，例[' + example + ',' + example + ']'))
}
return strReg.test(value[0]) && strReg.test(value[1])
},
resetToData(fmonth, fday, tyear, tmonth) {
let range = this.range
let tmonths = [],
tdays = []
let yearFlag = tyear != range.tyears[0]
let monthFlag = tyear != range.tyears[0] || tmonth != range.tmonths[0]
let ttotal = new Date(tyear, tmonth, 0).getDate()
for (let i = yearFlag ? 1 : fmonth * 1; i <= 12; i++) {
tmonths.push(this.formatNum(i))
}
for (let i = monthFlag ? 1 : fday * 1; i <= ttotal; i++) {
tdays.push(this.formatNum(i))
}
return {
tmonths,
tdays,
}
},
resetData(fyear, fmonth, fday, tyear, tmonth) {
let fyears = [],
fmonths = [],
fdays = [],
tyears = [],
tmonths = [],
tdays = []
let startYear = this.startYear
let endYear = this.endYear
let ftotal = new Date(fyear, fmonth, 0).getDate()
let ttotal = new Date(tyear, tmonth, 0).getDate()
for (let i = startYear * 1; i <= endYear; i++) {
fyears.push(this.formatNum(i))
}
for (let i = 1; i <= 12; i++) {
fmonths.push(this.formatNum(i))
}
for (let i = 1; i <= ftotal; i++) {
fdays.push(this.formatNum(i))
}
for (let i = fyear * 1; i <= endYear; i++) {
tyears.push(this.formatNum(i))
}
for (let i = fmonth * 1; i <= 12; i++) {
tmonths.push(this.formatNum(i))
}
for (let i = fday * 1; i <= ttotal; i++) {
tdays.push(this.formatNum(i))
}
return {
fyears,
fmonths,
fdays,
tyears,
tmonths,
tdays,
}
},
getData(dVal) {
let start = this.startYear * 1
let end = this.endYear * 1
let value = dVal
let flag = this.current
let aToday = new Date()
let tYear,
tMonth,
tDay,
tHours,
tMinutes,
tSeconds,
pickVal = []
let initstartDate = new Date(start.toString())
let endDate = new Date(end.toString())
if (start > end) {
initstartDate = new Date(end.toString())
endDate = new Date(start.toString())
}
let startYear = initstartDate.getFullYear()
let startMonth = initstartDate.getMonth() + 1
let endYear = endDate.getFullYear()
let fyears = [],
fmonths = [],
fdays = [],
tyears = [],
tmonths = [],
tdays = [],
returnArr = [],
startDVal = [],
endDVal = []
let curMonth = flag ? value[1] * 1 : startDVal[1] * 1 + 1
let curMonth1 = flag ? value[5][1] * 1 : value[5] * 1 + 1
let totalDays = new Date(value[0], value[1], 0).getDate()
let totalDays1 = new Date(value[4], value[5], 0).getDate()
for (let s = startYear; s <= endYear; s++) {
fyears.push(this.formatNum(s))
}
for (let m = 1; m <= 12; m++) {
fmonths.push(this.formatNum(m))
}
for (let d = 1; d <= totalDays; d++) {
fdays.push(this.formatNum(d))
}
for (let s = value[0] * 1; s <= endYear; s++) {
tyears.push(this.formatNum(s))
}
if (value[4] * 1 > value[0] * 1) {
for (let m = 1; m <= 12; m++) {
tmonths.push(this.formatNum(m))
}
for (let d = 1; d <= totalDays1; d++) {
tdays.push(this.formatNum(d))
}
} else {
for (let m = value[1] * 1; m <= 12; m++) {
tmonths.push(this.formatNum(m))
}
for (let d = value[2] * 1; d <= totalDays1; d++) {
tdays.push(this.formatNum(d))
}
}
pickVal = [
fyears.indexOf(value[0]) == -1 ? 0 : fyears.indexOf(value[0]),
fmonths.indexOf(value[1]) == -1 ? 0 : fmonths.indexOf(value[1]),
fdays.indexOf(value[2]) == -1 ? 0 : fdays.indexOf(value[2]),
0,
tyears.indexOf(value[4]) == -1 ? 0 : tyears.indexOf(value[4]),
tmonths.indexOf(value[5]) == -1 ? 0 : tmonths.indexOf(value[5]),
tdays.indexOf(value[6]) == -1 ? 0 : tdays.indexOf(value[6]),
]
return {
fyears,
fmonths,
fdays,
tyears,
tmonths,
tdays,
pickVal,
}
},
getDval() {
let value = this.value
let fields = this.fields
let dVal = null
let aDate = new Date()
let fyear = this.formatNum(aDate.getFullYear())
let fmonth = this.formatNum(aDate.getMonth() + 1)
let fday = this.formatNum(aDate.getDate())
let tyear = this.formatNum(aDate.getFullYear())
let tmonth = this.formatNum(aDate.getMonth() + 1)
let tday = this.formatNum(aDate.getDate())
if (value && value.length > 0) {
let flag = this.checkValue(value)
if (!flag) {
dVal = [fyear, fmonth, fday, '-', tyear, tmonth, tday]
} else {
dVal = [...value[0].split('-'), '-', ...value[1].split('-')]
}
} else {
dVal = [fyear, fmonth, fday, '-', tyear, tmonth, tday]
}
return dVal
},
initData() {
let range = [],
pickVal = []
let result = '',
full = '',
obj = {}
let dVal = this.getDval()
let dateData = this.getData(dVal)
let fyears = [],
fmonths = [],
fdays = [],
tyears = [],
tmonths = [],
tdays = []
let fyear, fmonth, fday, tyear, tmonth, tday
pickVal = dateData.pickVal
fyears = dateData.fyears
fmonths = dateData.fmonths
fdays = dateData.fdays
tyears = dateData.tyears
tmonths = dateData.tmonths
tdays = dateData.tdays
range = {
fyears,
fmonths,
fdays,
tyears,
tmonths,
tdays,
}
fyear = range.fyears[pickVal[0]]
fmonth = range.fmonths[pickVal[1]]
fday = range.fdays[pickVal[2]]
tyear = range.tyears[pickVal[4]]
tmonth = range.tmonths[pickVal[5]]
tday = range.tdays[pickVal[6]]
obj = {
fyear,
fmonth,
fday,
tyear,
tmonth,
tday,
}
result = full = `${fyear + '-' + fmonth + '-' + fday + '至' + tyear + '-' + tmonth + '-' + tday}`
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 result = '',
full = '',
obj = {}
let year = '',
month = '',
day = '',
hour = '',
minute = '',
second = '',
note = [],
province,
city,
area
let checkObj = this.checkObj
let days = [],
months = [],
endYears = [],
endMonths = [],
endDays = [],
startDays = []
let mode = this.mode
let col1, col2, col3, d, a, h, m
let xDate = new Date().getTime()
let range = this.range
let fyear = range.fyears[arr[0]] || range.fyears[range.fyears.length - 1]
let fmonth = range.fmonths[arr[1]] || range.fmonths[range.fmonths.length - 1]
let fday = range.fdays[arr[2]] || range.fdays[range.fdays.length - 1]
let tyear = range.tyears[arr[4]] || range.tyears[range.tyears.length - 1]
let tmonth = range.tmonths[arr[5]] || range.tmonths[range.tmonths.length - 1]
let tday = range.tdays[arr[6]] || range.tdays[range.tdays.length - 1]
let resetData = this.resetData(fyear, fmonth, fday, tyear, tmonth)
if (fyear != checkObj.fyear || fmonth != checkObj.fmonth || fday != checkObj.fday) {
arr[4] = 0
arr[5] = 0
arr[6] = 0
range.tyears = resetData.tyears
range.tmonths = resetData.tmonths
range.tdays = resetData.tdays
tyear = range.tyears[0]
checkObj.tyears = range.tyears[0]
tmonth = range.tmonths[0]
checkObj.tmonths = range.tmonths[0]
tday = range.tdays[0]
checkObj.tdays = range.tdays[0]
}
if (fyear != checkObj.fyear || fmonth != checkObj.fmonth) {
range.fdays = resetData.fdays
}
if (tyear != checkObj.tyear) {
arr[5] = 0
arr[6] = 0
let toData = this.resetToData(fmonth, fday, tyear, tmonth)
range.tmonths = toData.tmonths
range.tdays = toData.tdays
tmonth = range.tmonths[0]
checkObj.tmonths = range.tmonths[0]
tday = range.tdays[0]
checkObj.tdays = range.tdays[0]
}
if (tmonth != checkObj.tmonth) {
arr[6] = 0
let toData = this.resetToData(fmonth, fday, tyear, tmonth)
range.tdays = toData.tdays
tday = range.tdays[0]
checkObj.tdays = range.tdays[0]
}
result = full = `${fyear + '-' + fmonth + '-' + fday + '至' + tyear + '-' + tmonth + '-' + tday}`
obj = {
fyear,
fmonth,
fday,
tyear,
tmonth,
tday,
}
this.checkObj = obj
this.$nextTick(() => {
this.pickVal = arr
})
this.$emit('change', {
result: result,
value: full,
obj: obj,
})
},
},
}
</script>
<style lang="scss">
@import './w-picker.css';
</style>

209
components/benben-picker/region-picker.vue Normal file
View File

@ -0,0 +1,209 @@
<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.provinces" :key="index">{{ item.label }}</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in range.citys" :key="index">{{ item.label }}</view>
</picker-view-column>
<picker-view-column v-if="!hideArea">
<view class="w-picker-item" v-for="(item, index) in range.areas" :key="index">{{ item.label }}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
import areaData from './areadata/areadata.json'
export default {
data() {
return {
pickVal: [],
range: {
provinces: [],
citys: [],
areas: [],
},
checkObj: {},
}
},
props: {
itemHeight: {
type: String,
default: '44px',
},
value: {
type: [Array, String],
default: '',
},
defaultType: {
type: String,
default: 'value',
},
hideArea: {
type: Boolean,
default: false,
},
},
watch: {
value(val) {
this.initData()
},
},
created() {
this.initData()
},
methods: {
getData() {
//用来处理初始化数据
let provinces = areaData
let dVal = []
let value = this.value
let a1 = value[0] //默认值省
let a2 = value[1] //默认值市
let a3 = value[2] //默认值区、县
let province, city, area
let provinceIndex = provinces.findIndex((v) => {
return v[this.defaultType] == a1
})
provinceIndex = value ? (provinceIndex != -1 ? provinceIndex : 0) : 0
let citys = provinces[provinceIndex].children
let cityIndex = citys.findIndex((v) => {
return v[this.defaultType] == a2
})
cityIndex = value ? (cityIndex != -1 ? cityIndex : 0) : 0
let areas = citys[cityIndex].children
let areaIndex = areas.findIndex((v) => {
return v[this.defaultType] == a3
})
areaIndex = value ? (areaIndex != -1 ? areaIndex : 0) : 0
dVal = this.hideArea ? [provinceIndex, cityIndex] : [provinceIndex, cityIndex, areaIndex]
province = provinces[provinceIndex]
city = citys[cityIndex]
area = areas[areaIndex]
let obj = this.hideArea
? {
province,
city,
}
: {
province,
city,
area,
}
return this.hideArea
? {
provinces,
citys,
dVal,
obj,
}
: {
provinces,
citys,
areas,
dVal,
obj,
}
},
initData() {
let dataData = this.getData()
let provinces = dataData.provinces
let citys = dataData.citys
let areas = this.hideArea ? [] : dataData.areas
let obj = dataData.obj
let province = obj.province,
city = obj.city,
area = this.hideArea ? {} : obj.area
let value = this.hideArea ? [province.value, city.value] : [province.value, city.value, area.value]
let result = this.hideArea ? `${province.label + city.label}` : `${province.label + city.label + area.label}`
this.range = this.hideArea
? {
provinces,
citys,
}
: {
provinces,
citys,
areas,
}
this.checkObj = obj
this.$nextTick(() => {
this.pickVal = dataData.dVal
})
this.$emit('change', {
result: result,
value: value,
obj: obj,
})
},
handlerChange(e) {
let arr = [...e.detail.value]
let _index = this.findChangeIndex(this.pickVal, arr)
if (_index == 0) {
arr = [arr[0], 0, 0]
} else if (_index == 1) {
arr = [arr[0], arr[1], 0]
}
let provinceIndex = arr[0],
cityIndex = arr[1],
areaIndex = this.hideArea ? 0 : arr[2]
let provinces = areaData
let citys = (provinces[provinceIndex] && provinces[provinceIndex].children) || provinces[provinces.length - 1].children || []
let areas = this.hideArea ? [] : (citys[cityIndex] && citys[cityIndex].children) || citys[citys.length - 1].children || []
let province = provinces[provinceIndex] || provinces[provinces.length - 1],
city = citys[cityIndex] || [citys.length - 1],
area = this.hideArea ? {} : areas[areaIndex] || [areas.length - 1]
let obj = this.hideArea
? {
province,
city,
}
: {
province,
city,
area,
}
if (this.checkObj.province.label != province.label) {
//当省更新的时候需要刷新市、区县的数据;
this.range.citys = citys
if (!this.hideArea) {
this.range.areas = areas
}
}
if (this.checkObj.city.label != city.label) {
//当市更新的时候需要刷新区县的数据;
if (!this.hideArea) {
this.range.areas = areas
}
}
this.checkObj = obj
this.$nextTick(() => {
this.pickVal = arr
})
let result = this.hideArea ? `${province.label + city.label}` : `${province.label + city.label + area.label}`
let value = this.hideArea ? [province.value, city.value] : [province.value, city.value, area.value]
this.$emit('change', {
result: result,
value: value,
obj: obj,
})
},
findChangeIndex(arr1, arr2) {
if (arr1[0] !== arr2[0]) {
return 0
} else if (arr1[1] !== arr2[1]) {
return 1
} else if (arr1[2] !== arr2[2]) {
return 2
}
return -1
},
},
}
</script>
<style lang="scss">
@import './w-picker.css';
</style>

135
components/benben-picker/selector-picker.vue Normal file
View File

@ -0,0 +1,135 @@
<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" :key="index">{{ item[nodeKey] }}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
props: {
itemHeight: {
type: String,
default: '44px',
},
options: {
type: [Array, Object],
default() {
return []
},
},
value: {
type: [String, Array, Number],
default: '',
},
defaultType: {
type: String,
default: 'label',
},
defaultProps: {
type: Object,
default() {
return {
label: 'label',
value: 'value',
}
},
},
},
data() {
return {
pickVal: [],
}
},
computed: {
nodeKey() {
return this.defaultProps.label
},
nodeValue() {
return this.defaultProps.value
},
range() {
return this.options
},
},
watch: {
value(val) {
if (this.options.length != 0) {
this.initData()
}
},
options(val) {
this.initData()
},
},
created() {
if (this.options.length != 0) {
this.initData()
}
},
methods: {
initData() {
let dVal = this.value || ''
let data = this.range
let pickVal = [0]
let cur = null
let label = ''
let value, idx
if (this.defaultType == this.nodeValue) {
value = data.find((v) => v[this.nodeValue] == dVal)
idx = data.findIndex((v) => v[this.nodeValue] == dVal)
} else {
value = data.find((v) => v[this.nodeKey] == dVal)
idx = data.findIndex((v) => v[this.nodeKey] == dVal)
}
pickVal = [idx != -1 ? idx : 0]
this.$nextTick(() => {
this.pickVal = pickVal
})
if (data.length == 0) {
this.$emit('change', {
result: '',
value: '',
obj: { [this.nodeValue]: '', [this.nodeKey]: '' },
})
return
}
if (this.defaultType == this.nodeValue) {
this.$emit('change', {
result: value ? value[this.nodeKey] : data[0][this.nodeKey],
value: dVal || data[0][this.nodeKey],
obj: value ? value : data[0],
})
} else {
this.$emit('change', {
result: dVal || data[0][this.nodeKey],
value: value ? value[this.nodeValue] : data[0][this.nodeValue],
obj: value ? value : data[0],
})
}
},
handlerChange(e) {
let arr = [...e.detail.value]
let pickVal = [arr[0] || 0]
let data = this.range
let cur = data[arr[0]]
let label = ''
let value = ''
this.$nextTick(() => {
this.pickVal = pickVal
})
this.$emit('change', {
result: cur[this.nodeKey],
value: cur[this.nodeValue],
obj: cur,
})
},
},
}
</script>
<style lang="scss">
@import './w-picker.css';
</style>

269
components/benben-picker/shortterm-picker.vue Normal file
View 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>

243
components/benben-picker/time-picker.vue Normal file
View File

@ -0,0 +1,243 @@
<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.hours" :key="index">{{ item }}时</view>
</picker-view-column>
<picker-view-column>
<view class="w-picker-item" v-for="(item, index) in range.minutes" :key="index">{{ item }}分</view>
</picker-view-column>
<picker-view-column v-if="second">
<view class="w-picker-item" v-for="(item, index) in range.seconds" :key="index">{{ item }}秒</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,
},
second: {
type: Boolean,
default: true,
},
},
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{2}:\d{2}:\d{2}$/,
example = '18:00:05'
if (!strReg.test(value)) {
console.log(new Error('请传入与mode、fields匹配的value值，例value=' + example + ''))
}
return strReg.test(value)
},
resetData(year, month, day, hour, minute) {
let curDate = this.getCurrenDate()
let curFlag = this.current
let curHour = curDate.curHour
let curMinute = curDate.curMinute
let curSecond = curDate.curSecond
for (let hour = 0; hour < 24; hour++) {
hours.push(this.formatNum(hour))
}
for (let minute = 0; minute < 60; minute++) {
minutes.push(this.formatNum(minute))
}
for (let second = 0; second < 60; second++) {
seconds.push(this.formatNum(second))
}
return {
hours,
minutes,
seconds,
}
},
getData(curDate) {
//用来处理初始化数据
let hours = [],
minutes = [],
seconds = []
let curFlag = this.current
let disabledAfter = this.disabledAfter
let fields = this.fields
let curHour = curDate.curHour
let curMinute = curDate.curMinute
let curSecond = curDate.curSecond
for (let hour = 0; hour < 24; hour++) {
hours.push(this.formatNum(hour))
}
for (let minute = 0; minute < 60; minute++) {
minutes.push(this.formatNum(minute))
}
for (let second = 0; second < 60; second++) {
seconds.push(this.formatNum(second))
}
return this.second
? {
hours,
minutes,
seconds,
}
: {
hours,
minutes,
}
},
getCurrenDate() {
let curDate = new Date()
let curHour = curDate.getHours()
let curMinute = curDate.getMinutes()
let curSecond = curDate.getSeconds()
return this.second
? {
curHour,
curMinute,
curSecond,
}
: {
curHour,
curMinute,
}
},
getDval() {
let value = this.value
let fields = this.fields
let dVal = null
let aDate = new Date()
let hour = this.formatNum(aDate.getHours())
let minute = this.formatNum(aDate.getMinutes())
let second = this.formatNum(aDate.getSeconds())
if (value) {
let flag = this.checkValue(value)
if (!flag) {
dVal = [hour, minute, second]
} else {
dVal = value ? value.split(':') : []
}
} else {
dVal = this.second ? [hour, minute, second] : [hour, minute]
}
return dVal
},
initData() {
let curDate = this.getCurrenDate()
let dateData = this.getData(curDate)
let pickVal = [],
obj = {},
full = '',
result = '',
hour = '',
minute = '',
second = ''
let dVal = this.getDval()
let curFlag = this.current
let disabledAfter = this.disabledAfter
let hours = dateData.hours
let minutes = dateData.minutes
let seconds = dateData.seconds
let defaultArr = this.second
? [
dVal[0] && hours.indexOf(dVal[0]) != -1 ? hours.indexOf(dVal[0]) : 0,
dVal[1] && minutes.indexOf(dVal[1]) != -1 ? minutes.indexOf(dVal[1]) : 0,
dVal[2] && seconds.indexOf(dVal[2]) != -1 ? seconds.indexOf(dVal[2]) : 0,
]
: [
dVal[0] && hours.indexOf(dVal[0]) != -1 ? hours.indexOf(dVal[0]) : 0,
dVal[1] && minutes.indexOf(dVal[1]) != -1 ? minutes.indexOf(dVal[1]) : 0,
]
pickVal = disabledAfter
? defaultArr
: curFlag
? this.second
? [
hours.indexOf(this.formatNum(curDate.curHour)),
minutes.indexOf(this.formatNum(curDate.curMinute)),
seconds.indexOf(this.formatNum(curDate.curSecond)),
]
: [hours.indexOf(this.formatNum(curDate.curHour)), minutes.indexOf(this.formatNum(curDate.curMinute))]
: defaultArr
this.range = dateData
this.checkObj = obj
hour = dVal[0] ? dVal[0] : hours[0]
minute = dVal[1] ? dVal[1] : minutes[0]
if (this.second) second = dVal[2] ? dVal[0] : seconds[0]
result = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute}`
full = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute + ':00'}`
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 hour = '',
minute = '',
second = '',
result = '',
full = '',
obj = {}
hour = arr[0] || arr[0] == 0 ? data.hours[arr[0]] || data.hours[data.hours.length - 1] : ''
minute = arr[1] || arr[1] == 0 ? data.minutes[arr[1]] || data.minutes[data.minutes.length - 1] : ''
if (this.second) second = arr[2] || arr[2] == 0 ? data.seconds[arr[2]] || data.seconds[data.seconds.length - 1] : ''
obj = this.second
? {
hour,
minute,
second,
}
: {
hour,
minute,
}
this.checkObj = obj
result = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute}`
full = this.second ? `${hour + ':' + minute + ':' + second}` : `${hour + ':' + minute + ':00'}`
this.$emit('change', {
result: result,
value: full,
obj: obj,
})
},
},
}
</script>
<style lang="scss">
@import './w-picker.css';
</style>

26
components/benben-picker/w-picker.css Normal file
View File

@ -0,0 +1,26 @@
.w-picker-flex2{
flex:2;
}
.w-picker-flex1{
flex:1;
}
.w-picker-view {
width: 100%;
height: 476upx;
overflow: hidden;
background-color: rgba(255, 255, 255, 1);
z-index: 666;
}
.d-picker-view{
height: 100%;
}
.w-picker-item {
text-align: center;
width: 100%;
height: 88upx;
line-height: 88upx;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30upx;
}