Merge remote-tracking branch 'origin/main'

baoshiwei

2025-04-24 89a5fedfe041ebacb2d81ecae1023b206cd3f353

 eims-ui-mobile/src/pages/login/index.vue

@@ -2,19 +2,153 @@
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<script setup lang="ts">

</script>

<template>
  <wd-img class="w-full h-[260rpx]" src="/static/images/pic2.jpg" />
  <wd-form ref="form" :model="model" class="mt-2">
    <wd-cell-group border>
      <wd-input
        label="用户名"
        label-width="200rpx"
        prop="username"
        clearable
        v-model="model.username"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <wd-input
        label="密码"
        label-width="200rpx"
        prop="password"
        show-password
        clearable
        v-model="model.password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </wd-cell-group>
    <view class="footer">
      <view>
        <wd-checkbox v-model="rember" @change="handleChange">
          <text class="rember-text">记住密码</text>
        </wd-checkbox>
      </view>
      <wd-button class="mt-6" type="primary" size="large" @click="handleSubmit" block>
        提交
      </wd-button>

      <view class="copyright-info">
        <text>
          上海兰宝传感科技股份有限公司
        </text>

      </view>
    </view>
  </wd-form>
</template>

<style scoped lang="scss">
<script setup lang="ts">
import { currRoute } from '@/utils'
import { useUserStore, useAccessStore, useSystemConfigStore } from '@/store'
import { useToast } from 'wot-design-uni'
import { login, getUserInfo } from '@/service/login'
import type { UserInfo } from '@/service/login.d'
import { TestEnum } from '@/typings'
const userStore = useUserStore()
const accessStore = useAccessStore()
const configStore = useSystemConfigStore()
const { success: showSuccess } = useToast()

const model = reactive<{
  username: string
  password: string
}>({
  username: '',
  password: '',
})
const rember = ref<boolean>(false)

function handleChange({ value }) {
  console.log(value)
}

const form = ref()
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        toLogin()
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

onLoad(() => {
  const { remberPassword, username, password } = configStore.systemConfigInfo
  if (remberPassword) {
    rember.value = true
    model.username = username
    model.password = password
  }
})

const toLogin = async () => {
  // 记住密码
  if (rember.value) {
    configStore.setConfigInfo({ ...model, ...{ remberPassword: true } })
  }

  const res = await login(model)
  accessStore.setAccessInfo(res as any)
  const backUserInfo: any = await getUserInfo()
  /**
   * 登录超时的情况
   */
  if (!backUserInfo) {
    throw new Error('获取用户信息失败.')
  }
  const { permissions = [], roles = [], user } = backUserInfo
  /**
   * 从后台user -> vben user转换
   */
  const userInfo: UserInfo = {
    avatar: user.avatar ?? '',
    permissions,
    realName: user.nickName,
    roles,
    userId: user.userId,
    deptId: user.deptId,
    username: user.userName,
  }
  userStore.setUserInfo(userInfo)
  const { query } = currRoute()
  uni.switchTab({ url: query.redirect })
}
</script>

<style scoped lang="scss">
.footer {
  padding: 24rpx;
}
.rember-text {
  font-size: 24rpx;
  color: $uni-text-color-grey;
}

.copyright-info {
  position: absolute;
  bottom: 20rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  color: $uni-text-color-disable;
  font-size: 24rpx;
}
</style>