From 80f9775ee961398b1713c7d95f7fd2784e6abadc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Mon, 6 Mar 2023 21:18:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0loginbox=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/login-box.vue | 62 +++++++++++++++++++++++++++++++
 src/components/layout/layout.vue  |  7 +++-
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/components/auth/login-box.vue

diff --git a/src/components/auth/login-box.vue b/src/components/auth/login-box.vue
new file mode 100644
index 0000000..2dad52a
--- /dev/null
+++ b/src/components/auth/login-box.vue
@@ -0,0 +1,62 @@
+<template>
+    <view class="auth-login-box">
+        <widget-modal v-show="showLoginModal" title="该操作需要登录" @close="closeModal">
+            <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: {
+        closeModal() {
+            this.$store.commit("user/showLoginModal", false);
+        },
+        toLogin() {
+            this.closeModal();
+            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>
\ No newline at end of file
diff --git a/src/components/layout/layout.vue b/src/components/layout/layout.vue
index 92d1124..7d293d8 100644
--- a/src/components/layout/layout.vue
+++ b/src/components/layout/layout.vue
@@ -29,10 +29,13 @@
             <slot></slot>
         </view>
         <view class="page-footer"></view>
+        <!-- 组件 -->
+        <auth-login-box />
     </view>
 </template>
 
 <script>
+import AuthLoginBox from "@/components/auth/login-box";
 import { mapState } from "vuex";
 export default {
     name: "component-layout",
@@ -43,7 +46,9 @@ export default {
             bodyPaddingTop: 0,
         };
     },
-    components: {},
+    components: {
+        AuthLoginBox,
+    },
     props: {
         minHeight: {
             type: String,