Kg.SeaTime/Web/src/pages/map/index.vue

<template>
    <div class="item" style="font-size:15px;">
        <span>[在线奖励]:3分钟后可领取.</span>
    </div>
    <div class="content">
        {{ cityInfo.cityName }}·{{ mapInfo.mapName }}
        <Abutton @click="Refresh">刷新</Abutton>
        <Abar href="/task/">任务</Abar>
        <Abar href="/user/message/">消息{{ messageCount > 0 ? "(" + messageCount + ")" : "" }}</Abar>
    </div>

    <div class="notification">
        <GameChat :data="chatData" :show-time="0"></GameChat>
    </div>
    <div class="content">
        您看到:
        <Abar href="/map/user" v-if="mapUser.length > 0">
            <span v-for="item in mapUser">{{ item.nick }} &nbsp;</span>
        </Abar>
    </div>
    <div class="content">
        <div class="item" v-for="item in npcData">
            <Abar :href='"/map/npc?npc=" + item.npcId'>{{ item.npcName }}{{ item.tips }}</Abar>
        </div>
    </div>

    <div class="content">
        请选择出口:<br />
        <span v-if="mapDong.mapId != ''">东:<Abutton @click="BindData(mapDong.mapId)">{{ mapDong.name }}</Abutton>
            <b v-if="toMapPathData.some(it => it.mapId == mapDong.mapId)">🚩</b>
        </span>
        <span v-if="mapXi.mapId != ''">西:<Abutton @click="BindData(mapXi.mapId)">{{ mapXi.name }}</Abutton>
            <b v-if="toMapPathData.some(it => it.mapId == mapXi.mapId)">🚩</b></span>
        <br v-if="mapDong.mapId != '' || mapXi.mapId != ''">
        <span v-if="mapNan.mapId != ''">南:<Abutton @click="BindData(mapNan.mapId)">{{ mapNan.name }}</Abutton>
            <b v-if="toMapPathData.some(it => it.mapId == mapNan.mapId)">🚩</b></span>
        <span v-if="mapBei.mapId != ''">北:<Abutton @click="BindData(mapBei.mapId)">{{ mapBei.name }}</Abutton>
            <b v-if="toMapPathData.some(it => it.mapId == mapBei.mapId)">🚩</b></span>
    </div>

    <div class="content">
        【<Abutton @click="ShowCityProp">城内地图</Abutton>】.<Abutton @click="ShowMapPathProp">寻路</Abutton>
    </div>
    <div class="content">
        {{ mapInfo.tips }}
    </div>
    <div class="content">
        <MapMenu></MapMenu>
    </div>
    <Footer></Footer>
    <!-- 城内地图 -->
    <GamePopup v-model:show="showCity" title="【城市地图】">
        <!-- 自定义内容 -->
        <div class="">
            <span v-for="(item, index) in cityShow" :key="index">
                <Abutton @click="ChangeMap(item.mapId)">{{ item.mapName }}</Abutton>
                <br v-if="(index + 1) % 4 == 0">
            </span>
        </div>
    </GamePopup>
    <!--寻路-->
    <GamePopup v-model:show="showPath" title="【自动寻路】">
        <!-- 自定义内容 -->
        <div class="content">
            <div class="common serch" style="font-size: 16px; margin-top: 10px;">
                搜索:&nbsp;<input type="text" class="search-ipt" v-model="mapPathSerch">&nbsp;
                <button class="ipt-btn" name="serch" @click="ShowMapPathProp">搜索</button>
            </div>

            <div class="mapList" style="max-height: 300px;">
                <span v-for="(item, index) in cityMapData" :key="index">
                    {{ index + 1 }}.
                    <Abutton @click="ChangeMapPath(item.mapId)">{{ item.mapName }}</Abutton>({{ item.x }},{{ item.y }})
                    <br>
                </span>
                <span v-if="cityMapData.length == 0">暂无地图.</span>
            </div>

        </div>
    </GamePopup>
