front-end/jdApp/src/components/module/shopSelect.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>
            <text v-if="placeholder" style="color: #ccc;">{{placeholder}}</text>
            <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" @click="DatePicker()">选择时间段（滑动切换月份）</view></view>
                </view>
            </slot>
        </view>
        <mx-date-picker :show="showPicker" format="yyyy-mm-dd" type="range" :value="defaultPickerDate" 
            :show-tips="false" :begin-text="'开始'" :end-text="'结束'" @confirm="confirmPicker" @cancel="cancelPicker" />
    </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 MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
import {mapGetters} from "vuex";
export default {
    name:'DorpdownSelect',
    components:{
        DropdownList,AppDatePicker,rangeDatePick,MxDatePicker
    },
    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 {
            defaultPickerDate:['2019-01-01','2019-01-06'],
            showPicker: false,
            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:{
        DatePicker(){//显示
            this.showPicker = true;
        },
        confirmPicker(e) {//选择

            this.showPicker = false;
            this.dropdownShow = false;
            this.$emit('update:selectItemId','custom')            
            this.$emit('selectSussess',{
                custom:1,start:e['value'][0],end:e['value'][1]
            })
            this.menuObjActive = '自定义';
        },
        cancelPicker(e){//取消
            this.showPicker = false;
        },
        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: 20;
    }
    & .select-fixed_bx {
        position: fixed;
        width: 100%;
        background-color: #FFFFFF;
        left: 0;
        z-index: 29;
        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;
                & .admin-button-com {
                    margin-bottom: 20px;
                    padding: 18px 50px;
                    margin-right: 20px;
                    &.custom {
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>