|
@@ -1,82 +1,100 @@
|
|
-var dateComponentTemplate = `<div class="j-container">
|
|
|
|
-<div class="dateTags j-main">
|
|
|
|
- <div class="timeTag">
|
|
|
|
- <div class="area-card-item" :class="{active:item.selected==true}" v-for="(item, index) in timeSelectList" :key="index" @click="selectFixedDate(item)">{{item.name}}</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="timePicker" @click="dateShowEvent" :class="{clickactive:dateStyle==true}">
|
|
|
|
- <van-field @focus="getStratFocus" v-model="dateTimePickerState.startPlaceHolder" placeholder="开始时间"></van-field>
|
|
|
|
- <div class="line"></div>
|
|
|
|
- <van-field @focus="getEndFocus" v-model="dateTimePickerState.endPlaceHolder" placeholder="结束时间"></van-field>
|
|
|
|
- </div>
|
|
|
|
-</div>
|
|
|
|
-<van-popup v-model="datePicker.startshow" :safe-area-inset-bottom="true" get-container="#date-picker-other-box" round position="bottom" :style="{ height: '46%' }">
|
|
|
|
- <div class="j-container">
|
|
|
|
- <div class="j-header">
|
|
|
|
- <div class="headertitle">
|
|
|
|
- <div class="title_left">
|
|
|
|
- 选择开始时间
|
|
|
|
- </div>
|
|
|
|
- <span class="title_close" @click="pickerClose">
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
|
|
+var dateComponentTemplate = `
|
|
|
|
+<div class="j-container">
|
|
|
|
+ <div class="dateTags j-main" v-if="type === 'more-picker'">
|
|
|
|
+ <div class="timeTag">
|
|
|
|
+ <div class="area-card-item" :class="{active:item.selected==true}" v-for="(item, index) in timeSelectList" :key="index" @click="selectFixedDate(item)">{{item.name}}</div>
|
|
</div>
|
|
</div>
|
|
- <div class="j-main main-hidden">
|
|
|
|
- <van-datetime-picker
|
|
|
|
- class="datepopup"
|
|
|
|
- :show-toolbar="false"
|
|
|
|
- swipe-duration="300"
|
|
|
|
- v-model="datePicker.startcurrentDate"
|
|
|
|
- type="date"
|
|
|
|
- title="选择年月日"
|
|
|
|
- ref="getstartValues"
|
|
|
|
- :formatter="formatter"
|
|
|
|
- :min-date="datePicker.minDate"
|
|
|
|
- :max-date="datePicker.maxDate"
|
|
|
|
- >
|
|
|
|
- </van-datetime-picker>
|
|
|
|
|
|
+ <div class="timePicker" @click="dateShowEvent" :class="{clickactive:dateStyle==true}">
|
|
|
|
+ <van-field @focus="getStratFocus" v-model="dateTimePickerState.startPlaceHolder" placeholder="开始时间"></van-field>
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ <van-field @focus="getEndFocus" v-model="dateTimePickerState.endPlaceHolder" placeholder="结束时间"></van-field>
|
|
</div>
|
|
</div>
|
|
- <div class="j-footer">
|
|
|
|
- <div class="j-button-group">
|
|
|
|
- <button class="j-button-cancel" @click="resetStart">重置</button>
|
|
|
|
- <button class="j-button-confirm" @click="onStartConfirm">确认</button>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="type === 'more-picker'">
|
|
|
|
+ <van-popup v-model="datePicker.startshow" :safe-area-inset-bottom="true" get-container="#date-picker-other-box" round position="bottom" :style="{ height: '43%' }">
|
|
|
|
+ <div class="j-container">
|
|
|
|
+ <div class="j-header">
|
|
|
|
+ <div class="headertitle">
|
|
|
|
+ <div class="title_left">
|
|
|
|
+ 选择开始时间
|
|
|
|
+ </div>
|
|
|
|
+ <span class="title_close" @click="pickerClose">
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </van-popup>
|
|
|
|
- <van-popup v-model="datePicker.endshow" :safe-area-inset-bottom="true" get-container="#date-picker-other-box" round position="bottom" :style="{ height: '46%' }">
|
|
|
|
- <div class="j-container">
|
|
|
|
- <div class="j-header">
|
|
|
|
- <div class="headertitle">
|
|
|
|
- <div class="title_left">
|
|
|
|
- 选择结束时间
|
|
|
|
|
|
+ <div class="j-main main-hidden">
|
|
|
|
+ <van-datetime-picker
|
|
|
|
+ class="datepopup"
|
|
|
|
+ :show-toolbar="false"
|
|
|
|
+ swipe-duration="300"
|
|
|
|
+ v-model="datePicker.startcurrentDate"
|
|
|
|
+ type="date"
|
|
|
|
+ title="选择年月日"
|
|
|
|
+ ref="getstartValues"
|
|
|
|
+ :formatter="formatter"
|
|
|
|
+ :min-date="datePicker.minDate"
|
|
|
|
+ :max-date="datePicker.maxDate"
|
|
|
|
+ >
|
|
|
|
+ </van-datetime-picker>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="j-footer">
|
|
|
|
+ <div class="j-button-group">
|
|
|
|
+ <button class="j-button-cancel" @click="resetStart">重置</button>
|
|
|
|
+ <button class="j-button-confirm" @click="onStartConfirm">确认</button>
|
|
</div>
|
|
</div>
|
|
- <span class="title_close" @click="pickerClose">
|
|
|
|
- </span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="j-main main-hidden">
|
|
|
|
- <van-datetime-picker
|
|
|
|
- class="datepopup"
|
|
|
|
- :show-toolbar="false"
|
|
|
|
- swipe-duration="300"
|
|
|
|
- v-model="datePicker.endcurrentDate"
|
|
|
|
- ref="getendValues"
|
|
|
|
- type="date"
|
|
|
|
- title="选择年月日"
|
|
|
|
- :formatter="formatter"
|
|
|
|
- :min-date="datePicker.minDate"
|
|
|
|
- :max-date="datePicker.maxDate"
|
|
|
|
- >
|
|
|
|
- </van-datetime-picker>
|
|
|
|
- </div>
|
|
|
|
- <div class="j-footer">
|
|
|
|
- <div class="j-button-group">
|
|
|
|
- <button class="j-button-cancel" @click="resetEnd">重置</button>
|
|
|
|
- <button class="j-button-confirm" @click="onendConfirm">确认</button>
|
|
|
|
|
|
+ </van-popup>
|
|
|
|
+ <van-popup v-model="datePicker.endshow" :safe-area-inset-bottom="true" get-container="#date-picker-other-box" round position="bottom" :style="{ height: '43%' }">
|
|
|
|
+ <div class="j-container">
|
|
|
|
+ <div class="j-header">
|
|
|
|
+ <div class="headertitle">
|
|
|
|
+ <div class="title_left">
|
|
|
|
+ 选择结束时间
|
|
|
|
+ </div>
|
|
|
|
+ <span class="title_close" @click="pickerClose">
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="j-main main-hidden">
|
|
|
|
+ <van-datetime-picker
|
|
|
|
+ class="datepopup"
|
|
|
|
+ :show-toolbar="false"
|
|
|
|
+ swipe-duration="300"
|
|
|
|
+ v-model="datePicker.endcurrentDate"
|
|
|
|
+ ref="getendValues"
|
|
|
|
+ type="date"
|
|
|
|
+ title="选择年月日"
|
|
|
|
+ :formatter="formatter"
|
|
|
|
+ :min-date="datePicker.minDate"
|
|
|
|
+ :max-date="datePicker.maxDate"
|
|
|
|
+ >
|
|
|
|
+ </van-datetime-picker>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="j-footer">
|
|
|
|
+ <div class="j-button-group">
|
|
|
|
+ <button class="j-button-cancel" @click="resetEnd">重置</button>
|
|
|
|
+ <button class="j-button-confirm" @click="onendConfirm">确认</button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- </van-popup>
|
|
|
|
|
|
+ </van-popup>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="j-main" v-if="type === 'only-picker'">
|
|
|
|
+ <van-datetime-picker
|
|
|
|
+ class="datepopup"
|
|
|
|
+ :show-toolbar="false"
|
|
|
|
+ swipe-duration="300"
|
|
|
|
+ v-model="datePicker.endcurrentDate"
|
|
|
|
+ ref="getendValues"
|
|
|
|
+ type="date"
|
|
|
|
+ title="选择年月日"
|
|
|
|
+ :formatter="formatter"
|
|
|
|
+ :min-date="datePicker.minDate"
|
|
|
|
+ :max-date="datePicker.maxDate"
|
|
|
|
+ >
|
|
|
|
+ </van-datetime-picker>
|
|
|
|
+ </div>
|
|
<div class="j-footer">
|
|
<div class="j-footer">
|
|
<div class="j-button-group">
|
|
<div class="j-button-group">
|
|
<button class="j-button-cancel" @click="resetAll">重置</button>
|
|
<button class="j-button-cancel" @click="resetAll">重置</button>
|
|
@@ -88,7 +106,18 @@ var dateComponentTemplate = `<div class="j-container">
|
|
|
|
|
|
var dateComponent = {
|
|
var dateComponent = {
|
|
name: 'date-mobile',
|
|
name: 'date-mobile',
|
|
- props: ['selectdate'],
|
|
|
|
|
|
+ props: {
|
|
|
|
+ 'selectdate': {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: function () {
|
|
|
|
+ return {}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 'type': {
|
|
|
|
+ type: String,
|
|
|
|
+ default: 'more-picker'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
template: dateComponentTemplate,
|
|
template: dateComponentTemplate,
|
|
data:function () {
|
|
data:function () {
|
|
return {
|
|
return {
|
|
@@ -200,6 +229,11 @@ var dateComponent = {
|
|
this.dateTimePickerState.startPlaceHolder = ''
|
|
this.dateTimePickerState.startPlaceHolder = ''
|
|
this.dateTimePickerState.endPlaceHolder = ''
|
|
this.dateTimePickerState.endPlaceHolder = ''
|
|
},
|
|
},
|
|
|
|
+ getOnlyPickerState () {
|
|
|
|
+ const timeState = this.calcNotExactTime('today', this.datePicker.endcurrentDate.getTime())
|
|
|
|
+ timeState.exact = 'exact'
|
|
|
|
+ return timeState
|
|
|
|
+ },
|
|
getState () {
|
|
getState () {
|
|
// timeState.exact: all/lately7/lately30/lastYear/exact5种状态
|
|
// timeState.exact: all/lately7/lately30/lastYear/exact5种状态
|
|
// 为true时候表示精确筛选,从时间选择器中获取值(其他为根据当前时间计算出的值)
|
|
// 为true时候表示精确筛选,从时间选择器中获取值(其他为根据当前时间计算出的值)
|
|
@@ -243,6 +277,12 @@ var dateComponent = {
|
|
day30: 60 * 60 * 1000 * 24 * 30
|
|
day30: 60 * 60 * 1000 * 24 * 30
|
|
}
|
|
}
|
|
switch (exact) {
|
|
switch (exact) {
|
|
|
|
+ case 'today': {
|
|
|
|
+ const today = +new Date(new Date(endTime).pattern('yyyy/MM/dd'))
|
|
|
|
+ t.start = today
|
|
|
|
+ t.end = today + durations.day1 - 1000
|
|
|
|
+ break
|
|
|
|
+ }
|
|
case 'lately7': {
|
|
case 'lately7': {
|
|
t.start = t.end - durations.day7
|
|
t.start = t.end - durations.day7
|
|
break
|
|
break
|
|
@@ -367,7 +407,7 @@ var dateComponent = {
|
|
onConfirm: function(){
|
|
onConfirm: function(){
|
|
let params = {
|
|
let params = {
|
|
name: 'dateItem',
|
|
name: 'dateItem',
|
|
- data: this.getState()
|
|
|
|
|
|
+ data: this.type === 'more-picker' ? this.getState() : this.getOnlyPickerState()
|
|
}
|
|
}
|
|
this.$emit('confirm', params)
|
|
this.$emit('confirm', params)
|
|
return params
|
|
return params
|