zcb_APP/pages/login/index.vue

<template>
  <view class="content">
    <view class="top_bg">
      <image
        class="top_close"
        @click="$navTo('/pages/my/index', 'tabbar')"
        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
        v-if="loginParam.loginWay === 'password'"
        class="h-112 mgt-16"
        v-model="loginParam.password"
        :password="!isViewPassword"
        placeholder="请输入密码"
        border="bottom"
        clearable
      >
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <u--input
          v-if="loginParam.loginWay === 'password'"
          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
        v-else
        class="h-112 mgt-16"
        v-model="loginParam.code"
        placeholder="请输入验证码"
        border="bottom"
        clearable
      >
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <u--input
          v-else
          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 -->

      <view class="flex jc_between mgt-32">
        <view
          v-if="loginParam.loginWay === 'password'"
          @click="loginParam.loginWay = 'code'"
          class="text-24 text-500 text-303030"
          >验证码登录</view
        >
        <view
          v-else
          @click="loginParam.loginWay = 'password'"
          class="text-24 text-500 text-303030"
          >密码登录</view
        >
        <view
          class="text-24 text-500 text-303030"
          @click="$navTo('/pages/login/register')"
          >注册</view
        >
      </view>

      <button class="login" @tap="submit">登录</button>
      <view
        class="mgt-32 text-24 text-500 text-303030 text-center"
        @click="$navTo('/pages/login/forget')"
        >忘记密码</view
      >
      <view class="mgt-130">
        <u-divider text="快捷登录"></u-divider>
      </view>
      <view class="w flex jc_center mgt-30">
        <image
          class="w-80 h-80"
          src="/static/image/login/weinxin_icon.png"
          mode="scaleToFill"
        />
      </view>

      <view class="mgt-72 text-24 text-7E7E7E text-500">
        登录即代表同意
        <text class="text-303030">《用户协议》</text>和
        <text class="text-303030">《隐私政策》</text>
      </view>
    </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,
      isCode: false, //验证码按钮状态
      tips: "", // 验证码提示文字
      seconds: 60, //验证码秒数
      loginParam: {
        phone: undefined,
        password: undefined,
        code: undefined,
        loginWay: "password",
      },
    };
  },
  computed: {
    isShowCode() {
      return this.loginParam.phone && !this.isCode;
    },
  },
  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);
      //todo 请求后端接口
      // 通过后跳转到个人中心
      this.$navTo("/pages/my/index", "redirect");
    },
  },
};
</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: 136rpx;
    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>