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

<template>
  <view class="main">
    <view class="contents">
      <u-form ref="uForm" :model="loginObj" class="paddings" label-width="90px">
        <u-form-item :label="'新密码'" prop="newPassword" style="display: flex">
          <u-input
            v-model="loginObj.newPassword"
            class="border-color"
            :password="true"
            :placeholder="'请输入新密码'"
            placeholder-class="place-class"
          />
        </u-form-item>
        <u-form-item
          :label="'请确认密码'"
          prop="payPassword"
          style="display: flex"
        >
          <u-input
            v-model="loginObj.payPassword"
            class="border-color"
            :password="true"
            :placeholder="'请确认密码'"
            placeholder-class="place-class"
          />
        </u-form-item>
        <u-form-item :label="'验证码'" prop="code">
          <view class="code-box">
            <u-input
              v-model="loginObj.code"
              class="border-color"
              style="width: auto;"
              :placeholder="'请输入验证码'"
              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 { getData } from '../../config/login'
export default {
  data() {
    return {
      getCodeText: '获取验证码',
      disabled: false,
      time: 60,
      yzmCheck: false,
      userInfo: '',
      loginObj: {
        emailed: '',
        code: '',
        email: '',
      },
      rules: {
        newPassword: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '请输入密码',
            trigger: ['blur'],
          },
        ],
        code: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '请输入短信验证码',
            trigger: ['blur'],
          },
        ],
        payPassword: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '请输入密码',
            trigger: ['blur'],
          },
        ],
      },
    }
  },
  onLoad(option) {
    // this.getMemberInfo()
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    submit() {
      this.$refs.uForm.validate().then(res => {
        api.forgetPayPassword(this.loginObj).then(res => {
          if (res.code == '200') {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              success() {
                setTimeout(() => {
                  uni.navigateBack()
                }, 2000)
              },
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg,
            })
            clearInterval(this.time)
            this.setTimer(0)
          }
        })
      })
    },
    getCode() {
      // this.disabled = true
      // this.getCodeText = "发送中..." //发送验证码
      // this.getCodeisWaiting = true;
      // this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
      this.getYzm()
    },
    getYzm() {
      api.selfVerification().then(res => {
        if (res.code == '200') {
          setTimeout(() => {
            uni.showToast({
              title: '验证码已发送',
              icon: 'none',
            }) //弹出提示框
            this.setTimer(60) //调用定时器方法
          }, 1000)
        }
      })
    },
    setTimer(num) {
      this.disabled = true
      let holdTime = num //定义变量并赋值
      this.getCodeText = '重新获取' + '(60)'
      //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
      //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
      this.time = setInterval(() => {
        console.log(
          '%c [ holdTime ]-183',
          'font-size:13px; background:#5f6e08; color:#a3b24c;',
          holdTime
        )
        if (holdTime <= 0) {
          this.disabled = false
          this.getCodeisWaiting = false
          this.getCodeBtnColor = '#ffffff'
          this.getCodeText = '获取验证码'
          clearInterval(this.time) //清除该函数
          return //返回前面
        } else {
          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;
}
.code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.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>