支付宝新增账单50%

common/main.css

@@ -367,6 +367,10 @@ body {
 	display: block;
 }
 
+.over-hidden {
+	overflow: hidden;
+}
+
 /* 文本截断 */
 .text-ellipsis {
 	overflow: hidden;

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;
+    }
+}

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;
+}

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
+      });
+    }
+  }
+};

components/dengrq-datetime-picker/customPickerView/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <picker-view class="picker-view" :value="indexArr" @change="onChange">
+    <picker-view-column class="picker-view-column" v-for="(col, colIdx) in columns" :key="colIdx">
+      <view v-for="(item, idx) in col" :key="idx">{{ item }}</view>
+    </picker-view-column>
+  </picker-view>
+</template>
+
+<script src="./index.js"></script>
+
+<style lang="css" scoped src="./index.css"></style>

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;
+}

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);
+    }
+  }
+};

components/dengrq-datetime-picker/dateSelector/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <view class="date-selector">
+    <view class="select-date-wrapper">
+      <view class="select-date" :class="{ active: activeDate == 'startDate' }" @tap="onTapStartDate">
+        <view class="select-date-value" v-if="startDate">{{ startDate }}</view>
+        <view class="select-date-placeholder" v-else>请选择时间</view>
+      </view>
+      <view style="margin: 0 16px">至</view>
+      <view class="select-date" :class="{ active: activeDate == 'endDate' }" @tap="onTapEndDate">
+        <view class="select-date-value" v-if="endDate">{{ endDate }}</view>
+        <view class="select-date-placeholder" v-else>请选择时间</view>
+      </view>
+    </view>
+
+    <DateTimePicker
+      v-if="showStartDatePicker"
+      @onChange="onChangeStartDate"
+      :defaultDate="startDate"
+      :minDate="minDate || ''"
+      :maxDate="endDate || maxDate || ''"
+      :mode="mode"
+    />
+    <DateTimePicker
+      v-if="showEndDatePicker"
+      @onChange="onChangeEndDate"
+      :defaultDate="endDate"
+      :minDate="startDate || minDate || ''"
+      :maxDate="maxDate || ''"
+      :mode="mode"
+    />
+
+    <view class="btn-group" v-if="showStartDatePicker || showEndDatePicker">
+      <view class="btn-cancel" @tap="onCancel">取消</view>
+      <view class="btn-confirm" @tap="onConfirm">确定</view>
+    </view>
+  </view>
+</template>
+
+<script src="./index.js"></script>
+
+<style lang="css" scoped src="./index.css"></style>

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
+};

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
+};

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
+        )
+      );
+    }
+  }
+};

components/dengrq-datetime-picker/dateTimePicker/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <view class="datetime-picker">
+    <CustomPickerView :columns="dateConfig" :selectVals="selectVals" @onChange="onChangePickerValue" />
+  </view>
+</template>
+
+<script src="./index.js"></script>
+
+<style scoped lang="css"></style>

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收款"
+		}
+	]
+}

pages/bill/add-bill/add-bill.vue

@@ -1,48 +1,778 @@
 <template>
-	<view style="overflow: hidden;height: 100vh;">
+	<view style="overflow: hidden;overflow-y: scroll; height: 100vh;">
 		<navBar isRightButton :title="data.navBar.title" :bgColor="data.navBar.bgColor" @right-click="onRightClick">
 		</navBar>
