shenze-sysMan/src/views/changePassword.vue

<template>
  <!-- 修改密码 -->
  <div class="changePassword flex-col">
    <s-header :name="$t('changePassword.changePassword')" :noback="false"></s-header>
    <div class="changePasswordFormBox">
      <van-form @submit="changePasswordSubmit">
        <van-field v-model="password" name="password" type="password" :label="$t('changePassword.passwordLabel')"
          :placeholder="$t('changePassword.passwordPlaceholder')"
          :rules="[{ required: true, message: $t('changePassword.passwordRequired') }]" />
        <van-field v-model="passwordCheck" name="passwordCheck" type="password"
          :label="$t('changePassword.passwordCheckLabel')" :placeholder="$t('changePassword.passwordCheckPlaceholder')"
          :rules="[{ required: true, message: $t('changePassword.passwordCheckRequired') }]" />
        <van-button round type="primary" class="register" native-type="submit">{{ $t('changePassword.registerButton') }}
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { ref } from 'vue';
import { Toast } from 'vant';
import sHeader from "@/components/SimpleHeader";
// import { useRouter, useRoute } from "vue-router";
import { useRouter} from "vue-router";
import { updatePassword } from '@/service/changePassword';
import { useI18n } from 'vue-i18n';
import { getLoginUser } from "@/common/js/utils";

export default {
  setup() {
    // 引入语言
    const { t } = useI18n();
    const router = useRouter();
    // const route = useRoute();
	const user = getLoginUser();
    const password = ref('');
    const passwordCheck = ref('');
    // 验证-表单
    const changePasswordSubmit = async () => {
      if (password.value !== passwordCheck.value) {
        Toast.fail(t('changePassword.inconsistentPasswords'));
        return false;
      }
      const { data } = await updatePassword({
        // username: route.query.name,
		username: user.username,
        password: md5(password.value)
      });
      if (data.code === '00000') {
        Toast(t('changePassword.pwdEditSucess'));
        router.push({ path: '/login' });
      } else {
        Toast.fail(data.message);
      }
    };
    return {
      password,
      passwordCheck,
      changePasswordSubmit
    };
  },
  components: { sHeader },
};
</script>

<style lang="less" scoped>
@import "../common/style/mixin";

.changePassword {
  .changePasswordFormBox {
    width: 313px;
    margin: 0 auto;
    text-align: center;

    .van-form {
      .van-cell {
        width: 313px;
        height: 38px;
        background-color: rgba(255, 255, 255, 1);
        padding: 0;
        color: rgba(168, 168, 197, 1);
        font-size: 13px;
        margin: 0 auto;
        margin-top: 20px;
        overflow: visible;

        &::after {
          display: none;
        }

        .van-field__control {
          height: 38px;
          line-height: 38px;
          padding: 6px;
          border-radius: 2px;
          border: 0.5px solid rgba(185, 186, 208, 1);

          &:-internal-autofill-previewed,
          &:-internal-autofill-selected {
            -webkit-text-fill-color: #323233 !important;
            transition: background-color 5000s ease-in-out 0s !important;
          }
        }

        .van-field__control::-webkit-input-placeholder {
          color: rgba(168, 168, 197, 1);
        }

        .van-cell__value {
          width: 100%;
          flex: 0 auto;
        }

        .van-field__label {
          height: 38px;
          line-height: 38px;
          width: 5em;
        }

        .radioBox {
          display: flex;

          .van-radio-group--horizontal {
            width: 100%;
            justify-content: space-around;
          }

          .van-radio {
            overflow: visible;
          }

          .van-radio__icon {
            font-size: 13px;

            .van-icon {
              width: 12px;
              height: 12px;
              border-color: #4d6add;
            }
          }

          .van-radio__label {
            line-height: 13px;
          }

          .van-radio__icon--checked .van-icon-success {
            border-color: #4d6add;
            background: #4d6add;
          }

          .van-radio__icon--checked .van-icon-success::before {
            content: '';
            background: #fff;
            width: 40%;
            height: 40%;
            position: absolute;
            top: 30%;
            left: 30%;
            border-radius: 100%;
          }

          .van-radio__icon--checked+.van-radio__label {
            color: #4d6add;
          }
        }
      }
    }

    .info2 {
      height: 13px;
      overflow-wrap: break-word;
      color: rgba(64, 77, 116, 1);
      font-size: 13px;
      text-align: left;
      white-space: nowrap;
      line-height: 13px;
      display: block;
      margin: 34px 0 0 0;
    }

    .word2 {
      height: 13px;
      overflow-wrap: break-word;
      color: rgba(64, 77, 116, 1);
      font-size: 13px;
      text-align: left;
      white-space: nowrap;
      line-height: 13px;
      display: block;
      margin: 14px 0 0 0;
    }

    .register {
      background-color: rgba(77, 106, 221, 1);
      border-radius: 17px;
      height: 34px;
      width: 220px;
      margin-top: 60px;
      font-size: 15px;
      font-family: PingFangSC-Medium;
    }
  }
}
</style>