library-wechat/subpkg/pages/change-password/change-password.vue

<template>
  <view class="container">
    <view class="form-box">
      <!-- 原密码 -->
      <view class="form-item">
        <text class="label">旧密码</text>
        <input
          class="input"
          type="password"
          placeholder="请输入当前密码"
          v-model="oldPwd"
        />
      </view>

      <!-- 新密码 -->
      <view class="form-item">
        <text class="label">新密码</text>
        <input
          class="input"
          type="password"
          placeholder="请输入6-16位新密码"
          v-model="newPwd"
        />
      </view>

      <!-- 确认新密码 -->
      <view class="form-item">
        <text class="label">确认新密码</text>
        <input
          class="input"
          type="password"
          placeholder="请再次输入新密码"
          v-model="confirmPwd"
        />
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" @click="submit">确认修改</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      oldPwd: '',
      newPwd: '',
      confirmPwd: ''
    }
  },
  methods: {
    submit() {
      const { oldPwd, newPwd, confirmPwd } = this
      
      if (!oldPwd) {
        uni.showToast({ title: '请输入旧密码', icon: 'none' })
        return
      }
      if (!newPwd || newPwd.length < 6) {
        uni.showToast({ title: '新密码至少6位', icon: 'none' })
        return
      }
      if (newPwd !== confirmPwd) {
        uni.showToast({ title: '两次密码不一致', icon: 'none' })
        return
      }

      // 这里写接口请求
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  display: block;
  font-size: 15px;
  color: #333;
  margin-bottom: 8px;
}

.input {
  height: 44px;
  padding: 0 15px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  font-size: 15px;
}

.submit-btn {
  margin-top: 50px;
  padding: 5px 0;
  background-color: #007aff;
  color: #fff;
  border-radius: 23px;
  font-size: 16px;
}
</style>