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"
import { shopAll } from '@/api/common'
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:[]
        }
    },
    watch:{
        dropdownShow: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                if(newVal == true && oldVal == false) { // 开启门店弹窗，请求最新门店数据
                    this.shopList = []
                    shopAll().then(res=>{
                        if(res.code == 1){
                            if (!this.$util.isEmpty(res.data)){
                                res.data.forEach((i) => {
                                    this.shopList.push({id:i.id,name:i.shopName})
                                })
                            }
                        }
                    })
                }
            }
        }
    },
    computed:{
		...mapGetters(["getMyShopInfo"])
    },
    mounted(){
        this.shopList = []
        shopAll().then(res=>{
            if(res.code == 1){
                if (!this.$util.isEmpty(res.data)){
					res.data.forEach((i) => {
						this.shopList.push({id:i.id,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:110upx 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>