新加重置密码的页面

src/permission.ts

@@ -17,6 +17,7 @@ const whiteList = [
   '/login',
   '/forgetPassword',
   '/updatePassword',
+  '/updatePasswordNewTips',
   '/social-login',
   '/auth-redirect',
   '/bind',

src/router/modules/remaining.ts

@@ -204,6 +204,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/updatePasswordNewTips',
+    component: () => import('@/views/login/updatePasswordNewTips.vue'),
+    name: 'UpdatePasswordNewTips',
+    meta: {
+      hidden: true,
+      title: t('router.login'),
+      noTagsView: true
+    }
+  },
+  
   {
     path: '/sso',
     component: () => import('@/views/login/login.vue'),

src/views/login/updatePasswordNewTips.vue

@@ -0,0 +1,115 @@
+<template>
+  <div v-loading="loading"  class="box">
+    <el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
+      <div class="title" style="font-size:25px" margin-left="0px">重置密码</div>
+      <el-row type="flex" justify="center" align="middle">
+        <el-col>
+          <el-form-item label="新密码" prop="password" align="center">
+            <el-input v-model="loginData.password" placeholder="请输入新密码" :type="isShowPassword?'text':'password'"/>
+            <el-icon style="position: absolute; right: 10px;cursor: pointer;" color="#a5a5a5" size="18" @click="isShowPassword = !isShowPassword">
+              <View v-if="!isShowPassword"/>
+              <Hide v-if="isShowPassword"/>
+            </el-icon>
+          </el-form-item>
+        </el-col>
+        <el-col>
+          <el-form-item label="确认新密码" prop="againPassword">
+            <el-input v-model="loginData.againPassword" placeholder="请再次新密码"  :type="isShowAgainPassword?'text':'password'"/>
+            <el-icon style="position: absolute; right: 10px;cursor: pointer;" color="#a5a5a5" size="18" @click="isShowAgainPassword = !isShowAgainPassword">
+              <View v-if="!isShowAgainPassword"/>
+              <Hide v-if="isShowAgainPassword"/>
+            </el-icon>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="tips">温馨提示：<span>密码长度通常需要在6-20个字符之间。</span></div>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm" style="width: 100%;height: 40px;line-height: 40px;">确 定</el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup name="bb">
+  import type { RouteLocationNormalizedLoaded } from 'vue-router'
+  import { useIcon } from '@/hooks/web/useIcon'
+  import { setTenantId, setToken } from '@/utils/auth'
+  import { usePermissionStore } from '@/store/modules/permission'
+  import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
+  import * as UserApi from '@/api/system/user'
+  import { View,Hide } from '@element-plus/icons-vue'
+  const { t } = useI18n()
+  const message = useMessage()
+  const permissionStore = usePermissionStore()
+  const formSmsLogin = ref()
+  const loginLoading = ref(false)
+  const iconHouse = useIcon({ icon: 'ep:house' })
+  const iconCellphone = useIcon({ icon: 'ep:cellphone' })
+  const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
+  const route = useRoute() //路由信息
+  const rules = {
+    password: [required],
+    againPassword: [required]
+  }
+  const loginData = reactive({
+    password: '',
+    againPassword: '',
+    mailKey: '',
+  })
+  const isShowPassword = ref(false)
+  const isShowAgainPassword = ref(false)
+  
+  const loading = ref(false);
+  const submitForm = async () => {
+    try {
+      loginData.mailKey = route.query.mailKey;
+      if (loginData.password != loginData.againPassword) {
+        message.error('两次输入的密码不一致，请重新输入!')
+      } else {
+        const data = loginData as unknown as UserApi.UserVO
+        await UserApi.updatePassword(data)
+        // 发送操作成功的事件
+        message.success(t('common.updateSuccess'))
+         router.go(-1)
+      }
+    } finally {
+      // formLoading.value = false
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.anticon) {
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  .smsbtn {
+    margin-top: 33px;
+  }
+  .box{
+    border: 1px solid #dedede;
+    width: 500px;
+    margin: 100px auto 0px;
+    padding: 20px;
+    box-shadow: 0px 0px 20px rgba($color: #000000, $alpha: 0.1);
+  }
+  .title{
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    padding-bottom: 20px;
+  }
+  ::v-deep(.el-input--large .el-input__inner){
+    padding-right: 30px;
+  }
+  .tips{
+    padding-bottom: 20px;
+    font-size:14px;
+    color:#717171;
+    span{
+    color:#717171;
+
+    }
+  }
+</style>