usky-web-mobile/src/pages/mine/pwd/index.vue

<template>
  <view class="pwd-retrieve-container">
    <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="修改密码" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
      <template #left>
        <view class="u-nav-slot">
          <u-icon name="arrow-left" size="19" color="#fff"></u-icon>
        </view>
      </template>
    </u-navbar>

    <view class="uni-content-header"></view>
    <view class="uni-content-body">
      <uni-forms ref="form" :value="user" labelWidth="80px">
        <uni-forms-item name="oldPassword" label="旧密码">
          <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
        </uni-forms-item>
        <uni-forms-item name="newPassword" label="新密码">
          <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
        </uni-forms-item>
        <uni-forms-item name="confirmPassword" label="确认密码">
          <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
        </uni-forms-item>
        <button type="primary" @click="submit">提交</button>
      </uni-forms>
    </view>
  </view>
</template>

<script setup>
import { updateUserPwd } from "@/api/system/user";

import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";

import useStores from "@/store/modules/user.js";
const useStore = useStores();

const { proxy } = getCurrentInstance();

const data = reactive({
  user: {
    oldPassword: undefined,
    newPassword: undefined,
    confirmPassword: undefined,
  },
  rules: {
    oldPassword: {
      rules: [
        {
          required: true,
          errorMessage: "旧密码不能为空",
        },
      ],
    },
    newPassword: {
      rules: [
        {
          required: true,
          errorMessage: "新密码不能为空",
        },
        {
          minLength: 6,
          maxLength: 20,
          errorMessage: "长度在 6 到 20 个字符",
        },
      ],
    },
    confirmPassword: {
      rules: [
        {
          required: true,
          errorMessage: "确认密码不能为空",
        },
        {
          validateFunction: (rule, value, data) => data.newPassword === value,
          errorMessage: "两次输入的密码不一致",
        },
      ],
    },
  },
});
const { user, rules } = toRefs(data);

const form = ref(null);

function submit() {
  form.value.validate().then((res) => {
    updateUserPwd(user.value.oldPassword, user.value.newPassword).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
    });
  });
}

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onReady(() => {
  form.value.setRules(rules.value);
});
</script>

<style>
page {
  background-color: #ffffff;
}
</style>

<style lang="scss">
.uni-content-body {
  padding-top: 36rpx;
  padding: 15px;
}
</style>