HSW_WX/pages/subPackages/password/index.vue

<template>
  <div class="mine-box">
    <div class="mine-body">
      <div class="form-list-box">
        <div class="info-box">
          <div class="label">当前密码</div>
          <div class="input-box">
            <input :type="show1 ? 'text' : 'password'" placeholder="请输入" v-model="lastPassword" />
          </div>
          <div class="icon-box" @click="getShow('1')">
            <van-icon name="eye-o" v-if="show1" />
            <van-icon name="closed-eye" v-else class="iconfont" />
          </div>
        </div>

        <div class="info-box">
          <div class="label">修改密码</div>
          <div class="input-box">
            <input :type="show2 ? 'text' : 'password'" placeholder="请输入" v-model="password" />
          </div>
          <div class="icon-box" @click="getShow('2')">
            <van-icon name="eye-o" v-if="show2" />
            <van-icon name="closed-eye" v-else class="iconfont" />
          </div>
        </div>

        <div class="info-box">
          <div class="label">确认修改密码</div>
          <div class="input-box">
            <input :type="show3 ? 'text' : 'password'" placeholder="请输入" v-model="checkPassword" />
          </div>
          <div class="icon-box" @click="getShow('3')">
            <van-icon name="eye-o" v-if="show3" />
            <van-icon name="closed-eye" v-else class="iconfont" />
          </div>
        </div>

        <div class="foot-box">
          <div class="but" @click="editPassword">保存</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hexMD5 } from './md5.js'

import { editPassword, getUserLocalStorageInfo } from "@/js_sdk/http";
// import auth from "@/service/auth";
export default {
  name: "PasswordEdit",
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      lastPassword: "",
      password: "",
      checkPassword: "",
    };
  },
  created() { },
  mounted() { },
  methods: {
    getShow(type) {
      this["show" + type] = !this["show" + type];
    },
    editPassword() {
      if (this.password === "") {
        this.$showToast("请填写密码");
        return false;
      }
      if (this.lastPassword === "") {
        this.$showToast("请填写原密码");
        return false;
      }
      if (this.password !== this.checkPassword) {
        this.$showToast("确认密码与密码不一致");
        return false;
      }
      if (this.password.length <= 6) {
        this.$showToast("新密码必须超过六位数！");
        return false;
      }
      var pwdRegex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}");
      if (!pwdRegex.test(this.password)) {
        this.$showToast(
          "您的密码复杂度太低（密码中必须包含字母、数字），请及时修改密码！"
        );
        return false;
      }
      editPassword({
        userId: getUserLocalStorageInfo().user.id,
        newPassword: hexMD5(this.password),
        oldPassword: hexMD5(this.lastPassword),
      }).then((res) => {
        if (res.errno === 0 && res.data) {
          uni.clearStorageSync();
          uni.reLaunch({
            url: "/pages/login/login",
          });
          this.$showToast("修改成功,请重新登陆");
        } else {
          this.$showToast(res.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.mine-box {
  width: 100%;
  height: 100%;
  //   background-image: url("../../assets/image/mine/mine-bg.jpg");
  //   background-image: url("../../../static/passwordbac.png");
  background-image: url("https://pgy.idea-sf.com/mnpApi/FileController/download/128270394311049216");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  overflow: hidden;

  .mine-body {
    padding: 30rpx;
    box-sizing: border-box;
    height: calc(100vh - 100rpx);
    box-sizing: border-box;
    overflow-y: auto;

    .form-list-box {
      width: 100%;
      background: rgba(#fff, 0.8);
      border-radius: 20rpx;
      box-sizing: border-box;
      margin-top: 160rpx;
      padding: 15rpx 30rpx;
      box-sizing: border-box;

      .info-box {
        height: 100rpx;
        @include flex;
        border-bottom: 1rpx solid #c6c5c9;

        .label {
          width: 200rpx;
          line-height: 100rpx;
          height: 100rpx;
          font-size: 30rpx;
          color: #262626;
        }

        .input-box {
          width: 260rpx;

          input {
            width: 100%;
            height: 100rpx;
            font-size: 30rpx;
            color: #999999;
            background: rgba(#fff, 0);
          }
        }

        .icon-box {
          width: 100rpx;
          text-align: center;

          i {
            font-size: 35rpx;
            color: #333;
          }
        }

        &:last-child {
          border-bottom: none;
        }
      }

      .foot-box {
        margin-top: 200rpx;
        width: 100%;

        .but {
          text-align: center;
          background: rgba(102, 0, 255, 1);
          color: #fff;
          font-size: 30rpx;
          line-height: 100rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>