+		<view class="tab-bar">
+			<view class="tab-item" :class="{ blue: billData.selectId == item.selectId }" v-for="item in classifyTabBar"
+				:key="item.selectId" @click="billData.selectId = Number(item.selectId)">
+				{{ item.type }}
+			</view>
+		</view>
+		<!-- 账单信息容器 -->
+		<view class="add-bill-container">
+			<!-- 随机骰子 -->
+			<view class="random-dice">
+				<image class="random-dice-image" src="/static/image/common/random-dice.png"></image>
+			</view>
+			<!-- 头像 -->
+			<view class="avatar-box">
+				<image class="avatar-image" src="/static/image/bill/add-bill/add-avatar.png"></image>
+			</view>
+			<!-- 主要信息 -->
+			<view class="main-info flex-align-center flex-column">
+				<view class="name info-item-input">
+					<!-- 隐藏的text用于测量宽度 -->
+					<text class="text-measure">{{ billData.name }}</text>
+
+					<input class="text-input" type="text" v-model="billData.name" />
+					<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
+				</view>
+				<view class=" money info-item-input" style="height: 77rpx;">
+					<!-- 隐藏的text用于测量宽度 -->
+					<text class="text-measure font-w500" style="font-size: 64rpx;">{{ billData.money }}</text>
+
+					<input class="text-input font-w500" style="font-size: 64rpx;" type="digit"
+						v-model="billData.money" />
+					<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
+				</view>
+				<view class="order-status-info" :class="{ isRefund: billData.merchantOption.refund }">
+					{{ billData.orderStatus }}
+				</view>
+			</view>
+			<!-- 详情信息列表 -->
+			<view class="detail-info-container">
+				<view class="info-item-box" v-for="item in billData.itemInfoList" :key="item.type">
+					<view class="item-label">
+						{{ item.label }}
+					</view>
+					<view class="info-item-input" @click="onClickItemInfo(item)">
+						<!-- 隐藏的text用于测量宽度 -->
+						<text class="text-measure"
+							:class="{ visibility: item.type == 'time' || item.type == 'select' }">{{ item.value
+							}}</text>
+
+						<input v-if="item.type == 'text' || item.type == 'digit' || item.type == 'number'"
+							class="text-input" :type="item.type" :focus="item.focus" v-model="item.value" @click.stop />
+					</view>
+					<image class="edit-image" src="/static/image/bill/add-bill/edit.png" @click="onClickItemInfo(item)">
+					</image>
+				</view>
+			</view>
+		</view>
+		<!-- switch选项列表 -->
+		<view class="switch-option-container">
+			<template v-for="option in data.switchOptions" :key="option.id">
+				<view class="switch-option" v-if="option.isShow()">
+					<view class="switch-option-text">{{ option.name }}</view>
+					<switch v-if="option.isSwitch" color="#1676FE" :checked="billData.merchantOption[option.key]"
+						style="transform:scale(0.8)" @change="(e) => onSwitchChange(e, option)" />
+				</view>
+				<!-- 服务详情 -->
+				<view class="service-detail"
+					v-if="option.key == 'serviceDetail' && billData.merchantOption.serviceDetail && option.isShow()">
+					<image class="service-detail-image" src="/static/image/bill/add-bill/service-detail-image.png" />
+					<view class="flex-1 over-hidden">
+						<view class="service-detail-info info-item-input">
+							<!-- 隐藏的text用于测量宽度 -->
+							<text class="text-measure" style="font-size: 22rpx;">{{
+								billData.merchantOption.serverDetailInfo.text }}</text>
+
+							<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
+								v-model="billData.merchantOption.serverDetailInfo.text" />
+							<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
+						</view>
+					</view>
+					<uni-data-select class="select" style="flex: none;width: 80px;"
+						v-model="billData.merchantOption.serverDetailInfo.rightText"
+						:localdata="serverDetailRightTextList" @change="changeTips" :clear="false"></uni-data-select>
+					<image class="right-icon" src="/static/image/common/right-grey.png" />
+				</view>
+				<!-- 推荐服务 -->
+				<view class="service-detail recommend-service "
+					v-if="option.key == 'recommendService' && billData.merchantOption.recommendService && option.isShow()">
+					<view class="flex-1 over-hidden">
+						<view class="service-detail-info info-item-input">
+							<!-- 隐藏的text用于测量宽度 -->
+							<text class="text-measure" style="font-size: 22rpx;">{{
+								billData.merchantOption.recommendServiceInfo.text }}</text>
+
+							<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
+								v-model="billData.merchantOption.recommendServiceInfo.text" />
+							<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
+						</view>
+					</view>
+					<text class="right-text">去看看</text>
+					<image class="right-icon" src="/static/image/common/right-grey.png" />
+				</view>
+				<!-- 服务推荐 -->
+				<view class="service-detail service-recommend "
+					v-if="option.key == 'serviceRecommend' && billData.merchantOption.serviceRecommend && option.isShow()">
+					<view class="flex-1 over-hidden">
+						<view class="service-detail-info info-item-input">
+							<!-- 隐藏的text用于测量宽度 -->
+							<text class="text-measure" style="font-size: 22rpx;">{{
+								billData.merchantOption.serviceRecommendInfo.text }}</text>
+
+							<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
+								v-model="billData.merchantOption.serviceRecommendInfo.text" />
+							<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
+						</view>
+					</view>
+					<image class="right-icon" src="/static/image/common/right-grey.png" />
+				</view>
+			</template>
+
+		</view>
+		<!-- 底部icon配置选项列表 -->
+		<view class="bill-bottom-icon-options">
+			<view class="item-option-box" v-for="option in billBottomIconList" :key="option.id">
+				<view class="item-box" :class="{ 'active-item-box': billData.bottomIcons.includes(option.id) }"
+					@click="onBottomIconClick(option)">
+					<image class="item-icon"
+						:src="`/static/image/bill/${billData.bottomIcons.includes(option.id) ? 'white-icon' : 'blue-icon'}/${option.icon}.png`">
+					</image>
+					<text class="item-text">{{ option.name }}</text>
+				</view>
+			</view>
+		</view>
 	</view>
