guzijian / garbage-removal · Files

<template>
  <view class="wrap">
    <view class="key-input">
      <view class="title">欢迎登录</view>

      <!-- 登录方式切换 -->
      <view class="login-type-switch">
        <!-- 隐藏验证码登录选项 -->
        <text
            :class="{ active: loginType === 'password' }"
            @click="switchLoginType('password')"
        >
          账号密码登录
        </text>
      </view>

      <!-- 手机号输入 -->
      <view class="input-wrapper">
        <u-icon name="account" size="36" color="#909399" class="input-icon"></u-icon>
        <input
            class="login-input"
            type="text"
            v-model="iphoneNumber"
            placeholder="请输入账号"
            placeholder-class="placeholder-style"
        />
      </view>

      <!-- 密码登录 -->
      <view v-if="loginType === 'password'">
        <view class="input-wrapper">
          <u-icon name="lock" size="36" color="#909399" class="input-icon"></u-icon>
          <input
              class="login-input"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              placeholder-class="placeholder-style"
          />
        </view>
        <button @tap="loginWithPassword" class="login-btn">登录</button>
      </view>

      <!-- 昵称登录（如果需要保留） -->
      <view v-else-if="loginType === 'nickname'">
        <view class="input-wrapper">
          <u-icon name="account" size="36" color="#909399" class="input-icon"></u-icon>
          <input
              class="login-input"
              type="text"
              v-model="nickname"
              placeholder="请输入账号"
              placeholder-class="placeholder-style"
          />
        </view>
        <view class="input-wrapper">
          <u-icon name="lock" size="36" color="#909399" class="input-icon"></u-icon>
          <input
              class="login-input"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              placeholder-class="placeholder-style"
          />
        </view>
        <button @tap="loginWithUsername" class="login-btn">登录</button>
      </view>

      <view class="alternative">
        <!--        <text class="link" @click="toRegister">立即注册</text>-->
      </view>
    </view>
  </view>
</template>

<script setup>import { sendCode, userLogin } from "@/apis/user.js";
import { setRequestToken } from '@/utils/request/request.js';
import { useMainStore } from '@/stores/index.js';
import { onLoad } from "@dcloudio/uni-app";
import { getCurrentInstance, ref } from "vue";

const { proxy } = getCurrentInstance();
const store = useMainStore();

// 登录方式：code-验证码登录，password-密码登录
// 将默认登录方式改为密码登录
const loginType = ref('password');

// 验证码登录相关
const verifyFlag = ref(false);
const iphoneNumber = ref("");
const startIphoneNumber = ref("");
const maxlength = ref(4);
const codeValue = ref("");
const second = ref(0);
const show = ref(true);
const nickname = ref("");

// 密码登录相关
const password = ref("");

// 切换登录方式
const switchLoginType = (type) => {
  loginType.value = type;
};

const loginWithUsername = () => {
  if (!nickname.value) {
    proxy.$u.toast("请输入手机号");
    return;
  }

  if (!password.value) {
    proxy.$u.toast("请输入密码");
    return;
  }

  userLogin({
    loginType: 0,
    signIn:0,
    nickname: nickname.value,
    password: password.value
  }).then(res => {
    handleLoginSuccess(res);
  });
};

// 获取验证码
const getCaptcha = () => {
  if (!proxy.$u.test.mobile(iphoneNumber.value)) {
    proxy.$u.toast("请输入正确的手机号");
    return;
  }

  codeValue.value = '';
  second.value = 60;
  show.value = false;

  sendCode(iphoneNumber.value).then(res => {
    if(res.data.success){
      proxy.$u.toast("验证码已发送!");
    }else {
      proxy.$u.toast(res.data.message);
    }
  });

  let interval = setInterval(() => {
    second.value--;
    if (second.value <= 0) {
      show.value = true;
      clearInterval(interval);
    }
  }, 1000);
};

// 验证码输入变化
const handleCodeChange = (value) => {
  codeValue.value = value;
};

// 验证码输入完成
const finish = (value) => {
  if (value.length == 4) {
    checkVerifyNum(value);
  }
};

// 跳转到修改密码页面
const toChangePassword = () => {
  uni.$u.route({
    url: 'pages/change-password/index'
  });
};

// 验证码登录
const checkVerifyNum = (code) => {
  userLogin({ loginType: 0, tel: iphoneNumber.value, code: code }).then(res => {
    handleLoginSuccess(res);
  });
};

// 密码登录
const loginWithPassword = () => {
  // if (!proxy.$u.test.mobile(iphoneNumber.value)) {
  //   proxy.$u.toast("请输入正确的手机号");
  //   return;
  // }

  if (!password.value) {
    proxy.$u.toast("请输入密码");
    return;
  }

  userLogin({
    loginType: 0,
    tel: iphoneNumber.value,
    password: password.value
  }).then(res => {
    handleLoginSuccess(res);
  });
};

