移动端dashbord调整

2023-04-21 16:54:59 +08:00
parent 3eb07382ae
commit cd4544afb8
20 changed files with 499 additions and 157 deletions
@@ -2,7 +2,25 @@
    <div class="selectWrap" v-if="showSelect" @click="preVant">
        <div class="box">
            <div class="content">
-                <div class="title">IPO Status</div>
+                <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">
@@ -13,7 +31,7 @@
                        <span>{{ item.value }}</span>
                    </div>
                </li>
-                <div class="title">tradingCurrency</div>
+                <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)">
@@ -25,10 +43,54 @@
                        <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">Apply</button>
-                <button @click="confirm">Cancel</button>
+                <button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
+                <button @click="confirm">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>

            </div>
        </div>
@@ -44,7 +106,12 @@ export default {

 <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;
 }
@@ -54,48 +121,48 @@ const preVant = (e: any) => {
 const obj = reactive({
    ipoStatus: [{
        key: 25,
-        value: 'Deal Initiated',
+        value: proxy.$t('home.DealInitiated'),
        isSelcted: false
    },
    {
        key: 30,
-        value: 'Public Offer Closed',
+        value: proxy.$t('home.PublicOfferClosed'),
        isSelcted: true
    }, {
        key: 35,
-        value: 'Application Validated',
+        value: proxy.$t('home.ApplicationValidated'),
        isSelcted: true
    }, {
        key: 45,
-        value: 'Allotment Confirmed',
+        value: proxy.$t('home.AllotmentConfirmed'),
        isSelcted: false
    }, {
        key: 50,
-        value: 'Money Settlement',
+        value: proxy.$t('home.MoneySettlement'),
        isSelcted: false
    }, {
        key: 55,
-        value: 'Allocation Confirmed',
+        value: proxy.$t('home.AllocationConfirmed'),
        isSelcted: false
    }, {
        key: 60,
-        value: 'Placing Approved',
+        value: proxy.$t('home.placingApproved'),
        isSelcted: false
    }, {
        key: 65,
-        value: 'Allotment Results Approved',
+        value: proxy.$t('home.AllotmentResultsApproved'),
        isSelcted: false
    }, {
        key: 70,
-        value: 'Trading Started',
+        value: proxy.$t('home.TradingStarted'),
        isSelcted: false
    }, {
        key: 80,
-        value: 'Suspended',
+        value: proxy.$t('home.Suspended'),
        isSelcted: false
    }, {
        key: 90,
-        value: 'Cancelled',
+        value: proxy.$t('home.Cancelled'),
        isSelcted: false
    }],
    tradingCurrency: [
@@ -114,7 +181,125 @@ const obj = reactive({
            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) => {
@@ -132,6 +317,56 @@ const tradingCurrencySlect = (key: string) => {
        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
 })
@@ -140,7 +375,7 @@ defineExpose({
 <style lang="scss" scoped>
 .selectWrap {
    width: 800px;
-    height: 800px;
+    height: 820px;
    background-color: #fff;
    border-radius: 20px;
    position: fixed;
@@ -148,7 +383,7 @@ defineExpose({
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
-
+    
    .box {
        box-sizing: border-box;
        padding: 10px 20px 20px 20px;
@@ -161,8 +396,8 @@ defineExpose({

    .content {
        .title {
-            font-size: 16px;
-            color: #8C979B;
+            font-size: 18px;
+            color: #879db2;
            margin-top: 10px;
        }

@@ -177,9 +412,9 @@ defineExpose({
                border-radius: 20px;
                // width: 50px;
                height: 20px;
-                background-color: #F2F0F5;
+                background-color: #eff1f4;
                padding: 5px 15px 5px 10px;
-                color: #6A7686;
+                color: #879db2;
                display: flex;
                justify-content: space-between;
                cursor: pointer;
@@ -208,7 +443,7 @@ defineExpose({
            border: none;
            font-weight: 600;
            background-color: #fff;
-            color: #334B57;
+            color: #557795;
            padding: 10px 20px 10px 20px;

            &:hover {