登陆

src/components/Tabs.vue

@@ -88,7 +88,7 @@
       v-if="ejectModalVisible"
       :handleModalVisible="handleModalVisible"
     />
-    <LoginModal />
+    <LoginModal v-if="loginVisible" :handleModalVisible="handleLoginVisible" />
   </div>
 </template>
 
@@ -103,6 +103,11 @@ const router = useRouter()
 const tabStore = useTabStore()
 
 const ejectModalVisible = ref(false)
+const loginVisible = ref(false)
+
+const handleLoginVisible = () => {
+  loginVisible.value = false
+}
 
 const handleModalVisible = () => {
   ejectModalVisible.value = false
@@ -115,8 +120,12 @@ const changeTab = index => {
     tabStore.updatePreActiveTab(1)
   }
   if (index == 2) {
-    router.push('/test')
-    tabStore.updatePreActiveTab(2)
+    if (tabStore.isLogin) {
+      tabStore.updatePreActiveTab(2)
+      router.push('/test')
+    } else {
+      loginVisible.value = true
+    }
   }
   if (index == 3) {
     ejectModalVisible.value = true

src/components/modals/LoginModal.vue

@@ -3,7 +3,7 @@
     <div class="modal_content">
       <div class="modal_header">
         <p class="title">登陆</p>
-        <img :src="Close" alt="关闭" class="close_img" />
+        <img @click="handleCancel" :src="Close" alt="关闭" class="close_img" />
       </div>
       <div class="main_form">
         <div class="form_wrap">
@@ -22,8 +22,8 @@
             alt=""
             @click="inputType = !inputType"
           />
-          <div class="login_btn"></div>
-          <div class="cancel_btn"></div>
+          <div class="login_btn" @click="handleLogin"></div>
+          <div class="cancel_btn" @click="handleCancel"></div>
         </div>
       </div>
     </div>
@@ -40,11 +40,44 @@
 import Close from '@/assets/img/close.png'
 import Eye from '@/assets/img/eye.png'
 import CloseEye from '@/assets/img/close_eye.png'
+import { useTabStore } from '@/store'
 import { ref } from 'vue'
+import { showSuccessToast, showFailToast } from 'vant'
+import { useRouter } from 'vue-router'
 
+const tabStore = useTabStore()
+const router = useRouter()
 const inputType = ref(false)
 const password = ref('')
 const show = ref(false)
+
+const props = defineProps({
+  handleModalVisible: {
+    type: Function,
+  },
+})
+
+const handleCancel = () => {
+  props.handleModalVisible()
+  // 将底部tab高亮至操作
+  tabStore.updateActiveTab(1)
+}
+
+const handleLogin = () => {
+  const val = password.value
+  if (val == '9527') {
+    // 登陆成功
+    showSuccessToast('登陆成功')
+    tabStore.updateIsLogin(true)
+    tabStore.updatePreActiveTab(2)
+    props.handleModalVisible()
+    router.push('/test')
+  } else {
+    // 登陆失败
+    showFailToast('登陆失败')
+    tabStore.updateIsLogin(false)
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
-import { Field, NumberKeyboard } from 'vant'
+import { Field, NumberKeyboard, Toast } from 'vant'
 import 'vant/lib/index.css'
 import './style.scss'
 import '@/assets/css/reset.css'
@@ -11,5 +11,6 @@ createApp(App)
   .use(router)
   .use(Field)
   .use(NumberKeyboard)
+  .use(Toast)
   .use(store)
   .mount('#app')

src/store/modules/tab.js

@@ -8,10 +8,14 @@ export const useTabStore = defineStore({
       activeStep: 1,
       activeTab: 1,
       preActiveTab: 1,
+      isLogin: false,
     }
   },
   // actions
   actions: {
+    updateIsLogin(isLogin) {
+      this.isLogin = isLogin
+    },
     updatePreActiveTab(preActiveTab) {
       this.preActiveTab = preActiveTab
     },