hitap-chat/pages/mine/password.vue

<template>
  <view id="page" class="password-box">
    <view class="Width100 Box BorderBox">
      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" class="form" labelWidth="100">
        <!-- <u-form-item label="原密码" prop="password" borderBottom>
          <u--input v-model="form.password" border="none"></u--input>
        </u-form-item> -->
        <u-form-item label="新密码" prop="password" borderBottom>
          <u--input v-model="form.password" border="none"></u--input>
        </u-form-item>
        <u-form-item label="确认密码" prop="confirmPassword" borderBottom>
          <u--input v-model="form.confirmPassword" border="none"></u--input>
        </u-form-item>
      </u--form>
      <view @click="submit" class="Unit FontBold BorderBox TextCenter Width100 MarginT_30rpx BorderR_30rpx submit">
        提交
      </view>
      <!-- <uni-forms :modelValue="formData" border>
        <uni-forms-item label="道路类型">
          <input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadType"
            placeholder="请输入道路类型" />
          <text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{
            formData.roadType
          }}</text>
        </uni-forms-item>
      </uni-forms > -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 公用的js
        $: this.$,
        rules: {
          // 'password': {
          //   type: 'string',
          //   required: true,
          //   message: '请填写原密码',
          //   trigger: ['blur', 'change']
          // },

        },
        form: {
          confirmPassword: "",
          password: ""
        },
      }
    },
    // 页面加载
    onLoad(e) {

    },
    // 页面显示
    onShow() {
    },
    // 计算属性
    computed: {},
    // 方法
    methods: {
      // sexSelect(e) {
      //   this.model1.userInfo.sex = e.name
      //   this.$refs.uForm.validateField('userInfo.sex')
      // },
    },
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules)
    },
    // 页面卸载
    onUnload() {

    },
    methods: {
      //修改密码
      submit() {
        if (!this.form.password) {
          this.$.toast('请输入密码')
        }
        else if (this.form.password != this.form.confirmPassword) {
          this.$.toast('两次密码不一致')
        } else {
          this.$request
            .globalRequest(
              "/hiddenDanger/auth/updatePwd",
              {
                cusername: this.$.getData('userInfo').username,
                nuserid: this.$.getData("token"),
                nuserpwd: this.form.password,
              },
              "POST",
              true
            )
            .then((res) => {

              if (res.code === 200) {
                this.$.toast('密码修改成功~')
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 2000);
              } else {
                this.$.toast(res.message)
              }

            });
        }

      },
    },
    // 触发下拉刷新
    onPullDownRefresh() {

    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>

<style>
</style>
<style lang="scss" scoped>
  page {
    background: #F6F8FA;
  }

  .password-box {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #F6F8FA;
    padding: 10rpx 30rpx;

    .form {
      width: 690rpx;
    }

    /deep/ .u-form-item__body {
      padding: 30rpx 10rpx;
    }

    .submit {
      /* background: #E1EDFF; */
      background: linear-gradient(90deg, #0064FF 0%, #2D99FD 100%);
      color: #ffffff;
      width: 690rpx !important;
      height: 94rpx;
      line-height: 94rpx;
      border-radius: 13rpx;
      margin-top: 70rpx;
      font-weight: 500;
      margin-left: 0;
      font-size: 32rpx;
      letter-spacing: 4rpx;
    }
  }
</style>