front-end/ghsApp/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:getMyShopInfo.shopName}}-->
            <!--{{selectItemId?menuObjActive:''}}-->
														<text v-if="typeTime">{{selectItemId?menuObjActive:menuObj.title}}</text>
														<text v-else>{{menuObjActive?menuObjActive:getMyShopInfo.shopName}}</text>
                            <text v-if="placeholder" style="color: #ccc;">{{placeholder}}</text>
<!--            {{getMyShopInfo?getMyShopInfo.shopName:menuObj.title}}-->
            <i v-if="isShowMore" class="iconfont iconsanjiao_xia"></i>
        </view>
        <view v-else @click="switchCut" :class="['select-title',dropdownShow?'select_corlor':'']">
          <text v-if="placeholder" style="color: #ccc;">{{placeholder}}</text>
        </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
            },
            placeholder: {
              type: String,
              default: ''
            }
        },
        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
                }
            },
        },
        mounted(){

        },
							onLoad(){
							},
        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;
                    // justify-content: space-between;
                    & .admin-button-com {
                        margin-bottom: 20px;
                        padding: 18px 50px;
                        margin-right: 20px;
                        &.custom {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

</style>