</template>
<script setup lang="ts">
definePageMeta({
    layout: layout.empty,
    middleware: 'page-loading'
})
const onMap = ref('');
const mapInfo = ref<any>({});
const cityInfo = ref<any>({});
const npcData = ref<Array<any>>([]);
const chatData = ref<Array<any>>([]);
const cityShow = ref<Array<any>>([]);
const mapUser = ref<Array<any>>([]);
const messageCount = ref(0);
// 城内地图显示
const showCity = ref(false);

onMounted(async () => {
    try {
        await BindData("");
    }
    finally {
        PageLoading.Close();
    }
})

/**加载方法 */
const BindData = async (map: string): Promise<void> => {
    let result = await MapService.GetMapData(map);
    if (result.code == 0) {
        mapInfo.value = result.data.mapInfo;
        cityInfo.value = result.data.cityInfo;
        npcData.value = result.data.npcData;
        chatData.value = result.data.chatData;
        cityShow.value = result.data.cityShow;
        mapUser.value = result.data.nearUser;
        messageCount.value = result.data.noReadMsg;
        MapVent(result.data.mapInfo.near);
        onMap.value = mapInfo.value.mapId;
        console.log(result.data);

    }
    else {
        MessageExtend.ShowDialog("异常错误", result.msg);
    }
};

/**刷新 */
const Refresh = async (): Promise<void> => {
    MessageExtend.LoadingToast("刷新中...");
    await BindData("");
    MessageExtend.LoadingClose();

}

/**渲染出口 */
const mapDong = ref<any>({});
const mapXi = ref<any>({});
const mapNan = ref<any>({});
const mapBei = ref<any>({});
const MapVent = (near: Array<any>): void => {
    mapDong.value = near.find(item => item.positition == "东");
    mapXi.value = near.find(item => item.positition == '西');
    mapNan.value = near.find(item => item.positition == '南');
    mapBei.value = near.find(item => item.positition == '北');
}

/**城市地图切换 */
const ShowCityProp = () => {
    showCity.value = true;
}
let changLock = true;//切换锁
const ChangeMap = async (mapId: string): Promise<void> => {
    if (mapId != onMap.value && changLock) {
        changLock = false;
        await BindData(mapId);
        changLock = true;
    }
    showCity.value = false;
};

/**寻路 */
const cityMapData = ref<Array<any>>([]);
const toMapPathData = ref<Array<any>>([]);
const showPath = ref(false);
const mapPathSerch = ref('');
let changPathLock = true;//寻路锁
const ShowMapPathProp = () => {
    //加载数据
    MapService.GetUserOnCityMap(mapPathSerch.value).then(res => {
        if (res.code == 0) {
            showPath.value = true;
            mapPathSerch.value = '';
            cityMapData.value = res.data;
        }
        else {
            MessageExtend.ShowDialog("提示", res.msg);
        }
    });
}
const ChangeMapPath = async (mapId: string): Promise<void> => {
    if (changPathLock) {
        changPathLock = false;
        //此处获取寻路路径信息
        let result = await MapService.GetAutoMapPath(mapId);
        changPathLock = true;
        showPath.value = false;
        if (result.code == 0) {
            toMapPathData.value = []
            toMapPathData.value = result.data;
            StartToMap()
        }
        else {
            MessageExtend.ShowDialog("提示", result.msg);
        }
    }

};
const timer = ref(0) // 定时器实例
const RunMap = async (): Promise<void> => {
    if (toMapPathData.value.length > 0) {
        var toPath = toMapPathData.value.shift();
        await BindData(toPath.mapId);
        toMapPathData.value = toMapPathData.value.filter(item => item !== toPath.mapId)
    }
    else {
        clearInterval(timer.value);
        MessageExtend.LoadingClose();
        MessageExtend.Notify("寻路完成,已达到目的地!", "success");
    }
}
const StartToMap = () => {
    MessageExtend.LoadingToast("自动寻路中...");
    timer.value = setInterval(async () => {
        await RunMap()
    }, 1000)
}


</script>