remember-word/pages/login/sendCode/sendCode.vue

<template>
	<view class="main">
		<navBar navTitle="" :isSwitchTab="true" :color="'#000000'" :backBackGroundColor="'#3D553D'"></navBar>
		<u-code :seconds="seconds" @start="start" ref="uCode" 
		 :start-text="$t('code.start')"
		 :change-text="$t('code.change')"
		 :end-text="$t('code.end')"
		 @change="codeChange"></u-code>
		<view class="main-word">{{$t('sendCode.title')}}</view>
		<view class="sec">
			<view>{{$t('sendCode.send')}}</view>
			<u--text mode="phone" color="#fff" :text="telNum || newNum" format="encrypt"></u--text>
			<view class="resend" @tap="getCode">{{ tips }}</view>
		</view>
		<view class="code-box"><u-code-input v-model="Code" :focus="focus"></u-code-input></view>
		<u-button v-if="!this.token" class="btn" :text="$t('sendCode.login')" shape="circle" color="#699A70" @click="gologin" ></u-button>
		<u-button v-else class="btn" :text="$t('sendCode.update')" shape="circle" color="#558BF2" @click="confirmChange" ></u-button>
		<image class="logo" src="../../../static/image/home/fontree-white.png"></image>
	</view>
</template>

<script>
export default {
  data() {
    return {
      tips: "",
      // refCode: null,
      seconds: 60,
      wathTime: 10,
      Code: "",
      focus: false,
      telNum: "",
      token: "",
      newNum: "",
    };
  },
  mounted() {
    if (this.telNum) {
      this.getCode();
    } else {
      this.getNewCode();
    }
  },
  onLoad(options) {
    this.telNum = options.telNum;
    this.token = options.token;
    this.newNum = options.newNum;
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: this.$t("sendCode.loading"),
        });

        let res = await this.$api.login.sendCode({ telNum: this.telNum });
        if (res.status === 0) {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          this.focus = true;
          this.$refs.uCode.start();
          // 通知验证码组件内部开始倒计时
        } else {
          uni.hideLoading();
          uni.$u.toast(res.msg);
        }
      } else {
        uni.$u.toast(this.$t("sendCode.toast"));
      }
    },
    async getNewCode() {
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: this.$t("sendCode.loading"),
        });

        let res = await this.$api.login.sendNewCode({ token: this.token });
        if (res.status === 0) {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          this.focus = true;
          this.$refs.uCode.start();
          // 通知验证码组件内部开始倒计时
        } else {
          uni.hideLoading();
          uni.$u.toast(res.msg);
        }
      } else {
        uni.$u.toast(this.$t("sendCode.toast"));
      }
    },

    async gologin() {
      let data = {
        telNum: this.telNum,
        password: "",
        code: this.Code,
      };
      let res = await this.$api.login.login(data);
      if (res.status === 0) {
        this.$common.msgToast(this.$t("login.success"), null, "success");
        uni.setStorageSync("mall-user-info", res.data.accountInfo);
        uni.setStorageSync("mall_token", res.data.token);
        let returnUrl = uni.getStorageSync("return_url");
        if (returnUrl) {
          uni.reLaunch({
            url: returnUrl,
          });
        }
        uni.navigateTo({
          url: "/pages/login/welcome/welcome",
        });
      } else {
        this.$common.msgToast(res.msg || this.$t("login.error"), null, "error");
      }
    },
    async confirmChange() {
      let data = {
        code: this.Code,
      };
      let res = await this.$api.login.confirmNew(data);
      if (res.status === 0) {
        this.$common.msgToast(
          this.$t("sendCode.updateSuccess"),
          null,
          "success"
        );
        uni.removeStorageSync("mall-user-info");
        uni.removeStorageSync("mall_token");
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/login/login",
          });
        }, 1000);
      } else {
        uni.$u.toast(res.msg || this.$t("sendCode.updateError"));
      }
    },
    start() {
      uni.$u.toast(this.$t("sendCode"));
    },
  },
};
</script>

<style lang="scss">
	page {
		background: url('@/static/image/home/login-bg.png') no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		height: 100vh;
		box-sizing: border-box;
	}
.main {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  .main-word {
    color: #fff;
    position: absolute;
    font-size: 40upx;
    font-weight: bold;
    top: 274upx;
  }
  .sec {
    color: #fff;
    position: absolute;
    display: flex;
    top: 380upx;
    .resend {
      margin-left: 20upx;
      color: #fcb462;
    }
  }
  .code-box {
    position: absolute;
    top: 554upx;
  }
  .btn {
    width: 344upx;
    height: 60upx;
    position: absolute;
    top: 742upx;
  }
  /deep/ .u-code-input__item {
    border: 0;
    border-radius: 20upx;
    background-color: rgba(255, 255, 255, 0.65);
  }
  .logo {
    width: 202upx;
    height: 56upx;
    position: absolute;
    bottom: 40upx;
  }
}
</style>