refactor:证书表格样式修改

src/components/t-table/t-table.vue

+<template>
+	<view class="t-table" :style="{ 'border-width': border + 'px', 'border-color': borderColor }">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			border: {
+				type: String,
+				default: '1'
+			},
+			borderColor: {
+				type: String,
+				default: '#d0dee5'
+			},
+			isCheck: {
+				type: Boolean,
+				default: false
+			}
+		},
+		provide() {
+			return {
+				table: this
+			};
+		},
+		data() {
+			return {};
+		},
+		created() {
+			this.childrens = [];
+			this.index = 0;
+		},
+		methods: {
+			fire(e, index, len) {
+				let childrens = this.childrens;
+				console.log(childrens);
+				// 全选
+				if (index === 0) {
+					childrens.map((vm, index) => {
+						vm.checkboxData.checked = e;
+						return vm;
+					});
+				} else {
+					let isAll = childrens.find((n, ids) => ids !== 0 && !n.checkboxData.checked);
+					childrens[0].checkboxData.checked = isAll ? false : true;
+				}
+
+				let fireArr = [];
+				for (let i = 0; i < childrens.length; i++) {
+					if (childrens[i].checkboxData.checked && i !== 0) {
+						fireArr.push(childrens[i].checkboxData.value - 1);
+					}
+				}
+				this.$emit('change', {
+					detail: fireArr
+				});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.t-table {
+		width: 100%;
+		border: 1px #d0dee5 solid;
+		border-left: none;
+		border-top: none;
+		box-sizing: border-box;
+	}
+
+	.t-table>>>t-tr {
+		display: flex;
+	}
+
+	.t-table>>>t-tr:nth-child(2n) {
+		background: #f5f5f5;
+	}
+
+	/* #ifdef H5 */
+	.t-table>>>.t-tr:nth-child(2n) {
+		background: #f5f5f5;
+	}
+	/* #endif */
+</style>

src/components/t-table/t-td.vue

+<template>
+  <view
+    class="t-td"
+    :style="{
+      'border-width': thBorder + 'px',
+      'border-color': borderColor,
+      'font-size': fontSize + 'px',
+      color: color,
+      'justify-content': tdAlignCpd,
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    align: String,
+  },
+  data() {
+    return {
+      thBorder: '1',
+      borderColor: '#d0dee5',
+      fontSize: '14',
+      color: '#555c60',
+      tdAlign: 'center',
+    }
+  },
+  inject: ['table', 'tr'],
+
+  created() {
+    this.thBorder = this.table.border
+    this.borderColor = this.table.borderColor
+    this.fontSize = this.tr.fontSize
+    this.color = this.tr.color
+    if (this.align) {
+      this.tdAlign = this.align
+    } else {
+      this.tdAlign = this.tr.align
+    }
+  },
+  computed: {
+    tdAlignCpd() {
+      let nameAlign = ''
+      switch (this.tdAlign) {
+        case 'left':
+          nameAlign = 'flex-start'
+          break
+        case 'center':
+          nameAlign = 'center'
+          break
+        case 'right':
+          nameAlign = 'flex-end'
+          break
+        default:
+          nameAlign = 'center'
+          break
+      }
+      return nameAlign
+    },
+  },
+}
+</script>
+
+<style>
+.t-td {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 14upx;
+  border-top: 1px #d0dee5 solid;
+  border-left: 1px #d0dee5 solid;
+  text-align: center;
+  color: #555c60;
+  font-size: 28upx;
+}
+</style>

src/components/t-table/t-th.vue

+<template>
+	<view class="t-th" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor,'font-size':fontSize+'px' ,'color':color,'justify-content':thAlignCpd}">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			align: String,
+		},
+		data() {
+			return {
+				thBorder: '1',
+				borderColor: '#d0dee5',
+				fontSize: '15',
+				color: '#3b4246',
+				thAlign: 'center'
+			};
+		},
+		inject: ['table', 'tr'],
+
+		created() {
+			this.thBorder = this.table.border;
+			this.borderColor = this.table.borderColor;
+			this.fontSize = this.tr.fontSize;
+			this.color = this.tr.color;
+			if (this.align) {
+				this.thAlign = this.align;
+			} else {
+				this.thAlign = this.tr.align
+			}
+		},
+
+		computed: {
+			thAlignCpd() {
+				let nameAlign = '';
+				switch (this.thAlign) {
+					case 'left':
+						nameAlign = 'flex-start'
+						break;
+					case 'center':
+						nameAlign = 'center'
+						break;
+					case 'right':
+						nameAlign = 'flex-end'
+						break;
+					default:
+						nameAlign = 'center'
+						break;
+				}
+				return nameAlign
+			}
+		}
+	};
+</script>
+
+<style>
+	.t-th {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		font-size: 30upx;
+		font-weight: bold;
+		text-align: center;
+		color: #3b4246;
+		border-left: 1px #d0dee5 solid;
+		border-top: 1px #d0dee5 solid;
+		padding: 15upx;
+	}
+</style>

