front-end/ghsApp/src/components/module/shopSelect.vue

<template>
    <view class="select-bg_bx">
        <view v-if="isShowTit" @click="switchCut" :class="['select-title',dropdownShow?'select_corlor':'']">
            <text>{{showShopName!=''?showShopName: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">门店</view>
                    <view class="item-child_box">
                        <button v-for="(item,index) in shopList" :key="index" @click="changeItem(item)" 
                        :class="['admin-button-com','mini-btn','default']"> {{item.name}} </button>
                    </view>
                </view>
            </slot>
        </view>
    </view>
</template>
<script>
import DropdownList from "@/components/plugin/dropdown-list";
import {mapGetters,mapState} from "vuex";
export default {
    name:'DorpdownSelect',
    components:{
        DropdownList
    },
    props:{
        top:{
            type: String,
            default: 'auto'
        },
        isShowTit:{
            type: Boolean,
            default: true
        },
            typeTime:{
            type: Boolean,
            default: false
        },
        isShowMore:{
            type: Boolean,
            default: true
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    data(){
        return {
            dropdownShow: false,
            selectItem:'',
            showShopName:'',
            shopList:[]
        }
    },
    computed:{
		...mapGetters(["getMyShopInfo"]),
        ...mapState({
			userShopAll:state=>state.user.userShopAll
        }),
    },
    mounted(){
        this.shopList = this.userShopAll.map(i=>({...i,name:i.shopName}))
    },
	watch:{
        userShopAll (val) {
			if(!this.$util.isEmpty(val)) {
				this.shopList = val.map(i=>({
					...i,
					name:i.shopName
				}));
			}
		}
	},
    methods:{
        switchCut(){
            this.dropdownShow = !this.dropdownShow
        },
        changeItem(val){
            this.dropdownShow = false;
            this.showShopName = val.name;
            this.$emit('selectShopFn',val)
        }
    }
}
</script>

<style lang="scss" scoped>
.select-bg_bx {
    .select-title {
        color: #666666;
        font-size: 26upx;
        & .iconsanjiao_xia {
            margin-left: 10upx;
        }
        &.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: 0upx;
        z-index: 20;
    }
    & .select-fixed_bx {
        position: fixed;
        width: 100%;
        background-color: #FFFFFF;
        left: 0upx;
        top:0upx;
        z-index: 29;
        padding:120upx 30upx 40upx;
        border-radius: 0upx 0upx 20upx 20upx;
        transition: all 0.5s ease-in-out;
        & .select-item-box {
            & .title {
                font-size: 24upx;
                color: #333333;
                font-weight: 600;
                text-align: left;
            }
            & .item-child_box {
                padding: 20upx 0 0;
                align-items: center;
                & .admin-button-com {
                    margin-bottom: 20upx;
                    padding: 18upx 50upx;
                    margin-right: 20upx;
                    &.custom {
                        width: 100%;
                    }
                }
            }
        }
    }
}
</style>