fini-ui/src/views/searchipo/index.vue

<template>
    <div class="login3">
       <div class="box w">
           <div class="bigger">
           <Item v-for="(item, index) in logos" :data="item" :key="index" @click="handleclick(item)"></Item>
       </div>
       </div>
    </div>
   </template>
   
   <script lang="ts">
   export default {
    name: "Xsearchdash",
   };
   </script>
   
   <script lang="ts" setup>
   import Item from '@/views/login/components/Main.vue';
   import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
   import { onMounted,ref } from 'vue';
   import { useRouter } from 'vue-router';
   import { getCurrentInstance } from 'vue'
   const { proxy } = (getCurrentInstance() as any)
   const router = useRouter()
   interface objType {
       title: string,
       number: string,
       HKD: string,
       price: string,
       time: string,
       trading: string
   
   }
   const logos = ref<objType[]>([
       {
           title: "bestCompany",
           number: "09985",
           HKD: "HKD 148.000",
           price: "final offer Price",
           time: "2023-03-31 09:00",
           trading: "Commencement of trading date"
       },
       {
           title: "bestCompany",
           number: "09985",
           HKD: "HKD 30.000-40.000",
           price: "offer Price Range",
           time: "2022-12-01 12:00:00",
           trading: "Expected Price Determination Date"
       },
       {
           title: "bestCompany",
           number: "09985",
           HKD: "HKD 30.000-40.000",
           price: "offer Price Range",
           time: "2022-12-01 12:00:00",
           trading: "Expected Price Determination Date"
       },
       {
           title: "bestCompany",
           number: "09985",
           HKD: "HKD 30.000-40.000",
           price: "offer Price Range",
           time: "2022-12-01 12:00:00",
           trading: "Expected Price Determination Date"
       },
       {
           title: "bestCompany",
           number: "09985",
           HKD: "HKD 30.000-40.000",
           price: "offer Price Range",
           time: "2022-12-01 12:00:00",
           trading: "Expected Price Determination Date"
       }
   ])
   const getHomeIpoList = async () => {
       async function demo() {
           return new Promise(async (resolve, reject) => {
   
               const res = await getHomeIpo(1)
               // const res= await getDataFromId('home');
                console.log('@@$',res);
               // .data
               const data = (res as any).data.map((item: any) => {
                   let { stkCode, dateTime, status, ipoID,companyEngShort,companyChiShort,priceFinal,logoLink,priceMin,priceMax,listingDate,pricingDate } = item;      
                   return {
                       logolinks: logoLink,
                       title: companyEngShort+ ";" +companyChiShort,
                       status: status,
                       number: stkCode,
                       HKD: priceFinal?priceFinal:priceMinMax(),
                       time:listingDate?listingDate:pricingDate,
                       ipoID: ipoID,
                       price:priceFinal,
                       listingDate:listingDate
                   }
                   function priceMinMax(){
                       if(priceMin&&priceMax){
                           return `${priceMin}-${priceMax}`
                       }else if(priceMin){
                           return `${priceMin}-`
                       }else if(priceMax){
                           return ` -${priceMax}`
                       }else{
                           return " - "
                       }
                   }
               })
               resolve(data)    
           }
           )
       }
       const result = await demo();
       (result as objType[]).sort((a: any, b: any) => {
           const preTime = new Date(a.time).getTime();
           const nextTime = new Date(b.time).getTime();
           if (preTime == nextTime) {
               return Number(a.number) - Number(b.number);
           } else {
               return preTime - nextTime;
           }
       })
       logos.value = result as objType[]
   }
   const handleclick = (item:any)=>{
       localStorage.setItem('ipoID', item.number)
       localStorage.setItem('itemData', JSON.stringify(item))
       proxy.$router.push({
           name: 'XIPO',
           params: { data: JSON.stringify(item) }
       },
       )
   }
   onMounted(
   ()=>{
           getHomeIpoList();
   }
   )
   </script>
   
   <style scoped lang="scss" >
   .login3 {
       background-image: url("@/assets/1x/beijingtu.png");
       background-repeat: no-repeat;
       background-size: cover;
   }
   .bigger{
       display: flex;
       flex-wrap: wrap;
   }
   </style>