zcb_APP/pages/login/forget.vue

<template>
  <view class="content">
    <view class="top_bg">
      <image
        class="top_close"
        @click="$navBack()"
        src="/static/image/login/close_icon.png"
        mode="scaleToFill"
      />
      <view class="top_text">
        <view>忘记密码</view>
        <image
          class="top_icon"
          src="/static//image/login/dot_icon.png"
          mode="scaleToFill"
        />
      </view>
    </view>

    <view class="w pdx-40 main">
      <u--input
        class="h-112"
        v-model="loginParam.phone"
        placeholder="请输入手机号码"
        border="bottom"
        clearable
      ></u--input>

      <!-- #ifndef APP-NVUE -->
      <u-input
        class="h-112 mgt-16"
        v-model="loginParam.code"
        placeholder="请输入验证码"
        border="bottom"
        clearable
      >
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <u--input
          class="h-112 mgt-16"
          v-model="loginParam.code"
          placeholder="请输入验证码"
          border="bottom"
          clearable
        >
          <!-- #endif -->

          <template slot="suffix">
            <u-code
              :seconds="seconds"
              @end="end"
              @start="start"
              change-text="xs"
              ref="uCode"
              :keep-running="true"
              @change="codeChange"
            ></u-code>
            <u-button
              :disabled="!isShowCode"
              @tap="sliderVerify"
              class="code_btn"
              >{{ tips }}</u-button
            >
          </template>

          <!-- #ifdef APP-NVUE -->
        </u--input>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
      </u-input>
      <!-- #endif -->

      <!-- #ifndef APP-NVUE -->
      <u-input
        class="h-112 mgt-16"
        v-model="loginParam.password"
        :password="!isViewPassword"
        placeholder="请输入密码"
        border="bottom"
        clearable
      >
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <u--input
          class="h-112 mgt-16"
          v-model="loginParam.password"
          :password="!isViewPassword"
          placeholder="请输入密码"
          border="bottom"
          clearable
        >
          <!-- #endif -->
          <template slot="suffix">
            <u-icon
              @click="isViewPassword = !isViewPassword"
              :name="isViewPassword ? 'eye-fill' : 'eye-off'"
              color="#303030"
              size="24"
            ></u-icon>
          </template>
          <!-- #ifdef APP-NVUE -->
        </u--input>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
      </u-input>
      <!-- #endif -->

      <!-- #ifndef APP-NVUE -->
      <u-input
        class="h-112 mgt-16"
        v-model="loginParam.confirmPwd"
        :password="!isViewConfirmPwd"
        placeholder="请确认密码"
        border="bottom"
        clearable
      >
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <u--input
          class="h-112 mgt-16"
          v-model="loginParam.confirmPwd"
          :password="!isViewConfirmPwd"
          placeholder="请确认密码"
          border="bottom"
          clearable
        >
          <!-- #endif -->
          <template slot="suffix">
            <u-icon
              @click="isViewConfirmPwd = !isViewConfirmPwd"
              :name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'"
              color="#303030"
              size="24"
            ></u-icon>
          </template>

          <!-- #ifdef APP-NVUE -->
        </u--input>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
      </u-input>
      <!-- #endif -->

      <u-button :disabled="!isSubmit" class="login" @tap="submit"
        >提交</u-button
      >
    </view>
    <zmm-slider-verify
      ref="sliderVerify"
      @success="successHandle"
      @error="errorHandle"
      @close="closeHandle"
    ></zmm-slider-verify>
  </view>
</template>

<script>
import { isValidPhone, isValidPassword } from "@/utils/index";
export default {
  data() {
    return {
      isViewPassword: false,
      isViewConfirmPwd: false,
      isCode: false, //验证码按钮状态
      tips: "", // 验证码提示文字
      seconds: 60, //验证码秒数
      loginParam: {
        phone: undefined,
        code: undefined,
        password: undefined,
        confirmPwd: undefined,
      },
    };
  },
  computed: {
    isShowCode() {
      return this.loginParam.phone && !this.isCode;
    },
    isSubmit() {
      return (
        this.loginParam.phone &&
        this.loginParam.code &&
        this.loginParam.password &&
        this.loginParam.confirmPwd
      );
    },
  },
  watch: {},
  onLoad() {},
  methods: {
    //显示验证组件
    sliderVerify() {
      if (isValidPhone(this.loginParam.phone)) {
        this.$refs["sliderVerify"].show();
      } else {
        uni.$u.toast("请输入正确手机号");
      }
    },
    //验证通过回调
    successHandle(e) {
      console.log(e);
      this.getCode();
    },
    //验证失败回调
    errorHandle(e) {
      console.log(e);
    },
    //组件关闭回调
    closeHandle(e) {
      console.log(e);
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast("验证码已发送");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
    end() {
      // uni.$u.toast('倒计时结束');
      this.isCode = false;
    },
    start() {
      // uni.$u.toast('倒计时开始');
      this.isCode = true;
    },
    submit() {
      console.log("提交参数 :===>>", this.loginParam);
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.top_bg {
  position: relative;
  width: 100vw;
  height: 568rpx;
  flex-shrink: 0;
  background: linear-gradient(to bottom, #ffd8bf, #ffffff);

  .top_close {
    position: absolute;
    top: 128rpx;
    left: 40rpx;
    width: 48rpx;
    height: 48rpx;
  }

  .top_text {
    position: absolute;
    top: 224rpx;
    left: 64rpx;
    display: flex;
    color: #070602;
    font-family: "MiSans VF";
    font-size: 52rpx;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.66rpx;
    text-transform: uppercase;
  }

  .top_icon {
    margin-top: -10rpx;
    margin-left: 8rpx;
    width: 24rpx;
    height: 24rpx;
  }
}

.main {
  margin-top: -72rpx;

  .login {
    margin-top: 240rpx;
    height: 96rpx;
    width: 100%;
    flex-shrink: 0;
    border-radius: 64rpx;
    background: #fe6505;
    color: #ffffff;
    text-align: center;
    font-family: "MiSans VF";
    font-size: 36rpx;
    font-style: normal;
    font-weight: 500;
  }

  .code_btn {
    padding: 0rpx 24rpx;
    height: 60rpx;
    border-radius: 32rpx;
    font-size: 24rpx;
    color: #fff;
    font-weight: 400;
    background: linear-gradient(0deg, #fe6505 0%, #fe6505 100%), #141111;
  }

  .code_btn_off {
    background: #fe65054d;
  }
}
</style>