src/components/t-table/t-tr.vue

+<template>
+	<view class="t-tr">
+		<view v-if="isCheck" class="t-check-box" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor}">
+			<checkbox-group @change="checkboxChange">
+				<checkbox :value="checkboxData.value + ''" :checked="checkboxData.checked" />
+			</checkbox-group>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			fontSize: String,
+			color: String,
+			align: String
+		},
+		inject: ['table'],
+		provide() {
+			return {
+				tr: this
+			};
+		},
+		data() {
+			return {
+				isCheck: false,
+				checkboxData: {
+					value: 0,
+					checked: false
+				},
+				checked: false,
+				thBorder: '1',
+				borderColor: '#d0dee5'
+			};
+		},
+		created() {
+			this.thBorder = this.table.border;
+			this.borderColor = this.table.borderColor;
+			this.table.childrens.push(this);
+			this.checkboxData.value = this.table.index++;
+			this.isCheck = this.table.isCheck;
+
+		},
+		methods: {
+			checkboxChange(e) {
+				this.checkboxData.checked = !this.checkboxData.checked;
+				this.table.childrens[this.checkboxData.value] = this;
+				this.table.fire(e.detail.value[0] ? true : false, this.checkboxData.value, this.table.index);
+			}
+		}
+	};
+</script>
+
+<style>
+	.t-tr {
+		width: 100%;
+		display: flex;
+	}
+
+	.t-tr t-th,
+	.t-tr t-td {
+		display: flex;
+		flex: 1;
+	}
+
+	.t-tr .t-check-box {
+		flex-shrink: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 80upx;
+		color: #3b4246;
+		border-left: 1px #d0dee5 solid;
+		border-top: 1px #d0dee5 solid;
+	}
+
+	.t-tr .t-check-box checkbox {
+		transform: scale(0.8);
+	}
+</style>

src/pages/cert/detail.vue

@@ -17,17 +17,13 @@
           <view class="item" v-for="(data, k) in dataList">
             <view class="name">{{ certName[k] }}</view>
             <view class="table">
-              <u-table border-color="#9EA5BB">
-                <u-tr v-for="(item, i) in data" :key="i" class="u-tr">
-                  <u-td
-                    v-for="(val, name, index) in item"
-                    :key="index"
-                    class="u-td bg-td"
-                  >
-                    {{ val }}
-                  </u-td>
-                </u-tr>
-              </u-table>
+              <t-table @change="change" border-color="#9EA5BB">
+                <t-tr v-for="item in data" :key="item.id">
+                  <t-td v-for="(val, name, index) in item" :key="index">{{
+                    val
+                  }}</t-td>
+                </t-tr>
+              </t-table>
             </view>
           </view>
         </view>
@@ -41,7 +37,18 @@
 </template>
 
 <script>
+import tTable from '@/components/t-table/t-table.vue'
+import tTh from '@/components/t-table/t-th.vue'
+import tTr from '@/components/t-table/t-tr.vue'
+import tTd from '@/components/t-table/t-td.vue'
+
 export default {
+  components: {
+    tTable,
+    tTh,
+    tTr,
+    tTd,
+  },
   data() {
     return {
       dataList: [],
@@ -104,6 +111,15 @@ export default {
     },
   },
   methods: {
+    change(e) {
+      console.log(e.detail)
+    },
+    edit(item) {
+      uni.showToast({
+        title: item.name,
+        icon: 'none',
+      })
+    },
     formatDataByType() {
       console.log('shoudao param', getApp().globalData.certItemData)
       if (!getApp().globalData.certItemData) {
@@ -171,7 +187,7 @@ export default {
   background-color: #ffffff;
   text-align: center;
   border-radius: 12rpx;
-  padding: 30rpx;
+  padding: 24rpx;
   position: relative;
   .top {
     height: 116rpx;
@@ -192,15 +208,19 @@ export default {
     .table {
       /* background-color: #2953ff; */
       min-height: 200rpx;
-      ::v-deep .u-td {
-        font-weight: bold;
-        color: #5a6073;
+      ::v-deep t-td .t-td {
+        font-size: 22rpx !important;
+        font-weight: bold !important;
+        padding: 24rpx 2rpx !important;
       }
-      ::v-deep .bg-td:nth-of-type(2n + 1) {
+      ::v-deep t-td:nth-of-type(2n + 1) .t-td {
         background-color: #e8ebf3 !important;
-        font-weight: bold !important;
         color: #191c27;
       }
+      ::v-deep t-td:nth-of-type(2n) .t-td {
+        background-color: #ffffff !important;
+        color: #5a6073;
+      }
     }
   }
   .foot {
@@ -223,12 +243,5 @@ export default {
     font-size: 24rpx;
     color: #5a6073;
   }
-  .u-tr ::v-deep .u-td {
-    font-size: 22rpx !important;
-    height: 80rpx;
-  }
-  .u-tr ::v-deep .u-td .u-td {
-    padding: 5rpx 0 !important;
-  }
 }
 </style>