FINI
/
fini-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

筛选完成

This commit is contained in:
zzy 2023-04-23 16:31:24 +08:00
parent 8b6c10f1d5
commit 00bb0d8346
11 changed files with 475 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

44
src/api/reqIpo/ipo.ts
View File

@ -10,7 +10,8 @@ enum Api {
offeringsUrl="/api/ipo/refdata/offering", offeringsUrl="/api/ipo/refdata/offering",
EventData="/api/ipos/listingData", EventData="/api/ipos/listingData",
TypeofList="/api/ipo/refdata/typeOfListing", TypeofList="/api/ipo/refdata/typeOfListing",
searchUrl="/api/ipo/refdata/search" searchUrl="/api/ipo/refdata/search",
selectUrl="/api/ipo/refdata/filter"
} }
//获取ipo详情页的数据 //获取ipo详情页的数据
export const getIpo = (ipoID:string) => { export const getIpo = (ipoID:string) => {
@ -36,4 +37,45 @@ export const getTypeofListing = (ipoID:string) => {
export const getSearchListing = (keyword:string) => { export const getSearchListing = (keyword:string) => {
return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`); return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
}; };
type selectObj={
status?:string|string[]
tradeCurrency?:string|string[]
offerType?:string|string[]
listSecurities?:string|string[]
IPOs?:string|string[]
listPlatform?:string|string[]
}
// export const getSelectList = (body:selectObj) => {
// // return request.get<any, null>(Api.searchUrl,{body});
// const {status,tradeCurrency,offerType,listSecurities,IPOs,listPlatform}=body;
// var requestData='?'
// if(status){
// requestData+=`status=${status}&`
// }
// if(tradeCurrency){
// requestData+=`tradeCurrency=${status}&`
// }
// if(offerType){
// requestData+=`offerType=${offerType}&`
// }
// if(listSecurities){
// requestData+=`listSecurities=${listSecurities}&`
// }
// if(IPOs){
// requestData+=`IPOs=${IPOs}&`
// }
// if(listPlatform){
// requestData+=`listPlatform=${listPlatform}&`
// }
// requestData=requestData.substring(0, requestData.length - 1);
// return request.get<any, null>(Api.searchUrl+requestData);
// };
export const getSelectList = (body:selectObj) => {
// const {Status}=body;
const status=body.status;
// var obj=JSON.stringify({status})
return request.post<any, null>(Api.selectUrl,body);
};

5
src/locales/en.ts
View File

@ -30,7 +30,10 @@ export default {
ListingType:'Listing Type', ListingType:'Listing Type',
APPLY:'Apply', APPLY:'Apply',
Cancel:'Cancel' Cancel:'Cancel'
} },
HongKongDollar:'Hong Kong Dollar',
ChineseYuan:'Chinese Yuan',
UnitedStatesDollar:'United States Dollar'
}, },
dashboard:{ dashboard:{
Home:'Home', Home:'Home',

5
src/locales/zh-cn.ts
View File

@ -30,7 +30,10 @@ export default {
ListingType:'上市类型', ListingType:'上市类型',
APPLY:'提交', APPLY:'提交',
Cancel:'取消' Cancel:'取消'
} },
HongKongDollar:'港元',
ChineseYuan:'人民币',
UnitedStatesDollar:'美元'
}, },
dashboard:{ dashboard:{
Home:'主页', Home:'主页',

5
src/locales/zh-ct.ts
View File

@ -30,7 +30,10 @@ export default {
ListingType:'上市類型', ListingType:'上市類型',
APPLY:'提交', APPLY:'提交',
Cancel:'取消' Cancel:'取消'
} },
HongKongDollar:'港元',
ChineseYuan:'人民幣',
UnitedStatesDollar:'美元'
}, },
dashboard:{ dashboard:{
Home:'主頁', Home:'主頁',

2
src/main.ts
View File

@ -28,7 +28,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component)
} }
app.config.warnHandler = (msg, instance, trace) => {} app.config.warnHandler = (msg, instance, trace) => {}
app.config.errorHandler = (msg, instance, trace) => {}//错误捕获，不报给浏览器 // app.config.errorHandler = (msg, instance, trace) => {}//错误捕获，不报给浏览器
app app
// .use(pinia) // .use(pinia)
.use(router) .use(router)

150
src/views/dashBoard/image1/index.vue
View File

@ -1,79 +1,87 @@
<template> <template>
<div> <div>
<div class="title" v-if="isImage"> <div class="title" v-if="isImage">
<img v-lazy="props.src" /> <img v-lazy="props.src" />
</div>
<div class="title2" v-else>
{{props.number}}
</div>
</div> </div>
<div class="title2" v-else>
{{props.number}}
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: "XEvent", name: "XEvent",
}; };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import {ref,onMounted,watch} from 'vue' import {ref,onMounted,watch,onUpdated} from 'vue'
const props = defineProps({ const props = defineProps({
src: { src: {
type: String, type: String,
required:true required:true
}, },
number: { number: {
type: String, type: String,
required:true required:true
}
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
isImage.value= false;
};
}catch(error){
console.log('error')
} }
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
} isImage.value= false;
};
}catch(error){
console.log('error')
}
}
onUpdated(()=>{
setTimeout(()=>{ setTimeout(()=>{
checkImgExists(props.src) checkImgExists(props.src)
},100) },1000)
})
onMounted(()=>{
setTimeout(()=>{
checkImgExists(props.src)
},1000)
})
</script>
<style lang="scss" scoped> </script>
.title { <style lang="scss" scoped>
background-color: #fff; .title {
height: 120px; background-color: #fff;
line-height: 120px; height: 120px;
font-size: 40px; line-height: 120px;
color: #fff; font-size: 40px;
overflow: hidden; color: #fff;
position: relative; overflow: hidden;
font-family: "Calibri"; position: relative;
img { font-family: "Calibri";
max-height: 100%; img {
max-width: 100%; max-height: 100%;
position: absolute; max-width: 100%;
top: 50%; position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%); left: 50%;
} transform: translate(-50%, -50%);
} }
.title2{ }
background-color: #23445a; .title2{
color: #fff; background-color: #23445a;
height: 120px; color: #fff;
line-height: 120px; height: 120px;
font-size: 40px; line-height: 120px;
text-align: center; font-size: 40px;
} text-align: center;
</style> }
</style>

10
src/views/login/components/Main.vue
View File

@ -44,7 +44,7 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { size } from 'lodash'; import { size } from 'lodash';
import { ref, onMounted, onUpdated } from 'vue' import { ref, onMounted, onUpdated,watch } from 'vue'
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
@ -120,8 +120,9 @@ const code22 = ref('')
// } // }
// }) // })
onMounted(() => { watch(props,(newValue:any, oldValue:any)=>{
var obj = { console.log('修改了data',newValue,oldValue);
var obj = {
25: proxy.$t('home.DealInitiated'), 25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'), 30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'), 35: proxy.$t('home.ApplicationValidated'),
@ -160,7 +161,8 @@ onMounted(() => {
return key in object; return key in object;
} }
}) },{deep:true})
const cardDetail = (e: any) => { const cardDetail = (e: any) => {
e.stopPropagation(); e.stopPropagation();

353
src/views/login/components/Select.vue
View File

@ -6,23 +6,24 @@
<div class="word" @click="checkAll(1)"> <div class="word" @click="checkAll(1)">
{{ $t(i18n.global.t('home.title.All')) }} {{ $t(i18n.global.t('home.title.All')) }}
<div class="check"> <div class="check">
<el-icon v-if="checkedAll==1"> <el-icon v-if="checkedAll == 1">
<Check></Check> <Check></Check>
</el-icon> </el-icon>
</div> </div>
</div> </div>
<div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }} <div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
<div class="check"> <div class="check">
<el-icon v-if="checkedAll==2"> <el-icon v-if="checkedAll == 2">
<Check></Check> <Check></Check>
</el-icon> </el-icon>
</div> </div>
</div> </div>
</li> </li>
<div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div> <div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" @click="ipoStatusSlect(item.key)"> <div class="word" v-for="item in obj.ipoStatus" :key="item.key"
@click="checkOne(item.key, 'ipoStatus')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
<Check /> <Check />
@ -34,7 +35,7 @@
<div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div> <div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.tradingCurrency" :key="item.key" <div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
@click="tradingCurrencySlect(item.key)"> @click="checkOne(item.key, 'tradingCurrency')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
<Check /> <Check />
@ -45,7 +46,8 @@
</li> </li>
<div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div> <div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.offeringType" :key = "item.key" @click="offeringType(item.key)"> <div class="word" v-for="item in obj.offeringType" :key="item.key"
@click="checkOne(item.key, 'offeringType')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
<Check /> <Check />
@ -56,7 +58,8 @@
</li> </li>
<div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div> <div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.SecuritiestobeListed" :key = "item.key" @click="SecuritiestobeListed(item.key)"> <div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key"
@click="checkOne(item.key, 'SecuritiestobeListed')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
<Check /> <Check />
@ -65,9 +68,10 @@
<span>{{ item.value }}</span> <span>{{ item.value }}</span>
</div> </div>
</li> </li>
<div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div> <!-- <div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
<li> <li>
<div class="word" v-for="item in obj.ListingPlatform" :key = "item.key" @click="ListingPlatform(item.key)"> <div class="word" v-for="item in obj.ListingPlatform" :key="item.key"
@click="checkOne(item.key, 'ListingPlatform')">
<div class="check"> <div class="check">
<el-icon v-if="item.isSelcted"> <el-icon v-if="item.isSelcted">
<Check /> <Check />
@ -75,22 +79,12 @@
</div> </div>
<span>{{ item.value }}</span> <span>{{ item.value }}</span>
</div> </div>
</li> </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>
<div class="footer"> <div class="footer">
<button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button> <button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
<button @click="confirm">{{ $t(i18n.global.t('home.title.Cancel')) }}</button> <button @click="Cancel">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>
</div> </div>
</div> </div>
@ -105,39 +99,66 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, defineExpose, reactive } from 'vue'; import { ref, defineExpose, reactive ,inject} from 'vue';
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
type keyType='ipoStatus'|'tradingCurrency'|'offeringType'|'SecuritiestobeListed'|'ListingPlatform'|'ListingType' import { getSelectList } from "@/api/reqIpo/ipo"
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform'
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false) const showSelect = ref(false)
const checkedAll=ref(0) const checkedAll = ref(0)
const confirm = () => { const selectCards=inject('selectCards') as Function
const confirm = async () => {
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
var reqeustObj = {
status: [] as string[],
trade_currency: [] as string[],
offer_type: [] as string[],
list_securities: [] as string[],
list_platform: [] 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)
}
})
})
const result = await getSelectList(reqeustObj)
console.log('result',result);
selectCards(result);
showSelect.value=false
}
const Cancel = () => {
showSelect.value = false; showSelect.value = false;
} }
const preVant = (e: any) => { const preVant = (e: any) => {
e.stopPropagation(); e.stopPropagation();
} }
const obj = reactive({ const obj = reactive({
ipoStatus: [{ ipoStatus: [{
key: 25, key: "25",
value: proxy.$t('home.DealInitiated'), value: proxy.$t('home.DealInitiated'),
isSelcted: false isSelcted: false
}, },
{ {
key: 30, key: "30",
value: proxy.$t('home.PublicOfferClosed'), value: proxy.$t('home.PublicOfferClosed'),
isSelcted: true isSelcted: true
}, { }, {
key: 35, key: "35",
value: proxy.$t('home.ApplicationValidated'), value: proxy.$t('home.ApplicationValidated'),
isSelcted: true isSelcted: true
}, { }, {
key: 45, key: "45",
value: proxy.$t('home.AllotmentConfirmed'), value: proxy.$t('home.AllotmentConfirmed'),
isSelcted: false isSelcted: false
}, { }, {
key: 50, key: "50",
value: proxy.$t('home.MoneySettlement'), value: proxy.$t('home.MoneySettlement'),
isSelcted: false isSelcted: false
}, { }, {
@ -145,225 +166,185 @@ const obj = reactive({
value: proxy.$t('home.AllocationConfirmed'), value: proxy.$t('home.AllocationConfirmed'),
isSelcted: false isSelcted: false
}, { }, {
key: 60, key: "60",
value: proxy.$t('home.placingApproved'), value: proxy.$t('home.placingApproved'),
isSelcted: false isSelcted: false
}, { }, {
key: 65, key: "65",
value: proxy.$t('home.AllotmentResultsApproved'), value: proxy.$t('home.AllotmentResultsApproved'),
isSelcted: false isSelcted: false
}, { }, {
key: 70, key: "70",
value: proxy.$t('home.TradingStarted'), value: proxy.$t('home.TradingStarted'),
isSelcted: false isSelcted: false
}, { }, {
key: 80, key: "80",
value: proxy.$t('home.Suspended'), value: proxy.$t('home.Suspended'),
isSelcted: false isSelcted: false
}, { }, {
key: 90, key: "90",
value: proxy.$t('home.Cancelled'), value: proxy.$t('home.Cancelled'),
isSelcted: false isSelcted: false
}], }],
tradingCurrency: [ tradingCurrency: [
{ {
key: 'HKD', key: 'HKD',
value: 'Hong Kong Dollar', value: proxy.$t('home.HongKongDollar'),
isSelcted: false isSelcted: false
}, },
{ {
key: 'CNY', key: 'CNY',
value: 'Chinese Yuan', value: proxy.$t('home.ChineseYuan'),
isSelcted: true isSelcted: true
}, },
{ {
key: 'USD', key: 'USD',
value: 'United States Dollar', value: proxy.$t('home.UnitedStatesDollar'),
isSelcted: false isSelcted: false
} }
], ],
offeringType:[{ offeringType: [{
key:'1', key: '1',
value:proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'), value: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
isSelcted: false isSelcted: false
},{ }, {
key:'2', key: '2',
value:proxy.$t('ipo.TypeofListing.Byplacingonly'), value: proxy.$t('ipo.TypeofListing.Byplacingonly'),
isSelcted: false isSelcted: false
},{ }, {
key:'3', key: '3',
value:proxy.$t('ipo.TypeofListing.Bypublicofferonly'), value: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
isSelcted: false isSelcted: false
},{ }, {
key:'4', key: '4',
value:proxy.$t('ipo.TypeofListing.Byintroduction'), value: proxy.$t('ipo.TypeofListing.Byintroduction'),
isSelcted: false isSelcted: false
}, },
{ {
key:'5', key: '5',
value:proxy.$t('ipo.TypeofListing.TransferfromGEM'), value: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
isSelcted: true isSelcted: true
} }
], ],
SecuritiestobeListed:[{ SecuritiestobeListed: [{
key:'1', key: '1',
value:proxy.$t('ipo.TypeofListing.Ordinaryshares'), value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
isSelcted: false
},{
key:'2',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
isSelcted: false isSelcted: false
},{ }, {
key:'3', key: '2',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'), value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
isSelcted: false isSelcted: false
},{ }, {
key:'4', key: '3',
value:proxy.$t('ipo.TypeofListing.Preferenceshares'), value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
isSelcted: false
}, {
key: '4',
value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
isSelcted: false isSelcted: false
}, },
{ {
key:'5', key: '5',
value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'), value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
isSelcted: true isSelcted: true
}, },
{ {
key:'6', key: '6',
value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'), value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
isSelcted: true isSelcted: true
}, },
{ {
key:'7', key: '7',
value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'), value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
isSelcted: true isSelcted: true
}, },
{ {
key:'8', key: '8',
value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'), value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
isSelcted: true isSelcted: true
}, },
{ {
key:'99', key: '99',
value:proxy.$t('ipo.TypeofListing.Other'), value: proxy.$t('ipo.TypeofListing.Other'),
isSelcted: false isSelcted: false
} }
], ],
ListingPlatform:[{ ListingPlatform: [{
key:'1', key: '1',
value:proxy.$t('home.Mainboard'), 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 isSelcted: false
},{ }, {
key:'3', key: '2',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'), value: proxy.$t('home.GEM'),
isSelcted: false isSelcted: false
},{ }],
key:'4', // ListingType: [{
value:proxy.$t('ipo.TypeofListing.Preferenceshares'), // key: '1',
isSelcted: false // value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
}, // isSelcted: false
{ // }, {
key:'5', // key: '2',
value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'), // value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
isSelcted: true // isSelcted: false
}, // }, {
{ // key: '3',
key:'6', // value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'), // isSelcted: false
isSelcted: true // }, {
}, // key: '4',
{ // value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
key:'7', // isSelcted: false
value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'), // },
isSelcted: true // {
}, // key: '5',
{ // value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
key:'8', // isSelcted: true
value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'), // },
isSelcted: true // {
}, // key: '6',
{ // value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
key:'99', // isSelcted: true
value:proxy.$t('ipo.TypeofListing.Other'), // },
isSelcted: false // {
} // 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) => { const checkOne = (key: number | string, objKey: keyType) => {
obj.ipoStatus = obj.ipoStatus.map((item: any) => { obj[objKey] = obj[objKey].map((item: any) => {
if (item.key == key) { if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted } return { ...item, isSelcted: !item.isSelcted }
} }
return item return item
}) })
} }
const tradingCurrencySlect = (key: string) => { const checkAll = (number: number) => {
obj.tradingCurrency = obj.tradingCurrency.map((item: any) => { if (checkedAll.value && checkedAll.value == number) {
if (item.key == key) { checkedAll.value = 0;
return { ...item, isSelcted: !item.isSelcted } } else {
} checkedAll.value = number;
return item selectAll(number as 1 | 2)
})
}
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){ function selectAll(all: 1 | 2) {
// obj['ipoStatus'] var boolean1 = all == 1 ? true : false;
var boolean=all==1?true:false; Object.keys(obj).forEach((item: string) => {
Object.keys(obj).forEach((item:string)=>{ obj[item as keyType] = obj[item as keyType].map(element => {
obj[item as keyType]=obj[item as keyType].map(element=>{ return { ...element, isSelcted: boolean1 } as any;
return {...element,isSelcted:boolean} as any;
}) })
}) })
} }

150
src/views/login/components/a-image/index.vue
View File

@ -1,79 +1,87 @@
<template> <template>
<div> <div>
<div class="title" v-if="isImage"> <div class="title" v-if="isImage">
<img v-lazy="props.src" /> <img v-lazy="props.src" />
</div>
<div class="title2" v-else>
{{props.number}}
</div>
</div> </div>
<div class="title2" v-else>
{{props.number}}
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: "XEvent", name: "XEvent",
}; };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import {ref,onMounted,watch} from 'vue' import {ref,onMounted,watch,onUpdated} from 'vue'
const props = defineProps({ const props = defineProps({
src: { src: {
type: String, type: String,
required:true required:true
}, },
number: { number: {
type: String, type: String,
required:true required:true
}
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
isImage.value= false;
};
}catch(error){
console.log('error')
} }
})
const isImage=ref(false)
const checkImgExists=(imgurl:string) =>{
try{
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = () => {
isImage.value = true;
};
ImgObj.onerror = () => {
} isImage.value= false;
};
}catch(error){
console.log('error')
}
}
onUpdated(()=>{
setTimeout(()=>{ setTimeout(()=>{
checkImgExists(props.src) checkImgExists(props.src)
},1000) },1000)
})
onMounted(()=>{
setTimeout(()=>{
checkImgExists(props.src)
},1000)
})
</script>
<style lang="scss" scoped> </script>
.title { <style lang="scss" scoped>
background-color: #fff; .title {
height: 120px; background-color: #fff;
line-height: 120px; height: 120px;
font-size: 40px; line-height: 120px;
color: #fff; font-size: 40px;
overflow: hidden; color: #fff;
position: relative; overflow: hidden;
font-family: "Calibri"; position: relative;
img { font-family: "Calibri";
max-height: 100%; img {
max-width: 100%; max-height: 100%;
position: absolute; max-width: 100%;
top: 50%; position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%); left: 50%;
} transform: translate(-50%, -50%);
} }
.title2{ }
background-color: #23445a; .title2{
color: #fff; background-color: #23445a;
height: 120px; color: #fff;
line-height: 120px; height: 120px;
font-size: 40px; line-height: 120px;
text-align: center; font-size: 40px;
} text-align: center;
</style> }
</style>

122
src/views/login/index.vue
View File

@ -12,8 +12,11 @@
</div> </div>
<!-- <input class="search" /> --> <!-- <input class="search" /> -->
<div class="searchWrap"> <div class="searchWrap">
<el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false"
clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect"> clearable class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect"
:enterkeyhint="'search'"
>
<template #prefix> <template #prefix>
<img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片"
@click="handleSelect"> @click="handleSelect">
@ -88,9 +91,9 @@ import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
import moment from "moment" import moment from "moment"
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance ,provide} from 'vue'
import Event from './components/Event.vue'; import Event from './components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo"; import { getEventData, getSearchListing,getSelectList } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home" import { getDataFromId } from "@/api/mock/home"
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import SearchCup from "./components/SearchCup.vue"; import SearchCup from "./components/SearchCup.vue";
@ -99,6 +102,63 @@ import Select from "./components/Select.vue";
const selectR = ref(); const selectR = ref();
const dayValue = ref(new Date()) const dayValue = ref(new Date())
const drawer = ref(false) const drawer = ref(false)
const selectCards=async (res:any)=>{
async function demo() {
return new Promise(async (resolve, reject) => {
try {
if (!(res as any).data.length) {
ElMessage.warning('No relevant select data')
throw ("222")
}
const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
console.log('status',status);
return {
logolinks: logoLink?logoLink:"",
title: companyEngFull + ";" + companyChiFull,
status: status,
number: stkCode,
HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
time: listingDate ? listingDate : pricingDate,
ipoID: ipoID,
price: priceFinal,
listingDate: listingDate
}
function priceMinMax() {
if (priceMin && priceMax) {
return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
} else if (priceMin) {
return `${priceMin.toFixed(3)} - `
} else if (priceMax) {
return ` -${priceMax.toFixed(3)}`
} else {
return " - "
}
}
})
resolve(data)
} catch (error) {
reject()
}
}
)
}
const result = await demo();
(result as objType[]).sort((a: any, b: any) => {
const preTime = new Date(a.number).getTime();
const nextTime = new Date(b.number).getTime();
if (preTime == nextTime) {
return Number(a.number) - Number(b.number);
} else {
return preTime - nextTime;
}
})
logos.value = result as objType[]
}
provide('selectCards',selectCards);
const handleDrawer = (done: () => void) => { const handleDrawer = (done: () => void) => {
done(); done();
} }
@ -252,6 +312,7 @@ onMounted(async () => {
const getSearchIpoList = async (keyword: string) => { const getSearchIpoList = async (keyword: string) => {
async function demo() { async function demo() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
const res = await getSearchListing(keyword) const res = await getSearchListing(keyword)
if (!(res as any).data.length) { if (!(res as any).data.length) {
@ -323,46 +384,15 @@ interface objType {
} }
const logos = ref<objType[]>([ const logos = ref<objType[]>([
{ // {
title: "bestCompany", // title: "bestCompany",
number: "09985", // number: "09985",
HKD: "HKD 148.000", // HKD: "HKD 148.000",
price: "final offer Price", // price: "final offer Price",
time: "2023-03-31 09:00", // time: "2023-03-31 09:00",
trading: "Commencement of trading date" // 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 jsonData = { const jsonData = {
@ -514,6 +544,7 @@ drawer.value = data
// height: 20rem; // height: 20rem;
// } // }
// } // }
.login2 { .login2 {
background-image: url("@/assets/1x/beijingtu.png"); background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -757,7 +788,7 @@ drawer.value = data
width: 420px; width: 420px;
background-color: #ffffff; background-color: #ffffff;
height: 500px; height: 500px;
margin-top: 150px; margin-top: 130px;
// margin-left: 20px; // margin-left: 20px;
// text-align: center; // text-align: center;
// line-height: 500px; // line-height: 500px;
@ -791,7 +822,8 @@ drawer.value = data
:deep(.el-calendar__body) { :deep(.el-calendar__body) {
background-color: #e8ebee; background-color: #e8ebee;
height: 385px; height:fit-content;
padding: 12px 20px 0px;
} }
:deep(.el-calendar) { :deep(.el-calendar) {