edu/app/src/pages/change_password/change_password.vue

68 lines
2.3 KiB
Vue

<template>
<view
class="register bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[100rpx] box-border"
>
<view class="w-full">
<view class="text-2xl font-medium mb-[60rpx]">修改登录密码</view>
<u-form borderBottom :label-width="150">
<u-form-item label="原密码" borderBottom>
<u-input
class="flex-1"
v-model="formData.oldPassword"
:border="false"
placeholder="请输入原来的密码"
/>
</u-form-item>
<u-form-item label="新密码" borderBottom>
<u-input
class="flex-1"
type="password"
v-model="formData.password"
placeholder="6-20位数字+字母或符号组合"
:border="false"
/>
</u-form-item>
<u-form-item label="确认密码" borderBottom>
<u-input
class="flex-1"
type="password"
v-model="formData.password2"
placeholder="再次输入新密码"
:border="false"
/>
</u-form-item>
</u-form>
<view class="mt-[100rpx]">
<u-button type="primary" shape="circle" @click="handleConfirm"> 确定 </u-button>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { userChangePwd } from '@/api/user'
import { reactive } from 'vue'
const formData = reactive({
oldPassword: '',
password: '',
password2: ''
})
const handleConfirm = async () => {
if (!formData.oldPassword) return uni.$u.toast('请输入原来的密码')
if (!formData.password) return uni.$u.toast('请输入密码')
if (!formData.password2) return uni.$u.toast('请输入确认密码')
if (formData.password != formData.password2) return uni.$u.toast('两次输入的密码不一致')
await userChangePwd(formData)
uni.$u.toast('操作成功')
uni.navigateBack()
}
</script>
<style lang="scss">
page {
height: 100%;
}
</style>