water_maintenance/src/components/ThreeWorldEventQingXiCheAndQv/event/QingXiCheAndQvProcessEvent.vue

<script setup>
import { QingXiCheAndQvProcessEventStore } from "../event/store/QingXiCheAndQvProcessEventStore.js";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";

// 监听某个参数发生变化
watch(
    () => QingXiCheAndQvProcessEventStore().obj.downTime,
    (newVal, oldVal) => {
        
        console.log("触发组件的UI下一步逻辑");
        downEvent();

    }
)

// 定义发射给父组件的方法
const emits = defineEmits([
    // 实时回调当前对话的内容
    'callbackProcess',
]);

/**
 * 回调接下来的进度
 * type         up - 上一步， down - 下一步
 * json         返回的参数, 如果是 null ，说明不触发生成
 */
const callbackProcessEvent = (type, json) => {
    
    emits('callbackProcess', {
        "type" : type,
        "config" : json,
    });
    
}

/**
 * 下一步逻辑触发
 */
const downEvent = () => {
    
    QingXiCheAndQvProcessEventStore().obj.listIndex += 1;
    // 说明执行到最后一步了
    if (QingXiCheAndQvProcessEventStore().obj.listIndex >= QingXiCheAndQvProcessEventStore().obj.list.length) {
        QingXiCheAndQvProcessEventStore().obj.listIndex -= 1;
        return;
    }

    QingXiCheAndQvProcessEventStore().obj.btnUp = false;
    QingXiCheAndQvProcessEventStore().obj.btnDown = false;

    let thisJson = QingXiCheAndQvProcessEventStore().obj.list[QingXiCheAndQvProcessEventStore().obj.listIndex];

    callbackProcessEvent("down", thisJson);
    // console.log("下一步", thisJson);

}

</script>

<template>
    
    <div class="ProcessEvent">
        
        <img class="role" src="../../../assets/res/img/main/processEvent/role.png" />

        <div
        v-if="
            QingXiCheAndQvProcessEventStore().obj.list[QingXiCheAndQvProcessEventStore().obj.listIndex] != null
            && QingXiCheAndQvProcessEventStore().obj.list[QingXiCheAndQvProcessEventStore().obj.listIndex] != undefined
        "
        class="main">
            
            <div class="txt">{{ QingXiCheAndQvProcessEventStore().obj.list[QingXiCheAndQvProcessEventStore().obj.listIndex].note }}</div>
            <div class="comBtn" v-show="QingXiCheAndQvProcessEventStore().obj.btnUp == true" >上一步</div>
            <div class="comBtn" v-show="QingXiCheAndQvProcessEventStore().obj.btnDown == true" v-on:click="downEvent()" >下一步</div>
            
            <img class="downPrompt" v-show="QingXiCheAndQvProcessEventStore().obj.btnDown == true"
            src="../../../assets/res/img/main/processEvent/prompt.png" />
            
        </div>

    </div>

</template>

<style lang="less" scoped>

.ProcessEvent * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.ProcessEvent {

    position: fixed;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;

    .role {
        position: relative;
        width: 6.42rem;
        position: fixed;
        left: 5rem;
        bottom: 5rem;
        z-index: 31;
    }

    .main {

        position: fixed;
        z-index: 30;
        width: 100%;
        height: 4.285rem;
        // background: linear-gradient(86deg, #3a649642, #3a6496 17%, #3a6496 59%, #3a649600 90%);
        background: linear-gradient(90deg, rgba(58, 150, 136, 0.26) 0.01%, #3A9688 19.06%, #3A9688 65.77%, rgba(58, 150, 136, 0) 100%);

        padding: 0px 0px 0px 13rem;
        bottom: 5rem;
        left: 0px;
        float: left;

        .txt {
            height: 4.285rem;
            line-height: 4.285rem;
            font-size: 1.5rem;
            color: #ffffff;
            font-weight: 500;
            margin: 0px 0.71rem 0px 0.71rem;
            float: left;
        }

        .comBtn {

            margin: 0.75rem;
            font-size: 1.3rem;
            // background-color: #3583d1;
            background-color: #49DC9E;
            color: #ffffff;
            padding: 0.35rem 2rem 0.35rem 2rem;
            border-radius: 0.35rem;
            // 手势
            cursor:pointer;
            float: left;

        }

        .downPrompt {
            width: 7.14rem;
            position: relative;
            left: -8rem;
            top: -7rem;
        }
        
    }

}

</style>