property-manager-side/wuye-manager-uniapp/pageSubPack/setting/change-password.vue

<template>
  <view class="reset-pwd-page">
    <!-- <view class="status_bar"></view> -->
    <!-- 顶部导航栏 -->
    <!-- <view class="nav-bar">
      <uni-icons type="left" size="28" color="#333" @click="goBack"></uni-icons>
      <view class="nav-title">修改密码</view>
    </view> -->

    <!-- 旧密码输入框 -->
    <view class="input-item">
      <uni-easyinput
        class="input-content"
        type="password"
        v-model="oldPassword"
        placeholder="请输入旧密码"
        :inputBorder="false"
        :placeholderStyle="placeholderStyle"
        @input="checkForm"
      >
      </uni-easyinput>
    </view>

    <!-- 新密码输入框 -->
    <view class="input-item">
      <uni-easyinput
        class="input-content"
        type="password"
        v-model="newPassword"
        placeholder="请输入新密码（6-16位，含字母+数字）"
        :inputBorder="false"
        :placeholderStyle="placeholderStyle"
        @input="checkForm"
      >
      </uni-easyinput>
    </view>

    <!-- 确认密码输入框 -->
    <view class="input-item">
      <uni-easyinput
        class="input-content"
        type="password"
        v-model="confirmPassword"
        placeholder="请再次输入新密码"
        :inputBorder="false"
        :placeholderStyle="placeholderStyle"
        @input="checkForm"
      >
      </uni-easyinput>
    </view>

    <!-- 密码规则提示 -->
    <view class="pwd-tip">
      密码规则：6-16位字符，必须包含字母和数字
    </view>

    <!-- 确定按钮 -->
    <button class="confirm-btn"  @click="handleConfirm">
      确定
    </button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app'
import { changePassword } from '../../api/api.js'

// ========== 响应式数据 ==========
// 旧密码
const oldPassword = ref('')
// 新密码
const newPassword = ref('');
// 确认密码
const confirmPassword = ref('');
const placeholderStyle = ref('font-size:24rpx;color:#999')

// 定义接收上一页传来的参数
const phone = ref('');
const smsCode = ref('');


// ========== 方法 ==========
// 返回上一页
const goBack = () => {
  uni.navigateBack();
};


// 实时检查表单状态
const checkForm = () => {
  // 可在这里添加实时的表单错误提示，比如：
  if (newPassword.value && !/^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/.test(newPassword.value)) {
    // 密码格式错误提示（可选：显示在页面上，而不是toast）
    // errorTip.value = '密码必须包含字母和数字，长度6-16位'
  } else if (confirmPassword.value && newPassword.value !== confirmPassword.value) {
    // errorTip.value = '两次输入的密码不一致'
  } else {
    // errorTip.value = ''
  }
};

// 处理确定按钮点击
const handleConfirm = () => {
    // 1. 表单校验
     if (!oldPassword.value) {
       uni.showToast({ title: '请输入旧密码', icon: 'none' });
       return;
     }
     if (!/^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/.test(newPassword.value)) {
       uni.showToast({ title: '新密码格式错误（需6-16位，含字母+数字）', icon: 'none' });
       return;
     }
     if (newPassword.value !== confirmPassword.value) {
       uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
       return;
     }

  // 构造请求参数（包含旧密码）
  let params = {
    oldPassword: oldPassword.value,
    newPassword: newPassword.value,
    confirmPassword: confirmPassword.value,
  }
  // 显示加载中
  uni.showLoading({ title: '修改中...' });
  // 调用修改密码接口
  changePassword(params).then(res => {
    uni.hideLoading();
    if (res.code === 200) {
      uni.showToast({ title: '修改成功', icon: 'success' });
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({ title: res.msg || "修改失败", icon: 'error' });
    }
  }).catch(err => {
    uni.hideLoading();
    uni.showToast({
      title: err.msg || '网络异常，请稍后重试',
      icon: 'none'
    });
  })
};
</script>

<style scoped>
/* 页面容器 */
.reset-pwd-page {
  padding: 20rpx 40rpx 40rpx;
  min-height: 100vh;
  background-color: #F9F9F9;
  /* background: repeating-linear-gradient(180deg, #E2F0FF, #F6FAFF ); */
}

.status_bar {
  width: 100%;
  height: 46px;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  margin-bottom: 60rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

/* 输入框通用样式 */
.input-item {
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 30rpx;
  height: 88rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

/* 输入框内容 */
.input-content {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  /* height: 100%; */
  display: flex;
  align-items: center;
}

/* 密码规则提示 */
.pwd-tip {
  font-size: 24rpx;
  color: #999;
  text-align: left;
  margin: -20rpx 0 30rpx 10rpx;
  line-height: 1.4;
}

/* 确定按钮 */
.confirm-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #4D5DFA;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  margin-top: 20rpx;
  border: none;
}

/* 确定按钮禁用状态 */
.confirm-btn:disabled {
  background-color: #99c8ff;
  color: #fff;
}

/* 禁用按钮边框重置 */
button:after {
  border: none;
  border-radius: 8rpx;
}
</style>