Skip to content

Commit

Permalink
feat:世界地图弹窗修改
Browse files Browse the repository at this point in the history
  • Loading branch information
Jerry authored and Jerry committed Mar 12, 2024
1 parent 094311b commit 62ad994
Show file tree
Hide file tree
Showing 4 changed files with 229 additions and 35 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
node_modules
/dist
package-lock.json
.history

# local env files
.env.local
Expand Down
84 changes: 84 additions & 0 deletions src/assets/css/design/map.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,96 @@
flex-direction: column;
align-items: center;
cursor: move;
position: relative;
}
.m-maps__title {
.fz(24px,24px);
margin: 0;
background-color: #fff;
}
.m-select-box {
.flex;
align-items: center;
position: absolute;
bottom: 10px;
left: 10px;
transition: 0.3s all;
cursor: default;
.m-select__item {
.flex;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
padding-right: 5px;
.u-item-title {
position: relative;
margin-right: 10px;
.u-img {
width: 40px;
height: 100px;
display: block;
object-fit: cover;
object-position: left;
}
.u-text {
position: absolute;
right: 3px;
top: 50%;
transform: translateY(-50%);
color: #fff;
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
}
}
.m-select-arrow-box{
.u-item-arrow {
width: 30px;
display: block;
cursor: pointer;
&.u-item-arrow_left {
margin-right: 10px;
}
&.u-item-right {
margin-left: 10px;
}
&.u-item-arrow_dis{
cursor: not-allowed;
}
}
}
.u-item-option {
.flex;
align-items: center;
.u-item {
text-align: center;
width: 120px;
height: 90px;
padding: 5px;
box-sizing: border-box;
cursor: pointer;
.u-img {
display: block;
width: 110px;
height: 60px;
margin-bottom: 2px;
}
.u-text {
color: white;
}
&:not(:first-child) {
margin-left: 5px;
}
}
}

&:not(:first-child) {
margin-left: 10px;
}
}
&.m-select-box__hide {
transform: translateX(-110%);
}
}
.m-map__world {
.pr;
.size(4920px, 3456px);
Expand Down
2 changes: 1 addition & 1 deletion src/components/design/dragWrap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div
class="m-list"
ref="map"
:style="{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})` }"
:style="{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,transition: isDragging? '':'0.5s all' }"
@click="preventClick"
>
<slot></slot>
Expand Down
177 changes: 143 additions & 34 deletions src/components/design/map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,75 @@
<template v-if="!mapId">
<dragWrap :data="scale">
<div class="m-map__world">
<span
class="u-map"
v-for="(item, id) in maps"
:key="id"
:style="`left:${item.Left || 0}px;top:${item.Top || 0}px`"
@click="showChild(item)"
>
<span class="u-map" v-for="(item, id) in maps" :key="id" :style="`left:${item.Left || 0}px;top:${item.Top || 0}px`" @click="showChild(item)">
{{ item.szDisplayName }}
</span>
<img class="u-img" :src="map" alt="世界地图" />
<img class="u-img" :src="map" @click="visible = false" alt="世界地图" />
<img class="u-traffic" :src="traffic" alt="交通路线" />
</div>
</dragWrap>
</template>

<img :src="currentMap" v-else />

<!-- 世界地图选择弹框 -->
<div
class="m-select-box"
:class="{
'm-select-box__hide': !visible,
}"
>
<div class="m-select__item">
<div class="u-item-title">
<img class="u-img" :src="getIcon('newworldmap_03_39')" />
<span class="u-text">周边城镇</span>
</div>
<div class="u-item-option">
<div
class="u-item"
v-for="(item, index) in selectMap.city"
:key="index"
@click="showMap(item)"
:style="{
backgroundImage: `url(${getIcon('newworldmap_03_33')})`,
}"
>
<img class="u-img" :src="item.szButtonShowImg" />
<span class="u-text">{{ item.szComment }}</span>
</div>
</div>
</div>
<div class="m-select__item" v-if="selectMap.fb.length">
<div class="u-item-title">
<img class="u-img" :src="getIcon('newworldmap_03_39')" />
<span class="u-text">周边秘境</span>
</div>
<div class="m-select-arrow-box" v-if="selectMapOptions.maxCurrent">
<img v-if="selectMapOptions.current != 1" @click="selectMapChange('after')" class="u-item-arrow u-item-arrow_left" :src="getIcon('newworldmap_03_29')" />
<img v-else class="u-item-arrow u-item-arrow_left u-item-arrow_dis" :src="getIcon('newworldmap_03_31')" />
</div>
<div class="u-item-option">
<template v-for="(item, index) in selectMap.fb">
<div
v-if="index >= selectMapOptions.after && index < selectMapOptions.before"
class="u-item"
:key="index"
@click="showMap(item)"
:style="{
backgroundImage: `url(${getIcon('newworldmap_03_33')})`,
}"
>
<img class="u-img" :src="item.szButtonShowImg" />
<span class="u-text">{{ item.szShowName || item.szComment }}</span>
</div>
</template>
</div>
<div class="m-select-arrow-box" v-if="selectMapOptions.maxCurrent">
<img v-if="selectMapOptions.current != selectMapOptions.maxCurrent" @click="selectMapChange('before')" class="u-item-arrow u-item-right" :src="getIcon('newworldmap_03_25')" />
<img v-else class="u-item-arrow u-item-right u-item-arrow_dis" :src="getIcon('newworldmap_03_28')" />
</div>
</div>
</div>
</div>

