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

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-18 14:42:53
-->
<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">
          <u-input v-model="loginObj.code"
                   class="border-color width-s"
                   :placeholder="'请输入验证码'"
                   placeholder-class="place-class" />

          <!-- <view class="yzm" @click="submit">
										  {{getCodeText}}
									  </view>	 -->
          <button :disabled="disabled"
                  class="yzm"
                  @click.stop="getCode()">
            {{getCodeText}}
          </button>

        </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: {
    // getMemberInfo() {
    //   api.getData().then((res) => {
    //     //   safty: {
    //     //   loginPwd: 111111,
    //     //   payPwd: 111111,
    //     //   email: 111111,
    //     //   tel: 111111,
    //     // },
    //     this.loginObj.emailed = res.data.email || ''
    //   })
    // },
    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;
}
.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: #fb3024;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 40rpx auto;
  width: 690rpx;
}
</style>