sfms3.0-uniapp/src/pages/setter/passwordpage.vue

<template>
  <view class="content passwordpage" style="padding: 0px 20rpx">
    <u-form ref="form" :model="formData" :rules="rules" :label-width="160">
      <u-form-item label="原密码" name="oldpassword" prop="oldpassword">
        <u-input type="password" v-model="formData.oldpassword" placeholder="请输入原来的密码" />
      </u-form-item>
      <u-form-item label="新密码" name="newpassword" prop="newpassword" style="border-bottom: 1px solid #eee">
        <u-input type="password" v-model="formData.newpassword" placeholder="请输入新密码" />
      </u-form-item>
      <u-form-item label="确认新密码" name="newpassword2" prop="newpassword2">
        <u-input type="password" v-model="formData.newpassword2" placeholder="请再次输入密码" />
      </u-form-item>
    </u-form>
    <view class="new_btn_bot">
      <button class="new_save_btn" @click="submit">确认修改</button>
    </view>
    <comMessage ref="comMessage"></comMessage>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, nextTick, watch } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import { updateUserPwd } from '@/api/request2.js'
import {navigateBack,} from '@/common/basic.js';
const formData = ref({
  oldpassword: '',
  newpassword: '',
  newpassword2: ''
})
const comMessage = ref(null)
const rules = ref({
  oldpassword: [{ required: true, message: '请输入密码', trigger: ['change', 'blur'] }],
  // 对name字段进行必填验证
  newpassword: [
    { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
    {
      minLength: 6,
      maxLength: 20,
      message: '密码长度在 {minLength} 到 {maxLength} 个字符'
    }
  ],
  // 对email字段进行必填验证
  newpassword2: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['change', 'blur']
    },
    {
      minLength: 6,
      maxLength: 20,
      message: '密码长度在 {minLength} 到 {maxLength} 个字符',
      trigger: ['change', 'blur']
    },
    {
      validator: (rule, value, callback) => {
        return value === formData.value.newpassword
      },

      message: '两次输入不同',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur']
    }
  ]
})
const form = ref()
const submit = () => {
  form.value.validate((valid) => {
    console.log(valid)
    if (valid) {
      updateUserPwd(formData.value.oldpassword, formData.value.newpassword).then((ress) => {
        if(ress.data){
          this.showCommitSuccessMessage("修改成功")
        }
        console.log('返回结果：', ress)
      })

    } else {
      console.log('表单错误信息：', err)
    }
  })
}
const showCommitSuccessMessage = (hint)=> {
  comMessage.value.showSuccessMessage(hint, res => {
    navigateBack(1)
  })
}
onReady(() => {
  form.value.setRules(rules.value)
})
</script>

<style>
.content {
  /* padding: 20rpx; */
  /* background-color: #fff; */
}
</style>