<div class="m-toolbar">
Expand All @@ -28,47 +81,38 @@
<template slot="prepend">地图</template>
</el-input>
<el-button-group>
<el-button type="primary" size="small" icon="el-icon-arrow-left" @click="changePage('prev')"
>上一页</el-button
>
<el-button type="primary" size="small" icon="el-icon-arrow-left" @click="changePage('prev')">上一页</el-button>
<el-button type="primary" size="small" @click="changePage('next')">
下一页
<i class="el-icon-arrow-right el-icon--right"></i>
</el-button>
</el-button-group>
<div class="u-world-map" @click="changeWorldMap">世界地图</div>
<div :class="[{ mapId }, 'm-mapList']">
<div
v-for="item in mapsList"
:key="item.ID"
:label="item.MapName"
:value="item.ID"
@click="changeMap(item.ID)"
:class="['u-item', { active: item.ID == mapId }]"
>
<div v-for="item in mapsList" :key="item.ID" :label="item.MapName" :value="item.ID" @click="changeMap(item.ID)" :class="['u-item', { active: item.ID == mapId }]">
{{ item.DisplayName }}
</div>
</div>
</div>

<el-dialog custom-class="m-maps-dialog" title="提示" :visible.sync="visible" width="600">
<!-- <el-dialog custom-class="m-maps-dialog" title="提示" :visible.sync="visible" width="600">
<div class="m-city">
<span v-for="(item, i) in children" :key="i" @click="showMap(item)">{{ item.szComment }}</span>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="visible = false">关 闭</el-button>
</span>
</el-dialog>
</el-dialog> -->
</div>
</template>

