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">
        <view class="login-input" v-if="!haveCode">
          <up-input placeholder="请输入手机号" v-model="state.TelNum" clearable>
            <template #prefix>
              <up-text
                text="手机号"
                margin="0 3px 0 0"
                color="#000000"
                style="width: 100rpx"
              ></up-text>
            </template>
          </up-input>
        </view>
        <span
          style="text-align: right; color: #e3af1c"
          @click="goToPassword"
          v-if="isCode && !haveCode"
          >密码登录</span
        >
        <view class="login-input" v-if="!isCode">
          <up-input
            placeholder="请输入密码"
            :password="true"
            v-model="state.Password"
          >
            <template #prefix>
              <up-text
                text="密码"
                margin="0 3px 0 0"
                color="#000000"
                style="width: 100rpx"
              ></up-text>
            </template>
          </up-input>
        </view>
      </view>
      <view v-if="haveCode">
        <view class="code-box">
          <span style="color: #888888">已发送验证码至 </span>
          <span style="font-weight: bold">{{ state.TelNum }}</span>
        </view>
        <up-code-input v-model="state.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="obtainCode"
            >重新发送</span
          >
          <span
            style="text-align: right; color: #e3af1c"
            @click.stop="goToPassword"
            >密码登录</span
          >
        </view>
      </view>

      <text
        style="text-align: right; color: #e3af1c; margin-top: 20rpx"
        @click="toCode"
        v-if="!isCode"
        >验证码登录</text
      >
      <up-button
        style="width: 626rpx; margin: auto; height: 96rpx; margin-top: 90rpx"
        color="#EFC54E"
        throttleTime="5"
        :loading="loading"
        @click="logining"
        v-if="!isCode || haveCode"
        >登录</up-button
      >
      <up-button
        style="width: 626rpx; margin: auto; height: 96rpx; margin-top: 160rpx"
        color="#EFC54E"
        throttleTime="5"
        :loading="loading"
        @click="obtainCode"
        v-if="isCode && !haveCode"
        >获取验证码</up-button
      >
      <!-- <view > 
        <up-image src="../../static/icon.png"  width="40px" height="40px" ></up-image>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import useToast from "@/hooks/toast/useToast.js";
import { onLoad } from "@dcloudio/uni-app";
import { userLogin, userSend, pbDetail, getRules } from "@/api/login.js";
const state = reactive({
  TelNum: "",
  Password: "",
  id: "",
  pid: "",
  code: "",
});
const { showMessage } = useToast();
const loading = ref(false);
const isCode = ref(false);
const haveCode = ref(false);
onLoad((options) => {
  if (options.id && options.pid) {
    state.id = options.id;
    state.pid = options.pid;
    // 已经登录了
    setTimeout(() => {
      if (
        window?.plus?.webview.getWebviewById("wv").tokenScan ||
        uni.getStorageSync("store-token")
      ) {
        paintingDetail();
        getBtngetRules();
      }
    }, 200);
  }

  /*
   1.先调用options的对应接口
   2.判断是是否有没有登录
   3如果登录了判断状态去相应页面
   4.没有登录让他登录，然后根据状态判断去相应页面

 **/
});
const paintingDetail = async () => {
  loading.value = true;
  const res = await pbDetail({
    id: state.id,
    pid: state.pid,
  });
  if (res.status === 0) {
    state.boxRelBucketStatus = res.data.boxRelBucketStatus;
    console.log("boxRelBucketStatus", state.boxRelBucketStatus);
    if (res.data.pbStatus == 1) {
      uni.redirectTo({
        url: "/pages/index/index?id=" + state.id + "&pid=" + state.pid,
        success: () => {
          loading.value = false;
        },
        fail: () => {
          loading.value = false;
          showMessage({ type: "default", message: "跳转失败" });
        },
      });
    } else {
      if (
        res.data.boxRelBucketStatus == 3 &&
        res.data.locateAddress == "公司内"
      ) {
        uni.redirectTo({
          url: "/pages/painting/index?id=" + state.id + "&pid=" + state.pid,
          success: () => {
            loading.value = false;
          },
          fail: () => {
            loading.value = false;
            showMessage({ type: "default", message: "跳转失败" });
          },
        });
      } else {
        uni.setStorageSync("data", res.data);
        uni.redirectTo({
          url:
            "/pages/detail/index?id=" +
            state.id +
            "&pid=" +
            state.pid +
            "&boxRelBucketStatus=" +
            state.boxRelBucketStatus,
          success: () => {
            loading.value = false;
          },
          fail: () => {
            loading.value = false;
            showMessage({ type: "default", message: "跳转失败" });
          },
        });
      }
    }
  }
};

// const show = () => {
//   showMessage({ type: "default", message: "验证码已发送" });
// };
const toCode = () => {
  isCode.value = true;
  state.Password = "";
};
//获取验证码
const obtainCode = async () => {
  console.log("获取验证码");
  loading.value = true;
  const res = await userSend({
    TelNum: state.TelNum ?? "",
  });
  if (res.status === 0) {
    haveCode.value = true;
    showMessage({ type: "default", message: "验证码已发送" });
  } else {
    if (res.msg == "已经发送过，验证码尚可用") {
      haveCode.value = true;
    } else {
      showMessage({ type: "error", message: res.msg });
    }
  }
  loading.value = false;
};
const goToPassword = () => {
  isCode.value = false;
  haveCode.value = false;
};

// 登录方法
const logining = async () => {
  loading.value = true;
  const res = await userLogin({
    TelNum: state.TelNum ?? "",
    Password: state.Password ?? "",
    code: state.code ?? "",
  });
  if (res.status === 0) {
    uni.setStorageSync("store-token", res.data.Token);
    uni.setStorageSync("userInfo", res.data.AccountInfo);
    await paintingDetail();
    await getBtngetRules();
  }
  loading.value = false;
};
const getBtngetRules = async () => {
  const res = await getRules({});
  if (res.status === 0) {
    const ruleBtn = res.data.MyButtonAuths?.map((button) => button.Url) || [];
    uni.setStorageSync("ruleBtn", ruleBtn);
  } else {
    showMessage({ type: "error", message: res.msg });
  }
};
</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;
      }
    }
  }
}
uni-button:after {
  border: none;
}
</style>