front-end/hdApp/src/components/module/dorpdownSelect.vue

<template>
  <view class="select-bg_bx">
    <view v-if="isShowTit" @click="switchCut" :class="['select-title',dropdownShow?'select_corlor':'']" >
      <text v-if="typeTime">{{selectItemId?menuObjActive:menuObj.title}}</text>
      <text v-else>{{menuObjActive?menuObjActive:getMyShopInfo.shopName}}</text>
      <i v-if="isShowMore" class="iconfont iconsanjiao_xia" ></i>
    </view>
    <view class="select-mark-view" v-show="dropdownShow" @click="switchCut" ></view>
    <view v-if="dropdownShow" :style="{ top }" class="select-fixed_bx" >
      <slot>
        <view class="select-item-box">
          <view class="title">{{menuObj.titleChild}}</view>
          <view class="item-child_box">
            <button v-for="(item,index) in menuObj.list" :key="index" @click="changeItem(item)" :class="['admin-button-com','mini-btn',selectItemId === item.id?'blue':'default']" >
              {{item.name}}
            </button>
          </view>
        </view>
      </slot>
    </view>
  </view>
</template>
<script>
import DropdownList from "@/components/plugin/dropdown-list";
import AppDatePicker from "@/components/app-date-picker";
import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
import { mapGetters } from "vuex";
export default {
  name: 'DorpdownSelect',
  components: {
    DropdownList, AppDatePicker, rangeDatePick
  },
  props: {
    menuObj: {
      type: Object,
      default: () => ({
        title: '时间',
        titleChild: '时间',
        list: [{ name: '昨天', id: '0' }, { name: '今天', id: '1' }, { name: '本月', id: '2' }, { name: '上月', id: '3' }, { name: '今年', id: '4' }]
      })
    },
    top: {
      type: String,
      default: 'auto'
    },
    selectItemId: {
      type: [String, Number],
      default: ''
    },
    isShowTit: {
      type: Boolean,
      default: true
    },
    typeTime: {
      type: Boolean,
      default: false
    },
    isShowMore: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      dropdownShow: false,
      selectItem: '',
      menuObjActive: '',
    }
  },
  computed: {
    ...mapGetters(["getMyShopInfo"]),
    formatSelect () {
      if (!this.$util.isEmpty(this.selectItemId) &&
        this.$util.isString(this.selectItemId) &&
        this.selectItemId.split('-').length > 1) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    switchCut () {
      this.dropdownShow = !this.dropdownShow
    },
    changeItem (val) {
      console.log(this.menuObj)
      console.log('abc')
      if (val.id == this.selectItemId && val.name != '自定义') {
        return false
      }
      this.$emit('update:selectItemId', val.id)
      this.dropdownShow = false;
      this.$emit('update:menuObj', {
        ...this.menuObj,
        title: val.name
      })
      this.menuObjActive = val.name;
      this.$emit('selectSussess', {
        select: this.$util.isString(val) ? val : val.name,
        selectItem: val
      })
    },
    endTimeFn (e) {
      this.selectItemId = e.detail.value;
      this.dropdownShow = false;
      this.$emit('update:selectItemId', val.id)
      this.$emit('update:menuObj', {
        ...this.menuObj,
        title: e.detail.value
      })
      this.$emit('selectSussess', {
        select: e.detail.value,
        selectItem: val
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.select-bg_bx {
  .select-title {
    color: #666666;
    font-size: 26px;
    & .iconsanjiao_xia {
      margin-left: 10px;
    }
    &.select_corlor {
      color: #3385ff;
      & .iconsanjiao_xia {
        transform: rotate(180deg);
      }
    }
  }
  .select-mark-view {
    height: 100vh;
    height: 100%;
    position: fixed;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0px;
    z-index: 900;
  }
  & .select-fixed_bx {
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    left: 0upx;
    top:0upx;
    z-index: 999;
    padding: 120px 30px 40px;
    border-radius: 0px 0px 20px 20px;
    transition: all 0.5s ease-in-out;
    & .select-item-box {
      & .title {
        font-size: 24px;
        color: #333333;
        font-weight: 600;
        text-align: left;
      }
      & .item-child_box {
        padding: 20px 0 0;
        align-items: center;
        display: inline-block;
        & .admin-button-com {
          margin-bottom: 20px;
          margin-right: 20px;
          padding: 18px 50px;
          &.custom {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>