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

<template>
    <div class="content">
        <div class="common">
            <Abutton @click="AutoAtk">{{ autoFight == 0 ? "开启自动攻击" : "关闭自动攻击" }}</Abutton>
        </div>
        <div class="common">
            你向{{ otAttr.name }}发起了攻击!
        </div>
        <div class="common">
            <Abutton @click="FightAtk">攻击</Abutton>
            <span>&nbsp;.&nbsp;</span>
            <span v-if="otAttr.code == 'Monster'">
                <Abar :href='"/prop/monster?m=" + otAttr.viceId'>查看</Abar>
            </span>
            <span v-else>
                <Abar :href='"/user/user?no=" + otAttr.viceId'>查看</Abar>
            </span>
            <span>&nbsp;.&nbsp;</span>
            <Abutton @click="ExitFight">撤退({{ exitCopper }}铜贝)</Abutton>
        </div>
        <div class="common">
            <div>
                {{ otAttr.name }}体力({{ otAttr.blood }}/{{ otAttr.upBlood }})
                <span v-if="otHarm != 0">
                    {{ otHarm > 0 ? "+" + otHarm : otHarm }}
                </span>
            </div>
            <div>
                你体力({{ myAttr.blood }}/{{ myAttr.upBlood }})
                <span v-if="myHarm != 0">
                    {{ myHarm > 0 ? "+" + myHarm : myHarm }}
                </span>
            </div>
        </div>
        <div class="common">
            你状态：
            <span v-for="item in myLoad">
                {{ item.name }}({{ item.count }})
            </span>
        </div>
        <div class="common">
            <span v-for="(item, index) in myDrug" :key="index">
                <Abutton @click="UseFightDrug(item.id)">{{ item.name }}({{ item.count }})</Abutton>
                <span v-if="(index + 1) != myDrug.length">&nbsp;.&nbsp;</span>
            </span>
        </div>
        <div class="common">
            <Abar href="/user/equ">状态</Abar>
            <span>&nbsp;.&nbsp;</span>
            <Abar href="/user/bag">物品</Abar>
            <span>&nbsp;.&nbsp;</span>
            <Abar href="/pet">宠物</Abar>
        </div>
    </div>
</template>
<script setup lang="ts">
definePageMeta({
    layout: layout.empty,
    middleware: 'page-loading'
})
let fightId = PageExtend.QueryString("f");
const autoFight = ref(0);
const myHarm = ref(0);
const otHarm = ref(0);
const myAttr = ref<IUserAttr | any>({} as IUserAttr);
const otAttr = ref<IUserAttr | any>({} as IUserAttr);
const myDrug = ref<Array<any>>([]);
const myLoad = ref<Array<any>>([]);
const exitCopper = ref(0);
const coolTime = ref(0);

let coolLock = false;//冷却锁
const coolTimer = ref(0);//冷却定时器
let dataLock = false;//数据锁
const autoAtkTimer = ref(0);//冷却定时器

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

onUnmounted(() => {
    clearTimeout(coolTimer.value);
    clearTimeout(autoAtkTimer.value);
})

/**加载方法 */
const BindData = async (data: string): Promise<void> => {
    let result = await FightService.Fight(fightId, data);
    if (result.code == 0) {
        myAttr.value = result.data.myAttr as IUserAttr;
        otAttr.value = result.data.otAttr as IUserAttr;
        myDrug.value = result.data.myDrug;
        myLoad.value = result.data.myLoad;
        exitCopper.value = result.data.exitCopper;
        coolTime.value = result.data.cool;
        dataLock = false;
        myHarm.value = result.data.myHarm;
        otHarm.value = result.data.otHarm;        
    }
    else if (result.code == 100) {
        PageExtend.RedirectTo("/fight/result?f=" + fightId);
    }
    else {
        PageExtend.RedirectTo("/map");
    }
};

/**退出战斗 */
const ExitFight = async () => {
    MessageExtend.LoadingToast("退出战斗中...");
    let result = await FightService.Exit(fightId);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        if (result.data == "") {
            PageExtend.RedirectTo("/map");
        }
        else {
            PageExtend.RedirectTo("/fight?f=" + result.data);
        }
    }
    else if (result.code == 100) {
        PageExtend.RedirectTo("/fight/result?f=" + fightId);
    }
    else if (result.code == 101) {
        MessageExtend.Notify(result.msg, "danger");
    }
    else {
        PageExtend.RedirectTo("/map");
    }
}

/**使用药品 */
const UseFightDrug = async (drugId: string) => {
    MessageExtend.LoadingToast("药品使用中...");
    let result = await FightService.UseFightDrug(fightId, drugId);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        await BindData("");
    }
    else {
        MessageExtend.Notify(result.msg, "danger");
    }
}

/**攻击 */
const FightAtk = async () => {
    if (coolLock == false && dataLock == false) {
        StartCool();
        let result = FightTool.FightHandle(myAttr.value, otAttr.value);        
        let data = JSON.stringify(result);
        await BindData(data);
    }
}

const StartCool = () => {
    coolLock = true;
    dataLock = true;
    coolTimer.value = setTimeout(() => {
        coolLock = false;
    }, coolTime.value)
}

/**自动攻击 */

const AutoAtk = () => {
    if (autoFight.value == 0) {
        autoFight.value = 1;
        autoAtkTimer.value = setInterval(async () => {
            await FightAtk()
        }, coolTime.value)
    }
    else {
        autoFight.value = 0;
        clearTimeout(autoAtkTimer.value)
    }
}
</script>