添加snackbar提示

src/components/VerificationCode/index.vue

@@ -26,7 +26,6 @@
         </template>
       </v-text-field>
     </v-form>
-    <v-snackbar v-model="tips.show" :color="tips.color" :timeout="1500" location="top">{{ tips.text }}</v-snackbar>
   </div>
 </template>
 
@@ -35,6 +34,7 @@ defineOptions({ name: 'verification-code' })
 import { ref, reactive, defineExpose } from 'vue'
 import { setCodeTime } from '@/utils/code'
 import { sendSmsCode } from '@/api/common/index'
+import Snackbar from '@/plugins/snackbar'
 
 const phoneRules = ref([
   value => {
@@ -47,12 +47,6 @@ const phoneRules = ref([
   }
 ])
 
-const tips = reactive({
-  show: false,
-  color: '',
-  text: ''
-})
-
 // 手机号区域
 const currentArea = ref('0086')
 const items = [
@@ -68,9 +62,7 @@ const count = ref(0)
 const timer = ref(null)
 const handleCode = () => {
   if (!loginData.phone) {
-    tips.text = '请输入手机号码'
-    tips.color = 'warning'
-    tips.show = true
+    Snackbar.warning('请输入手机号码')
     return
   }
   count.value = 60
@@ -84,8 +76,9 @@ const getSmsCode = async () => {
   }
   try {
     await sendSmsCode(query)
+    Snackbar.success('发送成功，请注意查收')
   } catch (error) {
-    console.log(error, 'error')
+    Snackbar.error(error.msg)
   }
 }
 const setTime = () => {
@@ -111,7 +104,7 @@ autoTimer()
 
 const loginData = reactive({
   phone: '13229740091',
-  code: ''
+  code: '123456'
 })
 
 const phoneForm = ref()

src/store/user.js

@@ -4,6 +4,7 @@ import { setToken, deleteToken } from '@/utils/auth'
 import { smsLogin, passwordLogin } from '@/api/common/index'
 import { logout } from '@/api/common/index'
 import { getUserInfo } from '@/api/personal/user'
+import Snackbar from '@/plugins/snackbar'
 
 export const userLocaleStore = defineStore('user',
   () => {
@@ -14,12 +15,11 @@ export const userLocaleStore = defineStore('user',
     const handleSmsLogin = async (data) => {
       return new Promise((resolve, reject) => {
         smsLogin(data).then(res => {
-          const { data } = res
-          console.log(data, 'res-login')
-          setToken(data.accessToken)
-          accountInfo = data
-          localStorage.setItem('accountInfo', JSON.stringify(data))
-          localStorage.setItem('expiresTime', data.expiresTime) // token过期时间
+          console.log(res, 'login-phone')
+          setToken(res.accessToken)
+          accountInfo = res
+          localStorage.setItem('accountInfo', JSON.stringify(res))
+          localStorage.setItem('expiresTime', res.expiresTime) // token过期时间
           getUserInfos()
           resolve()
         }).catch(err => { reject(err) })
@@ -30,12 +30,11 @@ export const userLocaleStore = defineStore('user',
     const handlePasswordLogin = async (data) => {
       return new Promise((resolve, reject) => {
         passwordLogin(data).then(res => {
-          const { data } = res
-          console.log(data, 'res-login-password')
-          setToken(data.accessToken)
-          accountInfo = data
-          localStorage.setItem('accountInfo', JSON.stringify(data))
-          localStorage.setItem('expiresTime', data.expiresTime) // token过期时间
+          console.log(res, 'login-password')
+          setToken(res.accessToken)
+          accountInfo = res
+          localStorage.setItem('accountInfo', JSON.stringify(res))
+          localStorage.setItem('expiresTime', res.expiresTime) // token过期时间
           getUserInfos()
           resolve()
         }).catch(err => { reject(err) })
@@ -45,12 +44,11 @@ export const userLocaleStore = defineStore('user',
     // 获取当前登录账户信息
     const getUserInfos = async () => {
       try {
-        const { data } = await getUserInfo({ id: accountInfo.userId })
+        const data = await getUserInfo({ id: accountInfo.userId })
         userInfo = data
         localStorage.setItem('userInfo', JSON.stringify(data))
       } catch (error) {
-        console.log(error, 'get-user-info')
-        alert(error.msg)
+        Snackbar.error(error.msg)
       }
     }
 

src/views/Home/personal/account/dynamic/editPassword.vue

@@ -42,6 +42,7 @@
 import PhonePage from '@/components/VerificationCode'
 import { updatePassword } from '@/api/common/index'
 import { ref, reactive, computed } from 'vue'
+import Snackbar from '@/plugins/snackbar'
 
 const phoneRef = ref()
 const passwordRef = ref()
@@ -66,10 +67,9 @@ const handleSubmit = async () => {
   loading.value = true
   try {
     await updatePassword({ password: query.password, code: phoneRef.value.loginData.code })
-    console.log('success')
+    Snackbar.success('修改成功')
   } catch (error) {
-    console.log(error, 'error')
-    alert(error.msg)
+    Snackbar.error(error.msg)
   } finally {
     loading.value = false
   }

src/views/login/components/passwordPage.vue

@@ -60,7 +60,7 @@ const handleChangeCurrentArea = (e) => {
 
 const loginData = reactive({
   phone: '13229740091',
-  password: ''
+  password: '1111'
 })
 
 const passwordForm = ref()

src/views/login/components/phonePage.vue

@@ -1,140 +0,0 @@
-<template>
-  <div>
-    <v-form @submit.prevent ref="phoneForm">
-      <v-text-field v-model="loginData.phone" placeholder="请输入手机号" color="#00897B" variant="outlined" density="compact" :rules="phoneRules" validate-on="input">
-        <template v-slot:prepend-inner>
-          <span class="d-flex">
-            <v-icon icon="mdi-cellphone" size="20"></v-icon>
-            <span class="d-flex" id="menu-activator">
-              <span class="phone-number">{{ currentArea }}</span>
-              <v-icon size="20">mdi-chevron-down</v-icon>
-            </span>
-            <v-menu activator="#menu-activator">
-              <v-list>
-                <v-list-item v-for="(item, index) in items" :key="index" :value="index" @click="handleChangeCurrentArea(item)">
-                  <v-list-item-title>{{ item.label }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </span>
-        </template>
-      </v-text-field>
-      <v-text-field v-model="loginData.code" placeholder="请输入验证码" color="#00897B" variant="outlined" density="compact" prepend-inner-icon="mdi-security" :rules="[v=> !!v || '请填写验证码']">
-        <template #append-inner>
-          <span v-if="showCode" class="login-code" @click="handleCode">获取验证码</span>
-          <span v-else class="disable">重新获取{{ count }}s</span>
-        </template>
-      </v-text-field>
-    </v-form>
-    <v-snackbar v-model="tips.show" :color="tips.color" :timeout="1500" location="top">{{ tips.text }}</v-snackbar>
-  </div>
-</template>
-
-<script setup name="phoneIndex">
-import { ref, reactive, defineExpose } from 'vue'
-import { setCodeTime } from '@/utils/code'
-import { sendSmsCode } from '@/api/common/index'
-
-const phoneRules = ref([
-  value => {
-    if (value) return true
-    return '请输入手机号'
-  },
-  value => {
-    if (value?.length <= 11 && /^1[3456789]\d{9}$/.test(value)) return true
-    return '请输入正确的手机号码'
-  }
-])
-
-const tips = reactive({
-  show: false,
-  color: '',
-  text: ''
-})
-
-// 手机号区域
-const currentArea = ref('0086')
-const items = [
-  { label: '中国大陆-0086', value: '0086' }
-]
-const handleChangeCurrentArea = (e) => {
-  currentArea.value = e.value
-}
-
-// 获取验证码
-const showCode = ref(true)
-const count = ref(0)
-const timer = ref(null)
-const handleCode = () => {
-  if (!loginData.phone) {
-    tips.text = '请输入手机号码'
-    tips.color = 'warning'
-    tips.show = true
-    return
-  }
-  count.value = 60
-  setTime()
-  getSmsCode()
-}
-const getSmsCode = async () => {
-  const query = {
-    phone: loginData.phone,
-    scene: 30
-  }
-  try {
-    await sendSmsCode(query)
-  } catch (error) {
-    console.log(error, 'error')
-  }
-}
-const setTime = () => {
-  showCode.value = false
-  timer.value = setInterval(() => {
-    let number = count.value
-    if (number > 0 && number <= 60) {
-      count.value--
-      setCodeTime(number - 1)
-    } else {
-      showCode.value = true
-      clearInterval(timer.value)
-      timer.value = null
-    }
-  }, 1000)
-}
-const autoTimer = () => {
-  count.value = 0
-  if(!count.value) return
-  setTime()
-}
-autoTimer()
-
-const loginData = reactive({
-  phone: '13229740091',
-  code: ''
-})
-
-const phoneForm = ref()
-
-defineExpose({
-  loginData, 
-  phoneForm
-})
-</script>
-
-<style lang="scss" scoped>
-.login-code {
-  width: 62px;
-  color: var(--v-primary-base); 
-  font-size: 12px; 
-  cursor: pointer;
-}
-.disable {
-  width: 72px;
-  color: grey;
-  font-size: 12px;
-}
-.phone-number {
-  width: 34px;
-  font-size: 12px;
-}
-</style>