// 处理登录成功
const handleLoginSuccess = (res) => {
  if (res.data.code === 200) {
    verifyFlag.value = false;

    // 设置token和用户信息
    store.tempToken = res.data.data.token;
    if (res.data.data.token) {
      setRequestToken(res.data.data.token);
      uni.setStorageSync("Authorization", res.data.data.token);
    }

    store.userInfo = {};
    store.userName = res.data.data.name != null ? res.data.data.name : "";
    store.userInfo.userName = res.data.data.name;
    store.userPhone = res.data.data.loginPhone;

    console.log(res.data.data)
    if(res.data.data.testUser){
      if (store.tempToken) {
        store.token = store.tempToken;
        store.tempToken = "";
      }

      const ruleVos = res.data.data.ruleVos;
      if(ruleVos != null && ruleVos.length > 0){
        store.userType = ruleVos[0].userType;
        store.userInfo.userType = ruleVos[0].userType;
        store.userInfo.ruleVos = ruleVos;

        let hasSpecialRole = false;
        for(let rule of ruleVos){
          store.userInfo.transportCompanyName = null;

          if(rule.userType === "处置场所负责人"){
            store.userType = rule.userType;
            store.userInfo.userType = rule.userType;
            store.userInfo.transportCompanyName = rule.transportCompanyName;
            hasSpecialRole = true;

            uni.$u.route({
              type: "switchTab",
              url: `pages/order/index`,
            });
            return;
          }

          if(rule.userType === "运输企业负责人"){
            store.userType = rule.userType;
            store.userInfo.userType = rule.userType;
            store.userInfo.transportCompanyName = rule.transportCompanyName;
          }

          if(rule.userType === "清运车辆驾驶员"){
            store.userType = rule.userType;
            store.userInfo.userType = rule.userType;
            store.userInfo.transportCompanyName = rule.transportCompanyName;
          }
        }

        if (!hasSpecialRole) {
          uni.$u.route({
            type: "switchTab",
            url: `/pages/home/index`,
          });
        }
      } else {
        uni.$u.route({
          type: "switchTab",
          url: `/pages/home/index`,
        });
      }
    } else {
      uni.$u.toast("该手机无法登录，不是投放点管理员");
    }
  } else {
    verifyFlag.value = true;
    let errorMessage = res.data.error || res.data.msg || res.data.message || "登录失败";
    uni.$u.toast(errorMessage);
  }
};

// 跳转到注册页面
const toRegister = () => {
  uni.$u.route({
    url: 'pages/sign-up/index'
  });
};

// 忘记密码
const forgetPassword = () => {
  // 实现忘记密码逻辑
  console.log("忘记密码");
};

onLoad((options) => {
  // 如果从其他页面传入手机号
  if (options.iphoneNumber) {
    iphoneNumber.value = options.iphoneNumber;
    startIphoneNumber.value = handleIphoneNumber("" + options.iphoneNumber);
  }
});

const handleIphoneNumber = (tel) => {
  return tel.replace(tel.substring(3, 7), "****");
};
</script>

<style lang="scss" scoped>.wrap {
  padding: 80rpx;
}

.title {
  font-size: 50rpx;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
}

.login-type-switch {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;

  text {
    padding: 10rpx 20rpx;
    margin: 0 10rpx;
    border-radius: 20rpx;
    cursor: pointer;

    &.active {
      background-color: #19a97c;
      color: white;
    }
  }
}

.input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e7ed;
  padding: 20rpx 0;
  margin-bottom: 30rpx;

  .input-icon {
    margin-right: 20rpx;
  }

  .login-input {
    flex: 1;
    font-size: 28rpx;
    color: #303133;
    padding: 10rpx 0;

    &::placeholder {
      color: #c0c4cc;
    }
  }
}

.alternative {
  color: $u-tips-color;
  display: flex;
  justify-content: space-between;
  margin-top: 60rpx;

  .link {
    color: $u-warning;
    cursor: pointer;
  }
}

.placeholder-style {
  color: #c0c4cc;
  font-size: 26rpx;
}

.tips {
  font-size: 28rpx;
  color: #333;
  margin: 20rpx 0;
}

.captcha {
  color: $u-warning;
  font-size: 28rpx;
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;

  .noCaptcha {
    display: block;
    cursor: pointer;
  }

  .regain {
    display: block;
  }
}

.error {
  display: block;
  color: red;
  font-size: 28rpx;
  margin: 20rpx 0;
}

.login-btn {
  background-color: #19a97c;
  color: #ffffff;
  border: none;
  font-size: 30rpx;
  padding: 12rpx 0;
  border-radius: 50rpx;
  margin-top: 60rpx;
  width: 100%;

  &::after {
    border: none;
  }
}

.alternative {
  color: $u-tips-color;
  display: flex;
  justify-content: space-between;
  margin-top: 60rpx;

  .link {
    color: $u-warning;
    cursor: pointer;
  }
}
</style>