4dkankan_bim/src/pages/Rules/index.vue

<!--  -->
<template>
    <div class="rules-box">
        <button class="ui-button primary" @click="confirmRules" :class="{ disabled: !next }">{{ rulesIndex >= 2 ? $t('common.endPoint') : $t('common.startPoint') }}({{ rulesIndex }}/2)</button
        ><button class="ui-button cancel" @click="cancelRules">{{ $t('common.cancel') }}</button>
    </div>

    <Toast v-if="showTips" type="warn" :content="showTips" :close="() => (showTips = null)" />
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, defineEmits } from 'vue'
import Toast from '@/components/dialog/Toast'
import i18n from '@/i18n'
const showTips = ref(null)
const { t } = i18n.global
const rulesIndex = ref(1)
const emits = defineEmits(['close'])
const confirmRules = () => {
    next.value = false
    window.kankan.TagManager.confirmMeasure(rulesIndex.value)
    if (rulesIndex.value < 2) {
        showTips.value = t('toast.ruleConfirmTips')
        rulesIndex.value++
    } else {
        cancelRules()
    }
}
const cancelRules = () => {
    emits('close')
    rulesIndex.value = 1
}
const next = ref(false)
onMounted(() => {
    window.kankan.TagManager.on('tagManager.markTagPos', res => {
        next.value = true
    })
})
</script>
<style lang="scss" scoped>
.rules-box {
    position: fixed;
    z-index: 1001;

    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 150px;
    .ui-button {
        margin-bottom: 10px;
        &:last-of-type {
            margin-bottom: 0;
        }
        &.cancel {
            background: rgba(92, 92, 92, 0.51) !important;
            color: #fff !important;
            border: none !important;
        }
    }
}

.ui-button.primary {
    background-color: var(--colors-primary-base) !important;
    color: var(--colors-normal-fill-hover);
    border: none;
    opacity: 1;
}
</style>