diff --git a/common/main.css b/common/main.css index 0e53fce..955bdb1 100644 --- a/common/main.css +++ b/common/main.css @@ -367,6 +367,10 @@ body { display: block; } +.over-hidden { + overflow: hidden; +} + /* 文本截断 */ .text-ellipsis { overflow: hidden; diff --git a/common/specify-style.less b/common/specify-style.less new file mode 100644 index 0000000..2dcb29f --- /dev/null +++ b/common/specify-style.less @@ -0,0 +1,82 @@ +.timeBox { + background-color: #fff; + padding: 10px; + + .titleBox { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + } +} + +.bill-classify-box { + background-color: #fff; + border-radius: 24rpx 24rpx 0 0; + padding: 32rpx 24rpx; + + .title-box { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 50rpx; + + .title { + font-size: 32rpx; + font-weight: 500; + color: var(--font-color); + } + + .close-image { + width: 28rpx; + height: 28rpx; + } + } + + .bill-classify-content { + display: flex; + flex-wrap: wrap; + max-height: 50vh; + overflow: hidden; + overflow-y: scroll; + + .bill-classify-item { + width: 25%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 20rpx; + margin-bottom: 36rpx; + + .bill-classify-item-text { + font-size: 28rpx; + color: #3D3D3D; + width: 150rpx; + height: 64rpx; + line-height: 64rpx; + text-align: center; + border-radius: 12rpx; + border: 2rpx solid #EDEDED; + } + + .active-item { + background-color: #1676FE; + color: #fff; + border: none; + } + } + } + + .confirm-btn { + width: 100%; + height: 80rpx; + line-height: 80rpx; + text-align: center; + font-size: 36rpx; + color: #fff; + background-color: #1777FF; + color: #FFFFFF; + border-radius: 570rpx 570rpx 570rpx 570rpx; + margin-top: 40rpx; + } +} \ No newline at end of file diff --git a/components/dengrq-datetime-picker/customPickerView/index.css b/components/dengrq-datetime-picker/customPickerView/index.css new file mode 100644 index 0000000..c347f8e --- /dev/null +++ b/components/dengrq-datetime-picker/customPickerView/index.css @@ -0,0 +1,19 @@ +.picker-view { + height: 356rpx; +} + +.picker-view-column { + font-size: 14px; + line-height: 34px; + text-align: center; + color: #333; +} + +/* 覆盖默认样式，样式可以按需自己改 */ +.uni-picker-view-indicator { + background-color: rgba(106, 123, 255, 0.1); +} +.uni-picker-view-indicator::before, +.uni-picker-view-indicator::after { + content: none; +} diff --git a/components/dengrq-datetime-picker/customPickerView/index.js b/components/dengrq-datetime-picker/customPickerView/index.js new file mode 100644 index 0000000..7849bc7 --- /dev/null +++ b/components/dengrq-datetime-picker/customPickerView/index.js @@ -0,0 +1,53 @@ +export default { + data() { + return {}; + }, + props: { + // 所有列选项数据 + columns: { + type: Array, + default: () => [] + }, + // 每一列默认选中值数组，不传默认选中第一项 + selectVals: { + type: Array, + default: () => [] + } + }, + computed: { + // 每一列选中项的索引，当默认选中值变化的时候这个值也要变化 + indexArr: { + // 多维数组，深度监听 + cache: false, + get() { + if (this.selectVals.length > 0) { + return this.columns.map((col, cIdx) => { + return col.findIndex((i) => i == this.selectVals[cIdx]); + }); + } else { + return [].fill(0, 0, this.columns.length); + } + } + } + }, + methods: { + onChange(e) { + const { value } = e.detail; + + let ret = this.columns.map((item, index) => { + let idx = value[index]; + if (idx < 0) { + idx = 0; + } + if (idx > item.length - 1) { + idx = item.length - 1; + } + return item[idx]; + }); + + this.$emit('onChange', { + value: ret + }); + } + } +}; diff --git a/components/dengrq-datetime-picker/customPickerView/index.vue b/components/dengrq-datetime-picker/customPickerView/index.vue new file mode 100644 index 0000000..741969e --- /dev/null +++ b/components/dengrq-datetime-picker/customPickerView/index.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/components/dengrq-datetime-picker/dateSelector/index.css b/components/dengrq-datetime-picker/dateSelector/index.css new file mode 100644 index 0000000..ca8ef1a --- /dev/null +++ b/components/dengrq-datetime-picker/dateSelector/index.css @@ -0,0 +1,57 @@ +.date-selector { + width: 100%; + font-size: 12px; + color: #333; +} + +.select-date-wrapper { + margin-bottom: 8px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.select-date { + padding: 10px; + flex: 1; + border-radius: 2px; + border: 1px solid rgba(6, 7, 46, 0.05); + font-size: 12px; +} + +.select-date.active { + border-color: #6a7bff; +} + +.select-date-placeholder { + color: rgba(6, 7, 46, 0.3); +} + +.btn-group { + display: flex; + margin: 48rpx 0; + justify-content: space-between; +} + +.btn-confirm { + width: 180px; + height: 40px; + line-height: 40px; + background: rgba(33, 58, 255, 0.85); + border-radius: 4px; + font-size: 14px; + color: #fff; + text-align: center; +} + +.btn-cancel { + width: 144px; + height: 40px; + line-height: 38px; + text-align: center; + background: #fff; + border-radius: 4px; + border: 1px solid #979797; + font-size: 14px; + color: #06072e; +} diff --git a/components/dengrq-datetime-picker/dateSelector/index.js b/components/dengrq-datetime-picker/dateSelector/index.js new file mode 100644 index 0000000..39b6cd8 --- /dev/null +++ b/components/dengrq-datetime-picker/dateSelector/index.js @@ -0,0 +1,209 @@ +import DateTimePicker from '../dateTimePicker/index.vue'; +import DateUtil from '../dateTimePicker/dateUtil'; +import { DATE_TYPES } from '../dateTimePicker/constant'; + +export default { + components: { + DateTimePicker + }, + data() { + return { + showStartDatePicker: false, + showEndDatePicker: false, + startDate: '', + endDate: '', + activeDate: 'startDate' // 正在处理哪一个日期值，startDate/endDate + }; + }, + props: { + // 日期筛选模式，1：年月日（默认），2：年月，3：年，4：年月日时分秒，5：时分秒，6：时分 + mode: { + type: Number, + default: DATE_TYPES.YMD + }, + // 默认开始日期 + defaultStartDate: { + type: String, + default: '' + }, + // 默认结束日期 + defaultEndDate: { + type: String, + default: '' + }, + // 可选的最小日期 + minDate: { + type: String, + default: '' + }, + // 可选的最大日期 + maxDate: { + type: String, + default: '' + } + }, + watch: { + mode() { + // 筛选模式更换时清空一下数据 + this.resetData(); + }, + startDate() { + this.$emit('onChange', { + startDate: this.startDate, + endDate: this.endDate + }); + }, + endDate() { + this.$emit('onChange', { + startDate: this.startDate, + endDate: this.endDate + }); + }, + defaultStartDate: { + handler(defaultStartDate) { + if (!defaultStartDate) { + return; + } + + if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) { + console.error('时分秒/时分模式不支持设置默认开始时间'); + return; + } + + if (DateUtil.isBefore(defaultStartDate, this.minDate)) { + console.warn( + `默认开始日期不可小于最小可选日期，已把默认开始日期设为最小可选日期。默认开始日期：${defaultStartDate}，最小可选日期：${this.minDate}` + ); + this.startDate = this.getModeFormatDateString(this.minDate); + } else { + this.startDate = this.getModeFormatDateString(defaultStartDate); + } + }, + immediate: true + }, + defaultEndDate: { + handler(defaultEndDate) { + if (!defaultEndDate) { + return; + } + + if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) { + console.error('时分秒/时分模式不支持设置默认结束时间'); + return; + } + + if (DateUtil.isAfter(defaultEndDate, this.maxDate)) { + console.warn( + `默认结束日期不可大于最大可选日期，已把默认结束日期设为最大可选日期。默认结束日期：${defaultEndDate}，最大可选日期：${this.maxDate}` + ); + this.endDate = this.getModeFormatDateString(this.maxDate); + } else { + this.endDate = this.getModeFormatDateString(defaultEndDate); + } + }, + immediate: true + }, + minDate(val) { + if ((val && this.mode == DATE_TYPES.HMS) || this.mode == DATE_TYPES.HM) { + console.error('时分秒/时分模式不支持设置最小可选时间'); + return; + } + }, + maxDate(val) { + if ((val && this.mode == DATE_TYPES.HMS) || this.mode == DATE_TYPES.HM) { + console.error('时分秒/时分模式不支持设置最大可选时间'); + return; + } + } + }, + methods: { + onTapStartDate() { + this.showEndDatePicker = false; + if (!this.startDate) { + this.startDate = this.getModeFormatDateString(new Date()); + } + this.activeDate = 'startDate'; + this.showStartDatePicker = true; + }, + onTapEndDate() { + this.showStartDatePicker = false; + if (!this.endDate) { + this.endDate = this.startDate; + } + this.activeDate = 'endDate'; + this.showEndDatePicker = true; + }, + onChangeStartDate(date) { + this.startDate = date; + }, + onChangeEndDate(date) { + this.endDate = date; + }, + validateInput() { + if (!this.startDate) { + uni.showToast({ + title: '请选择开始时间', + icon: 'none' + }); + return false; + } else if (!this.endDate) { + uni.showToast({ + title: '请选择结束时间', + icon: 'none' + }); + return false; + } else if (DateUtil.isAfter(this.startDate, this.endDate)) { + uni.showToast({ + title: '结束时间不能小于开始时间', + icon: 'none' + }); + return false; + } + return true; + }, + onCancel() { + this.resetData(); + }, + onConfirm() { + if (this.validateInput()) { + this.$emit('onSubmit', { + startDate: this.startDate, + endDate: this.endDate + }); + this.showStartDatePicker = false; + this.showEndDatePicker = false; + } + }, + resetData() { + this.startDate = ''; + this.endDate = ''; + this.activeDate = 'startDate'; + this.showStartDatePicker = false; + this.showEndDatePicker = false; + }, + // 返回对应日期模式的时间字符串 + getModeFormatDateString(date) { + let fmt = 'YYYY-MM-DD'; + switch (this.mode) { + case DATE_TYPES.YM: + fmt = 'YYYY-MM'; + break; + case DATE_TYPES.Y: + fmt = 'YYYY'; + break; + case DATE_TYPES['YMD-HMS']: + fmt = 'YYYY-MM-DD HH:mm:ss'; + break; + case DATE_TYPES.HMS: + fmt = 'HH:mm:ss'; + break; + case DATE_TYPES.HM: + fmt = 'HH:mm'; + break; + default: + break; + } + return DateUtil.formatDate(date, fmt); + } + } +}; diff --git a/components/dengrq-datetime-picker/dateSelector/index.vue b/components/dengrq-datetime-picker/dateSelector/index.vue new file mode 100644 index 0000000..1f67033 --- /dev/null +++ b/components/dengrq-datetime-picker/dateSelector/index.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/components/dengrq-datetime-picker/dateTimePicker/constant.js b/components/dengrq-datetime-picker/dateTimePicker/constant.js new file mode 100644 index 0000000..f4ae3bd --- /dev/null +++ b/components/dengrq-datetime-picker/dateTimePicker/constant.js @@ -0,0 +1,15 @@ +// 日期模式 +export const DATE_TYPES = { + // 年月日 + YMD: 1, + // 年月 + YM: 2, + // 年份 + Y: 3, + // 年月日时分秒 + 'YMD-HMS': 4, + // 时分秒 + HMS: 5, + // 时分 + HM: 6 +}; diff --git a/components/dengrq-datetime-picker/dateTimePicker/dateUtil.js b/components/dengrq-datetime-picker/dateTimePicker/dateUtil.js new file mode 100644 index 0000000..d9bd5b9 --- /dev/null +++ b/components/dengrq-datetime-picker/dateTimePicker/dateUtil.js @@ -0,0 +1,93 @@ +/** + * 日期时间格式化 + * @param {Date} date 要格式化的日期对象 + * @param {String} fmt 格式化字符串，eg：YYYY-MM-DD HH:mm:ss + * @returns 格式化后的日期字符串 + */ +function formatDate(date, fmt) { + if (typeof date == 'string') { + date = new Date(handleDateStr(date)); + } + + const o = { + 'M+': date.getMonth() + 1, // 月份 + 'd+': date.getDate(), // 日 + 'D+': date.getDate(), // 日 + 'H+': date.getHours(), // 小时 + 'h+': date.getHours(), // 小时 + 'm+': date.getMinutes(), // 分 + 's+': date.getSeconds(), // 秒 + 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度 + S: date.getMilliseconds() // 毫秒 + }; + + if (/([y|Y]+)/.test(fmt)) { + fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').slice(4 - RegExp.$1.length)); + } + + for (const k in o) { + if (new RegExp('(' + k + ')').test(fmt)) { + fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).slice(('' + o[k]).length)); + } + } + + return fmt; +} + +/** + * 处理时间字符串，兼容ios下new Date()返回NaN问题 + * @param {*} dateStr 日期字符串 + * @returns + */ +function handleDateStr(dateStr) { + return dateStr.replace(/\-/g, '/'); +} + +/** + * 判断日期1是否在日期2之前，即日期1小于日期2 + * @param {Date} date1 + * @param {Date} date2 + * @returns + */ +function isBefore(date1, date2) { + if (typeof date1 == 'string') { + date1 = new Date(handleDateStr(date1)); + } + if (typeof date2 == 'string') { + date2 = new Date(handleDateStr(date2)); + } + return date1.getTime() < date2.getTime(); +} + +/** + * 判断日期1是否在日期2之后，即日期1大于日期2 + * @param {Date} date1 + * @param {Date} date2 + * @returns + */ +function isAfter(date1, date2) { + if (typeof date1 == 'string') { + date1 = new Date(handleDateStr(date1)); + } + if (typeof date2 == 'string') { + date2 = new Date(handleDateStr(date2)); + } + return date1.getTime() > date2.getTime(); +} + +/** + * 检查传入的字符串是否能转换为有效的Date对象 + * @param {String} date + * @returns {Boolean} + */ +function isValid(date) { + return new Date(date) !== 'Invalid Date' && !isNaN(new Date(date)); +} + +export default { + formatDate, + handleDateStr, + isBefore, + isAfter, + isValid +}; diff --git a/components/dengrq-datetime-picker/dateTimePicker/index.js b/components/dengrq-datetime-picker/dateTimePicker/index.js new file mode 100644 index 0000000..1e2d8fd --- /dev/null +++ b/components/dengrq-datetime-picker/dateTimePicker/index.js @@ -0,0 +1,378 @@ +import CustomPickerView from '../customPickerView/index.vue'; +import DateUtil from '../dateTimePicker/dateUtil'; +import { DATE_TYPES } from './constant'; + +export default { + components: { + CustomPickerView + }, + props: { + // 日期模式，1：年月日（默认），2：年月，3：年份，4：年月日时分秒，5：时分秒，6：时分 + mode: { + type: Number, + default: DATE_TYPES.YMD + }, + // 可选的最小日期，默认十年前 + minDate: { + type: String, + default: '' + }, + // 可选的最大日期，默认十年后 + maxDate: { + type: String, + default: '' + }, + // 默认选中日期（注意要跟日期模式对应） + defaultDate: { + type: String, + default: '' + } + }, + data() { + return { + selectYear: new Date().getFullYear(), + selectMonth: new Date().getMonth() + 1, // 选中的月份，1~12 + selectDay: new Date().getDate(), + selectHour: new Date().getHours(), + selectMinute: new Date().getMinutes(), + selectSecond: new Date().getSeconds() + }; + }, + watch: { + defaultDate: { + immediate: true, + handler(val) { + if (val) { + if (this.mode == DATE_TYPES.YM && val.replace(/\-/g, '/').split('/').length == 2) { + // 日期模式为年月时有可能传进来的defaultDate是2022-02这样的格式，在ios下new Date会报错，加上日期部分做兼容 + val += '-01'; + } else if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) { + // 只有时分秒或者只有时分是不能调用new Date生成Date对象的，先加上一个假设的年月日（就取当年一月一日）来兼容 + const now = new Date(); + val = `${now.getFullYear()}-01-01 ${val}`; + } + + let date = new Date(DateUtil.handleDateStr(val)); + this.selectYear = date.getFullYear(); + this.selectMonth = date.getMonth() + 1; + this.selectDay = date.getDate(); + this.selectHour = date.getHours(); + this.selectMinute = date.getMinutes(); + this.selectSecond = date.getSeconds(); + } + } + } + }, + computed: { + minDateObj() { + let minDate = this.minDate; + if (minDate) { + if (this.mode == DATE_TYPES.YM && minDate.replace(/\-/g, '/').split('/').length == 2) { + // 日期模式为年月时有可能传进来的minDate是2022-02这样的格式，在ios下new Date会报错，加上日期部分做兼容 + minDate += '-01'; + } else if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) { + // 只有时分秒或者只有时分是不能调用new Date生成Date对象的，先加上一个假设的年月日（就取当年一月一日）来兼容 + const now = new Date(); + minDate = `${now.getFullYear()}-01-01 ${minDate}`; + } + return new Date(DateUtil.handleDateStr(minDate)); + } else { + // 没有传最小日期，默认十年前 + let year = new Date().getFullYear() - 10; + minDate = new Date(year, 0, 1); + return minDate; + } + }, + maxDateObj() { + let maxDate = this.maxDate; + if (maxDate) { + if (this.mode == DATE_TYPES.YM && maxDate.replace(/\-/g, '/').split('/').length == 2) { + // 日期模式为年月时有可能传进来的maxDate是2022-02这样的格式，在ios下new Date会报错，加上日期部分做兼容 + maxDate += '-01'; + } else if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) { + // 只有时分秒或者只有时分是不能调用new Date生成Date对象的，先加上一个假设的年月日（就取当年一月一日）来兼容 + const now = new Date(); + maxDate = `${now.getFullYear()}-01-01 ${maxDate}`; + } + return new Date(DateUtil.handleDateStr(maxDate)); + } else { + // 没有传最大日期，默认十年后 + let year = new Date().getFullYear() + 10; + maxDate = new Date(year, 11, 31); + return maxDate; + } + }, + years() { + let years = []; + let minYear = this.minDateObj.getFullYear(); + let maxYear = this.maxDateObj.getFullYear(); + for (let i = minYear; i <= maxYear; i++) { + years.push(i); + } + + return years; + }, + months() { + let months = []; + let minMonth = 1; + let maxMonth = 12; + + // 如果选中的年份刚好是最小可选日期的年份，那月份就要从最小日期的月份开始 + if (this.selectYear == this.minDateObj.getFullYear()) { + minMonth = this.minDateObj.getMonth() + 1; + } + // 如果选中的年份刚好是最大可选日期的年份，那月份就要在最大日期的月份结束 + if (this.selectYear == this.maxDateObj.getFullYear()) { + maxMonth = this.maxDateObj.getMonth() + 1; + } + + for (let i = minMonth; i <= maxMonth; i++) { + months.push(i); + } + + return months; + }, + days() { + // 一年中12个月每个月的天数 + let monthDaysConfig = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; + // 闰年2月有29天 + if (this.selectMonth == 2 && this.selectYear % 4 == 0) { + monthDaysConfig[1] = 29; + } + + let minDay = 1; + let maxDay = monthDaysConfig[this.selectMonth - 1]; + + if (this.selectYear == this.minDateObj.getFullYear() && this.selectMonth == this.minDateObj.getMonth() + 1) { + minDay = this.minDateObj.getDate(); + } + if (this.selectYear == this.maxDateObj.getFullYear() && this.selectMonth == this.maxDateObj.getMonth() + 1) { + maxDay = this.maxDateObj.getDate(); + } + + let days = []; + for (let i = minDay; i <= maxDay; i++) { + days.push(i); + } + + return days; + }, + hours() { + let hours = []; + let minHour = 0; + let maxHour = 23; + + if ( + this.selectYear == this.minDateObj.getFullYear() && + this.selectMonth == this.minDateObj.getMonth() + 1 && + this.selectDay == this.minDateObj.getDate() + ) { + minHour = this.minDateObj.getHours(); + } + if ( + this.selectYear == this.maxDateObj.getFullYear() && + this.selectMonth == this.maxDateObj.getMonth() + 1 && + this.selectDay == this.maxDateObj.getDate() + ) { + maxHour = this.maxDateObj.getHours(); + } + + for (let i = minHour; i <= maxHour; i++) { + hours.push(i); + } + + return hours; + }, + minutes() { + let mins = []; + let minMin = 0; + let maxMin = 59; + + if ( + this.selectYear == this.minDateObj.getFullYear() && + this.selectMonth == this.minDateObj.getMonth() + 1 && + this.selectDay == this.minDateObj.getDate() && + this.selectHour == this.minDateObj.getHours() + ) { + minMin = this.minDateObj.getMinutes(); + } + if ( + this.selectYear == this.maxDateObj.getFullYear() && + this.selectMonth == this.maxDateObj.getMonth() + 1 && + this.selectDay == this.maxDateObj.getDate() && + this.selectHour == this.maxDateObj.getHours() + ) { + maxMin = this.maxDateObj.getMinutes(); + } + + for (let i = minMin; i <= maxMin; i++) { + mins.push(i); + } + + return mins; + }, + seconds() { + let seconds = []; + let minSecond = 0; + let maxSecond = 59; + + if ( + this.selectYear == this.minDateObj.getFullYear() && + this.selectMonth == this.minDateObj.getMonth() + 1 && + this.selectDay == this.minDateObj.getDate() && + this.selectHour == this.minDateObj.getHours() && + this.selectMinute == this.minDateObj.getMinutes() + ) { + minSecond = this.minDateObj.getSeconds(); + } + if ( + this.selectYear == this.maxDateObj.getFullYear() && + this.selectMonth == this.maxDateObj.getMonth() + 1 && + this.selectDay == this.maxDateObj.getDate() && + this.selectHour == this.maxDateObj.getHours() && + this.selectMinute == this.maxDateObj.getMinutes() + ) { + maxSecond = this.maxDateObj.getSeconds(); + } + + for (let i = minSecond; i <= maxSecond; i++) { + seconds.push(i); + } + + return seconds; + }, + // 传给pickerView组件的数组，根据mode来生成不同的数据 + dateConfig() { + let years = this.years.map((y) => y + '年'); + let months = this.months.map((m) => m + '月'); + let days = this.days.map((d) => d + '日'); + let hours = this.hours.map((h) => h + '时'); + let minutes = this.minutes.map((m) => m + '分'); + let seconds = this.seconds.map((s) => s + '秒'); + + let ret = []; + switch (this.mode) { + case DATE_TYPES.YM: + ret = [years, months]; + break; + case DATE_TYPES.Y: + ret = [years]; + break; + case DATE_TYPES['YMD-HMS']: + ret = [years, months, days, hours, minutes, seconds]; + break; + case DATE_TYPES.HMS: + ret = [hours, minutes, seconds]; + break; + case DATE_TYPES.HM: + ret = [hours, minutes]; + break; + default: + ret = [years, months, days]; + break; + } + + return ret; + }, + selectVals() { + let ret = []; + switch (this.mode) { + case DATE_TYPES.YM: + ret = [this.selectYear + '年', this.selectMonth + '月']; + break; + case DATE_TYPES.Y: + ret = [this.selectYear + '年']; + break; + case DATE_TYPES['YMD-HMS']: + ret = [ + this.selectYear + '年', + this.selectMonth + '月', + this.selectDay + '日', + this.selectHour + '时', + this.selectMinute + '分', + this.selectSecond + '秒' + ]; + break; + case DATE_TYPES.HMS: + ret = [this.selectHour + '时', this.selectMinute + '分', this.selectSecond + '秒']; + break; + case DATE_TYPES.HM: + ret = [this.selectHour + '时', this.selectMinute + '分']; + break; + default: + ret = [this.selectYear + '年', this.selectMonth + '月', this.selectDay + '日']; + break; + } + return ret; + } + }, + methods: { + onChangePickerValue(e) { + const { value } = e; + + if (this.mode == DATE_TYPES.YM && value[0] && value[1]) { + // 年月模式 + this.selectYear = Number(value[0].replace('年', '')); + this.selectMonth = Number(value[1].replace('月', '')); + } else if (this.mode == DATE_TYPES.Y && value[0]) { + // 只有年份模式 + this.selectYear = Number(value[0].replace('年', '')); + } else if (this.mode == DATE_TYPES['YMD-HMS'] && value[0] && value[1] && value[2] != '' && value[3] && value[4] && value[5]) { + // 年月日时分秒模式 + this.selectYear = Number(value[0].replace('年', '')); + this.selectMonth = Number(value[1].replace('月', '')); + this.selectDay = Number(value[2].replace('日', '')); + this.selectHour = Number(value[3].replace('时', '')); + this.selectMinute = Number(value[4].replace('分', '')); + this.selectSecond = Number(value[5].replace('秒', '')); + } else if (this.mode == DATE_TYPES.HMS && value[0] && value[1] && value[2]) { + // 时分秒模式 + this.selectHour = Number(value[0].replace('时', '')); + this.selectMinute = Number(value[1].replace('分', '')); + this.selectSecond = Number(value[2].replace('秒', '')); + } else if (this.mode == DATE_TYPES.HM && value[0] && value[1]) { + // 时分模式 + this.selectHour = Number(value[0].replace('时', '')); + this.selectMinute = Number(value[1].replace('分', '')); + } else if (value[0] && value[1] && value[2]) { + // 默认，年月日模式 + this.selectYear = Number(value[0].replace('年', '')); + this.selectMonth = Number(value[1].replace('月', '')); + this.selectDay = Number(value[2].replace('日', '')); + } else { + // 其他情况可能是pickerView返回的数据有问题，不处理 + console.log('onChangePickerValue其他情况'); + return; + } + + let formatTmpl = 'YYYY-MM-DD'; + switch (this.mode) { + case DATE_TYPES.YM: + formatTmpl = 'YYYY-MM'; + break; + case DATE_TYPES.Y: + formatTmpl = 'YYYY'; + break; + case DATE_TYPES['YMD-HMS']: + formatTmpl = 'YYYY-MM-DD HH:mm:ss'; + break; + case DATE_TYPES.HMS: + formatTmpl = 'HH:mm:ss'; + break; + case DATE_TYPES.HM: + formatTmpl = 'HH:mm'; + break; + default: + break; + } + + this.$emit( + 'onChange', + DateUtil.formatDate( + new Date(`${this.selectYear}/${this.selectMonth}/${this.selectDay} ${this.selectHour}:${this.selectMinute}:${this.selectSecond}`), + formatTmpl + ) + ); + } + } +}; diff --git a/components/dengrq-datetime-picker/dateTimePicker/index.vue b/components/dengrq-datetime-picker/dateTimePicker/index.vue new file mode 100644 index 0000000..6326f33 --- /dev/null +++ b/components/dengrq-datetime-picker/dateTimePicker/index.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/pages/bill/add-bill/add-bill.json b/pages/bill/add-bill/add-bill.json new file mode 100644 index 0000000..8606885 --- /dev/null +++ b/pages/bill/add-bill/add-bill.json @@ -0,0 +1,897 @@ +{ + "classifyTabBar": [ + { + "type": "支出1", + "selectId": "1", + "orderStatus": "交易成功", + "isAdd": false, + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "商品说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "收单机构", + "value": "", + "type": "text", + "focus": false, + "key": "collectionOrganization" + }, + { + "label": "收款方全称", + "value": "", + "type": "text", + "focus": false, + "key": "receiverFullName" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3 + ] + }, + { + "type": "支出2", + "selectId": "2", + "orderStatus": "交易成功", + "isAdd": false, + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "商品说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "收款方全称", + "value": "", + "type": "text", + "focus": false, + "key": "receiverFullName" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3, + 9 + ] + }, + { + "type": "支出3", + "selectId": "3", + "orderStatus": "交易成功", + "isAdd": false, + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "商品说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "收单机构", + "value": "", + "type": "text", + "focus": false, + "key": "collectionOrganization" + }, + { + "label": "清算机构", + "value": "", + "type": "text", + "focus": false, + "key": "clearingOrganization" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 3, + 8 + ] + }, + { + "type": "还款", + "selectId": "4", + "orderStatus": "还款成功", + "isAdd": false, + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "还款到", + "value": "", + "type": "text", + "focus": false, + "key": "repaymentTo" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 3 + ] + }, + { + "type": "转账1", + "selectId": "5", + "orderStatus": "交易成功", + "isAdd": false, + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "转账备注", + "value": "", + "type": "text", + "focus": false, + "key": "transferNote" + }, + { + "label": "对方账户", + "value": "", + "type": "text", + "focus": false, + "key": "counterAccount" + }, + { + "label": "订单号", + "value": "", + "type": "number", + "focus": false, + "key": "orderNumber" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 3 + ] + }, + { + "type": "转账2", + "selectId": "6", + "orderStatus": "交易成功", + "isAdd": true, + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "转账备注", + "value": "", + "type": "text", + "focus": false, + "key": "transferNote" + }, + { + "label": "对方账户", + "value": "", + "type": "text", + "focus": false, + "key": "counterAccount" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3 + ] + }, + { + "type": "转账3", + "isAdd": false, + "orderStatus": "交易成功", + "selectId": "7", + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "对方账户", + "value": "", + "type": "text", + "focus": false, + "key": "counterAccount" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3, + 6 + ] + }, + { + "type": "二维码收款", + "selectId": "8", + "orderStatus": "交易成功", + "isAdd": true, + "itemInfoList": [ + { + "label": "关联记录", + "value": "", + "type": "text", + "textColor": "#12447A", + "focus": false, + "key": "relatedRecord" + }, + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "商品说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3, + 9 + ] + }, + { + "type": "退款", + "selectId": "9", + "orderStatus": "退款成功", + "isAdd": true, + "itemInfoList": [ + { + "label": "关联记录", + "value": "", + "type": "text", + "textColor": "#12447A", + "focus": false, + "key": "relatedRecord" + }, + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "退款方式", + "value": "", + "type": "text", + "focus": false, + "key": "refundMethod" + }, + { + "label": "商品说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 3, + 8 + ] + }, + { + "type": "充值缴费1", + "selectId": "10", + "orderStatus": "交易成功", + "itemInfoList": [ + { + "label": "支付时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "商品说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "收款方全称", + "value": "", + "type": "text", + "focus": false, + "key": "counterAccount" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3, + 5, + 8 + ] + }, + { + "type": "充值缴费2", + "selectId": "11", + "orderStatus": "交易成功", + "itemInfoList": [ + { + "label": "创建时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "缴费说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "户号", + "value": "", + "type": "text", + "focus": false, + "key": "householdNumber" + }, + { + "label": "订单号", + "value": "", + "type": "text", + "focus": false, + "key": "orderNumber" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 3, + 5, + 7 + ] + }, + { + "type": "网购1", + "selectId": "12", + "orderStatus": "交易成功", + "itemInfoList": [ + { + "label": "关联记录", + "value": "", + "type": "text", + "textColor": "#12447A", + "focus": false, + "key": "relatedRecord" + }, + { + "label": "支付时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3, + 5 + ] + }, + { + "type": "网购2", + "selectId": "13", + "orderStatus": "交易成功", + "itemInfoList": [ + { + "label": "支付时间", + "value": "", + "type": "time", + "focus": false, + "key": "createTime" + }, + { + "label": "付款方式", + "value": "", + "type": "text", + "focus": false, + "key": "payMethod" + }, + { + "label": "商品说明", + "value": "", + "type": "text", + "focus": false, + "key": "productDescription" + }, + { + "label": "收款方全称", + "value": "", + "type": "text", + "focus": false, + "key": "counterAccount" + }, + { + "label": "账单分类", + "value": "", + "type": "select", + "focus": false, + "key": "billCategory" + }, + { + "label": "标签和备注", + "value": "", + "type": "text", + "focus": false, + "key": "tagAndNote" + } + ], + "defaultBottomIcons": [ + 0, + 1, + 2, + 3, + 5, + 8 + ] + } + ], + "billClassify": [ + { + "id": 0, + "name": "餐饮美食" + }, + { + "id": 1, + "name": "服饰装扮" + }, + { + "id": 2, + "name": "日用百货" + }, + { + "id": 3, + "name": "家居家装" + }, + { + "id": 4, + "name": "数码电器" + }, + { + "id": 5, + "name": "运动户外" + }, + { + "id": 6, + "name": "美容美发" + }, + { + "id": 7, + "name": "母婴亲子" + }, + { + "id": 8, + "name": "宠物" + }, + { + "id": 9, + "name": "交通出行" + }, + { + "id": 10, + "name": "爱车养车" + }, + { + "id": 11, + "name": "住房物业" + }, + { + "id": 12, + "name": "酒店旅游" + }, + { + "id": 13, + "name": "文化休闲" + }, + { + "id": 14, + "name": "教育培训" + }, + { + "id": 15, + "name": "医疗健康" + }, + { + "id": 16, + "name": "生活服务" + }, + { + "id": 17, + "name": "公共服务" + }, + { + "id": 18, + "name": "商业服务" + }, + { + "id": 19, + "name": "公益捐赠" + }, + { + "id": 20, + "name": "互助保障" + }, + { + "id": 21, + "name": "投资理财" + }, + { + "id": 22, + "name": "保险" + }, + { + "id": 23, + "name": "信用借还" + }, + { + "id": 24, + "name": "充值缴费" + }, + { + "id": 25, + "name": "收入" + }, + { + "id": 26, + "name": "转账红包" + }, + { + "id": 27, + "name": "亲友代付" + }, + { + "id": 28, + "name": "账户存取" + }, + { + "id": 29, + "name": "退款" + }, + { + "id": 30, + "name": "其他" + } + ], + "billBottomIconList": [ + { + "id": 0, + "icon": "chakanwanglaijilu", + "name": "查看往来记录" + }, + { + "id": 1, + "icon": "wanglailiushuizhengming", + "name": "往来流水证明" + }, + { + "id": 2, + "icon": "shenqingdianzihuidan", + "name": "申请电子回单" + }, + { + "id": 3, + "icon": "duidingdanyouyiwen", + "name": "对订单有疑问" + }, + { + "id": 7, + "icon": "chakanjiaofeijindu", + "name": "查看缴费进度" + }, + { + "id": 4, + "icon": "lianxishoukuanfang", + "name": "联系收款方" + }, + { + "id": 9, + "icon": "lianxifukuanfang", + "name": "联系付款方" + }, + { + "id": 6, + "icon": "zhuanzhangpingzheng", + "name": "转账凭证" + }, + { + "id": 8, + "icon": "lianxishangjia", + "name": "联系商家" + }, + { + "id": 5, + "icon": "AAshoukuan", + "name": "AA收款" + } + ] +} \ No newline at end of file diff --git a/pages/bill/add-bill/add-bill.vue b/pages/bill/add-bill/add-bill.vue index 193e5f9..d902d94 100644 --- a/pages/bill/add-bill/add-bill.vue +++ b/pages/bill/add-bill/add-bill.vue @@ -1,48 +1,778 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/static/image/bill/add-bill/add-avatar.png b/static/image/bill/add-bill/add-avatar.png new file mode 100644 index 0000000..fdcb85f Binary files /dev/null and b/static/image/bill/add-bill/add-avatar.png differ diff --git a/static/image/bill/add-bill/edit.png b/static/image/bill/add-bill/edit.png new file mode 100644 index 0000000..ea02d13 Binary files /dev/null and b/static/image/bill/add-bill/edit.png differ diff --git a/static/image/bill/add-bill/service-detail-image.png b/static/image/bill/add-bill/service-detail-image.png new file mode 100644 index 0000000..98e7376 Binary files /dev/null and b/static/image/bill/add-bill/service-detail-image.png differ diff --git a/static/image/bill/blue-icon/AAshoukuan.png b/static/image/bill/blue-icon/AAshoukuan.png new file mode 100644 index 0000000..3fa8977 Binary files /dev/null and b/static/image/bill/blue-icon/AAshoukuan.png differ diff --git a/static/image/bill/blue-icon/chakanjiaofeijindu.png b/static/image/bill/blue-icon/chakanjiaofeijindu.png new file mode 100644 index 0000000..9612cf1 Binary files /dev/null and b/static/image/bill/blue-icon/chakanjiaofeijindu.png differ diff --git a/static/image/bill/blue-icon/chakanwanglaijilu.png b/static/image/bill/blue-icon/chakanwanglaijilu.png new file mode 100644 index 0000000..0932ce5 Binary files /dev/null and b/static/image/bill/blue-icon/chakanwanglaijilu.png differ diff --git a/static/image/bill/blue-icon/duidingdanyouyiwen.png b/static/image/bill/blue-icon/duidingdanyouyiwen.png new file mode 100644 index 0000000..4d13ea6 Binary files /dev/null and b/static/image/bill/blue-icon/duidingdanyouyiwen.png differ diff --git a/static/image/bill/blue-icon/lianxifukuanfang.png b/static/image/bill/blue-icon/lianxifukuanfang.png new file mode 100644 index 0000000..e462f6d Binary files /dev/null and b/static/image/bill/blue-icon/lianxifukuanfang.png differ diff --git a/static/image/bill/blue-icon/lianxishangjia.png b/static/image/bill/blue-icon/lianxishangjia.png new file mode 100644 index 0000000..6d3a8ba Binary files /dev/null and b/static/image/bill/blue-icon/lianxishangjia.png differ diff --git a/static/image/bill/blue-icon/lianxishoukuanfang.png b/static/image/bill/blue-icon/lianxishoukuanfang.png new file mode 100644 index 0000000..6d3a8ba Binary files /dev/null and b/static/image/bill/blue-icon/lianxishoukuanfang.png differ diff --git a/static/image/bill/blue-icon/shenqingdianzihuidan.png b/static/image/bill/blue-icon/shenqingdianzihuidan.png new file mode 100644 index 0000000..4a62af5 Binary files /dev/null and b/static/image/bill/blue-icon/shenqingdianzihuidan.png differ diff --git a/static/image/bill/blue-icon/wanglailiushuizhengming.png b/static/image/bill/blue-icon/wanglailiushuizhengming.png new file mode 100644 index 0000000..db38ab5 Binary files /dev/null and b/static/image/bill/blue-icon/wanglailiushuizhengming.png differ diff --git a/static/image/bill/blue-icon/zhuanzhangpingzheng.png b/static/image/bill/blue-icon/zhuanzhangpingzheng.png new file mode 100644 index 0000000..60adca6 Binary files /dev/null and b/static/image/bill/blue-icon/zhuanzhangpingzheng.png differ diff --git a/static/image/bill/white-icon/AAshoukuan.png b/static/image/bill/white-icon/AAshoukuan.png new file mode 100644 index 0000000..793d68a Binary files /dev/null and b/static/image/bill/white-icon/AAshoukuan.png differ diff --git a/static/image/bill/white-icon/chakanjiaofeijindu.png b/static/image/bill/white-icon/chakanjiaofeijindu.png new file mode 100644 index 0000000..7d9224b Binary files /dev/null and b/static/image/bill/white-icon/chakanjiaofeijindu.png differ diff --git a/static/image/bill/white-icon/chakanwanglaijilu.png b/static/image/bill/white-icon/chakanwanglaijilu.png new file mode 100644 index 0000000..25bfea1 Binary files /dev/null and b/static/image/bill/white-icon/chakanwanglaijilu.png differ diff --git a/static/image/bill/white-icon/duidingdanyouyiwen.png b/static/image/bill/white-icon/duidingdanyouyiwen.png new file mode 100644 index 0000000..7addb6a Binary files /dev/null and b/static/image/bill/white-icon/duidingdanyouyiwen.png differ diff --git a/static/image/bill/white-icon/lianxifukuanfang.png b/static/image/bill/white-icon/lianxifukuanfang.png new file mode 100644 index 0000000..2235568 Binary files /dev/null and b/static/image/bill/white-icon/lianxifukuanfang.png differ diff --git a/static/image/bill/white-icon/lianxishangjia.png b/static/image/bill/white-icon/lianxishangjia.png new file mode 100644 index 0000000..d155b7a Binary files /dev/null and b/static/image/bill/white-icon/lianxishangjia.png differ diff --git a/static/image/bill/white-icon/lianxishoukuanfang.png b/static/image/bill/white-icon/lianxishoukuanfang.png new file mode 100644 index 0000000..d155b7a Binary files /dev/null and b/static/image/bill/white-icon/lianxishoukuanfang.png differ diff --git a/static/image/bill/white-icon/shenqingdianzihuidan.png b/static/image/bill/white-icon/shenqingdianzihuidan.png new file mode 100644 index 0000000..7d2746f Binary files /dev/null and b/static/image/bill/white-icon/shenqingdianzihuidan.png differ diff --git a/static/image/bill/white-icon/wanglailiushuizhengming.png b/static/image/bill/white-icon/wanglailiushuizhengming.png new file mode 100644 index 0000000..1a9fccd Binary files /dev/null and b/static/image/bill/white-icon/wanglailiushuizhengming.png differ diff --git a/static/image/bill/white-icon/zhuanzhangpingzheng.png b/static/image/bill/white-icon/zhuanzhangpingzheng.png new file mode 100644 index 0000000..2c6b574 Binary files /dev/null and b/static/image/bill/white-icon/zhuanzhangpingzheng.png differ diff --git a/static/image/common/close.png b/static/image/common/close.png new file mode 100644 index 0000000..90ca8e4 Binary files /dev/null and b/static/image/common/close.png differ diff --git a/static/image/common/random-dice.png b/static/image/common/random-dice.png new file mode 100644 index 0000000..3d4d1df Binary files /dev/null and b/static/image/common/random-dice.png differ