786 lines
17 KiB
Vue
786 lines
17 KiB
Vue
<template>
|
|
<div>
|
|
<top-menu class="desk-top" :current-tab="currentTab"></top-menu>
|
|
<section class="root">
|
|
<div class="container">
|
|
<!-- <search-panel @filter-show="showFilter" :nft-type="nftType" :class="{'show': mobileFilterShow}"></search-panel> -->
|
|
<FilterLeft
|
|
@filter-show="showFilter"
|
|
@sliderChange="sliderChange"
|
|
@heroSearch="heroSearch"
|
|
@handSelect="handSelect"
|
|
@jobStatus="jobStatus"
|
|
@pieceStatus="pieceStatus"
|
|
@heroLevelChange="heroLevelChange"
|
|
@heroQuilityChange="heroQuilityChange"
|
|
@heroDurabilityChange="heroDurabilityChange"
|
|
@weaponSearch="weaponSearch"
|
|
@weaponQuilityChange="weaponQuilityChange"
|
|
@weaponLevelChange="weaponLevelChange"
|
|
@weaponDurabilityChange="weaponDurabilityChange"
|
|
@handWeaponSelect="handWeaponSelect"
|
|
@chipStatus="chipStatus"
|
|
@chipSearch="chipSearch"
|
|
@handChipSelect="handChipSelect"
|
|
@chipLevelChange="chipLevelChange"
|
|
@pieceSearch="pieceSearch"
|
|
@handPieceSelect="handPieceSelect"
|
|
@handPriceMax="handPriceMax"
|
|
@handPriceMin="handPriceMin"
|
|
@handPriceFilter="handPriceFilter"
|
|
:jobList="jobList"
|
|
:chipList="chipList"
|
|
:pieceList="pieceList"
|
|
:options="options"
|
|
:weaponOptions="weaponOptions"
|
|
:pieceOptions="pieceOptions"
|
|
:chipOptions="chipOptions"
|
|
:nft-type="nftType"
|
|
:value="value"
|
|
:priceMax="priceMax"
|
|
:priceMin="priceMin"
|
|
></FilterLeft>
|
|
<div class="right-part">
|
|
<div></div>
|
|
<nft-type-bar
|
|
:select-idx="nftType"
|
|
:sortOptions="sortOptions"
|
|
@handSortSelect="handSortSelect"
|
|
@nft-type-changed="onNftTypeClicked"
|
|
></nft-type-bar>
|
|
<search-result
|
|
@filter-show="showFilter"
|
|
:select-idx="nftType"
|
|
:nftList="nftList"
|
|
:show-sort="true"
|
|
></search-result>
|
|
<result-no
|
|
v-if="nftList.length === 0"
|
|
title="No Record."
|
|
desc=""
|
|
></result-no>
|
|
<pagination
|
|
v-if="totalPage > 10"
|
|
:total="totalPage"
|
|
:current="currentPage"
|
|
@to-page="toPage"
|
|
class="page-comp"
|
|
></pagination>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<base-footer :auto-size="true">></base-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from "vue-property-decorator";
|
|
import SearchPanel from "@/components/market/SearchPanel.vue";
|
|
import ResultNo from "@/components/market/ResultNo.vue";
|
|
import Pagination from "@/components/market/Pagination.vue";
|
|
import { AppModule } from "@/store/modules/app";
|
|
import { UserModule } from "@/store/modules/user";
|
|
import FilterLeft from "@/components/market/FilterLeft.vue";
|
|
import SearchResult from "@/components/market/SearchResult.vue";
|
|
import TopMenu from "@/components/market/TopMenu.vue";
|
|
import BaseFooter from "@/components/layout/BaseFooter.vue";
|
|
import NftTypeBar from "@/components/market/NftTypeBar.vue";
|
|
import { queryShellNftList } from "@/api/Market";
|
|
import { debounce } from "@/utils/formatAddress";
|
|
|
|
@Component({
|
|
components: {
|
|
NftTypeBar,
|
|
ResultNo,
|
|
BaseFooter,
|
|
SearchResult,
|
|
SearchPanel,
|
|
FilterLeft,
|
|
TopMenu,
|
|
Pagination,
|
|
},
|
|
})
|
|
export default class Market extends Vue {
|
|
mobileFilterShow = false;
|
|
currentTab = "market";
|
|
value = 7;
|
|
nftType = 1;
|
|
nftList = [];
|
|
debounce: any = null;
|
|
private totalPage = 1;
|
|
private pageSize = 10;
|
|
private currentPage = 1;
|
|
private searchFilters: any = null;
|
|
private jobFilters: any = "1|2|3|4";
|
|
private orderAsc: any = 1;
|
|
private lvFilter: any = 0;
|
|
private qualityFilter: number = 0;
|
|
private durabilityFilter: any = null;
|
|
private orderMethod: any = 0;
|
|
private priceFilter: any = "0|10000";
|
|
private priceMax = 10000;
|
|
private priceMin = 0;
|
|
private starts = 0;
|
|
|
|
private options = [
|
|
{
|
|
value: null,
|
|
label: "All",
|
|
},
|
|
{
|
|
value: "Hill",
|
|
label: "Hill",
|
|
},
|
|
{
|
|
value: "Yamato",
|
|
label: "Yamato",
|
|
},
|
|
{
|
|
value: "Highest",
|
|
label: "Highest",
|
|
},
|
|
{
|
|
value: "Aoi",
|
|
label: "Aoi",
|
|
},
|
|
{
|
|
value: "Astral",
|
|
label: "Astral",
|
|
},
|
|
{
|
|
value: "Miffy",
|
|
label: "Miffy",
|
|
},
|
|
{
|
|
value: "Canoe",
|
|
label: "Canoe",
|
|
},
|
|
{
|
|
value: "Mariana",
|
|
label: "Mariana",
|
|
},
|
|
{
|
|
value: "Dragonscale",
|
|
label: "Dragonscale",
|
|
},
|
|
{
|
|
value: "Lazer",
|
|
label: "Lazer",
|
|
},
|
|
{
|
|
value: "Kurosawa",
|
|
label: "Kurosawa",
|
|
},
|
|
];
|
|
weaponOptions = [
|
|
{
|
|
value: null,
|
|
label: "All",
|
|
},
|
|
{
|
|
value: "Submachine",
|
|
label: "Submachine",
|
|
},
|
|
{
|
|
value: "Shotgun",
|
|
label: "Shotgun",
|
|
},
|
|
|
|
{
|
|
value: "Sniper",
|
|
label: "Sniper",
|
|
},
|
|
|
|
{
|
|
value: "Bazooka",
|
|
label: "Bazooka",
|
|
},
|
|
|
|
{
|
|
value: "Lazer",
|
|
label: "Lazer",
|
|
},
|
|
{
|
|
value: "Freeze",
|
|
label: "Freeze",
|
|
},
|
|
{
|
|
value: "Flame",
|
|
label: "Flame",
|
|
},
|
|
];
|
|
chipOptions = [
|
|
{
|
|
value: null,
|
|
label: "All",
|
|
},
|
|
{
|
|
value: "Life Source(H)",
|
|
label: "Life Source(H)",
|
|
},
|
|
{
|
|
value: "Brutal force(H)",
|
|
label: "Brutal force(H)",
|
|
},
|
|
|
|
{
|
|
value: "Tree gurad(H)",
|
|
label: "Tree gurad(H)",
|
|
},
|
|
|
|
{
|
|
value: "Sniper eye(H)",
|
|
label: "Sniper eye(H)",
|
|
},
|
|
|
|
{
|
|
value: "Sniper heart(H)",
|
|
label: "Sniper heart(H)",
|
|
},
|
|
{
|
|
value: "Limbo dodge(H)",
|
|
label: "Limbo dodge(H)",
|
|
},
|
|
{
|
|
value: "Limbo pace(H)",
|
|
label: "Limbo pace(H)",
|
|
},
|
|
{
|
|
value: "Level Green vibrant(H)",
|
|
label: "Level Green vibrant(H)",
|
|
},
|
|
{
|
|
value: "Price Brutal force(w)",
|
|
label: "Price Brutal force(w)",
|
|
},
|
|
{
|
|
value: "Sniper eye(W)",
|
|
label: "Sniper eye(W)",
|
|
},
|
|
{
|
|
value: "Sniper heart(W)",
|
|
label: "Sniper heart(W)",
|
|
},
|
|
{
|
|
value: "Blood sucker(w)",
|
|
label: "Blood sucker(w)",
|
|
},
|
|
{
|
|
value: "Graceful draw(w)",
|
|
label: "Graceful draw(w)",
|
|
},
|
|
{
|
|
value: "Bullet speed(W)",
|
|
label: "Bullet speed(W)",
|
|
},
|
|
];
|
|
pieceOptions = [
|
|
{
|
|
value: null,
|
|
label: "All",
|
|
},
|
|
{
|
|
value: "Testimonial",
|
|
label: "Testimonial",
|
|
},
|
|
{
|
|
value: "Shoulder",
|
|
label: "Shoulder",
|
|
},
|
|
|
|
{
|
|
value: "Left Arm",
|
|
label: "Left Arm",
|
|
},
|
|
|
|
{
|
|
value: "Abdomen",
|
|
label: "Abdomen",
|
|
},
|
|
|
|
{
|
|
value: "Left Leg",
|
|
label: "Left Leg",
|
|
},
|
|
{
|
|
value: "Weapon Head",
|
|
label: "Weapon Head",
|
|
},
|
|
{
|
|
value: "Chest",
|
|
label: "Chest",
|
|
},
|
|
{
|
|
value: "Right Arm",
|
|
label: "Right Arm",
|
|
},
|
|
{
|
|
value: "Right Leg",
|
|
label: "Right Leg",
|
|
},
|
|
{
|
|
value: "Blueprint",
|
|
label: "Blueprint",
|
|
},
|
|
{
|
|
value: "Sight",
|
|
label: "Sight",
|
|
},
|
|
{
|
|
value: "Stock",
|
|
label: "Stock",
|
|
},
|
|
{
|
|
value: "Trigger",
|
|
label: "Trigger",
|
|
},
|
|
{
|
|
value: "Ammo",
|
|
label: "Ammo",
|
|
},
|
|
{
|
|
value: "Bolt",
|
|
label: "Bolt",
|
|
},
|
|
{
|
|
value: "Barrel",
|
|
label: "Barrel",
|
|
},
|
|
{
|
|
value: "Grip",
|
|
label: "Grip",
|
|
},
|
|
{
|
|
value: "Clip",
|
|
label: "Clip",
|
|
},
|
|
];
|
|
sortOptions = [
|
|
{
|
|
value: "1|1",
|
|
label: "Recently",
|
|
},
|
|
{
|
|
value: "2|1",
|
|
label: "Highest",
|
|
},
|
|
{
|
|
value: "2|0",
|
|
label: "Lowest",
|
|
},
|
|
{
|
|
value: "3|1",
|
|
label: "Quality",
|
|
},
|
|
{
|
|
value: "4|1",
|
|
label: "Level",
|
|
},
|
|
{
|
|
value: "5|1",
|
|
label: "Energy",
|
|
},
|
|
];
|
|
jobList = [
|
|
{
|
|
id: 0,
|
|
jobname: "raider",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/raider.png"),
|
|
disImg: require("../../assets/market/filter-left/raider-disabled.png"),
|
|
},
|
|
{
|
|
id: 1,
|
|
jobname: "guardian",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/guardian.png"),
|
|
disImg: require("../../assets/market/filter-left/guardian-disabled.png"),
|
|
},
|
|
{
|
|
id: 2,
|
|
jobname: "machinist",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/machinist.png"),
|
|
disImg: require("../../assets/market/filter-left/machinist-disabled.png"),
|
|
},
|
|
{
|
|
id: 3,
|
|
jobname: "medic",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/medic.png"),
|
|
disImg: require("../../assets/market/filter-left/medic-disabled.png"),
|
|
},
|
|
];
|
|
chipList = [
|
|
{
|
|
id: 0,
|
|
jobname: "raider",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/hero-chip.png"),
|
|
disImg: require("../../assets/market/filter-left/hero-chip-disable.png"),
|
|
},
|
|
{
|
|
id: 1,
|
|
jobname: "guardian",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/gun-chip.png"),
|
|
disImg: require("../../assets/market/filter-left/gun-chip-disable.png"),
|
|
},
|
|
];
|
|
pieceList = [
|
|
{
|
|
id: 0,
|
|
jobname: "raider",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/hero-chip.png"),
|
|
disImg: require("../../assets/market/filter-left/hero-chip-disable.png"),
|
|
},
|
|
{
|
|
id: 1,
|
|
jobname: "guardian",
|
|
jobType: true,
|
|
jobImg: require("../../assets/market/filter-left/gun-chip.png"),
|
|
disImg: require("../../assets/market/filter-left/gun-chip-disable.png"),
|
|
},
|
|
];
|
|
get isValue() {
|
|
return this.value;
|
|
}
|
|
@Watch("isValue")
|
|
private updatePage() {
|
|
console.log(this.isValue, "upsate");
|
|
}
|
|
get accountId() {
|
|
return AppModule.accountId;
|
|
}
|
|
|
|
get isLogin() {
|
|
return !!UserModule.token && !!AppModule.step && AppModule.accountId;
|
|
}
|
|
created() {
|
|
this.debounce = debounce(() => {
|
|
this.getHeroNftList(this.starts);
|
|
}, 1500);
|
|
}
|
|
heroSearch(value: string) {
|
|
this.searchFilters = value;
|
|
this.debounce();
|
|
}
|
|
|
|
handSelect(value: string) {
|
|
this.searchFilters = value;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
handSortSelect(value: string) {
|
|
this.orderMethod = value.slice(0, 1);
|
|
this.orderAsc = value.slice(2, 3);
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
jobStatus(item: any) {
|
|
this.jobList[item.id].jobType = !this.jobList[item.id].jobType;
|
|
|
|
let list = this.jobList.filter((item) => {
|
|
return item.jobType == true;
|
|
});
|
|
let arry = list.map((item) => {
|
|
return item.id;
|
|
});
|
|
let newArray = arry.map(function (index) {
|
|
return index + 1;
|
|
});
|
|
this.jobFilters = newArray.join("|");
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
pieceStatus(item: any) {
|
|
console.log(item, "item");
|
|
this.pieceList[item.id].jobType = !this.pieceList[item.id].jobType;
|
|
console.log(this.pieceList[item.id].jobType, "type");
|
|
let list = this.pieceList.filter((item) => {
|
|
return item.jobType == true;
|
|
});
|
|
let arry = list.map((item) => {
|
|
return item.id;
|
|
});
|
|
let newArray = arry.map(function (index) {
|
|
return index + 1;
|
|
});
|
|
this.jobFilters = newArray.join("|");
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
chipStatus(item: any) {
|
|
this.chipList[item.id].jobType = !this.chipList[item.id].jobType;
|
|
|
|
let list = this.chipList.filter((item) => {
|
|
return item.jobType == true;
|
|
});
|
|
let arry = list.map((item) => {
|
|
return item.id;
|
|
});
|
|
let newArray = arry.map(function (index) {
|
|
return index + 1;
|
|
});
|
|
this.jobFilters = newArray.join("|");
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
|
|
heroLevelChange(levelSlider: any) {
|
|
this.lvFilter = levelSlider;
|
|
this.getHeroNftList(this.starts);
|
|
// this.$emit("heroLevelChange", levelSlider);
|
|
}
|
|
heroQuilityChange(Quility: any) {
|
|
this.qualityFilter = Quility;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
heroDurabilityChange(durability: any) {
|
|
this.durabilityFilter = durability;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
handWeaponSelect(value: any) {
|
|
this.searchFilters = value;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
weaponSearch(value: string) {
|
|
this.searchFilters = value;
|
|
this.debounce();
|
|
}
|
|
weaponQuilityChange(Quility: any) {
|
|
this.qualityFilter = Quility;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
weaponLevelChange(value: any) {
|
|
this.lvFilter = value;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
weaponDurabilityChange(durability: any) {
|
|
this.durabilityFilter = durability;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
chipSearch(value: string) {
|
|
this.searchFilters = value;
|
|
this.debounce();
|
|
}
|
|
handChipSelect(value: string) {
|
|
this.searchFilters = value;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
chipLevelChange(value: any) {
|
|
this.lvFilter = value;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
pieceSearch(value: string) {
|
|
this.searchFilters = value;
|
|
this.debounce();
|
|
}
|
|
handPieceSelect(value: any) {
|
|
this.searchFilters = value;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
handPriceMax(value: any) {
|
|
this.priceMax = value;
|
|
}
|
|
handPriceMin(value: any) {
|
|
this.priceMin = value;
|
|
}
|
|
handPriceFilter() {
|
|
this.priceFilter = this.priceMin + "|" + this.priceMax;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
toPage(pageNo: number) {
|
|
console.log("to page: ", pageNo);
|
|
// this.currentPage = pageNo
|
|
this.starts = (pageNo - 1) * 10;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
async getHeroNftList(pageNo: number) {
|
|
if (!AppModule.accountId) {
|
|
return;
|
|
}
|
|
const reqData: any = {
|
|
page_size: this.pageSize,
|
|
start: this.starts,
|
|
type: this.nftType == 4 ? 5 : this.nftType,
|
|
job_filters: this.nftType == 2 ? null : this.jobFilters,
|
|
search_filters: this.searchFilters,
|
|
quality_filter: this.qualityFilter,
|
|
durability_filter: this.durabilityFilter,
|
|
lv_filter: this.lvFilter,
|
|
order_asc: this.orderAsc,
|
|
order_method: this.orderMethod,
|
|
price_filter: this.priceFilter,
|
|
};
|
|
const res: any = await queryShellNftList(reqData);
|
|
if (res.nfts) {
|
|
// this.nftList = res.nfts;
|
|
let list = res.nfts;
|
|
this.nftList = list.filter((item: any) => {
|
|
return item.details !== null;
|
|
});
|
|
if (res) {
|
|
const page = res;
|
|
this.totalPage = parseInt(page.total) || 1;
|
|
this.pageSize = page.page_size || 10;
|
|
this.starts = page.start;
|
|
this.currentPage = page.start / page.page_size + 1;
|
|
}
|
|
}
|
|
}
|
|
@Watch("isLogin")
|
|
private accountChange() {
|
|
console.log("account change: ", AppModule.accountId);
|
|
if (this.isLogin) {
|
|
// this.fetchDatas(this.pageSize);
|
|
// this.checkOrderHistory();
|
|
this.getHeroNftList(this.starts);
|
|
console.log("2222222222222");
|
|
} else {
|
|
// this.resetData();
|
|
}
|
|
}
|
|
|
|
showFilter(val: boolean) {
|
|
this.mobileFilterShow = val;
|
|
}
|
|
|
|
onNftTypeClicked(id: number) {
|
|
console.log("nft type clicked: ", id);
|
|
this.nftType = id;
|
|
this.jobFilters = "1|2|3|4";
|
|
const jobList = this.jobList.map((item) => {
|
|
item.jobType = true;
|
|
});
|
|
const chipList = this.chipList.map((item) => {
|
|
item.jobType = true;
|
|
});
|
|
const pieceList = this.pieceList.map((item) => {
|
|
item.jobType = true;
|
|
});
|
|
this.qualityFilter = 0;
|
|
this.durabilityFilter = null;
|
|
this.lvFilter = 0;
|
|
console.log(jobList, "jobList");
|
|
|
|
this.searchFilters = null;
|
|
this.getHeroNftList(this.starts);
|
|
}
|
|
|
|
// this.isValue
|
|
sliderChange() {}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "../../scss/breakpoints.scss";
|
|
.root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
// align-items: center;
|
|
background-image: url("../../assets/market/bg.png.png");
|
|
}
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 1440px;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
.right-part {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
}
|
|
.mobile-top {
|
|
display: none;
|
|
}
|
|
.page-comp {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
@include media("<desktop") {
|
|
.container {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.searchPanel {
|
|
width: 100%;
|
|
}
|
|
.filterTablet {
|
|
padding-top: 40px;
|
|
width: 100%;
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
height: auto;
|
|
}
|
|
.filterTablet.collapsed {
|
|
padding-top: 0;
|
|
opacity: 0;
|
|
height: 0;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
.searchResult {
|
|
padding: 2.5em 4em;
|
|
}
|
|
.searchResult .wrapper .btnFilter {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
@media (min-width: 1924px) {
|
|
.root {
|
|
align-items: center;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
|
.root {
|
|
font-size: 11px;
|
|
}
|
|
.root .container {
|
|
width: 1024px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.root {
|
|
font-size: 20px;
|
|
}
|
|
.container {
|
|
width: 768px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.root {
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) and (max-width: 320px) {
|
|
.root {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.container {
|
|
width: 375px;
|
|
}
|
|
.right-part {
|
|
margin-top: 76px;
|
|
}
|
|
.searchResult {
|
|
padding: 26px 20px;
|
|
}
|
|
|
|
.show {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
</style>
|