web-retail-h5/pages/forgetPassword/index.vue

<template>
  <view class="main">
    <view class="contents">
      <u-form ref="uForm"
              :model="emailObj"
              class="paddings"
              labelWidth="auto">
        <u-form-item :label="'会员编号'"
                     label-width="80px"
                     prop="memberCode">
          <u-input v-model="emailObj.memberCode"
                   class="border-color"
                   :placeholder="'会员编号'"
                   placeholder-class="place-class" />
        </u-form-item>
        <u-form-item label="用户密码"
                     label-width="80px"
                     prop="newPassword">
          <u-input v-model="emailObj.newPassword"
                   class="border-color"
                   :placeholder="'请输入密码'"
                   type="password"
                   placeholder-class="place-class" />

        </u-form-item>
        <u-form-item :label="'确认密码'"
                     label-width="80px"
                     prop="loginPassword">
          <u-input v-model="emailObj.loginPassword"
                   class="border-color"
                   type="password"
                   :placeholder="'请输入密码'"
                   placeholder-class="place-class" />

        </u-form-item>

        <u-form-item :label="'联系方式'"
                     label-width="80px"
                     prop="phone"
                     style="display: flex;">
          <u-input v-model="emailObj.phone"
                   class="border-color"
                   :placeholder="'请输入联系方式'"
                   maxlength="20"
                   type="number"
                   placeholder-class="place-class" />

        </u-form-item>
        <u-form-item :label="'验证码'"
                     label-width="80px"
                     prop="code">
          <view style="display: flex; align-items: center; padding-right:10rpx;">
            <u-input v-model="emailObj.code"
                    class="border-color"
                    :placeholder="'请输入验证码'"
                    style="width: auto;"
                    placeholder-class="place-class" />

            <button :disabled="disabled"
                    class="yzm"
                    @click.stop="getCode()">
              {{getCodeText}}
            </button>
          </view>
        </u-form-item>
      </u-form>
    </view>
    <u-button class="btn"
              shape="circle"
              type="success"
              @click="submit">{{'确定'}}</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'
import { forgetPassword } from '../../config/login'
export default {
  data() {
    let validatePwd = (rule, value, callback) => {
      if (this.emailObj.newPassword != value) {
        callback(new Error('与新密码不一致，请重新输入'))
      } else {
        callback()
      }
    }
    return {
      getCodeText: '获取验证码',
      disabled: false,
      time: 60,
      yzmCheck: false,
      userInfo: '',
      emailObj: {
        memberCode: '',
        newPassword: '',
        loginPassword: '',
        phone: '',
        code: '',
      },
      rules: {
        memberCode: [
          { required: true, trigger: 'blur', message: '请输入会员编号' },
        ],
        code: [
          { required: false, trigger: 'blur', message: '请输入验证码' },
        ],
        newPassword: [
          { required: true, trigger: 'blur', message: '请输入密码' },
        ],
        loginPassword: [{ validator: validatePwd, trigger: 'blur' }],
        phone: [
          { required: false, trigger: 'blur', message: '请输入联系方式' },
        ],
      },
    }
  },
  onLoad(option) {

    this.userInfo = uni.getStorageSync('User')
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    submit() {
      this.$refs.uForm.validate().then((res) => {
        api.forgetPassword(this.emailObj).then((res) => {
          if (res.code == '200') {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              success() {
                setTimeout(() => {
                  uni.navigateTo({
                    url: '/pages/login/index',
                  })
                }, 2000)
              },
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg,
            })
          }
        })
      })
    },
    getCode() {
      // this.disabled = true
      // this.getCodeText = "发送中..." //发送验证码
      // this.getCodeisWaiting = true;
      // this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
      this.getYzm()
    },
    getYzm() {
      this.$refs.uForm.validate().then((res) => {
        api.forgetVerification(this.emailObj).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>