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':'']"
    >
      <!--            {{menuObjActive?menuObjActive:menuObj.title}}-->
      <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>
        <view
          v-if="typeSelect === 1"
          class="select-item-box"
        >
          <view class="title">其他时间选择</view>
          <view class="item-child_box">
            <view
              class="admin-button-com mini-btn default custom"
              @tap="changeItem({name:'自定义',id:'custom'})"
            >自定义</view>
            <!--                        <picker-->
            <!--                            class="admin-button-com mini-btn default custom"-->
            <!--                                mode="date" :value="selectItemId" @change="endTimeFn">-->
            <!--                            <div v-if="selectItemId&&formatSelect">{{ selectItemId }}</div>-->
            <!--                            <div class="tui-placeholder" v-else>自定义时间</div>-->
            <!--                        </picker>-->
          </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' }]
      })
    },
    // 1 是时间  2是其他
    typeSelect: {
      type: Number,
      default: 2
    },
    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) {
      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: 0;
    z-index: 999;
    // box-shadow: 0 6px 10px #cccccc;
    padding: 120px 30px 40px;
    border-radius: 0px 0px 20px 20px;
    transition: all 0.5s ease-in-out;
    // top: 100px;
    & .select-item-box {
      & .title {
        font-size: 24px;
        color: #333333;
        font-weight: 600;
        text-align: left;
      }
      & .item-child_box {
        // display: flex;
        padding: 20px 0 0;
        align-items: center;
        // flex-flow: wrap;
        display: inline-block;
        // justify-content: space-between;
        & .admin-button-com {
          margin-bottom: 20px;
          margin-right: 20px;
          padding: 18px 50px;
          &.custom {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>