初始化万家商超用户端仓库
This commit is contained in:
wangxiaowei
394
components/benben-picker/range-picker.vue
Normal file
394
components/benben-picker/range-picker.vue
Normal 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>
|
||||
Reference in New Issue
Block a user