mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-06-12 13:19:31 +08:00
v1.0.0-beta 源码正式开源
This commit is contained in:
小莫唐尼
@@ -0,0 +1,621 @@
|
||||
<!-- 日期组件 -->
|
||||
<template>
|
||||
<view class="tm-pickersDateView flex-start px-24" :class="[black_tmeme ? 'grey-darken-5' : bgColor]">
|
||||
<!-- :value="value_default" @change="change" -->
|
||||
<picker-view
|
||||
@pickstart="$emit('aniStart')"
|
||||
@pickend="$emit('aniEnd')"
|
||||
@change="change"
|
||||
v-if="list_cD != null"
|
||||
:value="value_default"
|
||||
:mask-style="black_tmeme ? 'opacity:0;' : ''"
|
||||
indicator-style="height:50px;"
|
||||
indicator-class="tm-pickersCView-item-h"
|
||||
class="tm-pickersCView-wk"
|
||||
>
|
||||
<picker-view-column v-for="(item, key) in list_cD" :key="key">
|
||||
<view
|
||||
class="tm-pickersCView-item fulled-height flex-center "
|
||||
style="margin: 0 5px;"
|
||||
:class="[value_default[reIndex(key)] == index_pub ? ' text-weight-b active' : '', black_tmeme ? 'bk' : '', 'text-size-n']"
|
||||
v-for="(item_data, index_pub) in item"
|
||||
:key="index_pub"
|
||||
>
|
||||
<text>{{ buqi(item_data) }}</text>
|
||||
<text v-if="mode">{{ modhz[key] }}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 日期下拉选择器(嵌入式)
|
||||
* @description 多级关联，单级关联选择
|
||||
* @property {Array} default-value = [] 默认：当前的时间，初始显示的时间
|
||||
* @property {String|Number} item-height = [34|42|50|58|62] 项目的高度单位px
|
||||
* @property {String|Boolean} black = [true|false] 是否开启暗黑模式。
|
||||
* @property {String|Boolean} disabled = [true|false] 是否禁用
|
||||
* @property {String} bg-color = [white|blue] 默认：white,白色背景；请填写背景的主题色名称。
|
||||
* @property {Object} show-detail = [{year:true,month:true,day:true,hour:false,min:false,sec:false}] 默认：{year:true,month:true,day:true,hour:false,min:false,sec:false}
|
||||
* @property {String} start = [1900-1-1 00:00:00] 默认：1900-1-1 00:00:00，开始的时间
|
||||
* @property {String} end = [] 默认：当前，结束的时间
|
||||
* @property {String|Boolean} mode = [true|false] 默认：true，是否显示中文年，月后缀
|
||||
* @property {String|Boolean} full-number = [true|false] 默认：true，是否把个位数补齐双位数
|
||||
*/
|
||||
export default {
|
||||
name: 'tm-pickersDateView',
|
||||
props: {
|
||||
// 行高。
|
||||
itemHeight: {
|
||||
type: String | Number,
|
||||
default: 40
|
||||
},
|
||||
black: {
|
||||
type: String | Boolean,
|
||||
default: null
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: String | Boolean,
|
||||
default: false
|
||||
},
|
||||
// 背景颜色，主题色名称。
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'white'
|
||||
},
|
||||
//要展示的时间。
|
||||
showDetail: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
year: true, //年
|
||||
month: true, //月
|
||||
day: true, //天
|
||||
hour: false, //小时
|
||||
min: false, //分
|
||||
sec: false //秒
|
||||
};
|
||||
}
|
||||
},
|
||||
start: {
|
||||
type: String,
|
||||
default: '1949-1-1 00:00:00'
|
||||
},
|
||||
end: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
defaultValue: '',
|
||||
// 是否显示中文年，月后缀
|
||||
mode: {
|
||||
type: String | Boolean,
|
||||
default: true
|
||||
},
|
||||
//要展示的时间。
|
||||
modeValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
year: '年', //年
|
||||
month: '月', //月
|
||||
day: '日', //天
|
||||
hour: '时', //小时
|
||||
min: '分', //分
|
||||
sec: '秒' //秒
|
||||
};
|
||||
}
|
||||
},
|
||||
// 是否把个位数补齐双位数
|
||||
fullNumber: {
|
||||
type: String | Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollEvent: 0,
|
||||
childrenIndex: 0,
|
||||
scrollChildrenIndex: 0,
|
||||
listIndex: [],
|
||||
listData: [[], [], [], [], [], []],
|
||||
dataCauser: {
|
||||
year: false, //年
|
||||
month: false, //月
|
||||
day: false, //天
|
||||
hour: false, //小时
|
||||
min: false, //分
|
||||
sec: false //秒
|
||||
},
|
||||
hoz: {
|
||||
year: '年', //年
|
||||
month: '月', //月
|
||||
day: '日', //天
|
||||
hour: '时', //小时
|
||||
min: '分', //分
|
||||
sec: '秒' //秒
|
||||
},
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
value_default: [],
|
||||
pre_value: [],
|
||||
|
||||
syheng_key: [],
|
||||
list_cD: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dataCauser = { ...this.dataCauser, ...this.showDetail };
|
||||
let ls = Object.keys(this.dataCauser);
|
||||
for (let i = 0; i < this.listData.length; i++) {
|
||||
let p = {
|
||||
itemIndex: 0,
|
||||
childrenIndex: 0,
|
||||
wz: 0
|
||||
};
|
||||
p[ls[i]] = this.dataCauser[ls[i]];
|
||||
this.listIndex.push(p);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.chulisdata();
|
||||
await uni.$tm.sleep(60);
|
||||
this.chulishijian();
|
||||
this.setDefaultValue();
|
||||
},
|
||||
|
||||
watch: {
|
||||
defaultValue: async function() {
|
||||
if (this.list_cD == null) return;
|
||||
await this.setDefaultValue();
|
||||
},
|
||||
start: async function() {
|
||||
if (this.list_cD == null) return;
|
||||
this.chulisdata();
|
||||
this.chulishijian();
|
||||
await this.setDefaultValue();
|
||||
},
|
||||
end: async function() {
|
||||
if (this.list_cD == null) return;
|
||||
|
||||
await this.setDefaultValue();
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
black_tmeme: function() {
|
||||
if (this.black !== null) return this.black;
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
},
|
||||
modhz: function() {
|
||||
return { ...this.hoz, ...this.modeValue };
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reIndex(key) {
|
||||
let id = 0;
|
||||
for (let i = 0; i < this.syheng_key.length; i++) {
|
||||
if (this.syheng_key[i] == key) {
|
||||
id = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return id;
|
||||
},
|
||||
chulishijian() {
|
||||
let kl = Object.keys(this.dataCauser);
|
||||
let d = {};
|
||||
let pk = [];
|
||||
for (let i = 0; i < kl.length; i++) {
|
||||
if (this.dataCauser[kl[i]] == true) {
|
||||
let sj = null;
|
||||
let key = '';
|
||||
if (kl[i] == 'year') {
|
||||
sj = this.listData[0];
|
||||
key = 'year';
|
||||
} else if (kl[i] == 'month') {
|
||||
sj = this.listData[1];
|
||||
key = 'month';
|
||||
} else if (kl[i] == 'day') {
|
||||
sj = this.listData[2];
|
||||
key = 'day';
|
||||
} else if (kl[i] == 'hour') {
|
||||
sj = this.listData[3];
|
||||
key = 'hour';
|
||||
} else if (kl[i] == 'min') {
|
||||
sj = this.listData[4];
|
||||
key = 'min';
|
||||
} else if (kl[i] == 'sec') {
|
||||
sj = this.listData[5];
|
||||
key = 'sec';
|
||||
}
|
||||
|
||||
d[kl[i]] = {...sj};
|
||||
pk.push(key);
|
||||
}
|
||||
}
|
||||
this.list_cD = {...d};
|
||||
this.syheng_key = [...pk];
|
||||
},
|
||||
buqi(val) {
|
||||
return val > 9 ? '' + val : '0' + val;
|
||||
},
|
||||
SeletecdeIndexdefault() {
|
||||
let kl = Object.keys(this.dataCauser);
|
||||
let d = [];
|
||||
for (let i = 0; i < this.listIndex.length; i++) {
|
||||
if (this.listIndex[i][kl[i]] == true) {
|
||||
d.push(this.listIndex[i].itemIndex);
|
||||
}
|
||||
}
|
||||
this.value_default = d;
|
||||
},
|
||||
// 获取当前选中的数据。
|
||||
getSelectedValue() {
|
||||
let t = this;
|
||||
let ap = [];
|
||||
this.listIndex.forEach((item, index) => {
|
||||
ap.push(t.listData[index][item.itemIndex]);
|
||||
});
|
||||
let jg = {
|
||||
year: ap[0], //年
|
||||
month: ap[1], //月
|
||||
day: ap[2], //天
|
||||
hour: ap[3], //小时
|
||||
min: ap[4], //分
|
||||
sec: ap[5] //秒
|
||||
};
|
||||
let ar = Object.keys(this.dataCauser);
|
||||
|
||||
ar.forEach(item => {
|
||||
if (t.dataCauser[item] === false) {
|
||||
delete jg[item];
|
||||
}
|
||||
});
|
||||
return jg;
|
||||
},
|
||||
chulisdata() {
|
||||
if (typeof this.showDetail === 'object') {
|
||||
this.dataCauser = { ...this.dataCauser, ...this.showDetail };
|
||||
}
|
||||
this.startTime = new Date(this.start.replace(/-/g, '/'));
|
||||
if (isNaN(this.startTime.getFullYear())) {
|
||||
this.startTime = new Date('1949/1/1 00:00:00');
|
||||
}
|
||||
this.endTime = new Date(this.end.replace(/-/g, '/'));
|
||||
|
||||
if (isNaN(this.endTime.getFullYear())) {
|
||||
this.endTime = new Date();
|
||||
}
|
||||
|
||||
let s_y = this.startTime.getFullYear();
|
||||
let s_m = this.startTime.getMonth() + 1;
|
||||
let s_d = this.startTime.getDate();
|
||||
let s_h = this.startTime.getHours();
|
||||
let s_mm = this.startTime.getMinutes();
|
||||
let s_s = this.startTime.getSeconds();
|
||||
|
||||
let e_y = this.endTime.getFullYear();
|
||||
let e_m = this.endTime.getMonth() + 1;
|
||||
let e_d = this.endTime.getDate();
|
||||
let e_h = this.endTime.getHours();
|
||||
let e_mm = this.endTime.getMinutes();
|
||||
let e_s = this.endTime.getSeconds();
|
||||
|
||||
let n_y = this.listData[0][this.listIndex[0].itemIndex];
|
||||
n_y = n_y == undefined ? 1949 : n_y;
|
||||
let n_m = this.listData[1][this.listIndex[1].itemIndex];
|
||||
n_m = n_m == undefined ? 1 : n_m;
|
||||
let n_d = this.listData[2][this.listIndex[2].itemIndex];
|
||||
n_d = n_d == undefined ? 1 : n_d;
|
||||
let n_h = this.listData[3][this.listIndex[3].itemIndex];
|
||||
n_h = n_h == undefined ? 0 : n_h;
|
||||
let n_mm = this.listData[4][this.listIndex[4].itemIndex];
|
||||
n_mm = n_mm == undefined ? 0 : n_mm;
|
||||
let n_s = this.listData[5][this.listIndex[5].itemIndex];
|
||||
n_s = n_s == undefined ? 0 : n_s;
|
||||
let nowDate = new Date(n_y + '/' + n_m + '/' + n_d + ' ' + n_h + ':' + n_mm + ':' + n_s);
|
||||
|
||||
function monthDay(year, month) {
|
||||
let date = new Date(year, month, 1, 0, 0, 0);
|
||||
let yesterDay = new Date(date - 1000);
|
||||
return yesterDay.getDate();
|
||||
}
|
||||
|
||||
//年，开始，结束。
|
||||
let tsb = [[s_y, e_y]];
|
||||
for (let i = 1; i < 6; i++) {
|
||||
let st = 0;
|
||||
let et = 0;
|
||||
if (i == 1) {
|
||||
st = 1;
|
||||
et = 12;
|
||||
if (n_y === s_y) {
|
||||
st = s_m;
|
||||
et = 12;
|
||||
}
|
||||
if (n_y === e_y) {
|
||||
st = 1;
|
||||
et = e_m;
|
||||
}
|
||||
if(s_y===e_y&&n_y===s_y){
|
||||
st = s_m;
|
||||
et = e_m;
|
||||
}
|
||||
}
|
||||
if (i == 2) {
|
||||
let months = [31, monthDay(n_y, 2), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
||||
st = 1;
|
||||
et = months[n_m - 1];
|
||||
if (n_y === s_y && n_m === s_m) {
|
||||
st = s_d;
|
||||
}
|
||||
if (n_y === e_y && n_m === e_m) {
|
||||
et = e_d;
|
||||
}
|
||||
}
|
||||
if (i == 3) {
|
||||
st = 0;
|
||||
et = 23;
|
||||
if (n_y === s_y && n_m === s_m && n_d === s_d) {
|
||||
st = s_h;
|
||||
}
|
||||
if (n_y === e_y && n_m === e_m && n_d === e_d) {
|
||||
et = e_h;
|
||||
}
|
||||
}
|
||||
if (i == 4) {
|
||||
st = 0;
|
||||
et = 59;
|
||||
if (n_y === s_y && n_m === s_m && n_d === s_d && n_h === s_h) {
|
||||
st = s_mm;
|
||||
}
|
||||
if (n_y === e_y && n_m === e_m && n_d === e_d && n_h === e_h) {
|
||||
et = e_mm;
|
||||
}
|
||||
}
|
||||
if (i == 5) {
|
||||
st = 0;
|
||||
et = 59;
|
||||
if (n_y === s_y && n_m === s_m && n_d === s_d && n_h === s_h && n_mm === s_mm) {
|
||||
st = s_s;
|
||||
}
|
||||
if (n_y === e_y && n_m === e_m && n_d === e_d && n_h === e_h && n_mm === e_mm) {
|
||||
et = e_s;
|
||||
}
|
||||
}
|
||||
tsb.push([st, et]);
|
||||
}
|
||||
|
||||
for (let ik = 0; ik < tsb.length; ik++) {
|
||||
let idate = tsb[ik];
|
||||
let py_data = [];
|
||||
|
||||
for (let i = idate[0]; i <= idate[1]; i++) {
|
||||
py_data.push(i);
|
||||
}
|
||||
this.listData.splice(ik, 1, py_data);
|
||||
}
|
||||
|
||||
|
||||
return this.listData;
|
||||
},
|
||||
setDefaultValue(date) {
|
||||
this.chulisdata();
|
||||
this.chulishijian();
|
||||
uni.$tm.sleep(50)
|
||||
.then(()=>this.inits(date))
|
||||
.then(()=>{
|
||||
this.chulisdata();
|
||||
this.chulishijian();
|
||||
return uni.$tm.sleep(50);
|
||||
}).then(()=>{
|
||||
this.SeletecdeIndexdefault();
|
||||
this.chulisdata();
|
||||
})
|
||||
|
||||
},
|
||||
async inits(date) {
|
||||
let t = this;
|
||||
let mobj;
|
||||
if (date) {
|
||||
mobj = new Date(date.replace(/-/g, '/'));
|
||||
} else {
|
||||
try {
|
||||
mobj = new Date(this.defaultValue.replace(/-/g, '/'));
|
||||
} catch (e) {
|
||||
mobj = new Date();
|
||||
}
|
||||
if (!this.defaultValue || isNaN(mobj.getFullYear())) {
|
||||
mobj = new Date();
|
||||
}
|
||||
}
|
||||
|
||||
let s_y = this.startTime.getFullYear();
|
||||
let s_m = this.startTime.getMonth() + 1;
|
||||
let s_d = this.startTime.getDate();
|
||||
let s_h = this.startTime.getHours();
|
||||
let s_mm = this.startTime.getMinutes();
|
||||
let s_s = this.startTime.getSeconds();
|
||||
|
||||
let e_y = this.endTime.getFullYear();
|
||||
let e_m = this.endTime.getMonth() + 1;
|
||||
let e_d = this.endTime.getDate();
|
||||
let e_h = this.endTime.getHours();
|
||||
let e_mm = this.endTime.getMinutes();
|
||||
let e_s = this.endTime.getSeconds();
|
||||
|
||||
let n_y = mobj.getFullYear();
|
||||
let n_m = mobj.getMonth() + 1;
|
||||
let n_d = mobj.getDate();
|
||||
let n_h = mobj.getHours();
|
||||
let n_mm = mobj.getMinutes();
|
||||
let n_s = mobj.getSeconds();
|
||||
|
||||
if (mobj.getTime() >= this.endTime.getTime()) {
|
||||
n_y = e_y;
|
||||
n_m = e_m;
|
||||
n_d = e_d;
|
||||
n_h = e_h;
|
||||
n_mm = e_mm;
|
||||
n_s = e_s;
|
||||
}
|
||||
if (mobj.getTime() <= this.startTime.getTime()) {
|
||||
n_y = s_y;
|
||||
n_m = s_m;
|
||||
n_d = s_d;
|
||||
n_h = s_h;
|
||||
n_mm = s_mm;
|
||||
n_s = s_s;
|
||||
}
|
||||
|
||||
let tsb = [n_y, n_m, n_d, n_h, n_mm, n_s];
|
||||
for (let ik = 0; ik < tsb.length; ik++) {
|
||||
|
||||
let itemIndex_y = this.listData[ik].findIndex(item => item == tsb[ik]);
|
||||
|
||||
if (itemIndex_y > -1) {
|
||||
this.$set(this.listIndex[ik], 'itemIndex', itemIndex_y);
|
||||
} else {
|
||||
this.$set(this.listIndex[ik], 'itemIndex', 0);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
change(e, index) {
|
||||
console.log(this.list_cD);
|
||||
let pl = e.detail.value;
|
||||
this.pre_value = [...this.value_default];
|
||||
if (this.disabled) {
|
||||
this.value_default = this.pre_value;
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.syheng_key.length; i++) {
|
||||
for (let j = 0; j < this.listIndex.length; j++) {
|
||||
if (this.listIndex[j][this.syheng_key[i]] == true) {
|
||||
this.$set(this.listIndex[j], 'itemIndex', pl[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.chulisdata();
|
||||
this.chulishijian();
|
||||
|
||||
this.value_default = pl;
|
||||
|
||||
},
|
||||
jswid() {
|
||||
let wd = this.gridNum - 1 - 2;
|
||||
if (wd <= 0) wd = 1;
|
||||
return 100 / wd;
|
||||
},
|
||||
scrllEnd(e) {
|
||||
function monthDay(year, month) {
|
||||
var date = new Date(year, month, 1, 0, 0, 0);
|
||||
var yesterDay = new Date(date - 1000);
|
||||
return yesterDay.getDate();
|
||||
}
|
||||
if (!this.scrollEvent) return;
|
||||
let dNum = this.gridNum;
|
||||
let d;
|
||||
let t = this;
|
||||
let idb = 88;
|
||||
let idc = 884;
|
||||
let srcllTop = this.scrollEvent.detail.scrollTop;
|
||||
|
||||
if (srcllTop <= 0) {
|
||||
srcllTop = 0;
|
||||
} else if (srcllTop >= this.scrollEvent.detail.srcollHeigh) {
|
||||
srcllTop = this.scrollEvent.detail.srcollHeigh;
|
||||
}
|
||||
|
||||
d = Math.ceil((srcllTop - this.itemHeight / 2) / this.itemHeight);
|
||||
|
||||
if (d >= t.listData[t.childrenIndex].length - 1) {
|
||||
d = t.listData[t.childrenIndex].length - 1;
|
||||
}
|
||||
|
||||
t.$set(t.listIndex[t.childrenIndex], 'wz', srcllTop);
|
||||
let old_index = this.listIndex[this.childrenIndex].itemIndex || 0;
|
||||
if (t.disabled) {
|
||||
clearTimeout(idb);
|
||||
idb = setTimeout(function() {
|
||||
t.$nextTick(function() {
|
||||
t.$set(t.listIndex[t.childrenIndex], 'wz', old_index * t.itemHeight);
|
||||
});
|
||||
}, 5);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$set(this.listIndex[t.childrenIndex], 'itemIndex', d);
|
||||
t.chulisdata();
|
||||
|
||||
clearTimeout(idb);
|
||||
idb = setTimeout(function() {
|
||||
t.$nextTick(function() {
|
||||
t.$set(t.listIndex[t.childrenIndex], 'wz', d * t.itemHeight);
|
||||
|
||||
for (let lsindex = t.childrenIndex + 1; lsindex < 6; lsindex++) {
|
||||
if (t.listData[lsindex][t.listIndex[lsindex].itemIndex] == undefined) {
|
||||
let pda = t.listData[lsindex].length - 1;
|
||||
|
||||
if (d >= pda) {
|
||||
this.$set(this.listIndex[lsindex], 'itemIndex', pda);
|
||||
t.$set(t.listIndex[lsindex], 'wz', pda * t.itemHeight);
|
||||
} else {
|
||||
this.$set(this.listIndex[lsindex], 'itemIndex', 0);
|
||||
t.$set(t.listIndex[lsindex], 'wz', 0);
|
||||
}
|
||||
} else {
|
||||
let srcllTop_s = t.listIndex[lsindex].wz;
|
||||
const tsdd = t.listIndex[lsindex].itemIndex;
|
||||
|
||||
t.$set(t.listIndex[lsindex], 'wz', tsdd * t.itemHeight - 1);
|
||||
this.$nextTick(function() {
|
||||
t.$set(t.listIndex[lsindex], 'wz', tsdd * t.itemHeight);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tm-pickersDateView .tm-pickersCView-item-h {
|
||||
height: 50px;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
width: calc(100% - 10px);
|
||||
margin-left: 5px;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-item-h::after,
|
||||
.tm-pickersDateView .tm-pickersCView-item-h::before {
|
||||
border: none;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk {
|
||||
position: relative;
|
||||
width: 750rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk .tm-pickersCView-item.bk {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk .tm-pickersCView-item.active {
|
||||
opacity: 1;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk .tm-pickersCView-item.active.bk {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,836 @@
|
||||
<!-- 日期组件 -->
|
||||
<template>
|
||||
<view class="tm-pickersDateView flex-start px-24" :class="[black_tmeme?'grey-darken-5':bgColor]">
|
||||
|
||||
<block v-for="(item_data,index_pub) in listData" :key="index_pub">
|
||||
<view v-if="(index_pub==0&&dataCauser.year)
|
||||
||(index_pub==1&&dataCauser.month)
|
||||
||(index_pub==2&&dataCauser.day)
|
||||
||(index_pub==3&&dataCauser.hour)
|
||||
||(index_pub==4&&dataCauser.min)
|
||||
||(index_pub==5&&dataCauser.sec)
|
||||
" class="tm-pickersDateView-wk " :style="{
|
||||
height:itemHeight*5+'px',
|
||||
width:jswid() + '%',
|
||||
marginLeft:index_pub==0?0:1 + '%',
|
||||
}">
|
||||
<scroll-view
|
||||
@touchstart="setChildreIndex(index_pub)"
|
||||
:show-scrollbar='false'
|
||||
v-if="dataType!==null&&item_data"
|
||||
:scroll-top="listIndex[index_pub]?listIndex[index_pub]['wz']:''"
|
||||
scroll-y
|
||||
@touchend="scrllEnd"
|
||||
@scroll="scroll($event,index_pub)"
|
||||
scroll-with-animation class="tm-pickersDateView-showbg"
|
||||
:style="{
|
||||
height:itemHeight*5+'px'
|
||||
}">
|
||||
<!-- #ifdef H5 -->
|
||||
<view :id='"_bar_"+(index4)+"_bar_"' v-for="(item4,index4) in 2" :key="index4+'_a'" class="tm-pickersDateView-item "
|
||||
:style="{height:itemHeight+'px'}">
|
||||
<text class="opacity-1"></text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view :id='"_bar_"+(index4)+"_bar_"' v-for="(item4,index4) in 2" :key="index4" class="tm-pickersDateView-item "
|
||||
:style="{height:itemHeight+'px'}">
|
||||
<text class="opacity-1"></text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view :id='"_bar_"+(index+2)+"_bar_"' v-for="(item,index) in item_data" :key="index"
|
||||
class="tm-pickersDateView-item flex-center" :style="{
|
||||
height:itemHeight+'px'
|
||||
}">
|
||||
<view class="text-size-g tm-pickersDateView-item-text" :class="[
|
||||
listIndex[index_pub].itemIndex==index? (black_tmeme?'text-white':'text-black'):(black_tmeme?'':'opacity-4'),
|
||||
listIndex[index_pub].itemIndex+1==index||listIndex[index_pub].itemIndex-1==index?'textLevel_1':'',
|
||||
listIndex[index_pub].itemIndex+2==index||listIndex[index_pub].itemIndex-2==index?'textLevel_2':'',
|
||||
|
||||
]">
|
||||
<text >{{fullNumber?buqi(item):item}}{{index_pub==0&&mode?'年':''}}{{index_pub==1&&mode?'月':''}}{{index_pub==2&&mode?'日':''}}{{index_pub==3&&mode?'时':''}}{{index_pub==4&&mode?'分':''}}{{index_pub==5&&mode?'秒':''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<view v-for="(item4,index4) in 2" :key="index4+'_bb'" class="tm-pickersDateView-item"
|
||||
:style="{height:itemHeight+'px'}">
|
||||
<text></text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<view v-for="(item4,index4) in 2" :key="index4" class="tm-pickersDateView-item"
|
||||
:style="{height:itemHeight+'px'}">
|
||||
<text></text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</scroll-view>
|
||||
<view class="tm-pickersDateView-fg overflow round-5 shadow-5 flex-center"
|
||||
:class="[
|
||||
black_tmeme?'white opacity-1':'grey-darken-1 opacity-1'
|
||||
]" :style="{
|
||||
height:itemHeight+'px',
|
||||
top:itemHeight*2+'px'
|
||||
}">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 日期下拉选择器(嵌入式)
|
||||
* @description 多级关联，单级关联选择
|
||||
* @property {Array} default-value = [] 默认：当前的时间，初始显示的时间
|
||||
* @property {String|Number} item-height = [34|42|50|58|62] 项目的高度单位px
|
||||
* @property {String|Boolean} black = [true|false] 是否开启暗黑模式。
|
||||
* @property {String|Boolean} disabled = [true|false] 是否禁用
|
||||
* @property {String} bg-color = [white|blue] 默认：white,白色背景；请填写背景的主题色名称。
|
||||
* @property {Object} show-detail = [{year:true,month:true,day:true,hour:false,min:false,sec:false}] 默认：{year:true,month:true,day:true,hour:false,min:false,sec:false}
|
||||
* @property {String} start = [1900-1-1 00:00:00] 默认：1900-1-1 00:00:00，开始的时间
|
||||
* @property {String} end = [] 默认：当前，结束的时间
|
||||
* @property {String|Boolean} mode = [true|false] 默认：true，是否显示中文年，月后缀
|
||||
* @property {String|Boolean} full-number = [true|false] 默认：true，是否把个位数补齐双位数
|
||||
*/
|
||||
export default {
|
||||
name: "tm-pickersDateView",
|
||||
props: {
|
||||
// 行高。
|
||||
itemHeight: {
|
||||
type: String | Number,
|
||||
default: 40
|
||||
},
|
||||
black:{
|
||||
type:String|Boolean,
|
||||
default:null
|
||||
},
|
||||
// 是否禁用
|
||||
disabled:{
|
||||
type:String|Boolean,
|
||||
default:false
|
||||
},
|
||||
// 背景颜色，主题色名称。
|
||||
bgColor:{
|
||||
type:String,
|
||||
default:'white'
|
||||
},
|
||||
//要展示的时间。
|
||||
showDetail:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {
|
||||
year:true,//年
|
||||
month:true,//月
|
||||
day:true,//天
|
||||
hour:false,//小时
|
||||
min:false,//分
|
||||
sec:false//秒
|
||||
}
|
||||
}
|
||||
},
|
||||
start:{
|
||||
type:String,
|
||||
default:'1900-1-1 00:00:00'
|
||||
},
|
||||
end:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
defaultValue:'',
|
||||
// 是否显示中文年，月后缀
|
||||
mode:{
|
||||
type:String|Boolean,
|
||||
default:true
|
||||
},
|
||||
// 是否把个位数补齐双位数
|
||||
fullNumber:{
|
||||
type:String|Boolean,
|
||||
default:true
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollEvent: 0,
|
||||
childrenIndex: 0,
|
||||
scrollChildrenIndex:0,
|
||||
listIndex: [],
|
||||
listData: [[],[],[],[],[],[]],
|
||||
dataCauser:{
|
||||
year:true,//年
|
||||
month:true,//月
|
||||
day:true,//天
|
||||
hour:true,//小时
|
||||
min:true,//分
|
||||
sec:true//秒
|
||||
},
|
||||
|
||||
startTime:null,
|
||||
endTime:null,
|
||||
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
for(let i =0 ; i <this.listData.length;i++){
|
||||
this.listIndex.push({
|
||||
itemIndex: 0,
|
||||
childrenIndex: 0,
|
||||
wz: 0
|
||||
})
|
||||
}
|
||||
this.chulisdata()
|
||||
|
||||
this.$nextTick(function(){
|
||||
|
||||
this.setDefaultValue();
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
watch:{
|
||||
defaultValue:async function(){
|
||||
await this.setDefaultValue();
|
||||
|
||||
},
|
||||
start:async function(){
|
||||
await this.setDefaultValue();
|
||||
|
||||
},
|
||||
end:async function(){
|
||||
await this.setDefaultValue();
|
||||
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
dataType: function() {
|
||||
return 'string';
|
||||
},
|
||||
gridNum: function() {
|
||||
let t = this;
|
||||
let d = 0;
|
||||
for(let key in this.showDetail){
|
||||
if(this.showDetail[key]==true){
|
||||
d++
|
||||
}
|
||||
}
|
||||
|
||||
return d;
|
||||
},
|
||||
black_tmeme: function() {
|
||||
if (this.black !== null) return this.black;
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
buqi(val){
|
||||
return (val > 9) ? ("" + val) : ("0" + val);
|
||||
},
|
||||
// 获取当前选中的数据。
|
||||
getSelectedValue(){
|
||||
let t = this;
|
||||
let ap = [];
|
||||
this.listIndex.forEach((item,index)=>{
|
||||
ap.push(t.listData[index][item.itemIndex])
|
||||
})
|
||||
let jg = {
|
||||
year:ap[0],//年
|
||||
month:ap[1],//月
|
||||
day:ap[2],//天
|
||||
hour:ap[3],//小时
|
||||
min:ap[4],//分
|
||||
sec:ap[5]//秒
|
||||
}
|
||||
let ar = Object.keys(this.dataCauser);
|
||||
|
||||
ar.forEach(item=>{
|
||||
if(t.dataCauser[item]===false){
|
||||
delete jg[item]
|
||||
}
|
||||
})
|
||||
return jg;
|
||||
},
|
||||
chulisdata() {
|
||||
if(typeof this.showDetail === 'object'){
|
||||
this.dataCauser = {...this.dataCauser,...this.showDetail};
|
||||
}
|
||||
this.startTime = new Date(this.start.replace(/-/g,'/'))
|
||||
if(isNaN(this.startTime.getFullYear())){
|
||||
this.startTime = new Date('1900/1/1 00:00:00')
|
||||
}
|
||||
this.endTime = new Date(this.end.replace(/-/g,'/'))
|
||||
|
||||
if(isNaN(this.endTime.getFullYear()) ){
|
||||
this.endTime = new Date()
|
||||
}
|
||||
// this.dataCauser.year===
|
||||
if(true){
|
||||
let pyear = [];
|
||||
for(let i=this.startTime.getFullYear();i<=this.endTime.getFullYear(); i++){
|
||||
pyear.push(i)
|
||||
}
|
||||
this.listData.splice(0,1,pyear)
|
||||
}
|
||||
// this.dataCauser.month===
|
||||
if(true){
|
||||
let pmonth = [];
|
||||
let x_year = this.startTime.getFullYear();
|
||||
let xz_year= this.listData[0][this.listIndex[0].itemIndex];
|
||||
if(xz_year === x_year){
|
||||
for(let i=this.startTime.getMonth()+1;i<=12; i++){
|
||||
pmonth.push(i)
|
||||
}
|
||||
}else{
|
||||
|
||||
// 不能大于endtime.
|
||||
if(xz_year >= this.endTime.getFullYear()){
|
||||
for(let i=1;i<=this.endTime.getMonth()+1; i++){
|
||||
pmonth.push(i)
|
||||
}
|
||||
|
||||
}else{
|
||||
for(let i=1;i<=12; i++){
|
||||
pmonth.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.listData.splice(1,1,pmonth)
|
||||
}
|
||||
// this.dataCauser.day===
|
||||
if(true){
|
||||
function monthDay(year, month) {
|
||||
var date = new Date(year, month, 1, 0, 0, 0)
|
||||
var yesterDay = new Date(date - 1000)
|
||||
return yesterDay.getDate()
|
||||
}
|
||||
let pday = [];
|
||||
let year = this.startTime.getFullYear();
|
||||
let xzyear = this.listData[0][this.listIndex[0].itemIndex];
|
||||
if(xzyear){
|
||||
year = xzyear;
|
||||
}
|
||||
let month = this.startTime.getMonth();
|
||||
let xzmonth = this.listData[1][this.listIndex[1].itemIndex]-1;
|
||||
if(xzmonth){
|
||||
month = xzmonth;
|
||||
}
|
||||
let months = [31,monthDay(year,month+1),31,30,31,30,31,31,30,31,30,31];
|
||||
|
||||
|
||||
|
||||
if(year === this.startTime.getFullYear() && month === this.startTime.getMonth()){
|
||||
|
||||
if(year == this.endTime.getFullYear()&&
|
||||
month == this.endTime.getMonth()+1
|
||||
|
||||
){
|
||||
for(let i=this.startTime.getDate();i<=this.endTime.getDate(); i++){
|
||||
pday.push(i)
|
||||
}
|
||||
}else{
|
||||
for(let i=this.startTime.getDate();i<=months[month]; i++){
|
||||
pday.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
|
||||
if(year >= this.endTime.getFullYear()&& month >= this.endTime.getMonth()){
|
||||
for(let i=1;i<=this.endTime.getDate(); i++){
|
||||
pday.push(i)
|
||||
}
|
||||
|
||||
}else{
|
||||
for(let i=1;i<=months[month]; i++){
|
||||
pday.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.listData.splice(2,1,pday)
|
||||
}
|
||||
// this.dataCauser.hour===
|
||||
if(true){
|
||||
let phour = [];
|
||||
let s_year = this.startTime.getFullYear();
|
||||
let o_year = this.listData[0][this.listIndex[0].itemIndex];
|
||||
let s_month = this.startTime.getMonth()+1;
|
||||
let o_month = this.listData[1][this.listIndex[1].itemIndex];
|
||||
let s_day = this.startTime.getDate();
|
||||
let o_day = this.listData[2][this.listIndex[2].itemIndex];
|
||||
// let s_hour = this.startTime.getMinutes();
|
||||
// let o_hour = this.listData[3][this.listIndex[3].itemIndex];
|
||||
|
||||
|
||||
if(s_year===o_year&&s_month===o_month&&s_day===o_day){
|
||||
|
||||
if(s_year == this.endTime.getFullYear()&&
|
||||
s_month == this.endTime.getMonth()+1 &&
|
||||
s_day == this.endTime.getDate()
|
||||
){
|
||||
for(let i=this.startTime.getHours();i<=this.endTime.getHours(); i++){
|
||||
phour.push(i)
|
||||
}
|
||||
}else{
|
||||
for(let i=this.startTime.getHours();i<24; i++){
|
||||
phour.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
}else{
|
||||
|
||||
if(o_year >= this.endTime.getFullYear() && o_month >= this.endTime.getMonth()&& o_day >= this.endTime.getDate()){
|
||||
for(let i=0;i<=this.endTime.getHours(); i++){
|
||||
phour.push(i)
|
||||
}
|
||||
|
||||
}else{
|
||||
for(let i=0;i<24; i++){
|
||||
phour.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
this.listData.splice(3,1,phour)
|
||||
}
|
||||
// this.dataCauser.min===true
|
||||
if(true){
|
||||
let pmin = [];
|
||||
let s_year = this.startTime.getFullYear();
|
||||
let o_year = this.listData[0][this.listIndex[0].itemIndex];
|
||||
let s_month = this.startTime.getMonth()+1;
|
||||
let o_month = this.listData[1][this.listIndex[1].itemIndex];
|
||||
let s_day = this.startTime.getDate();
|
||||
let o_day = this.listData[2][this.listIndex[2].itemIndex];
|
||||
let s_hour = this.startTime.getHours();
|
||||
let o_hour = this.listData[3][this.listIndex[3].itemIndex];
|
||||
if(s_year===o_year&&s_month===o_month&&s_day===o_day&&s_hour===o_hour){
|
||||
|
||||
|
||||
if(s_year == this.endTime.getFullYear()&&
|
||||
s_month == this.endTime.getMonth()+1 &&
|
||||
s_day == this.endTime.getDate()&&
|
||||
s_hour == this.endTime.getHours()
|
||||
){
|
||||
for(let i=this.startTime.getMinutes();i<=this.endTime.getMinutes(); i++){
|
||||
pmin.push(i)
|
||||
}
|
||||
}else{
|
||||
for(let i=this.startTime.getMinutes();i<60; i++){
|
||||
pmin.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
|
||||
if(o_year >= this.endTime.getFullYear() && o_month >= this.endTime.getMonth()&& o_day >= this.endTime.getDate() && o_hour >= this.endTime.getHours()){
|
||||
for(let i=1;i<=this.endTime.getMinutes(); i++){
|
||||
pmin.push(i)
|
||||
}
|
||||
|
||||
}else{
|
||||
for(let i=0;i<60; i++){
|
||||
pmin.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
this.listData.splice(4,1,pmin)
|
||||
}
|
||||
// this.dataCauser.sec===
|
||||
if(true){
|
||||
let psec = [];
|
||||
let s_year = this.startTime.getFullYear();
|
||||
let o_year = this.listData[0][this.listIndex[0].itemIndex];
|
||||
let s_month = this.startTime.getMonth()+1;
|
||||
let o_month = this.listData[1][this.listIndex[1].itemIndex];
|
||||
let s_day = this.startTime.getDate();
|
||||
let o_day = this.listData[2][this.listIndex[2].itemIndex];
|
||||
let s_hour = this.startTime.getHours();
|
||||
let o_hour = this.listData[3][this.listIndex[3].itemIndex];
|
||||
let s_min = this.startTime.getMinutes();
|
||||
let o_min = this.listData[4][this.listIndex[4].itemIndex];
|
||||
if(s_year===o_year&&s_month===o_month&&s_day===o_day&&s_hour===o_hour&&s_min===o_min){
|
||||
|
||||
if(s_year == this.endTime.getFullYear()&&
|
||||
s_month == this.endTime.getMonth()+1 &&
|
||||
s_day == this.endTime.getDate()&&
|
||||
s_hour == this.endTime.getHours()&&
|
||||
s_min == this.endTime.getMinutes()
|
||||
){
|
||||
for(let i=this.startTime.getSeconds();i<=this.endTime.getSeconds(); i++){
|
||||
psec.push(i)
|
||||
}
|
||||
}else{
|
||||
for(let i=this.startTime.getSeconds();i<60; i++){
|
||||
psec.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
|
||||
if(o_year >= this.endTime.getFullYear() && o_month >= this.endTime.getMonth()&& o_day >= this.endTime.getDate() && o_hour >= this.endTime.getHours()&& o_min >= this.endTime.getMinutes()){
|
||||
for(let i=1;i<=this.endTime.getSeconds(); i++){
|
||||
psec.push(i)
|
||||
}
|
||||
|
||||
}else{
|
||||
for(let i=0;i<60; i++){
|
||||
psec.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
this.listData.splice(5,1,psec)
|
||||
}
|
||||
|
||||
return this.listData;
|
||||
},
|
||||
async setDefaultValue(date){
|
||||
let t = this;
|
||||
let mobj;
|
||||
if(date){
|
||||
mobj = new Date(date.replace(/-/g,'/'));
|
||||
}else{
|
||||
try{
|
||||
mobj = new Date(this.defaultValue.replace(/-/g,'/'));
|
||||
}catch(e){
|
||||
mobj = new Date();
|
||||
}
|
||||
if(!this.defaultValue || isNaN(mobj.getFullYear())){
|
||||
mobj = new Date();
|
||||
}
|
||||
}
|
||||
|
||||
await uni.$tm.sleep(20)
|
||||
// this.dataCauser.year===
|
||||
if(true){
|
||||
let pyear = mobj.getFullYear();
|
||||
|
||||
if(pyear <= this.startTime.getFullYear()){
|
||||
|
||||
pyear = this.startTime.getFullYear()
|
||||
|
||||
}else if(pyear >= this.endTime.getFullYear()){
|
||||
pyear = this.endTime.getFullYear()
|
||||
}
|
||||
|
||||
let itemIndex = this.listData[0].indexOf(pyear)
|
||||
if(itemIndex>-1){
|
||||
this.$set(this.listIndex[0], 'itemIndex', itemIndex);
|
||||
this.$set(t.listIndex[0], 'wz', itemIndex * t.itemHeight);
|
||||
this.chulisdata();
|
||||
}
|
||||
}
|
||||
await uni.$tm.sleep(20)
|
||||
// this.dataCauser.month===
|
||||
if(true){
|
||||
let pmonth = mobj.getMonth()+1;
|
||||
if(mobj.getFullYear() <= this.startTime.getFullYear()&&pmonth <= this.startTime.getMonth()+1){
|
||||
pmonth = this.startTime.getMonth()+1
|
||||
}else if(mobj.getFullYear() >= this.endTime.getFullYear()&&pmonth >= this.endTime.getMonth()+1){
|
||||
pmonth = this.endTime.getMonth()+1
|
||||
}
|
||||
|
||||
|
||||
let itemIndex = this.listData[1].indexOf(pmonth)
|
||||
|
||||
if(itemIndex>-1){
|
||||
this.chulisdata();
|
||||
this.$set(this.listIndex[1], 'itemIndex', itemIndex);
|
||||
this.$set(t.listIndex[1], 'wz', itemIndex * t.itemHeight-0.1);
|
||||
setTimeout(function() {
|
||||
t.$set(t.listIndex[1], 'wz', itemIndex * t.itemHeight);
|
||||
}, 10);
|
||||
|
||||
}
|
||||
}
|
||||
await uni.$tm.sleep(20)
|
||||
// this.dataCauser.day===
|
||||
if(true){
|
||||
let pday = mobj.getDate();
|
||||
let pmonth = mobj.getMonth()+1;
|
||||
if(mobj.getFullYear() <= this.startTime.getFullYear()&&
|
||||
pmonth <= this.startTime.getMonth()+1&&
|
||||
pday <= this.startTime.getDate()
|
||||
){
|
||||
pday = this.startTime.getDate()
|
||||
}else if(mobj.getFullYear() >= this.endTime.getFullYear()&&
|
||||
pmonth >= this.endTime.getMonth()+1&&
|
||||
pday >= this.endTime.getDate()
|
||||
){
|
||||
pday = this.endTime.getDate()
|
||||
}
|
||||
|
||||
|
||||
|
||||
let itemIndex = this.listData[2].indexOf(pday)
|
||||
|
||||
if(itemIndex>-1){
|
||||
this.chulisdata();
|
||||
this.$set(this.listIndex[2], 'itemIndex', itemIndex);
|
||||
this.$set(t.listIndex[2], 'wz', itemIndex * t.itemHeight);
|
||||
}
|
||||
}
|
||||
await uni.$tm.sleep(20)
|
||||
// this.dataCauser.hour===
|
||||
if(true){
|
||||
let phour = mobj.getHours();
|
||||
let pday = mobj.getDate();
|
||||
let pmonth = mobj.getMonth()+1;
|
||||
|
||||
if(mobj.getFullYear() <= this.startTime.getFullYear()&&
|
||||
pmonth <= this.startTime.getMonth()+1&&
|
||||
pday <= this.startTime.getDate()&&
|
||||
phour <= this.startTime.getHours()
|
||||
){
|
||||
phour = this.startTime.getHours()
|
||||
}else if(mobj.getFullYear() >= this.endTime.getFullYear()&&
|
||||
pmonth >= this.endTime.getMonth()+1&&
|
||||
pday >= this.endTime.getDate()&&
|
||||
phour >= this.endTime.getHours()
|
||||
){
|
||||
phour = this.endTime.getHours()
|
||||
}
|
||||
|
||||
|
||||
|
||||
let itemIndex = this.listData[3].indexOf(phour)
|
||||
if(itemIndex>-1){
|
||||
this.chulisdata();
|
||||
|
||||
this.$set(this.listIndex[3], 'itemIndex', itemIndex);
|
||||
this.$set(t.listIndex[3], 'wz', itemIndex * t.itemHeight);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
await uni.$tm.sleep(20)
|
||||
// this.dataCauser.min===
|
||||
if(true){
|
||||
let pmin = mobj.getMinutes();
|
||||
let phour = mobj.getHours();
|
||||
let pday = mobj.getDate();
|
||||
let pmonth = mobj.getMonth()+1;
|
||||
|
||||
if(mobj.getFullYear() <= this.startTime.getFullYear()&&
|
||||
pmonth <= this.startTime.getMonth()+1&&
|
||||
pday <= this.startTime.getDate()&&
|
||||
phour <= this.startTime.getHours()&&
|
||||
pmin <= this.startTime.getMinutes()
|
||||
){
|
||||
phour = this.startTime.getMinutes()
|
||||
}else if(mobj.getFullYear() >= this.endTime.getFullYear()&&
|
||||
pmonth >= this.endTime.getMonth()+1&&
|
||||
pday >= this.endTime.getDate()&&
|
||||
phour >= this.endTime.getHours()&&
|
||||
pmin >= this.endTime.getMinutes()
|
||||
){
|
||||
phour = this.endTime.getMinutes()
|
||||
}
|
||||
|
||||
|
||||
let itemIndex = this.listData[4].indexOf(pmin)
|
||||
if(itemIndex>-1){
|
||||
|
||||
this.$set(this.listIndex[4], 'itemIndex', itemIndex);
|
||||
this.$set(t.listIndex[4], 'wz', itemIndex * t.itemHeight);
|
||||
}
|
||||
}
|
||||
await uni.$tm.sleep(20)
|
||||
// this.dataCauser.sec===
|
||||
if(true){
|
||||
let psec = mobj.getSeconds();
|
||||
let pmin = mobj.getMinutes();
|
||||
let phour = mobj.getHours();
|
||||
let pday = mobj.getDate();
|
||||
let pmonth = mobj.getMonth()+1;
|
||||
|
||||
if(mobj.getFullYear() <= this.startTime.getFullYear()&&
|
||||
pmonth <= this.startTime.getMonth()+1&&
|
||||
pday <= this.startTime.getDate()&&
|
||||
phour <= this.startTime.getHours()&&
|
||||
pmin <= this.startTime.getMinutes()&&
|
||||
psec <= this.startTime.getSeconds()
|
||||
){
|
||||
psec = this.startTime.getMinutes()
|
||||
}else if(mobj.getFullYear() >= this.endTime.getFullYear()&&
|
||||
pmonth >= this.endTime.getMonth()+1&&
|
||||
pday >= this.endTime.getDate()&&
|
||||
phour >= this.endTime.getHours()&&
|
||||
pmin >= this.endTime.getMinutes()&&
|
||||
psec >= this.endTime.getSeconds()
|
||||
){
|
||||
psec = this.endTime.getSeconds()
|
||||
}
|
||||
|
||||
|
||||
let itemIndex = this.listData[5].indexOf(psec)
|
||||
if(itemIndex>-1){
|
||||
|
||||
this.$set(this.listIndex[5], 'itemIndex', itemIndex);
|
||||
this.$set(t.listIndex[5], 'wz', itemIndex * t.itemHeight);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
setChildreIndex(index){
|
||||
this.childrenIndex = index;
|
||||
},
|
||||
scroll(e, index) {
|
||||
console.log(e);
|
||||
this.scrollEvent = e;
|
||||
this.scrollChildrenIndex = index;
|
||||
|
||||
},
|
||||
jswid(){
|
||||
let wd =(this.gridNum-1)-2
|
||||
if(wd<=0) wd = 1;
|
||||
return 100/wd;
|
||||
},
|
||||
scrllEnd(e) {
|
||||
|
||||
|
||||
function monthDay(year, month) {
|
||||
var date = new Date(year, month, 1, 0, 0, 0)
|
||||
var yesterDay = new Date(date - 1000)
|
||||
return yesterDay.getDate()
|
||||
}
|
||||
if (!this.scrollEvent) return;
|
||||
let dNum = this.gridNum;
|
||||
let d;
|
||||
let t = this;
|
||||
let idb = 88;
|
||||
let idc = 884;
|
||||
let srcllTop = this.scrollEvent.detail.scrollTop ;
|
||||
|
||||
if(srcllTop<=0){
|
||||
srcllTop = 0;
|
||||
}else if(srcllTop >= this.scrollEvent.detail.srcollHeigh){
|
||||
srcllTop = this.scrollEvent.detail.srcollHeigh;
|
||||
}
|
||||
|
||||
d = Math.ceil((srcllTop - (this.itemHeight / 2)) / this.itemHeight);
|
||||
|
||||
if(d>= t.listData[t.childrenIndex].length-1){
|
||||
d = t.listData[t.childrenIndex].length-1
|
||||
}
|
||||
|
||||
t.$set(t.listIndex[t.childrenIndex], 'wz', srcllTop)
|
||||
let old_index = this.listIndex[this.childrenIndex].itemIndex || 0;
|
||||
if(t.disabled){
|
||||
clearTimeout(idb)
|
||||
idb = setTimeout(function() {
|
||||
t.$nextTick(function(){
|
||||
t.$set(t.listIndex[t.childrenIndex], 'wz', old_index * t.itemHeight)
|
||||
})
|
||||
}, 5);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$set(this.listIndex[t.childrenIndex], 'itemIndex', d)
|
||||
t.chulisdata();
|
||||
|
||||
clearTimeout(idb);
|
||||
idb = setTimeout(function() {
|
||||
t.$nextTick(function(){
|
||||
t.$set(t.listIndex[t.childrenIndex], 'wz', d * t.itemHeight)
|
||||
|
||||
for(let lsindex = t.childrenIndex+1;lsindex<6;lsindex++){
|
||||
|
||||
if( t.listData[lsindex][t.listIndex[lsindex].itemIndex] == undefined){
|
||||
let pda = t.listData[lsindex].length-1;
|
||||
|
||||
if(d>=pda){
|
||||
this.$set(this.listIndex[lsindex], 'itemIndex',pda)
|
||||
t.$set(t.listIndex[lsindex], 'wz', pda * t.itemHeight)
|
||||
|
||||
}else{
|
||||
this.$set(this.listIndex[lsindex], 'itemIndex',0)
|
||||
t.$set(t.listIndex[lsindex], 'wz', 0)
|
||||
}
|
||||
|
||||
}else{
|
||||
let srcllTop_s = t.listIndex[lsindex].wz;
|
||||
const tsdd = t.listIndex[lsindex].itemIndex;
|
||||
|
||||
t.$set(t.listIndex[lsindex], 'wz', (tsdd) * t.itemHeight-1)
|
||||
this.$nextTick(function(){
|
||||
t.$set(t.listIndex[lsindex], 'wz', (tsdd) * t.itemHeight)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 10);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tm-pickersDateView {
|
||||
.tm-pickersDateView-wk {
|
||||
position: relative;
|
||||
|
||||
.tm-pickersDateView-showbg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 0;
|
||||
z-index: 5;
|
||||
|
||||
.tm-pickersDateView-item {
|
||||
.tm-pickersDateView-item-text {
|
||||
text {
|
||||
transition: all 0.5s;
|
||||
|
||||
}
|
||||
|
||||
&.textLevel_1 {
|
||||
text {
|
||||
font-size: 28upx !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.textLevel_2 {
|
||||
text {
|
||||
font-size: 26upx !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tm-pickersDateView-fg {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,650 @@
|
||||
<!-- 日期组件 -->
|
||||
<template>
|
||||
<view class="tm-pickersDateView flex-start px-24" :class="[black_tmeme ? 'grey-darken-5' : bgColor]">
|
||||
<!-- :value="value_default" @change="change" -->
|
||||
<picker-view
|
||||
@pickstart="$emit('aniStart')"
|
||||
@pickend="$emit('aniEnd')"
|
||||
@change="change"
|
||||
v-if="list_cD != null"
|
||||
:value="value_default"
|
||||
:mask-style="black_tmeme ? 'opacity:0;' : ''"
|
||||
indicator-style="height:50px;"
|
||||
indicator-class="tm-pickersCView-item-h"
|
||||
class="tm-pickersCView-wk"
|
||||
>
|
||||
<picker-view-column v-show="syheng_key[key]" v-for="(item, key) in list_cD" :key="key">
|
||||
<view
|
||||
class="tm-pickersCView-item fulled-height flex-center "
|
||||
style="margin: 0 5px;"
|
||||
:class="[value_default[key] == index_pub ? ' text-weight-b active' : '', black_tmeme ? 'bk' : '', 'text-size-n']"
|
||||
v-for="(item_data, index_pub) in item"
|
||||
:key="index_pub"
|
||||
>
|
||||
<text>{{ buqi(item_data) }}</text>
|
||||
<text v-if="mode">{{ modhz[key] }}</text>
|
||||
</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 日期下拉选择器(嵌入式)
|
||||
* @description 多级关联，单级关联选择
|
||||
* @property {Array} default-value = [] 默认：当前的时间，初始显示的时间
|
||||
* @property {String|Number} item-height = [34|42|50|58|62] 项目的高度单位px
|
||||
* @property {String|Boolean} black = [true|false] 是否开启暗黑模式。
|
||||
* @property {String|Boolean} disabled = [true|false] 是否禁用
|
||||
* @property {String} bg-color = [white|blue] 默认：white,白色背景；请填写背景的主题色名称。
|
||||
* @property {Object} show-detail = [{year:true,month:true,day:true,hour:false,min:false,sec:false}] 默认：{year:true,month:true,day:true,hour:false,min:false,sec:false}
|
||||
* @property {String} start = [1900-1-1 00:00:00] 默认：1900-1-1 00:00:00，开始的时间
|
||||
* @property {String} end = [] 默认：当前，结束的时间
|
||||
* @property {String|Boolean} mode = [true|false] 默认：true，是否显示中文年，月后缀
|
||||
* @property {String|Boolean} full-number = [true|false] 默认：true，是否把个位数补齐双位数
|
||||
*/
|
||||
export default {
|
||||
name: 'tm-pickersDateView',
|
||||
props: {
|
||||
// 行高。
|
||||
itemHeight: {
|
||||
type: String | Number,
|
||||
default: 40
|
||||
},
|
||||
black: {
|
||||
type: String | Boolean,
|
||||
default: null
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: String | Boolean,
|
||||
default: false
|
||||
},
|
||||
// 背景颜色，主题色名称。
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'white'
|
||||
},
|
||||
//要展示的时间。
|
||||
showDetail: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
year: true, //年
|
||||
month: true, //月
|
||||
day: true, //天
|
||||
hour: false, //小时
|
||||
min: false, //分
|
||||
sec: false //秒
|
||||
};
|
||||
}
|
||||
},
|
||||
start: {
|
||||
type: String,
|
||||
default: '1949-1-1 00:00:00'
|
||||
},
|
||||
end: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
defaultValue: '',
|
||||
// 是否显示中文年，月后缀
|
||||
mode: {
|
||||
type: String | Boolean,
|
||||
default: true
|
||||
},
|
||||
//要展示的时间。
|
||||
modeValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
year: '年', //年
|
||||
month: '月', //月
|
||||
day: '日', //天
|
||||
hour: '时', //小时
|
||||
min: '分', //分
|
||||
sec: '秒' //秒
|
||||
};
|
||||
}
|
||||
},
|
||||
// 是否把个位数补齐双位数
|
||||
fullNumber: {
|
||||
type: String | Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
dataCauser: {
|
||||
year: false, //年
|
||||
month: false, //月
|
||||
day: false, //天
|
||||
hour: false, //小时
|
||||
min: false, //分
|
||||
sec: false //秒
|
||||
},
|
||||
hoz: {
|
||||
year: '年', //年
|
||||
month: '月', //月
|
||||
day: '日', //天
|
||||
hour: '时', //小时
|
||||
min: '分', //分
|
||||
sec: '秒' //秒
|
||||
},
|
||||
totalRow:0,
|
||||
syheng_key: {},
|
||||
//当前生成的所有数据年~秒
|
||||
r_list:[],
|
||||
list_cD: null,
|
||||
value_default: [],
|
||||
nowObj:null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.dataCauser = {...this.dataCauser,...(this.showDetail||{})}
|
||||
this.setdataCauserArray();
|
||||
this._reInits();
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
showDetail:{
|
||||
deep:true,
|
||||
handler(){
|
||||
this.dataCauser = {...this.dataCauser,...this.showDetail};
|
||||
this.setdataCauserArray();
|
||||
}
|
||||
},
|
||||
defaultValue: function(val) {
|
||||
let nowdateVal;
|
||||
if (val) {
|
||||
nowdateVal = new Date(val.replace(/-/g, '/'));
|
||||
} else {
|
||||
nowdateVal = new Date();
|
||||
}
|
||||
this.nowObj = nowdateVal;
|
||||
if(this.list_cD==null) return;
|
||||
this._reInits();
|
||||
|
||||
},
|
||||
start: async function() {
|
||||
if(this.list_cD==null) return;
|
||||
this._reInits();
|
||||
},
|
||||
end: async function() {
|
||||
if(this.list_cD==null) return;
|
||||
this._reInits();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
black_tmeme: function() {
|
||||
if (this.black !== null) return this.black;
|
||||
return this.$tm.vx.state().tmVuetify.black;
|
||||
},
|
||||
modhz: function() {
|
||||
let hz = [];
|
||||
let moz = { ...this.hoz, ...this.modeValue };
|
||||
hz.push(moz.year)
|
||||
hz.push(moz.month)
|
||||
hz.push(moz.day)
|
||||
hz.push(moz.hour)
|
||||
hz.push(moz.min)
|
||||
hz.push(moz.sec)
|
||||
return hz;
|
||||
},
|
||||
detavlue:function () {
|
||||
let d = this.defaultValue;
|
||||
if(!d){
|
||||
let ys = new Date();
|
||||
d = ys.getFullYear()+'-'+(ys.getMonth()+1)+'-'+ys.getDate()+' '+ys.getHours()+':'+ys.getMinutes()+':'+ys.getSeconds()
|
||||
}
|
||||
|
||||
return d.replace(/-/g, '/');
|
||||
},
|
||||
//结束的日期，默认为当前
|
||||
end_str:function () {
|
||||
let d = this.end;
|
||||
if(!d){
|
||||
let ys = new Date();
|
||||
d = ys.getFullYear()+'-'+(ys.getMonth()+1)+'-'+ys.getDate()+' '+ys.getHours()+':'+ys.getMinutes()+':'+ys.getSeconds()
|
||||
}
|
||||
return d.replace(/-/g, '/');
|
||||
},
|
||||
//开始默认为1960年
|
||||
start_str:function () {
|
||||
let d = this.start;
|
||||
if(!d){
|
||||
d='1960-1-1 00:00:00'
|
||||
}
|
||||
return d.replace(/-/g, '/');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//设置显示的行当。
|
||||
setdataCauserArray(){
|
||||
let t = this;
|
||||
let f = {
|
||||
'0':this.dataCauser['year'],
|
||||
'1':this.dataCauser['month'],
|
||||
'2':this.dataCauser['day'],
|
||||
'3':this.dataCauser['hour'],
|
||||
'4':this.dataCauser['min'],
|
||||
'5':this.dataCauser['sec'],
|
||||
}
|
||||
//显示的列表数。
|
||||
let totalHoz = 0;
|
||||
let p = Object.keys(this.dataCauser);
|
||||
p = p.filter(el=>t.dataCauser[el]==true)
|
||||
this.totalRow = p.length;
|
||||
this.syheng_key = f;
|
||||
},
|
||||
//初始生成对应的开始和结束日期数据。
|
||||
_reInits(date){
|
||||
let t = this;
|
||||
let nowdateVal;
|
||||
if (date) {
|
||||
nowdateVal = new Date(date.replace(/-/g, '/'));
|
||||
} else {
|
||||
nowdateVal = new Date(this.detavlue);
|
||||
}
|
||||
this.nowObj = nowdateVal;
|
||||
/**
|
||||
* 接下来，需要比对，年月，日。
|
||||
* 分开比较的原因是：如果年不变的话，只是改变月，那么只需重新
|
||||
* 更改日的数据（如果每月的日期一样，也不需要改变。）
|
||||
*/
|
||||
//根据提供的值nodwdateVal来划定开始和结束的日期数据。为了保证流畅，采用一次性生成的方法。
|
||||
//先生成开始的数据。
|
||||
//开始
|
||||
const start = new Date(this.start_str);
|
||||
|
||||
//结束
|
||||
const end = new Date(this.end_str);
|
||||
//当前
|
||||
const now = nowdateVal;
|
||||
let list = [];
|
||||
let year = this.range(start.getFullYear(),end.getFullYear())
|
||||
list.push(year)
|
||||
// 月。是需要根据nowdateVal提供的值来生成。因为月是不固定的。
|
||||
//默认先生成start到12的
|
||||
let month_s = this.range(start.getMonth()+1,12)
|
||||
let month_e = this.range(1,end.getMonth()+1)
|
||||
//同年同月
|
||||
if(start.getFullYear()==end.getFullYear()&&start.getMonth()==end.getMonth()){
|
||||
let tn = this.range(start.getMonth()+1,end.getMonth()+1);
|
||||
list.push([tn,tn])
|
||||
}else{
|
||||
list.push([month_s,month_e])
|
||||
}
|
||||
|
||||
|
||||
let day_s = this.range(start.getDate(),this.monthDay(start.getFullYear(),start.getMonth()))
|
||||
let day_e = this.range(1,end.getDate())
|
||||
//同年同月同日
|
||||
if(start.getFullYear()==end.getFullYear()
|
||||
&&start.getMonth()==end.getMonth()
|
||||
&&start.getDate()==end.getDate()
|
||||
){
|
||||
let tn = this.range(start.getDate(),end.getDate());
|
||||
list.push([tn,tn])
|
||||
}else{
|
||||
list.push([day_s,day_e])
|
||||
}
|
||||
|
||||
let hours_s = this.range(start.getHours(),23)
|
||||
let hours_e = this.range(0,end.getHours())
|
||||
//同年同月同日同时
|
||||
if(start.getFullYear()==end.getFullYear()
|
||||
&&start.getMonth()==end.getMonth()
|
||||
&&start.getDate()==end.getDate()
|
||||
&&start.getHours()==end.getHours()
|
||||
){
|
||||
let tn = this.range(start.getHours(),end.getHours());
|
||||
list.push([tn,tn])
|
||||
}else{
|
||||
list.push([hours_s,hours_e])
|
||||
}
|
||||
let minutes_s = this.range(start.getMinutes(),59)
|
||||
let minutes_e = this.range(0,end.getMinutes())
|
||||
//同年同月同日同时同分
|
||||
if(start.getFullYear()==end.getFullYear()
|
||||
&&start.getMonth()==end.getMonth()
|
||||
&&start.getDate()==end.getDate()
|
||||
&&start.getHours()==end.getHours()
|
||||
){
|
||||
let tn = this.range(start.getMinutes(),end.getMinutes());
|
||||
list.push([tn,tn])
|
||||
}else{
|
||||
list.push([minutes_s,minutes_e])
|
||||
}
|
||||
let seconds_s = this.range(start.getSeconds(),59)
|
||||
let seconds_e = this.range(0,end.getSeconds())
|
||||
//同年同月同日同时同分同秒
|
||||
if(start.getFullYear()==end.getFullYear()
|
||||
&&start.getMonth()==end.getMonth()
|
||||
&&start.getDate()==end.getDate()
|
||||
&&start.getHours()==end.getHours()
|
||||
&&start.getSeconds()==end.getSeconds()
|
||||
){
|
||||
let tn = this.range(start.getSeconds(),end.getSeconds());
|
||||
list.push([tn,tn])
|
||||
}else{
|
||||
list.push([seconds_s,seconds_e])
|
||||
}
|
||||
|
||||
this.r_list = list;
|
||||
|
||||
this.$nextTick(function () {
|
||||
this._getListCd(start,end,now)
|
||||
})
|
||||
|
||||
},
|
||||
//生成对应的列表数据，以供选择。不需要生成所有，只要生成默认当前时间的。
|
||||
_getListCd(start,end,now,issetd){
|
||||
|
||||
let list_cD = [];
|
||||
//年
|
||||
list_cD.push(this.r_list[0])
|
||||
//月。
|
||||
let year_s = new Date(String(start.getFullYear())+'/1/1').getTime()
|
||||
let year_e = new Date(String(end.getFullYear())+'/1/1').getTime()
|
||||
let year_n = new Date(String(now.getFullYear())+'/1/1').getTime()
|
||||
if(
|
||||
year_s===year_e //开始和结束相同
|
||||
||(year_s!=year_e&&year_n==year_s) //现在=开始。
|
||||
||(year_s!=year_e&&year_n<year_s) //现在小于开始
|
||||
){
|
||||
list_cD.push(this.r_list[1][0])
|
||||
}else if(
|
||||
(year_s!=year_e&&year_n==year_e) //现在=结束。
|
||||
||(year_s!=year_e&&year_n>year_e) //现在大于结束
|
||||
){
|
||||
list_cD.push(this.r_list[1][1])
|
||||
}else{ //在开始和结束之间。
|
||||
list_cD.push(this.range(1,12))
|
||||
}
|
||||
//日。
|
||||
let day_s = new Date(start.getFullYear()+'/'+(start.getMonth()+1)+'/1').getTime()
|
||||
let day_e = new Date(end.getFullYear()+'/'+(end.getMonth()+1)+'/1').getTime()
|
||||
let day_n = new Date(now.getFullYear()+'/'+(now.getMonth()+1)+'/1').getTime()
|
||||
|
||||
if(
|
||||
day_s===day_e //开始和结束相同
|
||||
||(day_s!=day_e&&day_n==day_s) //现在=开始。
|
||||
||(day_s!=day_e&&day_n<day_s) //现在小于开始
|
||||
){
|
||||
list_cD.push(this.r_list[2][0])
|
||||
}else if(
|
||||
(day_s!=day_e&&day_n==day_e) //现在=结束。
|
||||
||(day_s!=day_e&&day_n>day_e) //现在大于结束
|
||||
){
|
||||
list_cD.push(this.r_list[2][1])
|
||||
}else{ //在开始和结束之间。
|
||||
list_cD.push(this.range(1,this.monthDay(now.getFullYear(),now.getMonth())))
|
||||
}
|
||||
//时。
|
||||
let hours_s = new Date(String(start.getFullYear())+'/'+(start.getMonth()+1)+'/'+start.getDate()).getTime()
|
||||
let hours_e = new Date(String(end.getFullYear())+'/'+(end.getMonth()+1)+'/'+end.getDate()).getTime()
|
||||
let hours_n = new Date(String(now.getFullYear())+'/'+(now.getMonth()+1)+'/'+now.getDate()).getTime()
|
||||
|
||||
if(
|
||||
hours_s===hours_e //开始和结束相同
|
||||
||(hours_s!=hours_e&&hours_n==hours_s) //现在=开始。
|
||||
||(hours_s!=hours_e&&hours_n<hours_s) //现在小于开始
|
||||
){
|
||||
list_cD.push(this.r_list[3][0])
|
||||
}else if(
|
||||
(hours_s!=hours_e&&hours_n==hours_e) //现在=结束。
|
||||
||(hours_s!=hours_e&&hours_n>hours_e) //现在大于结束
|
||||
){
|
||||
list_cD.push(this.r_list[3][1])
|
||||
}else{ //在开始和结束之间。
|
||||
list_cD.push(this.range(0,23))
|
||||
}
|
||||
//分。
|
||||
let min_s = new Date(String(start.getFullYear())+'/'+(start.getMonth()+1)+'/'+start.getDate()+' '+start.getHours()+':00:00').getTime()
|
||||
let min_e = new Date(String(end.getFullYear())+'/'+(end.getMonth()+1)+'/'+end.getDate()+' '+end.getHours()+':00:00').getTime()
|
||||
let min_n = new Date(String(now.getFullYear())+'/'+(now.getMonth()+1)+'/'+now.getDate()+' '+now.getHours()+':00:00').getTime()
|
||||
if(
|
||||
min_s===min_e //开始和结束相同
|
||||
||(min_s!=min_e&&min_n==min_s) //现在=开始。
|
||||
||(min_s!=min_e&&min_n<min_s) //现在小于开始
|
||||
){
|
||||
list_cD.push(this.r_list[4][0])
|
||||
}else if(
|
||||
(min_s!=min_e&&min_n==min_e) //现在=结束。
|
||||
||(min_s!=min_e&&min_n>min_e) //现在大于结束
|
||||
){
|
||||
list_cD.push(this.r_list[4][1])
|
||||
}else{ //在开始和结束之间。
|
||||
list_cD.push(this.range(0,59))
|
||||
}
|
||||
//秒。
|
||||
let seccode_s = new Date(String(start.getFullYear())+'/'+(start.getMonth()+1)+'/'+start.getDate()+' '+start.getHours()+':'+start.getMinutes()+':00').getTime()
|
||||
let seccode_e = new Date(String(end.getFullYear())+'/'+(end.getMonth()+1)+'/'+end.getDate()+' '+end.getHours()+':'+start.getMinutes()+':00').getTime()
|
||||
let seccode_n = new Date(String(now.getFullYear())+'/'+(now.getMonth()+1)+'/'+now.getDate()+' '+now.getHours()+':'+start.getMinutes()+':00').getTime()
|
||||
if(
|
||||
seccode_s===seccode_e //开始和结束相同
|
||||
||(seccode_s!=seccode_e&&seccode_n==seccode_s) //现在=开始。
|
||||
||(seccode_s!=seccode_e&&seccode_n<seccode_s) //现在小于开始
|
||||
){
|
||||
list_cD.push(this.r_list[4][0])
|
||||
}else if(
|
||||
(seccode_s!=seccode_e&&seccode_n==seccode_e) //现在=结束。
|
||||
||(seccode_s!=seccode_e&&seccode_n>seccode_e) //现在大于结束
|
||||
){
|
||||
list_cD.push(this.r_list[4][1])
|
||||
}else{ //在开始和结束之间。
|
||||
list_cD.push(this.range(0,59))
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
this.list_cD = list_cD;
|
||||
if(!issetd){
|
||||
this.$nextTick(function () {
|
||||
this.setDefaultIndex();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
monthDay(year, month) {
|
||||
|
||||
let date = new Date(year, month, 1, 0, 0, 0);
|
||||
date.setMonth(date.getMonth()+1)
|
||||
|
||||
let yesterDay = new Date(date - 1000);
|
||||
return yesterDay.getDate();
|
||||
},
|
||||
//生成一个数据数组。
|
||||
range(from=0,to){
|
||||
const range = [];
|
||||
if(from===to) return [from];
|
||||
for (let i = from; i <= to; i++) {
|
||||
range.push(i)
|
||||
}
|
||||
return range
|
||||
},
|
||||
//设置当前选中的索引。
|
||||
setDefaultIndex(){
|
||||
if(!this.list_cD) return;
|
||||
let value_default = [];
|
||||
let t = this;
|
||||
// 年。
|
||||
let year = this.list_cD[0].findIndex(el=>el==t.nowObj.getFullYear());
|
||||
year=year<=0?0:year;
|
||||
let month = this.list_cD[1].findIndex(el=>el==t.nowObj.getMonth()+1);
|
||||
month=month<=0?0:month;
|
||||
let day = this.list_cD[2].findIndex(el=>el==t.nowObj.getDate());
|
||||
day=day<=0?0:day;
|
||||
let hours = this.list_cD[3].findIndex(el=>el==t.nowObj.getHours());
|
||||
hours=hours<=0?0:hours;
|
||||
let minutes = this.list_cD[4].findIndex(el=>el==t.nowObj.getMinutes());
|
||||
minutes=minutes<=0?0:minutes;
|
||||
let seconds = this.list_cD[5].findIndex(el=>el==t.nowObj.getSeconds());
|
||||
seconds=seconds<=0?0:seconds;
|
||||
// 开始设置，如果当前默认的日期不在范围内。默认选中的索引日期。
|
||||
value_default = [year,month,day,hours,minutes,seconds]
|
||||
|
||||
this.$nextTick(function () {
|
||||
this.value_default = value_default;
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
//回显到初始化值。
|
||||
resetVal(setd){
|
||||
let val = this.defaultValue;
|
||||
if(setd) val = setd;
|
||||
let nowdateVal;
|
||||
if (val) {
|
||||
nowdateVal = new Date(val.replace(/-/g, '/'));
|
||||
} else {
|
||||
nowdateVal = new Date();
|
||||
}
|
||||
this.nowObj = nowdateVal;
|
||||
if(this.list_cD==null) return;
|
||||
this._reInits();
|
||||
this.$nextTick(function () {
|
||||
this.setDefaultIndex();
|
||||
})
|
||||
},
|
||||
buqi(val) {
|
||||
return val > 9 ? '' + val : '0' + val;
|
||||
},
|
||||
//通过索引获取当前数据
|
||||
SeletecdeIndexdefault(value_default) {
|
||||
if(!value_default) value_default = this.value_default;
|
||||
let t = this;
|
||||
let ap = [];
|
||||
this.value_default.forEach((item,index) => {
|
||||
let f = t.list_cD[index][parseInt(item)];
|
||||
f = typeof(f)=="undefined"? t.list_cD[index][ t.list_cD[index].length-1]:f;
|
||||
ap.push(f);
|
||||
});
|
||||
return ap;
|
||||
},
|
||||
// 获取当前选中的数据。
|
||||
getSelectedValue() {
|
||||
let t = this;
|
||||
let ap = this.SeletecdeIndexdefault();
|
||||
|
||||
let jg = {
|
||||
year: ap[0], //年
|
||||
month: ap[1], //月
|
||||
day: ap[2], //天
|
||||
hour: ap[3], //小时
|
||||
min: ap[4], //分
|
||||
sec: ap[5] //秒
|
||||
};
|
||||
let ar = Object.keys(this.dataCauser);
|
||||
|
||||
ar.forEach(item => {
|
||||
if (t.dataCauser[item] === false) {
|
||||
delete jg[item];
|
||||
}
|
||||
});
|
||||
|
||||
return jg;
|
||||
},
|
||||
getSelsectDate() {
|
||||
let t = this;
|
||||
let ap = this.SeletecdeIndexdefault();
|
||||
let jg = {
|
||||
year: ap[0], //年
|
||||
month: ap[1], //月
|
||||
day: ap[2], //天
|
||||
hour: ap[3], //小时
|
||||
min: ap[4], //分
|
||||
sec: ap[5] //秒
|
||||
};
|
||||
return new Date(ap[0]+'/'+ap[1]+'/'+ap[2]+' '+ap[3]+':'+ap[4]+':'+ap[5]);
|
||||
},
|
||||
change(e) {
|
||||
//滑动后，要动态修改数据。
|
||||
let val = e.detail.value;
|
||||
let index =0;
|
||||
// 找出修改的index项。
|
||||
|
||||
let nowD = [this.nowObj.getFullYear(),1,1,0,0,0];
|
||||
let nowObj = [this.nowObj.getFullYear(),this.nowObj.getMonth()+1,this.nowObj.getDate(),this.nowObj.getHours(),this.nowObj.getMinutes(),this.nowObj.getSeconds()];
|
||||
|
||||
for (var i = 0; i < 6; i++) {
|
||||
|
||||
if(this.value_default[i]!==val[i]){
|
||||
nowD[i] = this.list_cD[i][val[i]]
|
||||
}else{
|
||||
|
||||
let idx = this.list_cD[i].findIndex(el=>el==nowObj[i])
|
||||
|
||||
if(idx==-1){
|
||||
nowD[i] = this.list_cD[i][0]
|
||||
}else{
|
||||
nowD[i] = nowObj[i]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const now = nowD[0]+'/'+(nowD[1])+'/'+nowD[2]+' '+nowD[3]+':'+nowD[4]+':'+nowD[5];
|
||||
|
||||
this._reInits(now)
|
||||
|
||||
let nowVal = val.map(el=>{
|
||||
let dsdd = el<=0?0:el;
|
||||
return dsdd
|
||||
})
|
||||
|
||||
this.$nextTick(function () {
|
||||
this.value_default = nowVal;
|
||||
|
||||
// 发送滚动选中的时间数据。
|
||||
this.$emit('change',this.getSelectedValue());
|
||||
})
|
||||
},
|
||||
jswid() {
|
||||
let wd = this.gridNum - 1 - 2;
|
||||
if (wd <= 0) wd = 1;
|
||||
return 100 / wd;
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tm-pickersDateView .tm-pickersCView-item-h {
|
||||
height: 50px;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
width: calc(100% - 10px);
|
||||
margin-left: 5px;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-item-h::after,
|
||||
.tm-pickersDateView .tm-pickersCView-item-h::before {
|
||||
border: none;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk {
|
||||
position: relative;
|
||||
width: 750rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk .tm-pickersCView-item.bk {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk .tm-pickersCView-item.active {
|
||||
opacity: 1;
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.tm-pickersDateView .tm-pickersCView-wk .tm-pickersCView-item.active.bk {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user