crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
huangjinming 2023-01-06 13:38:02 +08:00
parent 70a0b13031
commit 9c0dd719bc
7 changed files with 457 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/mobile/main/ChipFilter.vue
View File

@ -68,9 +68,9 @@ export default {
return {
hero: "",
priceMin: "",
value2: 7,
value3: 7,
value: 7,
value2: 0,
value3: 0,
value: 0,
priceMax: "",
};
},

43
src/components/mobile/main/FilterTop.vue
View File

@ -19,20 +19,32 @@
:jobList="jobList"
:options="options"
@jobStatus="jobStatus"
@handHeroSelect="handHeroSelect"
@heroLevelChange="heroLevelChange"
@heroQuilityChange="heroQuilityChange"
@heroDurabilityChange="heroDurabilityChange"
@handPriceFilter="handPriceFilter"
@handPriceMax="handPriceMax"
@handPriceMin="handPriceMin"
:priceMin="priceMin"
:priceMax="priceMax"
v-if="nftType == 1 && nftNumber"
class="filter-modal"
></HeroFilter>
<WeaponFilter
:weaponOptions="weaponOptions"
v-else-if="nftType == 2 && nftNumber"
class="filter-modal"
></WeaponFilter>
<ChipFilter
:chipOptions="chipOptions"
v-else-if="nftType == 3 && nftNumber"
class="filter-modal"
:chipList="chipList"
></ChipFilter>
<PieceFilter
:pieceList="pieceList"
:pieceOptions="pieceOptions"
v-else-if="nftType == 4 && nftNumber"
class="filter-modal"
></PieceFilter>
@ -46,7 +58,18 @@ import WeaponFilter from "@/components/mobile/main/WeaponFilter.vue";
import ChipFilter from "@/components/mobile/main/ChipFilter.vue";
import PieceFilter from "@/components/mobile/main/PieceFilter.vue";
export default {
props: ["nftType", "jobList", "chipList", "pieceList", "options"],
props: [
"nftType",
"jobList",
"chipList",
"pieceList",
"options",
"priceMin",
"priceMax",
'weaponOptions',
'chipOptions',
'pieceOptions'
],
components: {
HeroFilter,
WeaponFilter,
@ -77,6 +100,24 @@ export default {
handHeroSelect(value) {
this.$emit("handHeroSelect", value);
},
heroLevelChange(value) {
this.$emit("heroLevelChange", value);
},
heroQuilityChange(value) {
this.$emit("heroQuilityChange", value);
},
heroDurabilityChange(value) {
this.$emit("heroDurabilityChange", value);
},
handPriceFilter() {
this.$emit("handPriceFilter");
},
handPriceMax(value) {
this.$emit("handPriceMax", value);
},
handPriceMin(value) {
this.$emit("handPriceMin", value);
},
},
};
</script>

70
src/components/mobile/main/Herofilter.vue
View File

@ -22,7 +22,12 @@
<div class="btn-bg">Quility</div>
<div class="level-slider">
<div class="slider">
<Slider :min="0" :max="15" v-model="value"></Slider>
<Slider
:min="0"
:max="15"
v-model="Quility"
@change="heroQuilityChange"
></Slider>
</div>
<div class="slider-number">
<div>0</div>
@ -34,11 +39,16 @@
<div class="btn-bg">Level</div>
<div class="level-slider">
<div class="slider">
<Slider :min="0" :max="15" v-model="value2"></Slider>
<Slider
:min="0"
:max="20"
v-model="Level"
@change="heroLevelChange"
></Slider>
</div>
<div class="slider-number">
<div>0</div>
<div>15</div>
<div>20</div>
</div>
</div>
</div>
@ -46,16 +56,29 @@
<div class="btn-bg">durability</div>
<div class="level-slider">
<div class="slider">
<Slider :min="0" :max="15" v-model="value3"></Slider>
<Slider
:min="0"
:max="100"
v-model="durability"
@change="heroDurabilityChange"
></Slider>
</div>
<div class="slider-number">
<div>0</div>
<div>15</div>
<div>100%</div>
</div>
</div>
</div>
</div>
<div class="price">
<PriceFilter
v-show="isType !== 'mynft'"
@handPriceFilter="handPriceFilter"
@handPriceMax="handPriceMax"
@handPriceMin="handPriceMin"
:priceMin="priceMin"
:priceMax="priceMax"
/>
<!-- <div class="price">
<div class="price-btn" @click="priceFilter">Price</div>
<div class="price-bottom">
<div class="price-min">
@ -74,27 +97,27 @@
></el-input>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script>
import Slider from "./Slider.vue";
import PriceFilter from "./PriceFilter.vue";
import PropertySelect from "./PropertySelect.vue";
export default {
props: ["jobList",'options'],
props: ["jobList", "options", "isType", "priceMin", "priceMax"],
components: {
Slider,
PriceFilter,
PropertySelect,
},
data() {
return {
hero: "",
priceMin: "",
value2: 7,
value3: 7,
value: 7,
priceMax: "",
Level: 0,
durability: 0,
Quility: 0,
};
},
mounted() {
@ -116,7 +139,26 @@ export default {
this.$emit("hande");
},
handHeroSelect(value) {
this.$emit("handHeroSelect",value);
this.$emit("handHeroSelect", value);
},
heroLevelChange(value) {
this.$emit("heroLevelChange", value);
},
heroQuilityChange(value) {
this.$emit("heroQuilityChange", value);
},
heroDurabilityChange(value) {
this.$emit("heroDurabilityChange", value);
},
handPriceFilter() {
this.$emit("handPriceFilter");
},
handPriceMax(value) {
this.$emit("handPriceMax", value);
},
handPriceMin(value) {
this.$emit("handPriceMin", value);
},
},
};

129
src/components/mobile/main/PriceFilter.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div>
<div class="price">
<div class="price-btn" @click="handPriceFilter">Price</div>
<div class="price-bottom">
<div class="price-min">
<el-input
v-model="priceMinValue"
:maxlength="13"
placeholder="Min"
></el-input>
</div>
<div class="boder"></div>
<div class="price-max">
<el-input
v-model="priceMaxValue"
:maxlength="13"
placeholder="Max"
></el-input>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["priceMin", "priceMax"],
data() {
return {};
},
computed: {
priceMinValue: {
get() {
return this.priceMin;
},
set(value) {
this.$emit("handPriceMin", value);
},
},
priceMaxValue: {
get() {
return this.priceMax;
},
set(value) {
this.$emit("handPriceMax", value);
},
},
},
methods: {
handPriceFilter() {
this.$emit("handPriceFilter");
}
},
};
</script>
<style lang="scss" scoped>
.price {
margin-top: 100px;
margin-left: 23px;
display: flex;
flex-direction: column;
align-items: center;
.price-btn {
width: 271px;
font-size: 24px;
font-weight: normal;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
color: #ffffff;
height: 103px;
margin-bottom: 24px;
line-height: 103px;
background: url("../../../assets/market/filter-left/btn-bg.png") no-repeat;
background-size: contain;
}
.price-min {
width: 271px;
font-size: 24px;
font-weight: normal;
text-align: center;
color: #ffffff;
height: 60px;
background: url("../../../assets/market/filter-left/price-btn.png")
no-repeat;
background-size: 100% 100%;
}
.price-max {
width: 271px;
font-size: 24px;
font-weight: normal;
text-align: center;
color: #ffffff;
height: 60px;
background: url("../../../assets/market/filter-left/price-btn.png")
no-repeat;
background-size: 100% 100%;
}
.price-bottom {
display: flex;
width: 633px;
height: 73px;
justify-content: flex-start;
align-items: center;
::v-deep .el-input__inner {
background: transparent;
height: 60px;
color: #fff;
border: none;
}
::v-deep .el-input__inner::placeholder {
color: #fff;
text-align: center;
}
}
.boder {
margin-top: 15px;
width: 45px;
margin-right: 11px;
margin-left: 11px;
background: #ffffff;
height: 2px;
}
}
</style>

