tf-business/user_module/changePassword/index.vue

<template>
  <view class="change-password">
    <view class="change-container">
      <view class="change-box">
        <view class="change-title">密码</view>
        <view class="change-ipt">
          <tui-input
            placeholder="请输入原密码"
            v-model="password"
            padding="0 16rpx 0 0 "
            :size="28"
            :inputBorder="false"
            :borderBottom="false"
          >
          </tui-input>
        </view>
      </view>
      <view class="change-box">
        <view class="change-title">新密码</view>
        <view class="change-ipt">
          <tui-input
            placeholder="请输入新密码"
            v-model="newPassword"
            padding="0 16rpx 0 0 "
            :size="28"
            :inputBorder="false"
            :borderBottom="false"
          >
          </tui-input>
        </view>
      </view>
      <view class="change-box">
        <view class="change-title">确认新密码</view>
        <view class="change-ipt">
          <tui-input
            placeholder="二次确认新密码"
            v-model="confirmPassword"
            padding="0 16rpx 0 0 "
            :size="28"
            :inputBorder="false"
            :borderBottom="false"
          >
          </tui-input>
        </view>
      </view>
      <view class="inconsis" v-if="isShow">
        <tui-icon name="about" :size="12" color="#D40F0F"></tui-icon>
        <text>两次密码不一致</text>
      </view>
    </view>
    <view class="btn-box">
      <view class="btn" @click="goSucesss">确认</view>
    </view>
  </view>
</template>

<script>
import { updatePassword } from "@/config/index.js";
export default {
  data() {
    return {
      isShow: false,
      password: "",
      newPassword: "",
      confirmPassword: "",
    };
  },
  methods: {
    async goSucesss() {
      if (
        this.password == "" ||
        this.newPassword == "" ||
        this.confirmPassword == ""
      ) {
        this.$showToast("密码/新密码不能为空");
        return;
      }
      if (this.newPassword != this.confirmPassword) {
        this.$showToast("新密码不一致");
        this.isShow = true;
        return;
      }

      try {
        this.$loading.show("修改中...");
        let res = await updatePassword({
          password: this.password,
          newPassword: this.newPassword,
        });
        if (res.code == "") {
          uni.reLaunch({
            url: "/user_module/changeSuccess/index",
          });
        } else {
          this.$showToast(res.message);
        }
      } finally {
        this.$loading.hide();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.change-password {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(247, 247, 247);
  padding: 16rpx;
  box-sizing: border-box;
  .change-container {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 16rpx;
    position: relative;
    .change-box {
      width: 100%;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #e7e7e7;
      .change-title {
        margin-bottom: 16rpx;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
      }
      .ipt-left {
        padding-right: 32rpx;
        position: relative;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
        &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 16rpx;
          width: 4rpx;
          border-radius: 8rpx;
          background-color: #e7e7e7;
          height: 100%;
        }
      }
    }
    .inconsis {
      position: absolute;
      right: 32rpx;
      bottom: 28rpx;
      font-size: 24rpx;
      color: #d40f0f;
      @include flex(center, null, 8rpx);
    }
  }
  .btn-box {
    width: 100%;
    margin-top: 32rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    .btn {
      width: 100%;
      height: 96rpx;
      text-align: center;
      line-height: 96rpx;
      background-color: #fe4b1e;
      font-size: 28rpx;
      border-radius: 16rpx;
      color: #ffffff;
    }
  }
}
</style>