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

修复bug

Browse Source
This commit is contained in:
zzy
2023-06-16 16:02:24 +08:00
parent 3da81b7b90
commit b3112e27f9
33 changed files with 2616 additions and 860 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/components/Select.vue
+153 -77
View File
@@ -1,9 +1,9 @@
<template>
<div class="selectWrap" v-if="showSelect" @click="preVant">
<div class="selectWrap" @click="preVant">
<div class="box">
<div class="content">
<li>
<div class="word" @click="checkAll(1)">
<div class="word" :class="checkedAll == 1 && 'active'" @click="checkAll(1)">
{{ $t(i18n.global.t('home.title.All')) }}
<div class="check">
<el-icon v-if="checkedAll == 1">
@@ -11,7 +11,8 @@
</el-icon>
</div>
</div>
<div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
<div class="word" :class="checkedAll == 2 && 'active'" @click="checkAll(2)">{{
$t(i18n.global.t('home.title.None')) }}
<div class="check">
<el-icon v-if="checkedAll == 2">
<Check></Check>
@@ -22,7 +23,7 @@
</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"
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'ipoStatus')">
<div class="check">
<el-icon v-if="item.isSelcted">
@@ -35,7 +36,7 @@
<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="checkOne(item.key, 'tradingCurrency')">
:class="item.isSelcted && 'active'" @click="checkOne(item.key, 'tradingCurrency')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -46,7 +47,7 @@
</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"
<div class="word" v-for="item in obj.offeringType" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'offeringType')">
<div class="check">
<el-icon v-if="item.isSelcted">
@@ -59,7 +60,7 @@
<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="checkOne(item.key, 'SecuritiestobeListed')">
:class="item.isSelcted && 'active'" @click="checkOne(item.key, 'SecuritiestobeListed')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -68,19 +69,8 @@
<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="checkOne(item.key, 'ListingPlatform')">
<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">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
@@ -99,28 +89,96 @@ export default {
</script>
<script lang="ts" setup>
import { ref, defineExpose, reactive ,inject,onMounted} from 'vue';
import { ref, defineExpose, reactive, inject, onMounted } from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import { getSelectList } from "@/api/reqIpo/ipo"
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform'
import { ipoStore } from "@/stores/ipo"
import { getDataFromId } from "@/api/mock/home"
const store = ipoStore()
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities'
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const checkedAll = ref(0)
const selectCards=inject('selectCards') as Function
onMounted(()=>{
console.log('select组件挂载');
const selectCards = inject('selectCards') as Function
//const status = inject('status')
onMounted(() => {
//console.log('select组件挂载');
if ((store.$state.selectedArr as any).status) {
console.log('store', store.$state.selectedArr)
const storeData = store.$state.selectedArr as any;
if (storeData.status.length) {
obj.ipoStatus = obj.ipoStatus.map((item: any) => {
const j = storeData.status.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.trade_currency.length) {
obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
const j = storeData.trade_currency.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.offer_type.length) {
obj.offeringType = obj.offeringType.map((item: any) => {
const j = storeData.offer_type.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.list_securities.length) {
obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
const j = storeData.list_securities.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
// if (storeData.list_platform.length) {
// obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
// const j = storeData.list_platform.some((i: string) => i == item.key)
// if (j) {
// return { ...item, isSelcted: true }
// } else {
// return item
// }
// })
// }
}
})
const porps = defineProps<{ fn: Function }>()
const confirm = async () => {
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
if (checkedAll.value == 2) {
store.setSelectedArr({});
porps.fn()
return
}
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities']
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) => {
@@ -129,15 +187,23 @@ const confirm = async () => {
}
})
})
const result = await getSelectList(reqeustObj)
console.log('result',result);
store.setSelectedArr(reqeustObj);
const result = await store.getSearchSelectList()
// const result = await getSelectList(reqeustObj)
//mock数据测试-----------
// const data = await getDataFromId("Select")
// var result = {
// data
// }
//mock数据测试-----------
selectCards(result);
showSelect.value=false
showSelect.value = false
porps.fn()
}
const Cancel = () => {
showSelect.value = false;
// showSelect.value = false;
porps.fn()
}
const preVant = (e: any) => {
e.stopPropagation();
@@ -165,7 +231,7 @@ const obj = reactive({
value: proxy.$t('home.MoneySettlement'),
isSelcted: false
}, {
key: 55,
key: "55",
value: proxy.$t('home.AllocationConfirmed'),
isSelcted: false
}, {
@@ -272,15 +338,15 @@ const obj = reactive({
isSelcted: false
}
],
ListingPlatform: [{
key: '1',
value: proxy.$t('home.Mainboard'),
isSelcted: false
}, {
key: '2',
value: proxy.$t('home.GEM'),
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'),
@@ -349,9 +415,7 @@ function selectAll(all: 1 | 2) {
})
})
}
defineExpose({
showSelect
})
</script>
<style lang="scss" scoped>
@@ -365,14 +429,16 @@ defineExpose({
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 90vw;
height: 93vh;
top: 50%;
left: 50%;
height: 93vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
}
overflow-y: scroll;
}
.box {
box-sizing: border-box;
padding: 10px 20px 20px 20px;
@@ -388,22 +454,23 @@ defineExpose({
font-size: 18px;
color: #879db2;
margin-top: 10px;
// @media screen and (max-width: 768px){
// font-size: 12px;
// }
// @media screen and (max-width: 768px){
// font-size: 12px;
// }
}
li {
display: flex;
font-size: 18px;
flex-wrap: wrap;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
flex-direction: column;
flex-wrap:nowrap;
//font-size: 12px;
width: fit-content;
}
flex-wrap: nowrap;
//font-size: 12px;
width: fit-content;
}
.word {
margin-right: 10px;
@@ -417,22 +484,31 @@ defineExpose({
display: flex;
justify-content: space-between;
cursor: pointer;
@media screen and (max-width: 768px){
height: fit-content;
width: fit-content;
}
@media screen and (max-width: 768px) {
height: fit-content;
width: fit-content;
}
&:hover {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
&.active {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
.check {
width: 30px;
span {
line-height: 35px;
}
}
}
@@ -454,11 +530,12 @@ defineExpose({
background-color: #fff;
color: #557795;
padding: 10px 20px 10px 20px;
@media screen and (max-width: 768px){
margin:0;
@media screen and (max-width: 768px) {
margin: 0;
// font-size: 12px;
}
}
&:hover {
background-color: #0F426F;
@@ -468,5 +545,4 @@ defineExpose({
}
}
}
</style>