uniIM/pages/mine/savepassword.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view>
    <cu-custom bgImage="/static/bg.png" :isBack="true">
      <template v-slot:content>
        <text class="text-black">安全密码</text>
      </template>
    </cu-custom>
    <view class="padding">
      <uni-forms ref="pwdFormX" :model="pwdForm" :label-width="130" :rules="rules">
        <uni-forms-item class="text-bold text-black" label="新密码" name="newPassword">
          <uni-easyinput type="password" v-model="pwdForm.newPassword"/>
        </uni-forms-item>
        <uni-forms-item class="text-bold text-black" label="确认密码" name="confirmPassword">
          <uni-easyinput type="password" v-model="pwdForm.confirmPassword"/>
        </uni-forms-item>
        <view class="margin-top text-center">
          <button class="cu-btn bg-zblue border lg margin-top" style="width: 100%;" @tap="submit">保存</button>
        </view>
      </uni-forms>
    </view>

  </view>
</template>

<script setup lang="ts">
import CuCustom from '@/colorui/components/cu-custom.vue'
import {reactive, ref} from "vue";
import {useUserStore} from "@/store/userStore";
import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import MessageUtils from "@/utils/MessageUtils";
import Auth from "@/api/Auth";
const fontValue=ref(Auth.getfontSize());

const userStore = useUserStore()

const pwdFormX = ref();
const pwdForm = reactive({
  newPassword: '',
  confirmPassword: ''
})

const equalToPassword = (rule:any, value:any,data:any, callback:(err?:string)=>{}) => {
  if (pwdForm.newPassword !== value) {
    callback('两次输入的密码不一致')
  } else {
   return true
  }
}
const rules = {
  newPassword: {
    rules: [
      { required: true, errorMessage: '新密码不能为空', trigger: 'blur' },
      {
        minLength: 5,
        maxLength: 10,
        errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
      }
    ]
  },
  confirmPassword: {
    rules: [
      { required: true, errorMessage: '确认密码不能为空', trigger: 'blur' },
      { required: true, validateFunction: equalToPassword, trigger: 'blur' }
    ]
  }
}

/** 提交按钮 */
function submit() {
	if(pwdForm.newPassword==null||pwdForm.newPassword==''||pwdForm.newPassword==undefined){
		MessageUtils.message('请输入安全密码！')
		return;
	}
	else{
		if(pwdForm.newPassword!=pwdForm.confirmPassword){
			MessageUtils.message('两次输入的密码不一致！')
			return;
		}
	}
 	var name = userStore.getUser()?.name;
	console.log(name);
	uni.setStorageSync(name,pwdForm.newPassword);
	uni.navigateBack();
}
</script>

<style scoped>

</style>