更新众多VIP页面模板

2026-06-08 04:23:17 +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,209 @@
+<template>
+  <view class="vip-component-cascade-selection tn-safe-area-inset-bottom">
+    
+    <!-- 顶部自定义导航 -->
+    <tn-nav-bar fixed>级联选择</tn-nav-bar>
+      
+    <!-- 页面内容 -->
+    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
+      
+      <demo-title title="基础">
+        <tn-cascade-selection :list="list" @complete="handleCompleteSelection"></tn-cascade-selection>
+      </demo-title>
+      
+      <demo-title title="设置默认值">
+        <tn-cascade-selection :list="list" :defaultValue="defaultValue" @complete="handleCompleteSelection"></tn-cascade-selection>
+      </demo-title>
+      
+      <demo-title title="异步加载">
+        <tn-cascade-selection :list="asyncList" request :receiveData="receiveData" @complete="handleCompleteSelection2" @change="handleChangeSelection"></tn-cascade-selection>
+      </demo-title>
+      
+      <view class="tn-padding-bottom-lg"></view>
+    </view>
+    
+  </view>
+</template>
+
+<script>
+  import demoTitle from '@/libs/components/demo-title.vue'
+  import city from '../../static/mock/cascade-city.js'
+  export default {
+    name: 'VipComponentsCascadeSelection',
+    components: {demoTitle},
+    data() {
+      return {
+        list: city,
+        asyncList: [
+          {
+            text: '总经办',
+            subText: '10人',
+            src: '/static/favicon.ico',
+            value: 1
+          },
+          {
+            text: '财务',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 2
+          },
+          {
+            text: '采购',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 3
+          },
+          {
+            text: '销售',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 4
+          },
+          {
+            text: '售后',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 5
+          },
+          {
+            text: '研发',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 6
+          },
+          {
+            text: '质检',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 7
+          },
+          {
+            text: '生产',
+            subText: '30人',
+            src: '/static/favicon.ico',
+            value: 8
+          }
+        ],
+        receiveData: [],
+        defaultValue: ['440000','440100','440113']
+      }
+    },
+    methods: {
+      // 处理完成选中回调
+      handleCompleteSelection(e) {
+        this.$tn.message.toast(e.text)
+      },
+      // 处理异步请求完成选中回调
+      handleCompleteSelection2(e) {
+        this.$tn.message.toast(e.text)
+      },
+      // 处理异步请求列切换
+      handleChangeSelection(e) {
+        const {
+          index,
+          text,
+          value
+        } = e
+        if (index === 7) {
+          //实际中以请求数据为准，无下级数据则传空数组
+          this.receiveData = []
+        } else {
+          uni.showLoading({
+            title: '请求中...'
+          })
+          setTimeout(() => {
+            //请求完成后将数据处理成以下格式，传入，最后一级没有则传空数组
+            switch (index) {
+              case 0:
+                const data = []
+                for (let i = 0; i < (value === 1 ? 10 : 30); i++) {
+                  data.push({
+                    text: text + '员工' + (i + 1),
+                    subText: i % 2 === 0 ? '男' : '女',
+                    value: Number(value + i + '')
+                  })
+                }
+                this.receiveData = data
+                break
+              case 1:
+                this.receiveData = [
+                  {
+                    text: '他说',
+                    value: 0
+                  },{
+                    text: '她说',
+                    value: 1
+                  }
+                ]
+                break
+              case 2:
+                this.receiveData = [
+                  {
+                    text: '我要加工资',
+                    value: 0
+                  },{
+                    text: '我要加班班',
+                    value: 1
+                  }
+                ]
+                break
+              case 3:
+                this.receiveData = [
+                  {
+                    text: '老板回复',
+                    value: 0
+                  },{
+                    text: '直接辞退',
+                    value: 1
+                  }
+                ]
+                break
+              case 4:
+                if (value === 0) {
+                  this.receiveData = [
+                    {
+                      text: '等明年吧',
+                      value: 0
+                    },{
+                      text: '批准',
+                      value: 1
+                    }
+                  ]
+                } else {
+                  this.receiveData = []
+                }
+                break
+              case 5:
+                this.receiveData = [
+                  {
+                    text: '巴拉巴拉',
+                    value: 0
+                  },{
+                    text: '沉默了啊',
+                    value: 1
+                  }
+                ]
+                break
+              case 6:
+                this.receiveData = [
+                  {
+                    text: '结束了',
+                    value: 0
+                  }
+                ]
+                break
+            }
+            uni.hideLoading()
+          }, 2000)
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .vip-component-cascade-selection {
+    background-color: $tn-bg-gray-color;
+    min-height: 100vh;
+  }
+</style>