usky-web-mobile/src/pages/register.vue

<template>
  <view id="register-container">
    <view class="top-area" v-if="proxy.$common.isVisible()">
      <u-icon name="arrow-left" size="17px" color="#000" :bold="true" @click="navigateTo"></u-icon>
    </view>

    <view class="content-area" v-if="proxy.$common.isVisible()">
      <text class="content-area-title">注册</text>
    </view>

    <view class="bottom-area">
      <u-input v-model="phone" prefixIcon="phone" placeholder="手机号(必填)" border="none" />
      <u-input v-model="verify" prefixIcon="email" placeholder="验证码(必填)" border="none" :maxlength="6">
        <template #suffix>
          <button class="verify" @click="getVerifyCode">{{ !useStore.codeTime ? "获取验证码" : useStore.codeTime + "s" }}</button>
        </template>
      </u-input>
      <u-input v-model="nickName" prefixIcon="account" placeholder="昵称(必填)" border="none" />
      <u-input v-model="newPassword" prefixIcon="lock" placeholder="密码(必填)" border="none" :password="newPasswordBool">
        <template #suffix>
          <text :class="!newPasswordBool ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="newPasswordBool = !newPasswordBool"></text>
        </template>
      </u-input>
      <u-input v-model="confirmPassword" prefixIcon="lock" placeholder="再次输入密码(必填)" border="none" :password="confirmPasswordBool">
        <template #suffix>
          <text :class="!confirmPasswordBool ? 'iconfont oaIcon-eye' : 'iconfont oaIcon-eye-close'" @click="confirmPasswordBool = !confirmPasswordBool"></text>
        </template>
      </u-input>

      <u-button
        type="primary"
        shape="circle"
        :customStyle="{
          display: 'block',
          width: '100%',
          height: '45px',
          lineHeight: '45px',
          fontSize: '17px',
        }"
        @click="handleSubmit()"
      >
        注 册
      </u-button>
    </view>
  </view>
</template>

<script setup>
import config from "@/config";
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
import { useStores, commonStores } from "@/store/modules/index";
import { getToken, setToken, removeToken } from "@/utils/auth";

const useStore = useStores();
const { proxy } = getCurrentInstance();

const dataList = reactive({
  nickName: undefined,
  phone: undefined,
  verify: undefined,
  newPassword: undefined,
  newPasswordBool: true,
  confirmPassword: undefined,
  confirmPasswordBool: true,
});

const { nickName, phone, verify, newPassword, newPasswordBool, confirmPassword, confirmPasswordBool } = toRefs(dataList);

/**
 * @点击发送验证码
 */
function getVerifyCode() {
  verify.value = undefined;
  useStore.GetCodeImg({
    phone: phone.value,
    success: (res) => {
      proxy.$modal.msgSuccess("发送成功");
    },
  });
}

/**
 * @注册
 * @按钮点击事件
 */
function handleSubmit() {
  useStore.PhoneVerify({
    data: {
      phone: phone.value,
      verify: verify.value,
    },
    success: (res) => {
      useStore.UserAdd({
        data: {
          nickName: nickName.value,
          phone: phone.value,
          verify: verify.value,
          newPassword: newPassword.value,
          confirmPassword: confirmPassword.value,
        },
        success: (res) => {
          proxy.$modal.msgSuccess("注册成功");

          setTimeout(() => {
            proxy.$modal.loading("登录中，请耐心等待...");
            useStore
              .Login({
                username: phone.value,
                password: newPassword.value,
                tenantId: useStore.tenantId,
              })
              .then(() => {
                /** 获取用户信息 */
                proxy.$modal.closeLoading();
                useStore.GetInfo().then((res) => {
                  proxy.$tab.reLaunch("/pages/index");
                });
              });
          }, 1000);
        },
      });
    },
    error: (res) => {
      return false;
    },
  });
}

/**
 * @跳转登录
 */
function navigateTo() {
  proxy.$tab.navigateBack(1);
}
onLoad((options) => {});
</script>

<style lang="scss" scoped>
#register-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  margin: auto;
  padding: 0 30px;
  padding-top: 20%;
  //#ifdef MP-WEIXIN
  padding-top: 30%;
  //#endif
  background-color: #ffffff;

  .top-area {
  }

  .content-area {
    display: flex;
    margin: 30px 0;

    &-title {
      margin: auto auto auto 0;
      color: #000;
      font-size: 18px;
    }
  }

  .bottom-area {
    :deep(.u-input) {
      height: 45px;
      border-radius: 8px;
      padding: 5px 12px !important;
      border: 0 !important;
      background-color: #f5f6fa !important;
      margin-bottom: 15px;
    }

    :deep(.u-icon__icon) {
      font-size: 24px !important;
      line-height: 24px !important;
      color: gray !important;
    }

    :deep(.iconfont) {
      color: gray !important;
    }

    :deep(.input-placeholder) {
      color: #c0c4cc !important;
    }

    :deep(.uni-input-wrapper) {
      font-size: 16px;
    }

    :deep(.u-line) {
      display: none !important;
    }
  }
}
</style>