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

<template>
    <div class="selectWrap" @click="preVant">
        <div class="box">
            <div class="content">
                <li>
                    <div class="word" :class="checkedAll == 1 && 'active'" @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" :class="checkedAll == 2 && 'active'" @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" :class="item.isSelcted && 'active'"
                        @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"
                        :class="item.isSelcted && 'active'" @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" :class="item.isSelcted && 'active'"
                        @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"
                        :class="item.isSelcted && 'active'" @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>
            <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"
import { ipoStore } from "@/stores/ipo"
import { getDataFromId } from "@/api/mock/home"
const store = ipoStore()
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities'
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const checkedAll = ref(0)
const selectCards = inject('selectCards') as Function
//const status = inject('status')
onMounted(() => {
    //console.log('select组件挂载');
    if ((store.$state.selectedArr as any).status) {
        console.log('store', store.$state.selectedArr)
        const storeData = store.$state.selectedArr as any;
        if (storeData.status.length) {
            obj.ipoStatus = obj.ipoStatus.map((item: any) => {
                const j = storeData.status.some((i: string) => i == item.key)
                if (j) {
                    return { ...item, isSelcted: true }
                } else {
                    return item
                }

            })
        }
        if (storeData.trade_currency.length) {
            obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
                const j = storeData.trade_currency.some((i: string) => i == item.key)
                if (j) {
                    return { ...item, isSelcted: true }
                } else {
                    return item
                }

            })
        }
        if (storeData.offer_type.length) {
            obj.offeringType = obj.offeringType.map((item: any) => {
                const j = storeData.offer_type.some((i: string) => i == item.key)
                if (j) {
                    return { ...item, isSelcted: true }
                } else {
                    return item
                }

            })
        }
        if (storeData.list_securities.length) {
            obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
                const j = storeData.list_securities.some((i: string) => i == item.key)
                if (j) {
                    return { ...item, isSelcted: true }
                } else {
                    return item
                }

            })
        }
        // if (storeData.list_platform.length) {
        //     obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
        //         const j = storeData.list_platform.some((i: string) => i == item.key)
        //         if (j) {
        //             return { ...item, isSelcted: true }
        //         } else {
        //             return item
        //         }

        //     })
        // }
    }
})
const porps = defineProps<{ fn: Function }>()
const confirm = async () => {
    if (checkedAll.value == 2) {
        store.setSelectedArr({});
        porps.fn()
        return
    }
    var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities']
    var reqeustObj = {
        status: [] as string[],
        trade_currency: [] as string[],
        offer_type: [] as string[],
        list_securities: [] 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)
            }
        })
    })
    store.setSelectedArr(reqeustObj);
    const result = await store.getSearchSelectList()
    // const result = await getSelectList(reqeustObj)
    //mock数据测试-----------
    // const data = await getDataFromId("Select")
    // var result = {
    //     data
    // }
    //mock数据测试-----------
    selectCards(result);
    showSelect.value = false
    porps.fn()

}
const Cancel = () => {
    // showSelect.value = false;
    porps.fn()
}
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;
        })
    })
}

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

                }

                &.active {
                    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>