fini-ui/src/views/login/components/Select.vue

<template>
    <div class="selectWrap" v-if="showSelect" @click="preVant">
        <div class="box">
            <div class="content">
                <li>
                    <div class="word" @click="checkAll(1)">
                        {{ $t(i18n.global.t('home.title.All')) }}
                        <div class="check">
                            <el-icon v-if="checkedAll == 1">
                                <Check></Check>
                            </el-icon>
                        </div>
                    </div>
                    <div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
                        <div class="check">
                            <el-icon v-if="checkedAll == 2">
                                <Check></Check>
                            </el-icon>
                        </div>

                    </div>
                </li>
                <div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
                <li>
                    <div class="word" v-for="item in obj.ipoStatus" :key="item.key"
                        @click="checkOne(item.key, 'ipoStatus')">
                        <div class="check">
                            <el-icon v-if="item.isSelcted">
                                <Check />
                            </el-icon>
                        </div>
                        <span>{{ item.value }}</span>
                    </div>
                </li>
                <div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
                <li>
                    <div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
                        @click="checkOne(item.key, 'tradingCurrency')">
                        <div class="check">
                            <el-icon v-if="item.isSelcted">
                                <Check />
                            </el-icon>
                        </div>
                        <span>{{ item.value }}</span>
                    </div>
                </li>
                <div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
                <li>
                    <div class="word" v-for="item in obj.offeringType" :key="item.key"
                        @click="checkOne(item.key, 'offeringType')">
                        <div class="check">
                            <el-icon v-if="item.isSelcted">
                                <Check />
                            </el-icon>
                        </div>
                        <span>{{ item.value }}</span>
                    </div>
                </li>
                <div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
                <li>
                    <div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key"
                        @click="checkOne(item.key, 'SecuritiestobeListed')">
                        <div class="check">
                            <el-icon v-if="item.isSelcted">
                                <Check />
                            </el-icon>
                        </div>
                        <span>{{ item.value }}</span>
                    </div>
                </li>
                <!-- <div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
                <li>
                    <div class="word" v-for="item in obj.ListingPlatform" :key="item.key"
                        @click="checkOne(item.key, 'ListingPlatform')">
                        <div class="check">
                            <el-icon v-if="item.isSelcted">
                                <Check />
                            </el-icon>
                        </div>
                        <span>{{ item.value }}</span>
                    </div>
                </li> -->
          
            </div>
            <div class="footer">
                <button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
                <button @click="Cancel">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>

            </div>
        </div>

    </div>
</template>

<script lang="ts">
export default {
    name: "XSelect",
};
</script>

