feat:password

src/components/header.vue

@@ -47,8 +47,8 @@
                     </span>
                     <template #dropdown>
                         <el-dropdown-menu>
-                            <!-- <el-dropdown-item command="user">个人中心</el-dropdown-item> -->
-                            <el-dropdown-item command="loginout">{{$t('loginout')}}</el-dropdown-item>
+                            <el-dropdown-item command="password">{{$t('passwordSetting')}}</el-dropdown-item>
+                            <el-dropdown-item divided command="loginout">{{$t('loginout')}}</el-dropdown-item>
                         </el-dropdown-menu>
                     </template>
                 </el-dropdown>
@@ -96,8 +96,8 @@ const loginout = async () => {
 const handleCommand = (command) => {
     if (command == 'loginout') {
       loginout();
-    } else if (command == 'user') {
-        router.push('/ucenter');
+    } else if (command == 'password') {
+        router.push('/password');
     }
 };
 

src/i18n/en.ts

@@ -15,6 +15,7 @@ export default {
   inquire:'inquire',
   dataAnalysis:'Data analysis',
   ruleSetting:'Rule setting',
+  passwordSetting:'Password setting',
   themeSetting:'Theme setting',
   login:'Log in',
   remember:'Remember the password',
@@ -73,5 +74,21 @@ export default {
   lengthRequired:'Duration required',
   greaterThanZero:'The value must be greater than 0',
   mustNumber:'Please enter the number',
-  two:'Keep at most two decimals'
+  two:'Keep at most two decimals',
+  oldPassword:'Old password',
+  oldPasswordPlaceholder:'Please enter the old password',
+  newPassword:'New password',
+  newPasswordPlaceholder:'Please enter the new password',
+  verifyPassword:'Verify password',
+  verifyPasswordPlaceholder:'Please enter the password again',
+  submit:'Submit',
+  enterNewPassword:'Please enter your new password',
+  enterOldPassword:'Please enter your old password',
+  confirmNewPassword:'Please confirm your new password',
+  twoNewPassword:'The two new passwords are different',
+  passwordLength:'The password length must be 6-10 characters',
+  passwordChangeSuccess:'Password changed successfully',
+  passwordChangeFail:'Password change failed',
+
+
 }

src/i18n/es.ts

@@ -15,6 +15,7 @@ export default {
   inquire:'consulta',
   dataAnalysis:'Análisis de datos',
   ruleSetting:'Configuración de reglas',
+  passwordSetting:'Configuración de contraseña',
   themeSetting:'Configuración del tema',
   login:'inicio',
   remember:'Recordar la contraseña',
@@ -73,6 +74,20 @@ export default {
   lengthRequired:'Duración requerido',
   greaterThanZero:'El valor debe ser mayor que 0',
   mustNumber:'Por favor ingrese los números',
-  two:'Mantenga hasta dos decimales'
+  two:'Mantenga hasta dos decimales',
+  oldPassword:'Contraseña antigua',
+  oldPasswordPlaceholder:'Por favor ingrese la contraseña antigua',
+  newPassword:'Nueva contraseña',
+  newPasswordPlaceholder:'Por favor ingrese la nueva contraseña',
+  verifyPassword:'Verificar contraseña',
+  verifyPasswordPlaceholder:'Por favor ingrese la contraseña de nuevo',
+  submit:'Enviar',
+  enterNewPassword:'Por favor ingrese su nueva contraseña',
+  enterOldPassword:'Por favor ingrese su contraseña antigua',
+  confirmNewPassword:'Por favor confirme su nueva contraseña',
+  twoNewPassword:'Las dos contraseñas nuevas son diferentes',
+  passwordLength:'La longitud de la contraseña debe ser de 6-10 caracteres',
+  passwordChangeSuccess:'Contraseña cambiada con éxito',
+  passwordChangeFail:'Cambio de contraseña fallido',
 
 }

src/router/index.ts

@@ -38,6 +38,14 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import('@/views/pages/rule.vue'),
             },
+            {
+                path: '/password',
+                name: 'password',
+                meta: {
+                    title: 'passwordSetting'
+                },
+                component: () => import('@/views/pages/password.vue'),
+            },
             {
               path: '/theme',
               name: 'theme',

src/views/pages/password.vue

@@ -0,0 +1,71 @@
+<template>
+     <Group>
+        <el-form :model="formData" label-suffix=":" ref="formRef">
+          <el-form-item :label="$t('oldPassword')"  prop="oldPassword" style="width: 360px;" :rules="[
+            { required: true, message: $t('enterOldPassword'), trigger: 'blur' }
+          ]">
+            <el-input v-model="formData.oldPassword" type="password" show-password :placeholder="$t('oldPasswordPlaceholder')"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('newPassword')" prop="newPassword" style="width: 360px;" :rules="[
+            { required: true, message: $t('enterNewPassword'), trigger: 'blur' },
+            { min: 6, max: 10, message: $t('passwordLength'), trigger: 'blur' }
+          ]">
+            <el-input v-model="formData.newPassword" type="password" show-password :placeholder="$t('newPasswordPlaceholder')"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('verifyPassword')" prop="verifyPassword" style="width: 360px;" :rules="[
+            { required: true, message: $t('confirmNewPassword'), trigger: 'blur' },
+            { validator: validateVerifyPassword, trigger: 'blur' }
+          ]">
+            <el-input v-model="formData.verifyPassword" type="password" show-password :placeholder="$t('verifyPasswordPlaceholder')"></el-input>
+          </el-form-item>
+          <el-form-item label="">
+            <el-button type="primary" size="samll" v-debounce:click="submit">{{$t('submit')}}</el-button>
+          </el-form-item>
+        </el-form>
+     </Group>
+</template>
+
+<script lang='ts' setup>
+import {ref ,onMounted, reactive} from 'vue'
+import {md5Data} from '@/utils/index';
+import request from '@/utils/request'
+import { ElMessage } from 'element-plus';
+import i18n from '@/utils/i18n'
+const formData = reactive({
+  oldPassword:'',
+  newPassword:'',
+  verifyPassword:''
+})
+const formRef = ref(null)
+const validateVerifyPassword =(rule, value, callback) => {
+      if (value === '') {
+        callback(new Error(i18n.global.t('confirmNewPassword')));
+      } else if (value !== formData.newPassword) {
+        callback(new Error(i18n.global.t('twoNewPassword')));
+      } else {
+        callback();
+      }
+    }
+const submit= async ()=>{
+  formRef.value.validate(async (valid)=>{
+    if(valid){
+      const encryptedOldPassword = md5Data(formData.oldPassword)
+      const encryptedNewPassword = md5Data(formData.newPassword) 
+      const encryptedFormData = {
+        oldPassword: encryptedOldPassword,
+        password: encryptedNewPassword
+      }
+  const res = await request('post', '/api/live/video/user/resetPassword', encryptedFormData)
+  if(res.code === 200){
+    ElMessage.success(i18n.global.t('passwordChangeSuccess'))
+  }else{
+    ElMessage.error(i18n.global.t('passwordChangeFail'))
+  }
+  }
+})
+}
+</script>
+
+<style scoped lang="scss">
+  
+</style>