+
+	<uni-popup ref="timepopup" type="bottom">
+		<view v-if="selectItemInfo.type == 'time'" class="timeBox">
+			<view class="titleBox">
+				<view class="title" @click="closeTimePicker">
+					取消
+				</view>
+				<view class="btn" @click="settmes">
+					确定
+				</view>
+			</view>
+			<DateTimePicker :defaultDate="datePickerData.selectDate" :minDate="datePickerData.startDate"
+				:maxDate="datePickerData.endDate" :mode="4" @onChange="onChangeStartDate" />
+		</view>
+		<view v-else class="bill-classify-box">
+			<view class="title-box">
+				<view class="title">
+					账单分类
+				</view>
+				<view class="btn" @click="closeTimePicker">
+					<image class="close-image" src="/static/image/common/close.png"></image>
+				</view>
+			</view>
+			<view class="bill-classify-content">
+				<view class="bill-classify-item" v-for="item in billClassifyOptions" :key="item.id"
+					@click="data.currentClassifyId = item.id">
+					<view class="bill-classify-item-text" :class="{ 'active-item': data.currentClassifyId == item.id }">
+						{{ item.name }}
+					</view>
+				</view>
+			</view>
+			<view class="confirm-btn" @click="confirmClassify">
+				确定
+			</view>
+		</view>
+	</uni-popup>
 </template>
 
 <script setup>
 import navBar from '@/components/nav-bar/nav-bar.vue'
+import addBillJson from './add-bill.json'
+import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
 
 import {
 	reactive,
 	toRefs,
 	ref,
-	onMounted
+	onMounted,
+	watch,
+	nextTick
 } from 'vue'
 import {
 	onShow,
 } from '@dcloudio/uni-app'
 
+// 时间选择器
+const timepopup = ref(null)
 
