jdt-user/src/pages/users/bindPhone/index.vue

<script lang="ts" setup>
import Taro from '@tarojs/taro';
import {ref} from 'vue';
import {getVerifyCode, phoneLogin, getPersonalInfo} from '@/api/user';
import logoImg from '../../../static/logo.jpg';

const optData = ref<any>({});

Taro.useLoad(options => {
  optData.value = options;
  console.log(options);
});

const basicData = ref({
  phone: '',
  code: '',
});

const smsDisabled = ref(false);

const smsStr = ref('获取验证码');

// 获取验证码
const getSmsCode = async () => {
  if (
    !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
      basicData.value.phone,
    )
  )
    return Taro.showToast({
      title: '请输入正确的手机号码',
      icon: 'none',
    });
  await getVerifyCode({
    phone: basicData.value.phone.toString(),
  });
  smsDisabled.value = true;
  let time = 60;
  const timer = setInterval(() => {
    time--;
    smsStr.value = `${time}s`;
    if (time === 0) {
      clearInterval(timer);
      smsDisabled.value = false;
      smsStr.value = '获取验证码';
    }
  }, 1000);
};

const login = async () => {
  if (
    !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
      basicData.value.phone,
    )
  )
    return Taro.showToast({
      title: '请输入正确的手机号码',
      icon: 'none',
    });
  if (!basicData.value.code)
    return Taro.showToast({
      title: '请输入验证码',
      icon: 'none',
    });

  const res = await phoneLogin({
    Phone: basicData.value.phone,
    Code: basicData.value.code,
    Referee: Taro.getStorageSync('bind_id') || '',
  });
  Taro.showToast({
    title: res.msg,
    icon: 'success',
    duration: 2000,
  });
  Taro.setStorageSync('token', res.data.token);
  if (optData.value.isBack !== 'undefined') {
    await getUserInfo();
    Taro.navigateBack({
      delta: 2,
    });
  } else {
    setTimeout(() => {
      Taro.removeStorageSync('wx_code');
      Taro.removeStorageSync('bind_id');
      Taro.switchTab({
        url: '/pages/user/index',
      });
    }, 2000);
  }
};

const getUserInfo = async () => {
  const res = await getPersonalInfo();
  const userInfo = {
    ...res.data,
    data: {
      ...res.data.data,
      permission: res.data.data.permission
        ? JSON.parse(res.data.data.permission)
        : {},
    },
  };
  Taro.setStorageSync('userInfo', userInfo);
};
</script>

<template>
  <view class="wrapper">
    <image src="../../../static/wechat_login.jpg" />
    <view class="logo">
      <image :src="logoImg" />
      <view>捷兑通</view>
    </view>
    <view class="center">
      <nut-form :model-value="basicData" ref="RefForm">
        <nut-form-item label="手机号码：">
          <nut-input
            v-model="basicData.phone"
            class="nut-input-text"
            placeholder="请输入手机号码"
            type="text" />
        </nut-form-item>
        <nut-form-item label="验证码：">
          <view style="display: flex">
            <nut-input
              v-model="basicData.code"
              class="nut-input-text"
              placeholder="请输入验证码"
              type="text" />
            <nut-button
              size="mini"
              style="margin-left: 10px"
              @click="getSmsCode"
              :disabled="smsDisabled"
              >{{ smsStr }}</nut-button
            >
          </view>
        </nut-form-item>
        <nut-form-item>
          <nut-button type="primary" block @click="login">登录</nut-button>
        </nut-form-item>
      </nut-form>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background: #fff;
}

.wrapper {
  position: relative;

  image {
    width: 100%;
    height: 838px;
  }

  .logo {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 35px;
    line-height: 70px;

    image {
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
  }

  .center {
    position: absolute;
    top: 55%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 10px;
  }
}
</style>