2
src/components/mobile/main/Slider.vue
View File

@ -2,7 +2,7 @@
<div class="my-slider">
<div class="my-slider__tooltip" :style="style">
<div class="my-slider__tooltip-wrapper">
{{ slider }}
{{ max == 100 ? slider + "%" : slider }}
</div>
</div>
<el-slider

40
src/components/mobile/main/WeaponFilter.vue
View File

@ -2,9 +2,9 @@
<div class="containers">
<div class="job-content">
<PropertySelect
:options="options"
:options="weaponOptions"
:selectValue="selectValue"
@handSelect="handHeroSelect"
@handSelect="handWeaponSelect"
></PropertySelect>
</div>
<div class="level-filter">
@ -72,6 +72,7 @@
import Slider from "./Slider.vue";
import PropertySelect from "./PropertySelect.vue";
export default {
props:['weaponOptions'],
components: {
Slider,
PropertySelect
@ -84,36 +85,7 @@ export default {
value3: 7,
value: 7,
priceMax: "",
jobList: [
{
id: 0,
jobname: "raider",
jobType: false,
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"),
},
],
};
},
mounted() {
@ -134,8 +106,8 @@ export default {
handclick() {
this.$emit("hande");
},
handHeroSelect() {
this.$emit("handHeroSelect");
handWeaponSelect(value) {
this.$emit("handWeaponSelect",value);
},
},
};

220
src/views/mobile/Market.vue
View File

@ -6,6 +6,17 @@
@handSearch="handSearch"
@jobStatus="jobStatus"
@handHeroSelect="handHeroSelect"
@heroLevelChange="heroLevelChange"
@heroQuilityChange="heroQuilityChange"
@heroDurabilityChange="heroDurabilityChange"
@handPriceFilter="handPriceFilter"
@handPriceMax="handPriceMax"
@handPriceMin="handPriceMin"
:priceMin="priceMin"
:priceMax="priceMax"
:weaponOptions="weaponOptions"
:pieceOptions="pieceOptions"
:chipOptions="chipOptions"
:chipList="chipList"
:pieceList="pieceList"
:jobList="jobList"
@ -60,6 +71,8 @@ export default {
nftList: [],
debounce: null,
priceFilter: "0|10000",
priceMin: 0,
priceMax: 10000,
isFiters: false,
totalPage: 1,
pageSize: 10,
@ -154,6 +167,189 @@ export default {
label: "Kurosawa",
},
],
weaponOptions: [
{
value: null,
label: "All",
},
{
value: "Submachine",
label: "Submachine",
},
{
value: "Shotgun",
label: "Shotgun",
},
{
value: "Sniper",
label: "Sniper",
},
{
value: "Bazooka",
label: "Bazooka",
},
{
value: "Laser",
label: "Laser",
},
{
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",
},
],
jobList: [
{
id: 0,
@ -275,6 +471,30 @@ export default {
this.searchFilters = value;
this.getHeroNftList();
},
heroLevelChange(value) {
console.log(value, "value");
this.lvFilter = value;
this.getHeroNftList();
},
heroQuilityChange(value) {
this.qualityFilter = value;
this.getHeroNftList();
},
heroDurabilityChange(value) {
console.log(value, "heroDurabilityChange");
this.durabilityFilter = value;
this.getHeroNftList();
},
handPriceMax(value) {
this.priceMax = value;
},
handPriceMin(value) {
this.priceMin = value;
},
handPriceFilter() {
this.priceFilter = this.priceMin + "|" + this.priceMax;
this.getHeroNftList();
},
async getHeroNftList(pageNo) {
if (!AppModule.accountId) {
return;