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

<template>
    <GameBroadcast :data="broadcast"></GameBroadcast>
    <div class="content">
        {{ cityInfo.cityName }}·{{ mapInfo.mapName }}({{ mapInfo.x }},{{ mapInfo.y }})
        <Abutton @click="Refresh">刷新</Abutton>
        <Abar href="/task/">任务</Abar>
        <Abar href="/user/message/">消息{{ messageCount > 0 ? "(" + messageCount + ")" : "" }}</Abar>
    </div>
    <div class="content" v-if="gameTips != ''" style="color: red;font-size: 16px;">
        {{ gameTips }}
    </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">
        <span class="item" v-for="item in monster">
            <Abutton @click="AddFight(item.type, item.monterId, item.sign)">{{ item.name }}</Abutton>
        </span>
    </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" v-if="business.length > 0">
        <div class="item" v-for="item in business">
            <Abar :href='"/map/business?id=" + item.busId'>{{ item.busName }}</Abar>
        </div>
    </div>
    <div class="content" v-if="mapRes.length > 0">
        特产:<br>
        <div class="item" v-for="item in mapRes">
            <Abutton @click="showResProp(item)">{{ item.resName }}({{ item.lev }}级)</Abutton>
        </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>&nbsp;
        </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>&nbsp;
        </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>&nbsp;
        </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="" style="margin-top: 10px;">
            <span v-for="(item, index) in cityShow" :key="index">
                <Abutton @click="ChangeMap(item.mapId)">{{ item.mapName }}</Abutton>&nbsp;&nbsp;
                <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>
    <GamePopup v-model:show="showRes" title="【采集】" style="width: 60%;">
        <!-- 自定义内容 -->
        <div class="content">
            物品名称：{{ showResData.resName }}<br>
            采集要求：{{ showResData.lev }}级采集术<br>
            消耗活力：{{ showResData.needVigour }}<br>
            冷却时间：{{ showResData.gather }}秒<br>
        </div>
        <div class="content" style="max-height: 300px;text-align: center; margin-top: 15px;;">
            <van-button type="success" :disabled="resLockDiff > 0 ? true : false" @click="CollectRes">
                {{ resLockDiff > 0 ? `${resLockDiff}秒后可采集` : "立即采集" }}
            </van-button>
        </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 business = ref<Array<any>>([]);
const mapRes = ref<Array<any>>([]);
const monster = ref<Array<any>>([]);
const messageCount = ref(0);
const broadcast = ref<Array<any>>([]);
const gameTips = ref('');
// 城内地图显示
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) {
        if (result.data.fightId != '') {
            return PageExtend.Redirect("/fight?f=" + result.data.fightId);
        }
        mapInfo.value = result.data.mapInfo;
        cityInfo.value = result.data.cityInfo;
        npcData.value = result.data.npcData;
        monster.value = result.data.monster;
        chatData.value = result.data.chatData;
        cityShow.value = result.data.cityShow;
        mapUser.value = result.data.nearUser;
        messageCount.value = result.data.noReadMsg;
        business.value = result.data.business;
        mapRes.value = result.data.mapRes;
        broadcast.value = result.data.broadcast;
        MapVent(result.data.mapInfo.near);
        onMap.value = mapInfo.value.mapId;
        gameTips.value = result.data.gameTips;
        console.log(result)
    }
    else if (result.code == 103) {
        PageExtend.Redirect("/map/runing");
    }
    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)
}


/**采集相关 */
const showRes = ref(false);
const showResData = ref<any>({});
const resLockDiff = ref(0);
const reslockTimer = ref(0) // 定时器实例
const showResProp = async (data: any) => {
    showRes.value = true;
    showResData.value = data;
    resLockDiff.value = data.lockTime;
    if (resLockDiff.value > 0) {
        reslockTimer.value = setInterval(async () => {
            resLockRun();
        }, 1000)
    }
}
const resLockRun = () => {
    if (resLockDiff.value > 0) {
        resLockDiff.value = resLockDiff.value - 1;
    }
    else {
        clearInterval(reslockTimer.value);
    }
}

const CollectRes = async () => {
    MessageExtend.LoadingToast("采集中...");
    let result = await MapService.CollectMapRes(showResData.value.resId);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        resLockDiff.value = result.data;
        MessageExtend.ShowToast(result.msg);
        clearInterval(reslockTimer.value);
        reslockTimer.value = setInterval(async () => {
            resLockRun();
        }, 1000)
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }

}
/**攻击 */
const AddFight = async (type: number, monsterId: string, sign: string) => {
    MessageExtend.LoadingToast("战斗初始化...");
    let result = await FightService.FightMonster(type, monsterId, sign);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        return PageExtend.Redirect("/fight?f=" + result.data);
    }
    else if (result.code == -1) {
        await BindData("");
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
}

</script>