feat: app搭建调整

罗广辉

2025-09-30 c76922f37ddeeb3344304af453dd2f8befdedb89

 src/pages/login/index.vue

@@ -2,209 +2,126 @@
<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 {
    HOME_PATH,
    isTabBarPath,
    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 inputStyle = computed(() => {
    const style = {};
    if (tel.value && code.value) {
      style.color = "#fff";
      style.backgroundColor = uni.$u.color.warning;
    }
    return style;
  });

  function codeChange(text) {
    tips.value = text;
import md5 from 'js-md5'
import {loginByUsername} from '@/api/user/index.js'
import {useUserStore} from "@/store/index.js";
import {
  HOME_PATH, LOGIN_PATH, removeQueryString,
} from "@/router";
const userStore = useUserStore();
const loginForm = ref({
  username: "shuishen",
  password: "Dashabi...."
})
const inputStyle = computed(() => {
  const style = {};
  if (loginForm.value.username && loginForm.value.password) {
    style.color = "#fff";
    style.backgroundColor = uni.$u.color.warning;
  }
  return style;
});
let redirect = HOME_PATH;

  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() {
  let userInfo = {
    "tenantId": "000000",
    "deptId": "",
    "roleId": "",
    "username": loginForm.value.username,
    "password": loginForm.value.password,
    "type": "account",
    "code": "",
    "key": "",
  }
  async function submit() {
    if (!uni.$u.test.mobile(Number(tel.value))) {
      uni.$u.toast("请输入正确的手机号");
      return;
    }
    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);

    let userInfo = {
      "tenantId": "000000",
      "deptId": "",
      "roleId": "",
      "username": "shuishen",
      "password": "Dashabi....",
      "type": "account",
      "code": "",
      "key": "",
      "image": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    }

    loginByUsername(
      userInfo.tenantId,
      userInfo.deptId,
      userInfo.roleId,
      userInfo.username,
      md5(userInfo.password),
      userInfo.type,
      userInfo.key,
      userInfo.code
    ).then(res => {
      uni.switchTab({
        url: '/pages/map/index'
      })
  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: '/pages/user/index'
    })
  }
  })
}

  onLoad((options) => {
    if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
      redirect = decodeURIComponent(options.redirect);
    }
  });
onLoad((options) => {
  if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
    redirect = decodeURIComponent(options.redirect);
  }
});
</script>

<style lang="scss" scoped>
  .login-form-wrap {
    @apply mt-80rpx mx-auto mb-0 w-600rpx;
.login-form-wrap {
  @apply mt-80rpx mx-auto mb-0 w-600rpx;

    .title {
      @apply mb-100rpx text-60rpx text-left font-500;
    }

    input {
      @apply pb-6rpx mb-10rpx text-left;
    }

    .tips {
      @apply mt-8rpx mb-60rpx;

      color: $u-info;
    }

    .login-btn {
      @apply flex items-center justify-center py-12rpx px-0 text-30rpx bg-#fdf3d0 border-none;

      color: $u-tips-color;

      &::after {
        @apply border-none;
      }
    }

    .alternative {
      @apply flex justify-between mt-30rpx;

      color: $u-tips-color;
    }
  .title {
    @apply mb-100rpx text-60rpx text-left font-500;
  }

  .login-type-wrap {
    @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;

    .item {
      @apply flex items-center flex-col text-28rpx;

      color: $u-content-color;
    }
  input {
    @apply pb-6rpx mb-10rpx text-left;
  }

  .hint {
    @apply px-40rpx py-20rpx text-24rpx;
  .tips {
    @apply mt-8rpx mb-60rpx;

    color: $u-info;
  }

  .login-btn {
    @apply flex items-center justify-center py-12rpx px-0 text-30rpx bg-#fdf3d0 border-none;

    color: $u-tips-color;

    .link {
      color: $u-warning;
    &::after {
      @apply border-none;
    }
  }

  .alternative {
    @apply flex justify-between mt-30rpx;

    color: $u-tips-color;
  }
}

.login-type-wrap {
  @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;

  .item {
    @apply flex items-center flex-col text-28rpx;

    color: $u-content-color;
  }
}

.hint {
  @apply px-40rpx py-20rpx text-24rpx;

  color: $u-tips-color;

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