<template>
    <view class="auth-login-box">
        <widget-modal v-show="showLoginModal" title="该操作需要登录" @close="closeModal" :showClose="false">
            <view class="login-box">
                <view class="btn" @click="toLogin">去登录</view>
            </view>
        </widget-modal>
    </view>
</template>

<script>
import WidgetModal from "@/components/widgets/modal";
import { mapState } from "vuex";
export default {
    name: "auth-login-box",
    data() {
        return {};
    },
    components: {
        WidgetModal,
    },
    computed: {
        ...mapState({
            showLoginModal: (state) => state.user.showLoginModal,
        }),
    },
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        /**
         * 关闭弹窗
         * 如果在tabBar页面则relaunch，否则返回
         */
        closeModal() {
            this.$store.commit("user/showLoginModal", false);
            if (getCurrentPages().length <= 1) {
                this.$utils.toPage("/pages/index/index", {}, "relaunch");
            } else {
                this.$utils.toPage("", {}, "back");
            }
        },
        /**
         * 登录页面
         */
        toLogin() {
            this.$store.commit("user/showLoginModal", false);
            this.$utils.toPage("/pages/auth/auth");
        },
    },
};
</script>

<style lang="less" scoped>
.auth-login-box {
    .login-box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20rpx;
    }
    .btn {
        width: 100%;
        background: #7286f1;
        // border-radius: 50rpx;
        padding: 20rpx 100rpx;
        color: #ffffff;
        font-size: 28rpx;
        line-height: 28rpx;
        text-align: center;
        box-sizing: border-box;
    }
}
</style>