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

<template>
    <div class="selectWrap" v-if="showSelect" @click="preVant">
        <div class="box">
            <div class="content">
                <div class="title">IPO Status</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">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>
            <div class="footer">
                <button @click="confirm">Apply</button>
                <button @click="confirm">Cancel</button>

            </div>
        </div>

    </div>
</template>

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

<script lang="ts" setup>
import { ref, defineExpose, reactive } from 'vue';
const showSelect = ref(false)
const confirm = () => {
    showSelect.value = false;
}
const preVant = (e: any) => {
    e.stopPropagation();
}
const obj = reactive({
    ipoStatus: [{
        key: 25,
        value: 'Deal Initiated',
        isSelcted: false
    },
    {
        key: 30,
        value: 'Public Offer Closed',
        isSelcted: true
    }, {
        key: 35,
        value: 'Application Validated',
        isSelcted: true
    }, {
        key: 45,
        value: 'Allotment Confirmed',
        isSelcted: false
    }, {
        key: 50,
        value: 'Money Settlement',
        isSelcted: false
    }, {
        key: 55,
        value: 'Allocation Confirmed',
        isSelcted: false
    }, {
        key: 60,
        value: 'Placing Approved',
        isSelcted: false
    }, {
        key: 65,
        value: 'Allotment Results Approved',
        isSelcted: false
    }, {
        key: 70,
        value: 'Trading Started',
        isSelcted: false
    }, {
        key: 80,
        value: 'Suspended',
        isSelcted: false
    }, {
        key: 90,
        value: '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
        }
    ]
})
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
    })
}
defineExpose({
    showSelect
})
</script>

<style lang="scss" scoped>
.selectWrap {
    width: 800px;
    height: 800px;
    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: 16px;
            color: #8C979B;
            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: #F2F0F5;
                padding: 5px 15px 5px 10px;
                color: #6A7686;
                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: #334B57;
            padding: 10px 20px 10px 20px;

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