139 lines
3.4 KiB
Vue
139 lines
3.4 KiB
Vue
<template>
|
|
<div class="hero-check">
|
|
<a-collapse :expand-icon-position="expandIconPosition">
|
|
<a-collapse-panel header="Hero">
|
|
<!-- <a-checkbox v-for="item in goldList" :key="item.value" @change="onChangeValue(item.value)">
|
|
<span>{{ item.label }}</span>
|
|
</a-checkbox> -->
|
|
<a-checkbox-group :value="heroArr" :options="heroList" @change="onChangeValue" />
|
|
<h2>Tier</h2>
|
|
<a-checkbox-group :value="rankArr" :options="rankList" @change="onChange" />
|
|
<template #extra>{{ heroList.length }}</template>
|
|
</a-collapse-panel>
|
|
</a-collapse>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
// import { SettingOutlined } from "@ant-design/icons-vue";
|
|
import { useMarketplaceStore } from "@/store/marketplace"
|
|
const marketplaceList = useMarketplaceStore()
|
|
|
|
const props = defineProps({
|
|
heroArr: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
rankArr: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['clickHeroChild','clickRankChild'])
|
|
|
|
const heroList = [
|
|
{ label: "Hill", value: "30100" },
|
|
{ label: "Aoi", value: "30300" },
|
|
{ label: "Yamada", value: "30200" },
|
|
{ label: "Astral", value: "30400" },
|
|
{ label: "Miffy", value: "30500" },
|
|
{ label: "Canoe", value: "30600" },
|
|
{ label: "Mariana", value: "30700" },
|
|
{ label: "Dragonscale", value: "30800" },
|
|
{ label: "Lazar", value: "30900" },
|
|
{ label: "Kurosawa", value: "31000" },
|
|
];
|
|
|
|
const heroState = reactive({
|
|
value: [],
|
|
});
|
|
|
|
const onChangeValue = (e) => {
|
|
// ToDo: 筛选
|
|
state.value = e
|
|
// marketplaceList.hero = e
|
|
emit('clickHeroChild',e)
|
|
};
|
|
|
|
|
|
const expandIconPosition = ref("end");
|
|
const handleClick = (event) => {
|
|
// If you don't want click extra trigger collapse, you can prevent this:
|
|
event.stopPropagation();
|
|
};
|
|
|
|
|
|
const rankList = [
|
|
{ label: "Tier1", value: "2" },
|
|
{ label: "Tier2", value: "3" },
|
|
{ label: "Tier3", value: "4" },
|
|
{ label: "Tier4", value: "5" },
|
|
{ label: "Tier5", value: "6" },
|
|
];
|
|
|
|
const state = reactive({
|
|
value: [],
|
|
});
|
|
|
|
const onChange = (e) => {
|
|
// marketplaceList.rank = e
|
|
emit('clickRankChild',e)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hero-check {
|
|
border-bottom: 2px solid #3b3c59;
|
|
:deep(.ant-collapse) {
|
|
color: #fff;
|
|
border: 0px;
|
|
.ant-collapse-item {
|
|
border: 0px;
|
|
.ant-collapse-header {
|
|
color: #BB7FFF;
|
|
padding: 0;
|
|
}
|
|
.ant-collapse-content {
|
|
background: none;
|
|
border: none;
|
|
.ant-collapse-content-box {
|
|
padding: 20px 0;
|
|
.ant-checkbox-wrapper {
|
|
display: flex !important;
|
|
span {
|
|
color: #BB7FFF;
|
|
}
|
|
}
|
|
h2 {
|
|
font-family: 'Poppins';
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #BB7FFF;
|
|
margin-bottom: 10px;
|
|
border-top: 2px solid #3b3c59;
|
|
margin-top: 20px;
|
|
padding-top: 5px;
|
|
}
|
|
.ant-checkbox-group {
|
|
display: block;
|
|
.ant-checkbox-wrapper {
|
|
display: flex !important;
|
|
}
|
|
.ant-checkbox-group-item {
|
|
display: flex !important;
|
|
background: #16141b;
|
|
span {
|
|
color: #BB7FFF !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|