125 lines
3.4 KiB
Vue
125 lines
3.4 KiB
Vue
<template>
|
|
<div class="rank-check">
|
|
<h2>Heroic rank</h2>
|
|
<!-- <a-collapse :expand-icon-position="expandIconPosition">
|
|
<a-collapse-panel header="Hero"> -->
|
|
<a-checkbox v-for="item in heroList" :key="item.value" @change="onChangeValue(item.value)">
|
|
<span>{{ item.label }}</span>
|
|
<!-- <span>{{ heroList.length }}</span> -->
|
|
</a-checkbox>
|
|
<!-- </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 heroList = [
|
|
{ label: "Hill", value: "Hill" },
|
|
{ label: "Aoi", value: "Aoi" },
|
|
{ label: "Yamada", value: "Yamada" },
|
|
{ label: "Astral", value: "Astral" },
|
|
];
|
|
const checkArr = ref([])
|
|
const expandIconPosition = ref("end");
|
|
const handleClick = (event) => {
|
|
// If you don't want click extra trigger collapse, you can prevent this:
|
|
event.stopPropagation();
|
|
};
|
|
const onChangeValue = (e) => {
|
|
// ToDo: 筛选
|
|
console.log(JSON.parse(JSON.stringify(marketplaceList.rank)),'-0---')
|
|
if(JSON.parse(JSON.stringify(marketplaceList.rank)) == undefined || JSON.parse(JSON.stringify(marketplaceList.rank)).length <= 0) {
|
|
console.log(e)
|
|
JSON.parse(JSON.stringify(marketplaceList.rank)).push(e)
|
|
for(let i = 0; i < JSON.parse(JSON.stringify(marketplaceList.rank)).length; i++) {
|
|
console.log('进来')
|
|
if(JSON.parse(JSON.stringify(marketplaceList.rank))[i] == e) {
|
|
console.log('这里')
|
|
JSON.parse(JSON.stringify(marketplaceList.rank)).splice(i,1)
|
|
}
|
|
}
|
|
}
|
|
console.log(JSON.parse(JSON.stringify(marketplaceList.rank)),JSON.parse(JSON.stringify(checkArr.value)))
|
|
};
|
|
|
|
const noRepeat1 = function (arr) {
|
|
arr = [...new Set(arr)];
|
|
return arr
|
|
}
|
|
const setArr = ref([])
|
|
const noRepeat2 = (arr,e) => {
|
|
console.log(arr)
|
|
// arr = arr.filter(item => item != e)
|
|
for(var i = 0; i < arr.length; i++){
|
|
if(arr[i] != e) {
|
|
console.log(e,'不')
|
|
setArr.value.push(e)
|
|
} else {
|
|
console.log(arr[i],'等')
|
|
}
|
|
}
|
|
console.log(setArr.value,arr,'-------')
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.rank-check {
|
|
border-bottom: 2px solid #fff;
|
|
margin: 20px 0;
|
|
padding-bottom: 20px;
|
|
h2 {
|
|
font-family: 'Poppins';
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #BB7FFF;
|
|
margin-bottom: 10px;
|
|
}
|
|
// :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-checkbox-wrapper {
|
|
display: flex !important;
|
|
color: #BB7FFF;
|
|
}
|
|
.ant-collapse-content-box {
|
|
padding: 20px 0;
|
|
.ant-checkbox-wrapper {
|
|
display: flex !important;
|
|
span {
|
|
color: #BB7FFF;
|
|
}
|
|
}
|
|
.ant-checkbox-group {
|
|
display: block;
|
|
.ant-checkbox-wrapper {
|
|
display: flex !important;
|
|
}
|
|
.ant-checkbox-group-item {
|
|
display: flex !important;
|
|
background: #fff;
|
|
span {
|
|
color: #BB7FFF !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
</style>
|