af-mobile-client-vue3 1.0.54

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, reactive, ref, unref } from 'vue'
+import {
+  type FormInstance,
+  Button as VanButton,
+  Field as VanField,
+  Form as VanForm,
+  showFailToast,
+} from 'vant'
+import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
+
+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/LoginForm.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, reactive, ref, unref } from 'vue'
+import { Switch, Button as VanButton, Col as VanCol, Field as VanField, Form as VanForm, Icon as VanIcon, Row as VanRow, closeToast, showFailToast } from 'vant'
+import type { FormInstance } from 'vant'
+import 'vant/lib/switch/index.css'
+import { useRoute, useRouter } from 'vue-router'
+import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
+import { useSettingStore } from '@af-mobile-client-vue3/stores/modules/setting'
+import { type UserInfo, useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import GetAppDataService from '@af-mobile-client-vue3/plugins/AppData'
+import { indexedDB } from '@af-mobile-client-vue3/utils/indexedDB'
+import { funcToRouter, loadRoutes } from '@af-mobile-client-vue3/utils/routerUtil'
+
+const { setLoginState, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+const userState = useUserStore()
+const router = useRouter()
+
+const formRef = ref<FormInstance>()
+const loading = ref(false)
+const rememberMe = ref(false)
+const switchPassType = ref(true)
+const formData = reactive({
+  username: '',
+  password: '',
+})
+const route = useRoute()
+const setting = useSettingStore()
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
+
+const login: any = inject('$login')
+
+function handleSubmit() {
+  formRef.value
+    ?.validate()
+    .then(async () => {
+      try {
+        loading.value = true
+        const data: any = await userState.Login({
+          username: formData.username,
+          password: formData.password,
+          resourceName: setting.getSetting()?.routerName || '智慧手机',
+        })
+        login.f = data
+        await Promise.all([GetAppDataService.load()])
+        const loginInfo = {
+          f: login.f,
+          jwt: login.f.id,
+          r: login.r,
+        }
+        userState.setLogin(loginInfo)
+        const compatible = import.meta.env.VITE_APP_COMPATIBLE
+        if (compatible === 'OA')
+          afterGeneral(data)
+        else
+          afterGeneral(data.resources.data)
+
+        const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+        closeToast()
+        if (route.name === '/login')
+          await router.replace('/')
+        else await router.replace(toPath)
+      }
+      finally {
+        loading.value = false
+      }
+    })
+    .catch((e) => {
+      console.error(e)
+      showFailToast('用户名或密码错误')
+    })
+}
+
+function afterGeneral(result) {
+  const user: UserInfo = {
+    id: result.id,
+    username: result.ename,
+    password: formData.password,
+    name: result.name,
+    avatar: result.avatar ? result.avatar : setting.getSetting().defaultAvatarUrl,
+    functions: result.functions,
+  }
+  userState.setUserInfo(user)
+  userState.setPermissions([{ id: 'queryForm', operation: ['add', 'edit'] }])
+  userState.setRoles([{ id: 'admin', operation: ['add', 'edit', 'delete'] }])
+  // 加载路由
+  loadRoutes(funcToRouter(user.functions))
+  // 每次重新登录时，清除indexedDB缓存
+  indexedDB.clear()
+}
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div v-if="getShow" class="form login_form">
+    <VanForm ref="formRef" @submit="handleSubmit">
+      <VanField
+        v-model="formData.username"
+        class="form_field"
+        name="username"
+        label="账号"
+        placeholder="请输入账号"
+        label-align="top"
+        :rules="getFormRules.username"
+      />
+      <VanField
+        v-model="formData.password"
+        class="form_field"
+        :type="switchPassType ? 'password' : 'text'"
+        name="password"
+        label="密码"
+        placeholder="请输入密码"
+        label-align="top"
+        :rules="getFormRules.password"
+        @click-right-icon="switchPassType = !switchPassType"
+      >
+        <template #right-icon>
+          <VanIcon v-if="switchPassType" name="closed-eye" color="rgb(56, 149, 250)" />
+          <VanIcon v-else name="eye-o" color="rgb(56, 149, 250)" />
+        </template>
+      </VanField>
+
+      <VanRow justify="space-between" class="extra_setting">
+        <VanCol>
+          <div class="extra_setting_for_remember_password">
+            <Switch v-model="rememberMe" size="12px" />
+            <span>记住密码</span>
+          </div>
+        </VanCol>
+        <VanCol>
+          <a class="extra_setting_for_reset_password" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
+        </VanCol>
+      </VanRow>
+      <VanButton class="login_btn btn" type="primary" block native-type="submit" :loading="loading">
+        登 录
+      </VanButton>
+    </VanForm>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import "@af-mobile-client-vue3/styles/login.less";
+</style>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { createStorage } from '@af-mobile-client-vue3/utils/Storage'
+import { APP_WEB_CONFIG_KEY } from '@af-mobile-client-vue3/stores/mutation-type'
+
+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/LoginWave.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { hexToRgba } from '@af-mobile-client-vue3/utils/common'
+</script>
+
+<template>
+  <div class="wave">
+    <div class="enter-y wave-wrapper fixed bottom-0 w-full !-z-5">
+      <svg
+        class="ignore-waves"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 24 150 28"
+        preserveAspectRatio="none"
+        shape-rendering="auto"
+      >
+        <defs>
+          <path
+            id="gentle-wave"
+            d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+          />
+        </defs>
+        <g class="parallax">
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="0"
+            :fill="hexToRgba('#3895fa', 0.4)"
+          />
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="3"
+            :fill="hexToRgba('#3895fa', 0.5)"
+          />
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="5"
+            :fill="hexToRgba('#3895fa', 0.6)"
+          />
+          <use
+            xlink:href="#gentle-wave"
+            x="48"
+            y="7"
+            :fill="hexToRgba('#3895fa', 0.7)"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.wave {
+  position: relative;
+  height: 80px;
+  z-index: 9999;
+}
+
+.wave-wrapper {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+}
+.ignore-waves {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 50px;
+  min-height: 40px;
+  max-height: 80px;
+}
+
+/* Animation */
+.parallax > use {
+  animation: move-forever 12s linear infinite;
+}
+
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 16s;
+}
+
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}
+</style>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import LoginTitle from './LoginTitle.vue'
+import LoginForm from './LoginForm.vue'
+import ForgetPasswordForm from './ForgetPasswordForm.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>

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

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
+import {
+  Col as VanCol,
+  Row as VanRow,
+} from 'vant/es'
+
+const username = useUserStore().getUserInfo().name
+const fullnames = useUserStore().getLogin().f.resources.data.fullnames
+
+async function exit_login() {
+  await useUserStore().logout()
+}
+</script>
+
+<template>
+  <main class="my_main h-full w-full">
+    <div class="header">
+      <div class="style_back">
+        <div class="circle circle1" />
+        <div class="circle circle2" />
+      </div>
+      <div class="header_main">
+        <div class="user_nav">
+          <img alt="setting_icon" class="user_setting_icon" src="../../../assets/img/user/my/setting.png">
+        </div>
+        <div class="user_content">
+          <VanRow :gutter="18">
+            <VanCol>
+              <img alt="default-user-profile" class="default_user_profile" src="../../../assets/common/default-user-profile.png">
+            </VanCol>
+            <VanCol class="user_info_col">
+              <p class="user_nickname">
+                {{ username }}
+              </p>
+              <p class="user_remark">
+                {{ fullnames }}
+              </p>
+            </VanCol>
+          </VanRow>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="core">
+        <VanRow class="core_row">
+          <VanCol>
+            <p class="core_value">
+              24
+            </p>
+            <p class="core_title">
+              待办任务
+            </p>
+          </VanCol>
+          <VanCol>
+            <p class="core_value">
+              2
+            </p>
+            <p class="core_title">
+              待办流程
+            </p>
+          </VanCol>
+          <VanCol>
+            <p class="core_value">
+              7
+            </p>
+            <p class="core_title">
+              新消息
+            </p>
+          </VanCol>
+        </VanRow>
+      </div>
+      <div class="setting">
+        <van-list>
+          <van-cell is-link @click="exit_login">
+            <template #title>
+              <VanRow :gutter="12" class="setting_row">
+                <VanCol>
+                  <img alt="exit_login_icon" class="setting_icon" src="../../../assets/img/user/my/exit-login.png">
+                </VanCol>
+                <VanCol class="setting_name_col">
+                  <span class="setting_name_text">退出登录</span>
+                </VanCol>
+              </VanRow>
+            </template>
+            <template #right-icon>
+              <img alt="setting_arrow_icon" class="setting_arrow_icon" src="../../../assets/img/user/my/setting-arrow.png">
+            </template>
+          </van-cell>
+        </van-list>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style scoped lang="less">
+.my_main {
+  .header {
+    position: relative;
+    height: 200px;
+    background-color: #336BF1;
+    overflow: hidden;
+    .style_back {
+      .circle {
+        position: absolute;
+        border-radius: 50%;
+      }
+      .circle1 {
+        background-color: #3F7AFA;
+        width: 265px;
+        height: 265px;
+        top: -80px;
+        left: -50px;
+        z-index: 3;
+      }
+      .circle2 {
+        background-color: #3C75F9;
+        width: 300px;
+        height: 300px;
+        top: -80px;
+        left: 10px;
+        z-index: 2;
+      }
+    }
+    .header_main {
+      padding: var(--base-interval-1);
+      .user_nav {
+        padding: 0 var(--base-interval-0);
+        color: #fff;
+        position: relative;
+        z-index: 4;
+        font-size: 26px;
+        text-align: right;
+        .user_setting_icon {
+          width: 26px;
+          height: 26px;
+        }
+      }
+      .user_content {
+        padding: 0 35px 0 35px;
+        color: #fff;
+        position: relative;
+        z-index: 4;
+        .default_user_profile {
+          border-radius: 50%;
+          width: 76px;
+          height: 76px;
+          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05),
+          0 6px 6px rgba(0, 0, 0, 0.05);
+        }
+        .van-row {
+          flex-wrap: nowrap;
+          align-items: center;
+          .user_info_col {
+            flex-grow: 1;
+            p {
+              margin: 0;
+            }
+            .user_nickname {
+              font-size: 24px;
+              font-weight: bold;
+              margin-bottom: 4px;
+            }
+            .user_remark {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+
+  }
+  .content {
+    padding: var(--base-interval-1);
+    .core {
+      position: relative;
+      bottom: 50px;
+      padding: 16px 0;
+      background-color: #fff;
+      z-index: 4;
+      margin: 0 16px;
+      border-radius: 4px;
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05),
+      0 6px 6px rgba(0, 0, 0, 0.05);
+      .core_row {
+        text-align: center;
+        .van-col {
+          flex-grow: 1;
+          p {
+            margin: 8px 0;
+          }
+          .core_value {
+            font-size: 20px;
+            font-weight: bold;
+          }
+          .core_title {
+            font-size: 14px;
+            color: #999;
+          }
+        }
+      }
+    }
+    .setting {
+      .setting_row {
+        align-items: center;
+        .setting_icon {
+          width: 28px;
+          height: 28px;
+          vertical-align: middle;
+        }
+        .setting_name_col {
+          flex-grow: 1;
+          .setting_name_text {
+            font-size: 16px;
+            font-weight: bold;
+          }
+        }
+      }
+      .van-cell {
+        align-items: center;
+        .setting_arrow_icon {
+          width: 12px;
+          height: 12px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/vue-router.d.ts

@@ -0,0 +1,9 @@
+declare module 'vue-router' {
+  interface RouteMeta {
+    /** page title */
+    title?: string
+    /** i18n key */
+    i18n?: string
+  }
+}
+export {}