ipostatus弹窗

2023-04-13 23:31:04 +08:00
parent e81baabd55
commit 254c5b08c3
3 changed files with 486 additions and 213 deletions
@@ -0,0 +1,222 @@
+<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>