store-management-app/src/pages/login/index.vue

<template>
  <view class="content">
    <navBar> 登录 </navBar>
    <view class="container-box">
      <view class="title">
        <span>登录</span>
        <span style="color: #efc54e">仓库管理</span>
      </view>
      <view>使用你的手机号登录</view>
      <view class="login" v-if="!isCode">
        <view class="login-input">
          <up-input placeholder="请输入手机号" clearable>
            <template #prefix>
              <up-text
                text="手机号"
                margin="0 3px 0 0"
                color="#000000"
                style="width: 100rpx"
              ></up-text>
            </template>
          </up-input>
        </view>
        <view class="login-input" >
          <up-input placeholder="请输入密码" :password="true">
            <template #prefix>
              <up-text
                text="密码"
                margin="0 3px 0 0"
                color="#000000"
                style="width: 100rpx"
              ></up-text>
            </template>
          </up-input>
        </view>
      </view>
      <view v-else>
        <view class="code-box">
          <span style="color: #888888">已发送验证码至 </span>
          <span>123123123</span>
        </view>
        <up-code-input v-model="code" :maxlength="6"></up-code-input>
        <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx;">
          <span
          style="text-align: left; color: #e3af1c;"
          @click="" 
          >重新发送</span>
          <span
          style="text-align: right; color: #e3af1c;"
          @click="goToPassword" 
          >密码登录</span>
        </view>
      </view>
      <view> </view>
      <view
        style="text-align: right; color: #e3af1c; margin-top: 20rpx"
        @click="toCode" v-if="!isCode"
        >验证码登录</view
      >
      <up-button
        style="width: 626rpx; margin: auto; height: 96rpx;margin-top: 90rpx;"
        color="#EFC54E"
        throttleTime="5"
        :loading="loading"
        @click="logining"
        v-if="!isCode"
        >登录</up-button
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import useToast from "@/hooks/toast/useToast.js";
import {
  userLogin
} from "@/api/login.js";
console.log(userLogin())
const { showMessage } = useToast();
const loading = ref(false);
const isCode = ref(false);
const code = ref("");
// const show = () => {
//   showMessage({ type: "default", message: "验证码已发送" });
// };
const toCode = () => {
  isCode.value = true;
};
const goToPassword = () =>{
  isCode.value=false;
}

// 登录方法
const logining = () => {
  loading.value = true;
  
  uni.navigateTo({
    url: '/pages/index/index',
    success: () => {
      loading.value = false;
    },
    fail: () => {
      loading.value = false;
      showMessage({ type: "default", message: "跳转失败" });
    }
  });
};
</script>

<style lang="scss" scoped>
page {
  background: url("@/static/bg.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  height: 100vh;
  box-sizing: border-box;
}
:deep(.u-code-input) {
  margin-top: 10rpx;
  gap: 20rpx;
}
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .container-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 62rpx;
    box-sizing: border-box;
    .title {
      margin-top: 124rpx;
      font-size: 64rpx;
      font-weight: bold;
    }
    .login {
      display: flex;
      flex-direction: column;
      margin-top: 140rpx;
      gap: 20rpx;
      .login-input {
        width: 100%;
        display: flex;
        background-color: #f9f9f9;
        padding: 32rpx 24rpx;
        box-sizing: border-box;
        height: 96rpx;
      }
    }
    .code-box {
      margin-top: 84rpx;
    }
  }
}
</style>