sulibao-mini/tuniao-ui/components/tn-list-view/tn-list-view.vue

<template>
  <view
    class="tn-list-view-class tn-list-view"
    :class="[
      backgroundColorClass,
      viewClass
    ]"
    :style="[viewStyle]"
  >
    <view
      v-if="showTitle"
      class="tn-list-view__title"
      :class="[
        fontColorClass
      ]"
      :style="[titleStyle]"
      @tap="handleClickTitle"
    >{{ title }}</view>
    
    <view
      v-else
      :class="[{'tn-list-view__title--card': card}]"
      @tap="handleClickTitle"
    >
      <slot name="title"></slot>
    </view>
    
    <view
      class="tn-list-view__content tn-border-solid-top tn-border-solid-bottom"
      :class="[contentClass]"
    >
      <slot></slot>
    </view>
  </view>
</template>

<script>
  import componentsColorMixin from '../../libs/mixin/components_color.js'
  export default {
    mixins: [ componentsColorMixin ],
    name: 'tn-list-view',
    props: {
      // 标题
      title: {
        type: String,
        default: ''
      },
      // 去掉边框 上边框 top, 下边框 bottom, 所有边框 all
      unlined: {
        type: String,
        default: 'all'
      },
      // 上外边距
      marginTop: {
        type: String,
        default: ''
      },
      // 内容是否显示为卡片模式
      card: {
        type: Boolean,
        default: false
      },
      // 是否自定义标题
      customTitle: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      showTitle() {
        return !this.customTitle && this.title
      },
      viewClass() {
        let clazz = ''
        
        if (this.card) {
          clazz += ' tn-list-view--card'
        }
        
        return clazz
      },
      viewStyle() {
        let style = {}
        
        if (this.backgroundColorStyle) {
          style.backgroundColor = this.backgroundColorStyle
        }
        
        if (this.marginTop) {
          style.marginTop = this.marginTop
        }
        
        return style
      },
      titleStyle() {
        let style = {}
        
        if (this.fontColorStyle) {
          style.color = this.fontColorStyle
        }
        if (this.fontSize) {
          style.fontSize = this.fontSize + this.fontUnit
        }
        
        return style
      },
      contentClass() {
        let clazz = ''
        
        if (this.card) {
          clazz += ' tn-list-view__content--card'
        }
        
        switch(this.unlined) {
          case 'top':
            clazz += ' tn-none-border-top'
            break
          case 'bottom':
            clazz += ' tn-none-border-bottom'
            break
          case 'all':
            clazz += ' tn-none-border'
            break
        }
        
        return clazz
      }
    },
    data () {
      return {
        kindShowFlag: this.showKind
      }
    },
    methods: {
      // 处理标题点击事件
      handleClickTitle() {
        if (!this.kindList) return
        this.kindShowFlag = !this.kindShowFlag
        this.$emit("clickTitle", {})
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .tn-list-view {
    background-color: #FFFFFF;
    
    &__title {
      width: 100%;
      padding: 30rpx;
      font-size: 30rpx;
      line-height: 30rpx;
      box-sizing: border-box;
      
      &--card {
        // margin: 0rpx 30rpx;
      }
    }
    
    &__content {
      width: 100%;
      position: relative;
      border-radius: 0;
      
      &--card {
        // width: auto;
        // overflow: hidden;
        // margin-right: 30rpx;
        // margin-left: 30rpx;
        // border-radius: 20rpx
      }
    }
    
    &--card {
      // padding-bottom: 30rpx;
      border-radius: 20rpx;
      overflow: hidden;
    }
    
  }
  
</style>