client-app/pages/my/info.vue

<template>
    <hc-sys class="hc-my-info-page" :isNavBar="false">
        <uni-section title="基础信息" type="line" style="margin-top: 1px">
            <uni-list class="hc-my-info-list">
                <uni-list-item title="用户名称" :rightText="userInfo.realName" />
                <uni-list-item title="身份证号" :rightText="userInfo.idNumber" />
                <uni-list-item title="所属角色" :rightText="userInfo.roleName" />
                <uni-list-item title="登录账号" :rightText="userInfo.account" />
                <uni-list-item title="绑定手机" :rightText="userInfo.phone" />
                <uni-list-item title="所属部门" :rightText="userInfo.deptId" />
            </uni-list>
        </uni-section>
        <uni-section class="mt-1" title="CA签字体" type="line">
            <view class="px-3">
                <img class="h-180 max-w-full" :src="userInfo.signatureUrl" alt="" v-if="userInfo.signatureUrl">
                <text class="py-2 text-gray" v-else>无CA签字体</text>
            </view>
        </uni-section>
        <uni-collapse class="mt-3 mb-5">
            <uni-collapse-item title="修改密码">
                <view class="px-5 py-2">
                    <uni-forms ref="formRef" :rules="formRules" :modelValue="formData" label-width="100" label-position="top">
                        <uni-forms-item label="原始密码" required name="old">
                            <uni-easyinput type="password" v-model="formData.old" placeholder="请输入原始密码" />
                        </uni-forms-item>
                        <uni-forms-item label="新的密码" required name="new1">
                            <uni-easyinput type="password" v-model="formData.new1" placeholder="请输入新的密码" />
                        </uni-forms-item>
                        <uni-forms-item label="确认新密码" required name="new2">
                            <uni-easyinput type="password" v-model="formData.new2" placeholder="请输入确认新密码" />
                        </uni-forms-item>
                    </uni-forms>
                    <view class="form-btn-bar mb-2">
                        <button type="primary" @click="submitPassword">确认修改</button>
                    </view>
                </view>
            </uni-collapse-item>
        </uni-collapse>
    </hc-sys>
</template>

<script setup>
import {ref} from "vue";
import {onLoad} from '@dcloudio/uni-app'
import {errorToast, formValidate, successToast} from "@/utils/tools";
import mainApi from '~api/user/index';
import {getObjValue} from "js-fast-way";
import md5 from 'js-md5'

//初始变量
const formRef = ref(null)
const userInfo = ref({});

//渲染完成
onLoad(() => {
    getUserData()
    formRef.value?.setRules(formRules.value)
})

//获取用户信息
const getUserData = async () => {
    const {data} = await mainApi.queryCurrentUserData()
    userInfo.value = getObjValue(data)
}

//密码表单
const formData = ref({
    old: '', new1: '', new2: ''
})
const formRules = ref({
    old: {
        rules: [{
            required: true,
            errorMessage: '原始密码不能为空'
        }]
    },
    new1: {
        rules: [
            {
                required: true,
                errorMessage: '新的密码不能为空'
            },
            {
                validateFunction: function(rule, value, data, callback) {
                    if (value !== data.new2) {
                        callback('两次输入的密码不一致')
                    }
                    return true
                }
            }
        ]
    },
    new2: {
        rules: [
            {
                required: true,
                errorMessage: '确认密码不能为空'
            },
            {
                validateFunction: function(rule, value, data, callback) {
                    if (value !== data.new1) {
                        callback('两次输入的密码不一致')
                    }
                    return true
                }
            }
        ]
    }
})

//确认修改密码
const submitPassword = async () => {
    const res = await formValidate(formRef.value)
    if (!res) return
    uni.showLoading({title: '修改密码中...', mask: true});
    const {old, new1, new2} = formData.value
    const { error, code, msg } = await mainApi.updatePassword({
        oldPassword: md5(old),
        newPassword: md5(new1),
        newPassword1: md5(new2),
        plaintextPassword: new1,
    })
    uni.hideLoading();
    if (!error && code === 200) {
        formData.value = {}
        successToast('密码修改成功')
    } else {
        errorToast('修改失败:' + msg)
    }
}
</script>

<style lang="scss" scoped>
page {
    background: #EFEFF4;
}
</style>

<style lang="scss">
@import "@/style/my/info.scss";
</style>