YingXingAI/pages/my/mySeting/mySetPwd.vue

<template>
  <view class="editPwd">
		<u-navbar back-text="" title="设置密码" :border-bottom="false">
		</u-navbar>
    <view class="form">
      <div class="input">
        <u-input
          v-model="form.oldPwd"
          :border="false"
          :type="'text'"
          placeholder="填写原始密码"
        />
      </div>
      <div class="input">
        <u-input
          v-model="form.newPwd"
          :border="false"
          placeholder="填写新密码"
          type="password"
        />
      </div>
      <div class="input">
        <u-input
          v-model="form.repeatPwd"
          :border="false"
          placeholder="再次填写确认"
          type="password"
        />
      </div>
      <!-- <div class="codeInput">
            <u-input v-model="form.code" :type="'number'" :border="false" placeholder="验证码" />
            <u-button class="codeBtn" type="primary" size="medium">8556</u-button>
          </div> -->
      
      <div class="btns">
        <u-button class="btn" type="primary" @click="editPwd(true)"
          >确定</u-button
        >
      </div>
      <view style="width: 85%; color: grey;margin:0 auto;">
        密码长度应该大于5，必须包含字母、数字、特殊字符，且不能包含中文!
      </view>
    </view>
	<u-toast ref="uToast"/>
  </view>
</template>

<script>
import {aesEncrypt} from '@/utils/encrypt.js'
export default {
  data() {
    return {
      editPasswrod: false,
      form: {
        oldPwd: "",
        newPwd: "",
        repeatPwd: "",
      },
    };
  },
  methods: {
    editPwd(state) {
      if (state) {
        if (this.form.oldPwd === "") {
          // return this.$tips("请输入旧密码", "error");
          return this.$refs.uToast.show({
            title: "请输入旧密码",
            type: "error",
          });
        }
        if (this.form.newPwd === "") {
          // return this.$tips("请输入新密码", "error");
          return this.$refs.uToast.show({
            title: "请输入新密码",
            type: "error",
          });
        }
        if (this.form.oldPwd == this.form.newPwd) {
          // return this.$tips("新密码不能与旧密码一致", "error");
          return this.$refs.uToast.show({
            title: "新密码不能与旧密码一致",
            type: "error",
          });
        }
        if (this.form.newPwd.length < 5) {
          // return this.$tips("您的密码长度应该大于5", "error");
          return this.$refs.uToast.show({
            title: "您的密码长度应该大于5",
            type: "error",
          });
        }
        let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{5,}$/;
        if (!reg.test(this.form.newPwd)) {
          // return this.$tips("密码必须包含字母、数字、特殊字符，且不能包含中文!", "error");
          return this.$refs.uToast.show({
            title: "密码必须包含字母、数字、特殊字符，且不能包含中文!",
            type: "error",
          });
        }
        if (this.form.repeatPwd === "") {
          // return this.$tips("请确认密码", "error");
          return this.$refs.uToast.show({
            title: "请确认密码",
            type: "error",
          });
        }
        if (this.form.repeatPwd !== this.form.newPwd) {
          // return this.$tips("请确认两次密码是否一致", "error");
          return this.$refs.uToast.show({
            title: "请确认两次密码是否一致",
            type: "error",
          });
        }
        const data = {
          userId: this.vuex_user.id,
          oldPassword: aesEncrypt(this.form.oldPwd),
          password: aesEncrypt(this.form.repeatPwd),
        };
        this.$u.api
          .myChangePassword(data)
          .then((res) => {
            // this.$tips("修改成功");
            this.$refs.uToast.show({
              title: "修改成功",
              type: "success",
            });
            this.form.newPwd = "";
            this.form.oldPwd = "";
            this.form.repeatPwd = "";
            uni.navigateBack({
              delta: 1
            });
          })
          .catch((err) => {
            // return this.$tips(err.error, "error");
            return this.$refs.uToast.show({
              title: err.error,
              type: "error",
            });
          });
      } else {
        (this.form.newPwd = "");
        this.form.repeatPwd = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.editPwd {
  .form {
    padding:100rpx 56rpx;

    .input {
      background-color: #fff;
      border-radius: 24rpx;
      font-size:28rpx;
      color: #b4b6bd;
      margin-bottom: 40rpx;
      padding: 20rpx 20rpx;
    }

    .codeInput {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40rpx;

      ::v-deep .u-input {
        background-color: #f6f7fa;
        border-radius: 14rpx;
        font-size:28rpx;
        color: #b4b6bd;
        padding: 10rpx 10rpx !important;
      }

      .codeBtn {
        width: 100rpx;
        height: 100rpx;
        background-color: #eaf5ff;
        border-radius: 14rpx;
        font-size: 52rpx;
        line-height: 46rpx;
        color: #2e9bff;
        margin-left: 24rpx;
      }
    }

    .btns {
      display: flex;
      justify-content: space-between;
      margin-top: 50rpx;
      margin-bottom: 30rpx;

      .btn {
        width: 100%;
        border-radius: 50rpx;
        background: #3cb5fb;
        height: 100rpx;
      }
    }
  }
}
</style>