完成发票初始版本

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

components/table/table.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/table/table.less

@@ -0,0 +1,69 @@
+@display: table,
+  table-row,
+  table-cell;
+
+each(@display, {
+    .d-@{value} {
+      display: @value  !important;
+    }
+  }
+
+) .d-table-cell {
+  padding: 10px 5px;
+  font-size: 14px;
+  word-break: break-all;
+  min-height: 42px;
+  max-width: 150px;
+  position: relative;
+}
+
+.d-table {
+  background-color: #fff;
+
+  .d-table-row.active {
+    background-color: #d6e8ff;
+  }
+
+  .d-table-row:not(:first-child) {
+    .d-table-cell {
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 1px;
+        background-color: #ddd;
+        transform: scaleY(0.3);
+      }
+    }
+  }
+}
+
+.table {
+  position: relative;
+  background-color: #fff;
+  overflow: hidden;
+  font-size: 13px;
+  width: 100%;
+
+
+}
+
+.table1-view {
+  width: 100%;
+}
+
+.table1 {
+  width: var(--width, 100%);
+  min-width: auto;
+}
+
+.text {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max_line, 2)
+}

components/table/table.wxml

@@ -0,0 +1,22 @@
+<wxs module="getTableWidth">
+  module.exports = function (tableWidth) {
+    if (!tableWidth) {
+      return;
+    }
+    return tableWidth + 'rpx'
+  }
+</wxs>
+<scroll-view hidden="{{!showList.length||!showHeader.length}}" scroll-x class="table1-view" style="--max_line:{{maxLine}};--width:{{getTableWidth(tableWidth)}}">
+  <view class="table1 d-table table-class">
+    <view class="d-table-row tr-class">
+      <view class="d-table-cell th-class" wx:for="{{showHeader}}" wx:key="index">{{item.title}}</view>
+    </view>
+    <view bindtap="onTap" data-index="{{index}}" bindlongpress="onLongPress" class="tr-class d-table-row {{currentIndex===index?'active':''}} {{index%2===0?'tr-class_even':'tr-class_odd'}}" wx:for="{{showList}}" wx:key="index">
+      <view class="d-table-cell td-class " wx:for="{{showHeader}}" wx:for-item="head" wx:for-index="hindex" wx:key="hindex" style="background-color: {{item[head.key].bg}};color:{{item[head.key].color}}">
+        <view class="text">
+          {{item[head.key].text}}
+        </view>
+      </view>
+    </view>
+  </view>
+</scroll-view>

components/table/table.wxss

@@ -0,0 +1,55 @@
+.d-table {
+  display: table !important;
+}
+.d-table-row {
+  display: table-row !important;
+}
+.d-table-cell {
+  display: table-cell !important;
+}
+.d-table-cell {
+  padding: 10px 5px;
+  font-size: 14px;
+  word-break: break-all;
+  min-height: 42px;
+  max-width: 150px;
+  position: relative;
+}
+.d-table {
+  background-color: #fff;
+}
+.d-table .d-table-row.active {
+  background-color: #d6e8ff;
+}
+.d-table .d-table-row:not(:first-child) .d-table-cell::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #ddd;
+  transform: scaleY(0.3);
+}
+.table {
+  position: relative;
+  background-color: #fff;
+  overflow: hidden;
+  font-size: 13px;
+  width: 100%;
+}
+.table1-view {
+  width: 100%;
+}
+.table1 {
+  width: var(--width, 100%);
+  min-width: auto;
+}
+.text {
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max_line, 2);
+}