<script>
import { getWorldMap, getMaps } from "@/service/maps.js";
import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
import dragWrap from "./dragWrap.vue";
import { uniqBy } from "lodash";
import { getWorldMap, getMaps } from '@/service/maps.js';
import { __imgPath } from '@jx3box/jx3box-common/data/jx3box.json';
import dragWrap from './dragWrap.vue';
import { uniqBy } from 'lodash';
export default {
name: "Map",
name: 'Map',
components: { dragWrap },
data() {
return {
Expand All @@ -78,15 +122,26 @@ export default {
fb: [],
maps: [],
mapsList: [],
search: "",
search: '',
page: 1,
per: 17,
count: 0,
title: "世界地图",
title: '世界地图',
children: [],
visible: false,
scale: { x: -122, y: -1400, scale: 0.35 },
selectMap: {
city: [],
fb: [],
},
selectMapOptions: {
current: 1,
maxCurrent: 0,
after: 0,
before: 0,
},
};
},
computed: {
Expand Down Expand Up @@ -120,7 +175,7 @@ export default {
},
},
mapId(val) {
if (val === null || val === "" || val === undefined) this.mapId = 0;
if (val === null || val === '' || val === undefined) this.mapId = 0;
const map_1 = this.maps.filter((item) => item.ID == val)[0];
const map_2 = this.mapsList.filter((item) => item.ID == val)[0];
this.title = map_1?.szDisplayName || map_2?.DisplayName || this.title;
Expand All @@ -140,12 +195,12 @@ export default {
},
changeWorldMap() {
this.mapId = 0;
this.title = "世界地图";
this.title = '世界地图';
this.scale = { ...this.$options.data().scale, map: Math.random() };
},
changePage(key) {
let page = this.page;
if (key === "prev") {
if (key === 'prev') {
page--;
} else if (page < this.count / this.per) {
page++;
Expand All @@ -169,7 +224,9 @@ export default {
this.count = res.data.data.count;
});
},
showChild({ szChildCityMaps, szChildCopyMaps }) {
showChild({ szChildCityMaps, szChildCopyMaps, Left, Top }) {
// 定位地图位置到当前选择位置
this.scale = { x: 4920 - Left - 2444, y: 3456 - Top - 2979, scale: 1 };
let city = [];
let fb = [];
if (szChildCityMaps && szChildCityMaps.length) {
Expand All @@ -180,17 +237,69 @@ export default {
}
const children = city.concat(fb).filter((item) => item.szComment) || [];
if (children.length) {
this.children = uniqBy(children, "dwMapID");
this.children = uniqBy(children, 'dwMapID');
let newChildren = { city: [], fb: [] };
children.forEach((item) => {
item.szButtonShowImg = this.getGoMapImg(item);
if ('szVersion' in item) {
newChildren.fb.push(item);
} else {
newChildren.city.push(item);
}
});
this.selectMap = newChildren;
// 计算秘境是否可以左右切换
let intervalValue = 6 - this.selectMap.city.length;
if (this.selectMap.fb.length > intervalValue) {
// 需要切换
this.selectMapOptions = {
current: 1,
maxCurrent: Math.ceil(this.selectMap.fb.length / intervalValue),
value: intervalValue,
after: 0,
before: intervalValue,
};
} else {
this.selectMapOptions = {
after: 0,
before: this.selectMap.fb.length,
maxCurrent: 0,
};
}
this.visible = true;
}
},
selectMapChange(type) {
if (type == 'after') {
this.selectMapOptions.current = this.selectMapOptions.current - 1;
this.selectMapOptions.after = this.selectMapOptions.after - this.selectMapOptions.value;
this.selectMapOptions.before = this.selectMapOptions.before - this.selectMapOptions.value;
} else if (type == 'before') {
this.selectMapOptions.current = this.selectMapOptions.current + 1;
this.selectMapOptions.after = this.selectMapOptions.after + this.selectMapOptions.value;
this.selectMapOptions.before = this.selectMapOptions.before + this.selectMapOptions.value;
}
},
mapLink() {
return;
},
getGoMapImg(itemData) {
let finalResult = '';
if (itemData.szButtonImg.includes('.UITex')) {
finalResult = itemData.szButtonImg.substring(itemData.szButtonImg.indexOf('NewWorldMap'), itemData.szButtonImg.lastIndexOf('.UITex')).concat('_', itemData.nFrame);
} else {
finalResult = `NewWorldMap/fb/${itemData.szButtonImg}`;
}
const lowercaseString = finalResult.toLowerCase();
return `${__imgPath}map2/std/${lowercaseString}.png`;
},
getIcon(key) {
return `${__imgPath}map2/std/newworldmap/${key}.png`;
},
},
};
</script>
<style lang="less">
@import "~@/assets/css/design/map.less";
@import '~@/assets/css/design/map.less';
</style>

0 comments on commit 62ad994

Please sign in to comment.