af-mobile-client-vue3 1.1.7 → 1.1.8

package/src/views/user/login/ForgetPasswordForm.vue

@@ -1,94 +1,94 @@
-<script setup lang="ts">
-import type { FormInstance } from 'vant'
-import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
-import {
-
-  showFailToast,
-  Button as VanButton,
-  Field as VanField,
-  Form as VanForm,
-} from 'vant'
-import { computed, reactive, ref, unref } from 'vue'
-
-const { handleBackLogin, getLoginState } = useLoginState()
-const { getFormRules } = useFormRules()
-const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
-
-const loading = ref(false)
-const formRef = ref<FormInstance>()
-const formData = reactive({
-  username: '',
-  mobile: '',
-  sms: '',
-})
-
-function handleReset() {
-  formRef.value
-    ?.validate()
-    .then(async () => {
-      try {
-        loading.value = true
-        // do something
-      }
-      finally {
-        loading.value = false
-      }
-    })
-    .catch((e) => {
-      showFailToast('验证失败')
-      console.error(e)
-    })
-}
-</script>
-
-<template>
-  <div v-if="getShow" class="form forget_password_form">
-    <VanForm ref="formRef" @submit="handleReset">
-      <VanField
-        v-model="formData.username"
-        class="form_field"
-        name="username"
-        label="账号"
-        placeholder="请输入账号"
-        label-align="top"
-        :rules="getFormRules.username"
-      />
-      <VanField
-        v-model="formData.mobile"
-        class="form_field"
-        name="password"
-        label="手机号码"
-        placeholder="请输入手机号码"
-        label-align="top"
-        :rules="getFormRules.mobile"
-      />
-
-      <VanField
-        v-model="formData.sms"
-        class="form_field"
-        center
-        clearable
-        label-align="top"
-        label="短信验证码"
-        placeholder="请输入短信验证码"
-        :rules="getFormRules.sms"
-      >
-        <template #button>
-          <VanButton size="small" type="primary">
-            发送验证码
-          </VanButton>
-        </template>
-      </VanField>
-      <VanButton class="reset_btn btn" type="primary" block native-type="submit" :loading="loading">
-        重 置
-      </VanButton>
-      <VanButton class="back_btn btn" plain type="primary" block @click="handleBackLogin">
-        返 回
-      </VanButton>
-    </VanForm>
-  </div>
-</template>
-
-<style scoped lang="less">
-@import "@af-mobile-client-vue3/styles/login.less";
-</style>
+<script setup lang="ts">
+import type { FormInstance } from 'vant'
+import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
+import {
+
+  showFailToast,
+  Button as VanButton,
+  Field as VanField,
+  Form as VanForm,
+} from 'vant'
+import { computed, reactive, ref, unref } from 'vue'
+
+const { handleBackLogin, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
+
+const loading = ref(false)
+const formRef = ref<FormInstance>()
+const formData = reactive({
+  username: '',
+  mobile: '',
+  sms: '',
+})
+
+function handleReset() {
+  formRef.value
+    ?.validate()
+    .then(async () => {
+      try {
+        loading.value = true
+        // do something
+      }
+      finally {
+        loading.value = false
+      }
+    })
+    .catch((e) => {
+      showFailToast('验证失败')
+      console.error(e)
+    })
+}
+</script>
+
+<template>
+  <div v-if="getShow" class="form forget_password_form">
+    <VanForm ref="formRef" @submit="handleReset">
+      <VanField
+        v-model="formData.username"
+        class="form_field"
+        name="username"
+        label="账号"
+        placeholder="请输入账号"
+        label-align="top"
+        :rules="getFormRules.username"
+      />
+      <VanField
+        v-model="formData.mobile"
+        class="form_field"
+        name="password"
+        label="手机号码"
+        placeholder="请输入手机号码"
+        label-align="top"
+        :rules="getFormRules.mobile"
+      />
+
+      <VanField
+        v-model="formData.sms"
+        class="form_field"
+        center
+        clearable
+        label-align="top"
+        label="短信验证码"
+        placeholder="请输入短信验证码"
+        :rules="getFormRules.sms"
+      >
+        <template #button>
+          <VanButton size="small" type="primary">
+            发送验证码
+          </VanButton>
+        </template>
+      </VanField>
+      <VanButton class="reset_btn btn" type="primary" block native-type="submit" :loading="loading">
+        重 置
+      </VanButton>
+      <VanButton class="back_btn btn" plain type="primary" block @click="handleBackLogin">
+        返 回
+      </VanButton>
+    </VanForm>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "@af-mobile-client-vue3/styles/login.less";
+</style>

package/src/views/user/login/LoginTitle.vue

@@ -1,68 +1,68 @@
-<script setup lang="ts">
-import { APP_WEB_CONFIG_KEY } from '@af-mobile-client-vue3/stores/mutation-type'
-import { createStorage } from '@af-mobile-client-vue3/utils/Storage'
-
-const Storage = createStorage({ storage: localStorage })
-const webConfig = Storage.get(APP_WEB_CONFIG_KEY)
-
-//  动态获取图片
-function getAssetsImages(logo) {
-  return new URL(`/src/assets/img/user/login/${logo}`, import.meta.url).href
-}
-</script>
-
-<template>
-  <div class="login_title">
-    <div class="login_logo">
-      <img :src="getAssetsImages(webConfig?.setting?.systemLogo ?? 'logo.png')" alt="logo">
-    </div>
-    <div class="title_content">
-      <div class="login_title_value">
-        {{ webConfig?.setting?.systemName ?? '智慧燃气' }}
-      </div>
-      <div class="login_description">
-        欢迎使用
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-.login_title {
-  width: 100%;
-  background-image: url('@af-mobile-client-vue3/assets/img/user/login/background-shadow-1.svg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center center;
-  text-align: center;
-  .login_logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100px;
-    height: 100px;
-    margin: 0 auto 62px auto;
-    border-radius: 23.04px;
-    box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.09);
-    background: var(--van-background-2);
-    text-align: center;
-    img {
-      width: 82px;
-      height: 82px;
-    }
-  }
-  .title_content {
-    color: rgb(83, 88, 110);
-    font-size: 26px;
-    font-weight: 600;
-    line-height: 26px;
-    .login_description {
-      margin-top: 13px;
-      color: var(--van-text-color-3);
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 16px;
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import { APP_WEB_CONFIG_KEY } from '@af-mobile-client-vue3/stores/mutation-type'
+import { createStorage } from '@af-mobile-client-vue3/utils/Storage'
+
+const Storage = createStorage({ storage: localStorage })
+const webConfig = Storage.get(APP_WEB_CONFIG_KEY)
+
+//  动态获取图片
+function getAssetsImages(logo) {
+  return new URL(`/src/assets/img/user/login/${logo}`, import.meta.url).href
+}
+</script>
+
+<template>
+  <div class="login_title">
+    <div class="login_logo">
+      <img :src="getAssetsImages(webConfig?.setting?.systemLogo ?? 'logo.png')" alt="logo">
+    </div>
+    <div class="title_content">
+      <div class="login_title_value">
+        {{ webConfig?.setting?.systemName ?? '智慧燃气' }}
+      </div>
+      <div class="login_description">
+        欢迎使用
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.login_title {
+  width: 100%;
+  background-image: url('@af-mobile-client-vue3/assets/img/user/login/background-shadow-1.svg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  text-align: center;
+  .login_logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 100px;
+    margin: 0 auto 62px auto;
+    border-radius: 23.04px;
+    box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.09);
+    background: var(--van-background-2);
+    text-align: center;
+    img {
+      width: 82px;
+      height: 82px;
+    }
+  }
+  .title_content {
+    color: rgb(83, 88, 110);
+    font-size: 26px;
+    font-weight: 600;
+    line-height: 26px;
+    .login_description {
+      margin-top: 13px;
+      color: var(--van-text-color-3);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 16px;
+    }
+  }
+}
+</style>

package/src/views/user/login/index.vue

@@ -1,22 +1,22 @@
-<script setup lang="ts">
-import ForgetPasswordForm from './ForgetPasswordForm.vue'
-import LoginForm from './LoginForm.vue'
-import LoginTitle from './LoginTitle.vue'
-</script>
-
-<template>
-  <div class="login_container">
-    <LoginTitle />
-    <LoginForm />
-    <ForgetPasswordForm />
-  </div>
-</template>
-
-<style scoped lang="less">
-.login_container {
-  height: 100vh;
-  padding-top: 10px;
-  background: var(--van-background-2);
-  position: relative;
-}
-</style>
+<script setup lang="ts">
+import ForgetPasswordForm from './ForgetPasswordForm.vue'
+import LoginForm from './LoginForm.vue'
+import LoginTitle from './LoginTitle.vue'
+</script>
+
+<template>
+  <div class="login_container">
+    <LoginTitle />
+    <LoginForm />
+    <ForgetPasswordForm />
+  </div>
+</template>
+
+<style scoped lang="less">
+.login_container {
+  height: 100vh;
+  padding-top: 10px;
+  background: var(--van-background-2);
+  position: relative;
+}
+</style>