增加loginbox组件

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>

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,