GuangYuYuan-shanghu/src/setting/myNew/forgetPassword.vue

<script>
import { resetPassword, sendMsg,captchaImage } from '@/api/newLogin.js'
export default {
  data() {
    return {
      phone: '18434361582', phoneMsg: '',
      countdown: 60,
      // 整体8-20位，只能大小写+数字
      regPwd: /^[A-Za-z0-9]{8,20}$/,
      isPwdHide: true,
      isBinding: false,
      timer: null,
      password: '',
      isSendingCode: false,
      showCaptcha: false,
      startCountdownFlag: false,
      uuid:'',
      imgCode:''
    }
  },
  computed: {
    canGetCode() {
      return !this.isSendingCode && this.countdown === 60
    },
    // canBind() {
    //   return this.code && this.code.length === 6 && !this.isBinding
    // }
  },
  onLoad(options) {
    if (options.phone) {
      this.phone = options.phone;

    }

  },
  watch: {
    password(val) {
      // 只保留字母+数字，其余全部删除
      let filterStr = val.replace(/[^A-Za-z0-9]/g, '')
      filterStr = filterStr.slice(0, 20)
      // 不一致就强制覆盖，删掉#
      if (filterStr !== val) {
        //this.$set(this.password,filterStr)
        this.$nextTick(() => {
          this.password = filterStr
        });

      }
    }
  },
  methods: {
    validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/
      return reg.test(phone)
    },
      //图形验证码提交
    submitImgCode() {
      if (!this.imgCode) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      sendMsg33333({ uuid:this.uuid,imgCode:this.imgCode}).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.showCaptcha = false
            this.getCode()
        }
        

      })

    },
    //重新获取验证码
		agginGetCode() {
			if (!this.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}

			if (!/^1[3456789]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '手机号不正确',
					icon: 'none'
				})
				return
			}
			captchaImage().then(res=>{
				console.log(res)
				if (res.data.code == 200) {
					this.uuid=res.data.uuid
				}
			})
      this.imgCode=''
			this.showCaptcha = true

		},
    //获取验证码
    getCode() {
      if (this.isSendingCode || this.countdown < 60) return

      this.isSendingCode = true
      sendMsg({ phone: this.phone }).then(res => {
        console.log(res)

        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })

        this.startCountdown()
        this.isSendingCode = false

      })


    },
    startCountdown() {
      this.startCountdownFlag = true
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.startCountdownFlag = false
          this.countdown = 60
          this.timer = null
        }
      }, 1000)
    },
    // handleInputFilter(val) {
    //   // 过滤掉非字母、数字字符
    //   const filterStr = val.replace(/[^A-Za-z0-9]/g, "");
    //   // 限制最大20位
    //   this.password = filterStr.slice(0, 20);

    // },
    submitFun() {
      if (!this.phoneMsg) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      if (!this.password) {
        uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
        return
      }
      // 2.位数+格式校验：8~20位字母数字
      if (!this.regPwd.test(this.password) || this.password.length < 8) {
        uni.showToast({ title: "请输入8-20位数字/字母组合", icon: "none" });
        return;
      }
      uni.showToast({
        title: '验证成功',
        icon: 'none'
      })

      resetPassword({
        //openId: uni.getStorageSync('wx_copenid'),
        userType: '2',
        phone: this.phone,
        codeSwitch: 'false',//是否开启验证码登录 true-是 false-否
        phoneMsg: this.phoneMsg,
        passWord: this.password
      }).then(res => {
        if (res.data.code == 200) {
          // uni.showToast({
          //   title: '登录成功',
          //   icon: 'success'
          // })
          this.back()
        }
      })

    },
    back() {
      let pages = getCurrentPages();
      if (pages.length >= 2) {
        let prevPage = pages[pages.length - 2];
        let prevRoute = prevPage.route;
        if (prevRoute && prevRoute !== 'pages/index/index') {
          if (prevRoute.startsWith('pages/')) {
            uni.switchTab({
              url: '/' + prevRoute
            })
          } else {
            uni.navigateBack({
              delta: 1,
              fail: () => {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }
            })
          }
        } else {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<template>
  <view class="sett-box">
    <input type="text" name="username" style="position:absolute;opacity:0;width:0;height:0;z-index:-99;" />
    <input type="password" name="password" style="position:absolute;opacity:0;width:0;height:0;z-index:-99;" />

    <view class="greeting-area">

    </view>
    <view class="greeting-area1"></view>
    <view class="content">
      <view class="input-box">
        <u-input v-model="phone" disabled="true" border="none" placeholder="" class="input-item">
          <template slot="prefix">
            <view class="label">
              <text>手机号</text>
            </view>
          </template>
        </u-input>
      </view>

      <view class="input-box">
        <u-input v-model="phoneMsg" type="number" border="none" maxlength="6" placeholder=""
          placeholder-style="color: #999" class="input-item">
          <template slot="prefix">
            <view class="label">
              <text>验证码</text>
            </view>
          </template>
        </u-input>
        <view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
          <text v-if="countdown === 60" @click="getCode">发送验证码</text>
          <view v-else>
            <text v-if="startCountdownFlag">{{ countdown }}s</text>
            <text @click="agginGetCode">重新获取</text>
          </view>
          <!-- <text v-if="countdown === 60">发送验证码</text>
          <text v-else>{{ countdown }}s 后重新获取</text> -->
        </view>
      </view>
      <view class="input-box">
        <u-input v-model="password" autocomplete="off" border="none" :password="isPwdHide" maxlength="20"
          placeholder="8-20位数字/字母组合" placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;"
          class="input-item">
          <template slot="prefix">
            <view class="label">
              <text>新密码</text>
            </view>
          </template>
          <template #suffix>
            <image v-if="isPwdHide" src="/static/login/closeEye.png" @click="isPwdHide = !isPwdHide"
              class="captcha-img"></image>
            <image v-if="!isPwdHide" src="/static/login/openEye.png" @click="isPwdHide = !isPwdHide"
              class="captcha-img"></image>
            <!-- <u-icon :name="isPwdHide ? 'eye-off' : 'eye'" @click="isPwdHide = !isPwdHide" size="32rpx" color="#999" /> -->
          </template>
        </u-input>
      </view>
      <view class="bind-btn">
        <u-button :loading="isBinding" type="primary" @click="submitFun">确定</u-button>
      </view>
    </view>


    <!-- 图形验证码弹窗 -->
    <u-popup :show="showCaptcha" mode="center" border-radius="12">
      <view class="captcha-box">
        <view class="captcha-title">
          <view>请输入下方图形验证码</view>
          <u-icon custom-style="position: relative;left:90rpx ;" name="close" color="#C9CDD4" size="20"
            @click="showCaptcha = false"></u-icon>
        </view>
        <view style="padding: 0 48rpx;margin-top: 48rpx;">
          <view style="display: flex;justify-content: space-between;height: 106rpx;border-bottom: 1rpx solid #E7E7E7;">

            <!-- 验证码输入框，唤起全字符键盘 -->
            <u-input v-model="imgCode" placeholder="请输入图形验证码" :focus="showCaptcha" type="text" maxlength="4"
              border="none" placeholder-style="font-weight: 400;font-size: 30rpx;color: #C9CDD4;"></u-input>
            <!-- 图形验证码图片，点击刷新 -->
            <image :src="captchaImg" @click="refreshCaptcha" class="captcha-img"></image>
          </view>
          <view class="text" @click="submitImgCode">看不清？ 换一张</view>
          <u-button class="submitImgCode" @click="submitImgCode" block>确定</u-button>

        </view>
      </view>
    </u-popup>




  </view>
</template>

<style scoped lang="scss">
::v-deep .u-input__content {
  background-color: #ffffff00 !important;
}

.sett-box {
  background: #ffffff;
  width: 100%;
  min-height: 100vh;
  line-height: 1;
  position: relative;

  //padding: 36rpx 40rpx;
  .greeting-area1 {
    height: 196rpx;
  }

  .content {
    position: relative;
    padding: 0 64rpx;
  }

  .greeting-area {
    background-image: url('/static/login/loginBg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    padding-left: 64rpx;
    padding-top: 256rpx;

    top: 0;
    z-index: 0 !important;
    height: 438rpx;
    position: absolute;
    overflow: hidden;
    width: 100%;

    .bubble-text {
      font-weight: 500;
      font-size: 52rpx;
      color: #1D2129
    }

  }

  .code-btn {
    font-weight: 400;
    font-size: 30rpx;
    color: #19D29B;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }


}

.input-box {
  width: 622rpx;
  height: 110rpx;
  background: #ffffff00 !important;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #E7E7E7;

  .u-input {
    background: #ffffff00 !important;
  }

  .label {
    display: flex;
    font-weight: 400;
    font-size: 30rpx;
    color: #1D2129;
    text-align: center;
    margin-right: 30rpx;
  }

  .input-item {
    flex: 1;
  }

  .captcha-img {
    width: 30rpx;
    height: 30rpx;
  }

  ::v-deep .uni-input-input {
    font-weight: 500;
    font-size: 30rpx;
    color: #1D2129;
  }
}



.bind-btn {
  margin-top: 80rpx;

  ::v-deep .u-button {
    width: 622rpx;
    height: 88rpx;
    background: #333335;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    border: none;

    font-weight: 500;
    font-size: 32rpx;
    color: #fff;
    text-align: center;
  }

  ::v-deep .u-button--disabled {
    background: #E0E0E0 !important;
    color: #999 !important;
  }
}
</style>