+// 分类tabBar
+const classifyTabBar = ref(addBillJson.classifyTabBar)
+
+// 账单分类选项
+const billClassifyOptions = ref(addBillJson.billClassify)
+
+// 底部icon配置选项列表
+const billBottomIconList = ref(addBillJson.billBottomIconList)
+
+// 服务详情右侧选项
+const serverDetailRightTextList = [
+	{
+		"value": 0,
+		"text": "进入小程序"
+	},
+	{
+		"value": 1,
+		"text": "查看详情"
+	}
+]
+// switch选项
+const switchOptions = [
+	{
+		"id": 1,
+		"name": "服务详情",
+		"isSwitch": true,
+		isShow: () => {
+			const showTypeIds = [3, 4, 10]
+			return showTypeIds.includes(billData.value.selectId)
+		},
+		key: 'serviceDetail',
+	},
+	{
+		"id": 2,
+		"name": "推荐服务",
+		"isSwitch": true,
+		isShow: () => {
+			const showTypeIds = [4]
+			return showTypeIds.includes(billData.value.selectId)
+		},
+		key: 'recommendService',
+	},
+	{
+		"id": 3,
+		"name": "服务推荐",
+		"isSwitch": true,
+		isShow: () => {
+			const showTypeIds = [6, 7]
+			return showTypeIds.includes(billData.value.selectId)
+		},
+		key: 'serviceRecommend',
+	},
+	{
+		"id": 4,
+		"name": "退款",
+		"isSwitch": true,
+		isShow: () => {
+			const showTypeIds = [12, 13]
+			return showTypeIds.includes(billData.value.selectId)
+		},
+		key: 'refund',
+		change: (value) => {
+			if (billData.value.selectId == 12 || billData.value.selectId == 13) {
+				if (value) {
+					billData.value.orderStatus = "已全额退款"
+				} else {
+					billData.value.orderStatus = "交易成功"
+				}
+			}
+		}
+	},
+	{
+		"id": 5,
+		"name": "支付奖励",
+		"isSwitch": true,
+		isShow: () => {
+			const showTypeIds = [1, 3, 4, 12, 13]
+			return showTypeIds.includes(billData.value.selectId)
+		},
+		key: 'payReward',
+	},
+	{
+		"id": 6,
+		"name": "计入收支",
+		"isSwitch": true,
+		isShow: () => {
+			const showTypeIds = [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13]
+			return showTypeIds.includes(billData.value.selectId)
+		},
+		key: 'countInAndOut',
+	},
+
+]
+
+//获取全部字段的key值
+let allFieldsList = ref([])
+const keySet = new Set()
+classifyTabBar.value.forEach(item => {
+	if (item.itemInfoList) {
+		item.itemInfoList.forEach(info => {
+			if (info.key && !keySet.has(info.key)) {
+				keySet.add(info.key)
+				allFieldsList.value.push({
+					key: info.key,
+					value: ""
+				})
+			}
+		})
+	}
+})
 
 const data = reactive({
 	navBar: {
 		title: '新增账单',
 		bgColor: '#F5F5F5',
 	},
+	selectItemInfo: {
+		type: '',
+		value: '',
+		label: '',
+		id: ''
+	},
+	currentClassifyId: 0,
+	//当前底部字段选择
+	currentBottomIcons: [],
+	// 时间选择器
+	datePickerData: {
+		selectDate: "",
+		startDate: "",
+		endDate: "",
+	},
+	// 账单数据
+	billData: {
+		selectId: 1,
+		name: '',
+		money: "",
+		orderStatus: '交易成功',
+		itemInfoList: classifyTabBar.value[0].itemInfoList,
+		bottomIcons: [0, 1, 2, 3],
+		merchantOption: {
+			serverDetail: false,
+			serverDetailInfo: {
+				imgUrl: '',
+				rightText: 0,
+				text: '收钱吧'
+			},
+			recommendService: false,
+			recommendServiceInfo: {
+				text: '你有一个免费取现机会'
+			},
+			serviceRecommend: false,
+			serviceRecommendInfo: {
+				text: '恭喜你有6元转账保障福利待领取！'
+			},
+			refund: false,
+			countInAndOut: false,
+			payReward: false
+		}
+	},
+	// switch选项
+	switchOptions: switchOptions
 })
 
-let {
-} = toRefs(data)
+let { billData, datePickerData, selectItemInfo } = toRefs(data)
 
