完成发票初始版本

components/table/table.js

@@ -0,0 +1,104 @@
+// components/table/table/table.js
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  externalClasses: ['table-class', 'tr-class', 'td-class', 'th-class', 'tr-class_even', 'tr-class_odd'],
+  properties: {
+    colWidth: Number,
+    isScroll: {
+      type: Boolean,
+      value: false
+    },
+    header: {
+      type: Array,
+      value: []
+    },
+    list: {
+      type: Array,
+      value: []
+    },
+    showActive: {
+      type: Boolean,
+      value: true
+    },
+    activeColor: {
+      type: String,
+      value: '#d6e8ff'
+    },
+    maxLine: {
+      type: Number,
+      value: 2
+    }
+  },
+
+  observers: {
+    'header,list': function (header, list) {
+      this.init();
+    }
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    setWidth (head) {
+      const colWidth = this.data.colWidth || head.length < 3 ? (730 / head.length) : 300;
+      const tableWidth = head.length >= 1 && this.data.isScroll ? head.length * colWidth : null;
+      this.setData({ tableWidth });
+    },
+    init () {
+      !this.data.tableWidth && this.setWidth(this.data.header);
+      const { list, header } = this.data;
+      let showHeader = JSON.parse(JSON.stringify(header));
+      let showList = JSON.parse(JSON.stringify(list));
+      showHeader.forEach((head, headIndex) => {
+        showList.forEach((item, index) => {
+          const body = header[headIndex].renderBody && header[headIndex].renderBody(item, index);
+          const color = header[headIndex].renderColor && header[headIndex].renderColor(item, index);
+          const bg = header[headIndex].renderBg && header[headIndex].renderBg(item, index);
+          if (body !== undefined) {
+            head.key = `col${headIndex}`;
+            item[`col${headIndex}`] = {};
+            item[`col${headIndex}`].text = body;
+          } else if (head.key) {
+            const text = item[head.key];
+            item[head.key] = { text };
+          }
+          if (color && head.key) {
+            item[head.key].color = color;
+          }
+          if (bg && head.key) {
+            item[head.key].bg = bg;
+          }
+        });
+      });
+      this.setData({ showHeader, showList });
+    },
+    checkRow (index) {
+      if (!this.data.showActive) {
+        return;
+      }
+      index = /\d+/.test(index) ? index : 0;
+      this.setData({ currentIndex: index });
+    },
+    onLongPress (e) {
+      const { index } = e.currentTarget.dataset;
+      this.checkRow(index);
+      const data = this.data.list[index];
+      this.triggerEvent('onLongPress', { index, data });
+    },
+    onTap (e) {
+      const { index } = e.currentTarget.dataset;
+      this.checkRow(index);
+      const data = this.data.list[index];
+      this.triggerEvent('onClick', { index, data });
+    }
+  }
+});