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="ipoStatusSlect(item.key)">
                        <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="tradingCurrencySlect(item.key)">
                        <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="offeringType(item.key)">
                        <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="SecuritiestobeListed(item.key)">
                        <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="ListingPlatform(item.key)">
                        <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.ListingType')) }}</div>
                <li>
                    <div class="word" v-for="item in obj.ListingType" :key = "item.key" @click="ListingType(item.key)">
                        <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="confirm">{{ $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 } from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
type keyType='ipoStatus'|'tradingCurrency'|'offeringType'|'SecuritiestobeListed'|'ListingPlatform'|'ListingType'
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const checkedAll=ref(0)
const confirm = () => {
    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: true
    }, {
        key: 35,
        value: proxy.$t('home.ApplicationValidated'),
        isSelcted: true
    }, {
        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: 'Hong Kong Dollar',
            isSelcted: false
        },
        {
            key: 'CNY',
            value: 'Chinese Yuan',
            isSelcted: true
        },
        {
            key: 'USD',
            value: 'United States Dollar',
            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: true
    }
],
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: true
    },
    {
        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
    }
],
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: true
    },
    {
        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 ipoStatusSlect = (key: number) => {
    obj.ipoStatus = obj.ipoStatus.map((item: any) => {
        if (item.key == key) {
            return { ...item, isSelcted: !item.isSelcted }
        }
        return item
    })
}
const tradingCurrencySlect = (key: string) => {
    obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
        if (item.key == key) {
            return { ...item, isSelcted: !item.isSelcted }
        }
        return item
    })
}
const offeringType = (key: string) => {
    obj.offeringType = obj.offeringType.map((item: any) => {
        if (item.key == key) {
            return { ...item, isSelcted: !item.isSelcted }
        }
        return item
    })
}
const SecuritiestobeListed = (key: string) => {
    obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
        if (item.key == key) {
            return { ...item, isSelcted: !item.isSelcted }
        }
        return item
    })
}
const ListingPlatform = (key: string) => {
    obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
        if (item.key == key) {
            return { ...item, isSelcted: !item.isSelcted }
        }
        return item
    })
}
const ListingType = (key: string) => {
    obj.ListingType = obj.ListingType.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){
    // obj['ipoStatus']
    var boolean=all==1?true:false;
    Object.keys(obj).forEach((item:string)=>{
        obj[item as keyType]=obj[item as keyType].map(element=>{
            return {...element,isSelcted:boolean} as any;
        })
    })
}
defineExpose({
    showSelect
})
</script>

<style lang="scss" scoped>
.selectWrap {
    width: 800px;
    height: 820px;
    background-color: #fff;
    border-radius: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    
    .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;
        }

        li {
            display: flex;
            font-size: 18px;
            flex-wrap: wrap;

            .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;

                .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;

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