<script lang="ts" setup>
import { ref, defineExpose, reactive ,inject,onMounted} from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import { getSelectList } from "@/api/reqIpo/ipo"
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform' 
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform' 
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const checkedAll = ref(0)
const  selectCards=inject('selectCards') as Function
onMounted(()=>{
    console.log('select组件挂载');
})
const confirm = async () => {
    var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
    var reqeustObj = {
        status: [] as string[],
        trade_currency: [] as string[],
        offer_type: [] as string[],
        list_securities: [] as string[],
        list_platform: [] as string[],
      
    }
    Object.keys(obj).forEach((item: string, index: number) => {
        obj[item as keyType].forEach((element: any) => {
            if (element.isSelcted) {
                reqeustObj[keyArry[index] as requestType].push(element.key as string)
            }
        })
    })
    const result = await getSelectList(reqeustObj)
    console.log('result',result);
    selectCards(result);
    showSelect.value=false

}
const Cancel = () => {
    showSelect.value = false;

}
const preVant = (e: any) => {
    e.stopPropagation();
}
const obj = reactive({
    ipoStatus: [{
        key: "25",
        value: proxy.$t('home.DealInitiated'),
        isSelcted: false
    },
    {
        key: "30",
        value: proxy.$t('home.PublicOfferClosed'),
        isSelcted: false
    }, {
        key: "35",
        value: proxy.$t('home.ApplicationValidated'),
        isSelcted: false
    }, {
        key: "45",
        value: proxy.$t('home.AllotmentConfirmed'),
        isSelcted: false
    }, {
        key: "50",
        value: proxy.$t('home.MoneySettlement'),
        isSelcted: false
    }, {
        key: 55,
        value: proxy.$t('home.AllocationConfirmed'),
        isSelcted: false
    }, {
        key: "60",
        value: proxy.$t('home.placingApproved'),
        isSelcted: false
    }, {
        key: "65",
        value: proxy.$t('home.AllotmentResultsApproved'),
        isSelcted: false
    }, {
        key: "70",
        value: proxy.$t('home.TradingStarted'),
        isSelcted: false
    }, {
        key: "80",
        value: proxy.$t('home.Suspended'),
        isSelcted: false
    }, {
        key: "90",
        value: proxy.$t('home.Cancelled'),
        isSelcted: false
    }],
    tradingCurrency: [
        {
            key: 'HKD',
            value: proxy.$t('home.HongKongDollar'),
            isSelcted: false
        },
        {
            key: 'CNY',
            value: proxy.$t('home.ChineseYuan'),
            isSelcted: false
        },
        {
            key: 'USD',
            value: proxy.$t('home.UnitedStatesDollar'),
            isSelcted: false
        }
    ],
    offeringType: [{
        key: '1',
        value: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
        isSelcted: false
    }, {
        key: '2',
        value: proxy.$t('ipo.TypeofListing.Byplacingonly'),
        isSelcted: false
    }, {
        key: '3',
        value: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
        isSelcted: false
    }, {
        key: '4',
        value: proxy.$t('ipo.TypeofListing.Byintroduction'),
        isSelcted: false
    },
    {
        key: '5',
        value: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
        isSelcted: false
    }
    ],
    SecuritiestobeListed: [{
        key: '1',
        value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
        isSelcted: false
    }, {
        key: '2',
        value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
        isSelcted: false
    }, {
        key: '3',
        value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
        isSelcted: false
    }, {
        key: '4',
        value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
        isSelcted: false
    },
    {
        key: '5',
        value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
        isSelcted: false
    },
    {
        key: '6',
        value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
        isSelcted: false
    },
    {
        key: '7',
        value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
        isSelcted: false
    },
    {
        key: '8',
        value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
        isSelcted: false
    },
    {
        key: '99',
        value: proxy.$t('ipo.TypeofListing.Other'),
        isSelcted: false
    }
    ],
    ListingPlatform: [{
        key: '1',
        value: proxy.$t('home.Mainboard'),
        isSelcted: false
    }, {
        key: '2',
        value: proxy.$t('home.GEM'),
        isSelcted: false
    }],
    // ListingType: [{
    //     key: '1',
    //     value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
    //     isSelcted: false
    // }, {
    //     key: '2',
    //     value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
    //     isSelcted: false
    // }, {
    //     key: '3',
    //     value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
    //     isSelcted: false
    // }, {
    //     key: '4',
    //     value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
    //     isSelcted: false
    // },
    // {
    //     key: '5',
    //     value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
    //     isSelcted: false
    // },
    // {
    //     key: '6',
    //     value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
    //     isSelcted: true
    // },
    // {
    //     key: '7',
    //     value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
    //     isSelcted: true
    // },
    // {
    //     key: '8',
    //     value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
    //     isSelcted: true
    // },
    // {
    //     key: '99',
    //     value: proxy.$t('ipo.TypeofListing.Other'),
    //     isSelcted: false
    // }
    // ]
})
const checkOne = (key: number | string, objKey: keyType) => {
    obj[objKey] = obj[objKey].map((item: any) => {
        if (item.key == key) {
            return { ...item, isSelcted: !item.isSelcted }
        }
        return item
    })
}
const checkAll = (number: number) => {
    if (checkedAll.value && checkedAll.value == number) {
        checkedAll.value = 0;
    } else {
        checkedAll.value = number;
        selectAll(number as 1 | 2)
    }
}
function selectAll(all: 1 | 2) {
    var boolean1 = all == 1 ? true : false;
    Object.keys(obj).forEach((item: string) => {
        obj[item as keyType] = obj[item as keyType].map(element => {
            return { ...element, isSelcted: boolean1 } as any;
        })
    })
}
defineExpose({
    showSelect
})
</script>

<style lang="scss" scoped>
.selectWrap {
    width: 800px;
    height: 620px;
    background-color: #fff;
    border-radius: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    @media screen and (max-width: 768px){
        width: 90vw;
         height: 93vh;
         top: 50%;
         left: 50%;
        transform: translate(-50%, -50%);
            overflow-y: scroll;
        }
    .box {
        box-sizing: border-box;
        padding: 10px 20px 20px 20px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .content {
        .title {
            font-size: 18px;
            color: #879db2;
            margin-top: 10px;
//             @media screen and (max-width: 768px){
   
//    font-size: 12px;
// }
        }

        li {
            display: flex;
            font-size: 18px;
            flex-wrap: wrap;
            @media screen and (max-width: 768px){
                flex-direction: column;
                flex-wrap:nowrap;
                 //font-size: 12px;
                 width: fit-content;
        }

            .word {
                margin-right: 10px;
                margin-top: 5px;
                border-radius: 20px;
                // width: 50px;
                height: 20px;
                background-color: #eff1f4;
                padding: 5px 15px 5px 10px;
                color: #879db2;
                display: flex;
                justify-content: space-between;
                cursor: pointer;
                @media screen and (max-width: 768px){
                height: fit-content;
                width: fit-content;
        }
                &:hover {
                background-color: #0F426F;
                border-radius: 5px;
                color: #fff;
            
            }
                .check {
                    width: 30px;

                    span {
                        line-height: 35px;
         
                    }
                }
            }

        }

    }

    .footer {
        display: flex;
        flex-direction: row-reverse;
        // margin-bottom: 20px;

        button {
            margin-right: 10px;
            font-size: 18px;
            border: none;
            font-weight: 600;
            background-color: #fff;
            color: #557795;
            padding: 10px 20px 10px 20px;
            @media screen and (max-width: 768px){
                margin:0;      
                // font-size: 12px;
               
        }

            &:hover {
                background-color: #0F426F;
                border-radius: 5px;
                color: #fff;
            }
        }
    }
}

</style>