tuniao-ui/vipPage/components/cascade-selection/cascade-selection.vue

<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>