deepChartVueApp/pages/setting/nextPwd.vue

<template>
  <view class="main">
    <view :style="{height:iSMT+'px'}"></view>

    <view style="height:1.5vh;"/>

    <view class="title">
      <text class="label">确认新密码</text>
    </view>

    <view class="top">


      <view class="top-list">
        <view class="left">
          <image class="image-lock" src="/static/my/unlock.png"/>
          <input type="password" :type="pwdType" placeholder="请输入新密码" class="input" v-model="oldPassword"
          />
          <image class="image-eye" :src="pwdType === 1 ? '/static/my/hideEye.png' : '/static/my/openEye.png'"
               @click="changeEye(1)"/>
        </view>
      </view>

      <view class="top-list">
        <view class="left">
          <image class="image-lock" src="/static/my/unlock.png"/>
          <input type="password" :type="pwdType2" placeholder="再次确认" class="input" v-model="newPassword"/>
          <image class="image-eye" :src="pwdType === 1 ? '/static/my/hideEye.png' : '/static/my/openEye.png'"
               @click="changeEye(2)"/>
        </view>
      </view>

      <text class="tips">密码最少8位数</text>
    </view>

    <view class="bottom">
      <button class="change-btn" @click="confirmChange">确认</button>
    </view>
  </view>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {updatePassword} from "@/api/setting/nextPwd";

const iSMT = ref(0)
const pwdType = ref('password')
const pwdType2 = ref('password')

// 绑定的数据 旧密码 新密码 确认密码
const oldPassword = ref('')
const newPassword = ref('')

// 点击确认按钮
const confirmChange = async () => {

  if (newPassword.value !== oldPassword.value) {
    uni.showToast({title: '两次输入的密码不一致', icon: 'none'})
    return
  }
  const updatePasswordPromise = updatePassword({
    oldPassword: oldPassword.value,
    newPassword: newPassword.value
  })
  updatePasswordPromise
      .then(res => {
        if (res.code === 200) {
          uni.showToast({ title: '修改成功', icon: 'success' });
        } else {
          uni.showToast({ title: res.message,icon: 'none' });
        }
      })
      .catch(err => {
        console.log('修改密码失败：', err);
      });

}


const changeEye = (type) => {
  if (type === 1) {
    pwdType.value = pwdType.value === 'password' ? 'text' : 'password'
  } else {
    pwdType2.value = pwdType2.value === 'password' ? 'text' : 'password'
  }
}

onMounted(() => {
  // 状态栏高度
  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
  console.log('看看高度', iSMT.value)
})
</script>

<style>
.title {
  height: 8.5vh;
  background-color: white;
}

.label {
  height: 8.5vh;
  font-size: 40rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 0 60rpx;
}

.top {
  height: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-list {
  width: 630rpx;
  height: 7vh;
  margin: 0rpx 40rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #eee;
}

.left {
  flex: 1;
  display: flex;
  align-items: center;
}

.input {
  flex: 1;
  height: 70rpx;
  font-size: 29rpx;
  margin-left: 20rpx;
}

.bottom {
  height: 22vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.change-btn {
  height: 85rpx;
  width: 610rpx;
  padding: 0 20rpx;
  background-color: black;
  color: white;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tips {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
  margin-left: 60rpx;
  align-self: flex-start;
  /* 这是左对齐 */
}

.image-lock{
	width:40rpx;
	height:40rpx;
}

.image-eye{
	width:40rpx;
	height:30rpx;
}
</style>