更新众多VIP页面模板

2026-06-07 03:53:57 +08:00 · 2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
@@ -0,0 +1,68 @@
+<template>
+  <view class="vip-components-table__multi-header">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>多表头表格</tn-nav-bar>
+    
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="多表头表格">
+        <tn-table>
+          <tn-tr backgroundColor="tn-bg-green--light">
+            <tn-td :bold="true" :span="6">日期</tn-td>
+            <tn-td :borderRight="true" :bold="true" :span="12" :ellipsis="true" padding="0">
+              <tn-td :bold="true" :borderBottom="true" :borderRight="false" alignItems="center">金额</tn-td>
+              <tn-tr borderWidth="0" backgroundColor="tn-bg-green--light">
+                <tn-td :bold="true" alignItems="center" borderWidth="1rpx">金额</tn-td>
+                <tn-td :bold="true" alignItems="center">收益</tn-td>
+              </tn-tr>
+            </tn-td>
+            <tn-td :span="6">备注</tn-td>
+          </tn-tr>
+          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
+            <tn-td v-for="(data, idx) in header" :key="idx" :span="6" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
+          </tn-tr>
+        </tn-table>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+      
+    </view>
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  export default {
+    name: 'VipComponentsMultiHeaderTable',
+    components: { demoTitle },
+    data() {
+      return {
+        header: [
+          { title: '日期', key: 'date' },
+          { title: '金额', key: 'salePrice' },
+          { title: '收益', key: 'income' },
+          { title: '备注', key: 'note' }
+        ],
+        listData: [
+          { id: 1, date: '20220301', salePrice: '1,000', income: '800', note: '今天的销售额一般般呀' },
+          { id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', note: '今天的销售额还不错嘛' },
+          { id: 3, date: '20220303', salePrice: '4000', income: '2000', note: '今天的销售额还行啦' }
+        ]
+      }
+    },
+    methods: {
+      // 处理点击事件
+      handleClick(e, id) {
+        this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-components-table__multi-header {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>