gterFang/src/components/indexSeachInfo/indexSeachInfo.vue

<template>
    <div style="margin-top:15px;">
        <div class="title-box">
            <div class="box"></div>
            <div class="title">{{ title }}</div>
        </div>
        <div style="padding:0 0 0 18px;">
            <div class="info-box-bg">
                <div class="box"
                    :class="[{ 'pad-15': seachType === '3' }]">
                    <div @click="setSelectType(i+1,item.data,item)" v-for="(item, i) in btn.data" :key="i" :class="[
                        { 'btn': seachType === '1' },
                        { 'mg-l-17': seachType === '1' && i % 5 !== 0 },
                        { 'seach-long-btn btn': seachType === '2' },
                        { 'mg-l-17': seachType === '2' && i % 3 !== 0 },
                        { 'select-btn': seachType === '3' },
                        { 'mg-l-17': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
                    ]">
                        {{ item.name }}
                        <img v-if="seachType === '3'"
                            :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
                            class="img" alt="">
                    </div>
                </div>
                <div v-if="seachType === '3'" class="hid-box">
                    <checkBoxGroup :show="selectType !== ''" :selectSeach="selectSeach" :closeSeach="closeSeach" :list="selectData.data">
                    </checkBoxGroup>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, ref, watchEffect } from 'vue';
import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";

const props = defineProps({
    seachType: {
        type: String,
        default: null
    },
    title: {
        type: String,
        default: '123'
    },
    btn: {
        type: Array,
        default: function () {
            return []
        }
    },
    checkBtn:{
        type:Function
    }
})

let seachType = props.seachType
let title = props.title
let btn = reactive({data:[]})
//数据更新监听
watchEffect(()=>{
    btn.data= JSON.parse(JSON.stringify(props.btn))
})

//
let selectType = ref('')
let selectData = reactive({data:[]})
let nowSelectArea=reactive({data:{}})
//点击选项
let setSelectType = (num,data,item) => {
    if (seachType == 3) {
        if (num === selectType.value) {
            selectType.value = ''
            nowSelectArea.data={}
        } else {
            selectType.value = num
            selectData.data=data
            nowSelectArea.data={id:item.id,name:item.name}
        }
    }else if(seachType == 2){
        props.checkBtn(item,'types')
    }else if(seachType == 1){
        props.checkBtn(item,'school')
    }
}
//取消按钮
let closeSeach = () => {
    selectType.value = ''
}

//确认按钮
let selectSeach = (data) => {
    props.checkBtn(data,'location',JSON.stringify(nowSelectArea.data))
    // console.log(data)
}

</script>
<style scoped>
.pad-15 {
    padding: 0 15px 0px 15px !important;
}

.jus-sp {
    justify-content: space-around;
}

.title-box {
    display: flex;
    align-items: center;

    .box {
        width: 5px;
        height: 16px;
        background: inherit;
        background-color: rgba(80, 227, 194, 1);
        border: none;
        border-radius: 40px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .title {
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
        font-weight: 650;
        font-style: normal;
        font-size: 16px;
        color: #000000;
        text-align: left;
        margin-left: 10px;
    }
}

.info-box-bg {
    margin-top: 22px;
    background: #d7d7d7 !important;
    background: inherit;
    border: none;
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    width: 550px;
    position: relative;

    .hid-box {
        position: absolute;
        top: 100px;
        width: 100%;
        z-index: 666;
    }

    .box {
        display: flex;
        flex-wrap: wrap;
        background: #FFFFFF;
        transform: translate(0, -4px);
        border-radius: 16px;
        padding: 0 15px 10px 15px;
        -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    }

    .select-btn-click {
        border: 1px solid rgba(80, 227, 194, 1) !important;
        color: rgba(80, 227, 194, 1) !important;
    }

    .select-btn {
        width: 162px;
        height: 40px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 235, 235, 1);
        border-radius: 76px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #555555;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 27px 0;
        cursor: pointer;

        .img {
            width: 14px;
            height: 14px;
            object-fit: contain;
            margin-left: 10px;
        }
    }

    .seach-long-btn {
        width: 161px !important;
        height: 32px !important;
        cursor: pointer;
    }

    .btn {
        width: 90px;
        height: 32px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(235, 235, 235, 1);
        border-radius: 35px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #555555;
        line-height: 32px;
        text-align: center;
        margin-top: 10px;
        cursor: pointer;
    }

    .mg-l-17 {
        margin-left: 17px;
    }

}

/deep/ .el-checkbox__inner {
    border-radius: 4px;
}

/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: rgba(80, 227, 194, 1);
    border-color: rgba(80, 227, 194, 1);
}

/deep/ .el-checkbox__inner:hover {
    border-color: rgba(80, 227, 194, 1);
}

/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    color: rgba(80, 227, 194, 1);
}
</style>