web-retail-h5/pages/password/loginPassword.vue

<template>
  <view class="main">
    <view class="contents">
      <u-form ref="uForm" :model="emailObj" class="paddings" labelWidth="auto">
        <u-form-item
          :label="'旧密码'"
          label-width="100px"
          prop="email"
          style="display: flex"
        >
          <u-input
            v-model="emailObj.oldPassword"
            class="border-color"
            :placeholder="'请输入密码'"
            :password="true"
            placeholder-class="place-class"
          />
        </u-form-item>
        <u-form-item
          :label="'新密码'"
          label-width="100px"
          prop="email"
          style="display: flex"
        >
          <u-input
            v-model="emailObj.newPassword"
            class="border-color"
            :password="true"
            :placeholder="'请输入密码'"
            placeholder-class="place-class"
          />
        </u-form-item>
        <u-form-item
          :label="'请确认密码'"
          label-width="100px"
          prop="email"
          style="display: flex"
        >
          <u-input
            v-model="emailObj.loginPassword"
            class="border-color"
            :password="true"
            :placeholder="'请输入新邮箱'"
            placeholder-class="place-class"
          />
        </u-form-item>
      </u-form>
    </view>
    <u-button class="btn" shape="circle" type="success" @click="upLoginPwd">{{
      '确定'
    }}</u-button>
    <view style="height: 20rpx"></view>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { setToken } from '@/config/auth.js'
import address from '@/components/address.vue'
import store from '@/store'
export default {
  data() {
    return {
      getCodeText: '获取验证码',
      disabled: false,
      time: 60,
      yzmCheck: false,
      userInfo: '',
      emailObj: {
        oldPassword: '',
        loginPassword: '',
        newPassword: '',
      },
      rules: {
        oldPassword: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '密码不能为空',
            trigger: ['blur'],
          },
        ],
        loginPassword: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '密码不能为空',
            trigger: ['blur'],
          },
        ],
        newPassword: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '密码不能为空',
            trigger: ['blur'],
          },
        ],
      },
    }
  },
  onLoad(option) {},
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    upLoginPwd(index) {
      if (this.emailObj.newPassword != this.emailObj.loginPassword) {
        uni.showToast({
          title: '密码输入不一致',
          icon: 'none',
          duration: 1500,
        })
        return false
      }

      // loginObj
      api.updatePassword(this.emailObj).then(res => {
        if (res.code == '200') {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
          setTimeout(() => {
            this.$store.dispatch('LogOut')
            uni.reLaunch({
              url: '/pages/login/index',
            })
          }, 2000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    getCode() {
      // this.disabled = true
      // this.getCodeText = "发送中..." //发送验证码
      // this.getCodeisWaiting = true;
      // this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
      this.getYzm()
    },
    getYzm() {
      api.verification().then(res => {
        if (res.code == '200') {
          setTimeout(() => {
            //this.$common.msg('验证码已发送')
            uni.showToast({
              title: '验证码已发送',
              icon: 'none',
            }) //弹出提示框
            this.setTimer() //调用定时器方法
          }, 1000)
        }
      })
    },
    setTimer() {
      this.disabled = true
      let holdTime = 60 //定义变量并赋值
      this.getCodeText = '重新获取' + '(60)'
      //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
      //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
      this.time = setInterval(() => {
        if (holdTime <= 0) {
          this.disabled = false
          this.getCodeisWaiting = false
          this.getCodeBtnColor = '#ffffff'
          this.getCodeText = '获取验证码'
          clearInterval(this.time) //清除该函数
          return //返回前面
        }
        this.getCodeText = '重新获取' + '(' + holdTime + ')'
        holdTime--
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
:v-deep uni-button:after {
  border: none;
}
:v-deep .u-form-item__body__right__message {
  margin-left: 170rpx !important;
}
.yzm {
  // width: 161rpx;
  height: 74rpx;
  line-height: 74rpx;
  text-align: center;
  color: #fff;
  background: #2fbc42;
  border-radius: 40rpx;
  margin-left: 30rpx;
  font-size: 24rpx;
}
:v-deep .u-form-item:nth-child(2) {
  width: 670rpx;
}
.contents {
  background-color: #fff;
}
page {
  background-color: #f2f2f2;
}
:v-deep .width-s {
  width: 200rpx !important;
}
.paddings {
  padding: 30rpx 0rpx;
  margin: 0 40rpx;
}
.border-color {
  border-radius: 50rpx;
  padding-left: 50rpx !important;
  font-size: 28rpx;
  width: 400rpx;
  height: 60rpx;
  background: #f5f6f8;
  border: none;
}
.btn {
  background-color: #005bac;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 40rpx auto;
  width: 690rpx;
}
</style>