smart_storage_app/pages/sys/user/pwd.vue

<template>
  <view class="wrap">
    <view class="remind-text"
      >{{ this.$t('homePage.mine.setPassword') }}<br />
      {{ this.$t('homePage.mine.passwordService') }}</view
    >
    <u-form class="form" :model="model" :rules="rules" ref="uForm">
      <u-form-item :label="$t('homePage.mine.oldPassword')" prop="oldPassword" label-width="180">
        <u-input
          type="password"
          v-model="model.oldPassword"
          :placeholder="$t('homePage.mine.inputOldPossword')"
        ></u-input>
      </u-form-item>
      <u-form-item :label="$t('homePage.mine.newPassword')" prop="newPassword" label-width="180">
        <u-input
          type="password"
          v-model="model.newPassword"
          :placeholder="$t('homePage.mine.inputNewPassword')"
        ></u-input>
      </u-form-item>
      <u-form-item :label="$t('homePage.mine.surePassword')" prop="confirmPassword" label-width="180">
        <u-input
          type="password"
          v-model="model.confirmPassword"
          :placeholder="$t('homePage.mine.inputSurePassword')"
        ></u-input>
      </u-form-item>
    </u-form>
    <view class="remind-text">
      <u-icon name="question-circle" color="#2767dc" size="28"></u-icon>
      {{ this.$t('homePage.mine.PasswordError') }}</view
    >
    <view class="form-footer">
      <u-button class="btn"   @click="submit">{{ this.$t('homePage.mine.submit') }}</u-button>
      <!-- <u-button class="btn" type="default" @click="cancel">关闭</u-button> -->
    </view>
  </view>
</template>
<script>
import { encryptUpdatePsd } from "@/common/common.js";
export default {
  data() {
    return {
      model: {
        oldPassword: "",
        newPassword: "",
        confirmNewPassword: "",
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: this.$t('homePage.mine.oldPassword'),
            trigger: ["change", "blur"],
          },
        ],
        newPassword: [
          {
            required: true,
            message: this.$t('homePage.mine.newPassword'),
            trigger: ["change", "blur"],
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
            message: this.$t('homePage.mine.PasswordError'),
            trigger: ["change", "blur"],
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: this.$t('homePage.mine.resetSubmit'),
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return value === this.model.newPassword;
            },
            message: this.$t('homePage.mine.passwordEqual'),
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  onLoad() {
    this.updateTitle()
  },
  onShow() {
    this.updateTitle()
  },
  computed: {
  	language(){
  		return this.vuex_language 
  	}
  },
  watch:{
  	language: {
  		immediate: true,
  		deep:true,
  		handler(val) {
  			uni.setNavigationBarTitle({
  				title: this.$t('homePage.mine.accountSec')
  			});
  		}
  	}
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
	updateTitle() {
		uni.setNavigationBarTitle({
		  title: this.$t('homePage.mine.accountSec')
		});
	},
    submit() {
			const self = this
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          const psd = encryptUpdatePsd(this.vuex_iv,this.vuex_psdkey,this.model.oldPassword);
          const newpsd = encryptUpdatePsd(this.vuex_iv,this.vuex_psdkey,this.model.newPassword);
          const params = {
            oldPwd: psd,
            newPwd: newpsd,
          };
          this.$u.api.changePsd(params).then((res) => {
            if (res.code === 200) {
              uni.showModal({
                title: this.$t('homePage.mine.tip'),
                content: this.$t('homePage.mine.updateSuccess'),
                showCancel: false,
                success: function () {
                  self.logout()
                },
              });
            } else {
              uni.showModal({
                title: this.$t('homePage.mine.tip'),
                content: res.msg,
                showCancel: false,
              });
            }
          });
        } else {
          this.$u.toast(this.$t('homePage.mine.inputError'));
        }
      });
    },
		logout() {
			this.$u.api.logout().then(res => {
				if (res.code == 200) {
					uni.reLaunch({
						url: '/pages/sys/login/index'
					});
				}
			});
		},
    cancel() {
      uni.navigateBack();
    },
  },
};
</script>
<style lang="scss">
page {
  background: #f5f5f5;
}
.u-form {
  background: #fff;
  padding: 0px 15px;
}
.remind-text {
  padding: 20rpx 30rpx;
  color: #666666;
}
.form-footer {
  padding: 30rpx;
  .btn {
    width: 690rpx;
    background-color:#009458;
    border-color: #009458!important;
    color: #fff;
  }
}
</style>