applet/pages/login/code.vue

<template>
  <view class="container-mine">
    <uv-navbar title="" placeholder autoBack bgColor="transparent"></uv-navbar>
    <view class="top">
      <view class="title">输入验证码</view>
      <view>我们已向 {{ mobile }} 发送验证码短信</view>
      <view>请查看短信并输入验证码</view>
    </view>
    <view class="body">
      <uv-code-input :class="{active1: captcha.length==0, active2: captcha.length==1, active3: captcha.length==2, active4: captcha.length==3}" size="60" focus v-model="captcha" maxlength="4" @finish="finish"></uv-code-input>
      <uv-code :seconds="seconds" start-text="重新获取" @end="end" @start="start" ref="uCode" @change="codeChange"></uv-code>
      <view class="reset" @tap="getCode">{{ tips }}</view>
    </view>
  </view>
</template>

<script setup>
import { smsCode, userCaptcha } from '@/api/login';
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const mobile = ref('');
const tips = ref('');
const seconds = ref(60);
const cid = ref(null);
const uCode = ref(null);
const captcha = ref('');
const codeChange = (text) => {
  tips.value = text;
};
onLoad((options) => {
  if (options && options.mobile) {
    mobile.value = options.mobile;
    getCode();
  }
  // #ifdef APP-PLUS
  plus.push.getClientInfoAsync((info) => {
    let cids = info['clientid'];
    // console.log('cid===>', cids);
    uni.setStorageSync('cid', cids);
    cid.value = cids;
  });
  // #endif
});
onMounted(() => {
  getCode();
});
const getCode = () => {
  if (uCode.value && uCode.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码'
    });
    smsCode({ mobile: mobile.value })
      .then((res) => {
        uni.$uv.toast('验证码已发送');
      })
      .finally((e) => {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        uCode.value.start();
      });
  } else {
    uni.$uv.toast('倒计时结束后再发送');
  }
};
const end = () => { };
const start = () => {
  uni.$uv.toast('请输入验证码');
};
const finish = (e) => {
  let nickname = '小彩团' + mobile.value.slice(-4);
  userCaptcha({
    captcha: e,
    mobile: mobile.value,
    cid: cid.value,
    clientType: 4,
    nickname: nickname,
    gender: 0
  }).then((res) => {
    if (res && res.code == 200) {
      uni.$uv.toast('登录成功');
      uni.setStorageSync('apiToken', res.data.token);
      uni.switchTab({
        url: '/pages/tabtar/home'
      });
    } else {
      uni.$uv.toast('验证码错误');
    }
  });
};
</script>

<style scoped>
page {
  background-color: #f7f8fa;
}
</style>
<style lang="scss" scoped>
::v-deep .hx-navbar__icon {
  color: #303133 !important;
}

::v-deep .u-char-item {
  width: 120rpx !important;
  height: 120rpx !important;
  background: #ffffff;
  border-radius: 20rpx;
  border: none !important;
}

::v-deep.u-box-active {
  border: 2rpx solid #56cbda !important;
}

.lgoin-nav {
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
}

.top {
  text-align: center;
  padding: 80rpx 0 150rpx;
  font-size: 30rpx;
  color: #343434;
  .title {
    font-size: 60rpx;
    margin-bottom: 20rpx;
    font-weight: 700;
    color: #303030;
  }
}

.body {
  padding: 0 30rpx;
  margin-bottom: 200rpx;

  // .uni-input {
  //   height: 100rpx;
  //   margin-bottom: 20rpx;
  //   border-bottom: 1rpx solid #ccc;

  //   .uni-input-placeholder {
  //     color: #bebebe;
  //   }
  // }

  // .login-btn {
  //   background-color: #4095e5;
  //   color: #fff;
  // }

  // ::v-deep .u-char-box {
  //   margin-bottom: 20rpx;

  //   .u-char-flex {
  //     // justify-content: space-between;
  //   }
  // }
  ::v-deep .uv-code-input__item {
    background: #ffffff;
    border-radius: 20rpx;
    border-color: transparent !important;
  }
  .active1 {
    ::v-deep .uv-code-input__item {
      &:first-child {
        border-color: #eb5153 !important;
      }
    }
  }
  .active2 {
    ::v-deep .uv-code-input__item {
      &:nth-child(2) {
        border-color: #eb5153 !important;
      }
    }
  }
  .active3 {
    ::v-deep .uv-code-input__item {
      &:nth-child(3) {
        border-color: #eb5153 !important;
      }
    }
  }
  .active4 {
    ::v-deep .uv-code-input__item {
      &:nth-child(4) {
        border-color: #eb5153 !important;
      }
    }
  }
  .reset {
    // max-width: 300rpx;
    padding: 10rpx 80rpx 10rpx;
    margin-left: auto;
    text-align: right;
    color: #56cbd9;
    // border: 1rpx solid #3775F6;
    border-radius: 8rpx;
    cursor: pointer;
    text-align: center;
    color: #eb5153;
  }
  .uv-code-input {
    justify-content: center;
  }
}
</style>