-onShow(() => {
+onShow(() => { })
+
+// 监听selectId
+watch(() => billData.value.selectId, (newVal) => {
+	// 储存到全部字段的值中
+	allFieldsList.value.forEach(item => {
+		billData.value.itemInfoList.forEach(oldItem => {
+			if (oldItem.key == item.key) {
+				item.value = oldItem.value
+			}
+		})
+	})
+	// 获取当前分类的字段
+	let currentItemInfoList = []
+	classifyTabBar.value.forEach(item => {
+		if (item.selectId == newVal) {
+			currentItemInfoList = item.itemInfoList ? JSON.parse(JSON.stringify(item.itemInfoList)) : []
+		}
+	})
+	// 从全部字段的值中获取当前分类的字段的值
+	currentItemInfoList.forEach(item => {
+		allFieldsList.value.forEach(oldItem => {
+			if (oldItem.key == item.key) {
+				item.value = oldItem.value
+			}
+		})
+	})
+	// 设置当前分类的字段
+	billData.value.itemInfoList = currentItemInfoList
+	const orderStatus = classifyTabBar.value.find(item => item.selectId == newVal).orderStatus
+	console.log("是否退款", billData.value.merchantOption)
+	// console.log("是否退款", billData.value.merchantOption.refund && (newVal == 12 || newVal == 13))
+	if (billData.value.merchantOption.refund && (newVal == 12 || newVal == 13)) {
+		billData.value.orderStatus = "退款成功"
+	} else {
+		billData.value.orderStatus = orderStatus
+	}
+	// 设置当前分类的底部字段
+	billData.value.bottomIcons = classifyTabBar.value.find(item => item.selectId == newVal).defaultBottomIcons
+	console.log("当前分类的底部字段", billData.value.bottomIcons)
 })
 
-onMounted(() => {
-})
+onMounted(() => { })
 
+// 点击itemInfo
+const onClickItemInfo = (item) => {
+	console.log(item)
+	if (item.type == 'time') {
+		datePickerData.value.selectDate = item.value;
+		datePickerData.value.endDate = formatTime(new Date());
+		selectItemInfo.value = item
+		timepopup.value.open()
+	} else if (item.type == 'select') {
+		selectItemInfo.value = item
+		timepopup.value.open()
+	} else if (item.type == 'text' || item.type == 'number' || item.type == "digit") {
+		item.focus = false
+		nextTick(() => {
+			item.focus = true
+		})
+	}
+}
+
+const onBottomIconClick = (option) => {
+	if (billData.value.bottomIcons.includes(option.id)) {
+		billData.value.bottomIcons = billData.value.bottomIcons.filter(item => item != option.id)
+	} else {
+		billData.value.bottomIcons.push(option.id)
+	}
+	console.log(billData.value.bottomIcons)
+}
+
+/**
+ * switch切换
+ */
+const onSwitchChange = (e, option) => {
+	const value = e.detail.value
+	billData.value.merchantOption[option.key] = value
+	console.log(billData.value.merchantOption)
+	if (option.change) {
+		option.change(value)
+	}
+}
+
+/**
+ * 格式化时间
+ */
+function formatTime(time) {
+	const newTime = new Date(time)
+	const year = newTime.getFullYear()
+	const month = newTime.getMonth() + 1
+	const date = newTime.getDate()
+	const hours = newTime.getHours()
+	const minutes = newTime.getMinutes()
+	const seconds = newTime.getSeconds()
+	return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
+}
+/**
+ * 关闭时间选择器
+ */
+const closeTimePicker = () => {
+	timepopup.value.close()
+}
+
+/**
+ * 设置时间
+ */
+const settmes = () => {
+	console.log(datePickerData.value.selectDate)
+	billData.value.itemInfoList.forEach(item => {
+		if (item.type == 'time' && selectItemInfo.value.key == item.key) {
+			item.value = datePickerData.value.selectDate
+		}
+	})
+	timepopup.value.close()
+}
+
+/**
+ * 设置分类选择
+ */
+const confirmClassify = () => {
+	billData.value.itemInfoList.forEach(item => {
+		if (item.type == 'select' && selectItemInfo.value.key == item.key) {
+			billClassifyOptions.value.forEach(option => {
+				if (option.id == data.currentClassifyId) {
+					item.value = option.name
+				}
+			})
+		}
+	})
+	timepopup.value.close()
+}
+
+/**
+ * @param {Object} date
+ * 切换时间
+ */
+function onChangeStartDate(date) {
+	datePickerData.value.selectDate = date;
+}
 </script>
 
-<style>
+<style lang="less">
 @import "@/common/main.css";
+@import "@/common/specify-style.less";
 
 page {
 	background-color: #F5F5F5;
 }
 </style>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.tab-bar {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	margin: 22rpx 24rpx;
+	overflow: hidden;
+	overflow-x: scroll;
+
+	.tab-item {
+		display: inline-block;
+		padding: 12rpx 24rpx;
+		background-color: #ffffff;
+		border-radius: 28rpx 28rpx 28rpx 28rpx;
+		width: auto;
+		font-size: 26rpx;
+		line-height: 31rpx;
+		font-weight: 500;
+		margin-right: 16rpx;
+		white-space: nowrap;
+	}
+
+	.blue {
+		color: #1B71F8;
+	}
+}
+
+.add-bill-container {
+	background-color: #ffffff;
+	margin: 24rpx;
+	margin-top: 34rpx;
+	padding: 24rpx;
+	border-radius: 16rpx 16rpx 16rpx 16rpx;
+
+	.random-dice {
+		width: 100%;
+		text-align: right;
+
+		.random-dice-image {
+			width: 64rpx;
+			height: 64rpx;
+		}
+	}
+}
+
+
+
+.avatar-box {
+	margin-top: 12rpx;
+	text-align: center;
+	margin-bottom: 26rpx;
+
+	.avatar-image {
+		width: 80rpx;
+		height: 80rpx;
+	}
+}
+
+.main-info {
+	color: var(--text-color);
+
+	.order-status-info {
+		font-size: 28rpx;
+		margin-top: 12rpx;
+	}
+
+	.isRefund {
+		color: #EA6B48;
+	}
+}
+
+.detail-info-container {
+	padding-top: 36rpx;
+}
+
+.info-item-box {
+	display: flex;
+	align-items: center;
+	margin: 20rpx 0;
+
+	.item-label {
+		min-width: 160rpx;
+		margin-right: 28rpx;
+		font-size: 26rpx;
+		color: var(--text-secondary);
+	}
+}
+
+.info-item-input {
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+	min-width: 20px;
+	max-width: 100%;
+	width: auto;
+	overflow: hidden;
+	min-height: 20px;
+
+	/* 隐藏的测量元素 */
+	.text-measure {
+		visibility: hidden;
+		white-space: nowrap;
+		color: var(--text-color);
+		font-family: inherit;
+		font-size: 28rpx;
+		width: auto;
+		min-width: 20px;
+		height: auto;
+	}
+
+	.visibility {
+		visibility: visible;
+	}
+
+
+	.text-input {
+		font-size: 28rpx;
+		position: absolute;
+		width: calc(100%);
+	}
+}
+
+.edit-image {
+	width: 28rpx;
+	height: 28rpx;
+	margin-left: 10rpx;
+	flex-shrink: 0;
+}
+
+.money {
+	margin-top: 14rpx;
+}
+
+.switch-option-container {
+	margin: 16rpx 24rpx;
+	background-color: #ffffff;
+	border-radius: 16rpx 16rpx 16rpx 16rpx;
+
+	.switch-option {
+		padding: 24rpx;
+		// border-top: 1rpx solid #E4E4E4;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.switch-option-text {
+			font-size: 28rpx;
+		}
+	}
+
+	.switch-option:first-child {
+		border-top: none !important;
+	}
+
+	.service-detail {
+		display: flex;
+		align-items: center;
+		background-color: #F6F7FB;
+		padding: 22rpx 24rpx;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+		margin: 0 18rpx;
+
+		.service-detail-info {
+			margin-left: 8rpx;
+		}
+
+		.service-detail-image {
+			width: 44rpx;
+			height: 44rpx;
+		}
+
+		.enter-mini-program {
+			font-size: 22rpx;
+			color: #969696;
+			margin-left: 6px;
+			line-height: 22rpx;
+		}
+
+		.right-text {
+			font-size: 22rpx;
+			color: #969696;
+			margin-left: 6px;
+			line-height: 22rpx;
+		}
+
+		.right-icon {
+			width: 24rpx;
+			height: 24rpx;
+		}
+
+		.select {
+			flex: none;
+			width: 80px;
+
+			::v-deep .uni-select {
+				font-size: 22rpx;
+				padding: 0 5px !important;
+				min-height: 22rpx !important;
+			}
+
+			::v-deep .uni-select__selector-item {
+				font-size: 22rpx;
+				padding: 0 5px !important;
+			}
+
+			::v-deep .uni-icons {
+				font-size: 22rpx !important;
+
+			}
+		}
+	}
+
+	.recommend-service {
+		background-color: #FFF5F6;
+
+		.text-input {
+			color: #9E2036;
+		}
+	}
+
+	.service-recommend {
+		background-color: #F6F7FB;
+
+		.text-input {
+			color: #123D72;
+		}
+	}
+}
+
+.bill-bottom-icon-options {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 16rpx 24rpx;
+	background-color: #ffffff;
+	border-radius: 16rpx 16rpx 16rpx 16rpx;
+	padding: 22rpx 26rpx;
+
+	.item-option-box {
+		width: calc(100% / 3);
+		// text-align: center;
+		margin: 14rpx 0;
+
+		.item-box {
+			display: inline-flex;
+			font-size: 20rpx;
+			height: 52rpx;
+			padding: 0 18rpx;
+			border-radius: 94rpx 94rpx 94rpx 94rpx;
+			border: 2rpx solid #EDEDED;
+			align-items: center;
+
+			.item-icon {
+				width: 20rpx;
+				height: 20rpx;
+				margin-right: 12rpx;
+			}
+		}
+
+		.active-item-box {
+			background-color: #1B71F8;
+			color: #ffffff;
+			border: none;
+		}
+	}
+
+}
+</style>