shuishen
2025-10-11 3fc27febccd04e2fcffbd2cdd16d2daafd0b3ca3
src/pages/login/index.vue
@@ -2,125 +2,65 @@
<template>
  <view>
    <view class="login-form-wrap">
      <view class="title"> 欢迎登录 </view>
      <input
        v-model="tel"
        class="u-border-bottom"
        type="number"
        placeholder="请输入手机号"
      />
      <view class="u-border-bottom my-40rpx flex">
        <input
          v-model="code"
          class="flex-1"
          type="number"
          placeholder="请输入验证码"
        />
        <view>
          <u-code ref="uCodeRef" @change="codeChange" />
          <u-button :text="tips" type="success" size="mini" @click="getCode" />
        </view>
      </view>
      <view class="title"> 掌控智飞</view>
      <input v-model="loginForm.username" class="u-border-bottom" placeholder="请输入用户名"/>
      <input v-model="loginForm.password" class="u-border-bottom" type="password" placeholder="请输入密码"/>
      <button class="login-btn" :style="[inputStyle]" @tap="submit">
        登录 <text class="i-mdi-login" />
        登录
        <text class="i-mdi-login"/>
      </button>
      <view class="alternative">
        <view class="password"> 密码登录 </view>
        <view class="issue flex items-center">
          遇到问题 <text class="i-mdi-help" />
        </view>
      </view>
    </view>
    <view class="login-type-wrap">
      <view class="item wechat">
        <view class="icon">
          <u-icon size="35" name="weixin-fill" color="rgb(83,194,64)" />
        </view>
        微信
      </view>
      <view class="item QQ">
        <view class="icon">
          <u-icon size="35" name="qq-fill" color="rgb(17,183,233)" />
        </view>
        QQ
      </view>
    </view>
    <view class="hint">
      登录代表同意
      <text class="link"> 用户协议、隐私政策, </text>
      并授权使用您的账号信息(如昵称、头像、收获地址)以便您统一管理
    </view>
  </view>
</template>
<script setup>
import md5 from 'js-md5'
import {loginByUsername} from '@/api/user/index.js'
import {useUserStore} from "@/store/index.js";
import {
  HOME_PATH,
  isTabBarPath,
  LOGIN_PATH,
  removeQueryString,
  HOME_PATH, LOGIN_PATH, removeQueryString,
} from "@/router";
import { setToken } from "@/utils/auth";
// import { useUserStore } from '@/store';
// const userStore = useUserStore();
const tel = ref("18502811111");
const code = ref("1234");
const tips = ref();
const uCodeRef = ref(null);
let redirect = HOME_PATH;
const userStore = useUserStore();
const loginForm = ref({
  username: "shuishen",
  password: "Dashabi...."
})
const inputStyle = computed(() => {
  const style = {};
  if (tel.value && code.value) {
  if (loginForm.value.username && loginForm.value.password) {
    style.color = "#fff";
    style.backgroundColor = uni.$u.color.warning;
  }
  return style;
});
let redirect = HOME_PATH;
function codeChange(text) {
  tips.value = text;
}
function getCode() {
  if (uCodeRef.value?.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    setTimeout(() => {
      uni.hideLoading();
      uni.$u.toast("验证码已发送");
      // 通知验证码组件内部开始倒计时
      uCodeRef.value?.start();
    }, 1000);
  } else {
    uni.$u.toast("倒计时结束后再发送");
  }
}
async function submit() {
  if (!uni.$u.test.mobile(Number(tel.value))) {
    uni.$u.toast("请输入正确的手机号");
    return;
  let userInfo = {
    "tenantId": "000000",
    "deptId": "",
    "roleId": "",
    "username": loginForm.value.username,
    "password": loginForm.value.password,
    "type": "account",
    "code": "",
    "key": "",
  }
  if (!code.value) {
    uni.$u.toast("请输入验证码");
    return;
  }
  // 登录请求
  // const res = await userStore.login({ phone: tel.value, code: code.value }).catch(() => {
  //   uni.$u.toast('登录失败');
  // });
  // if (!res) return;
  setToken("1234567890");
  setTimeout(() => {
    uni.$u.route({
      type: isTabBarPath(redirect) ? "switchTab" : "redirectTo",
      url: redirect,
    });
  }, 800);
  loginByUsername(
    userInfo.tenantId,
    userInfo.deptId,
    userInfo.roleId,
    userInfo.username,
    md5(userInfo.password),
    userInfo.type,
    userInfo.key,
    userInfo.code
  ).then(res => {
    userStore.setUserInfo(res.data)
    uni.switchTab({
      url: '/'
    })
  })
}
onLoad((options) => {