完成移动端基本功能

zhuguifei

2025-05-13 14681dfe7052cb76eefcc0c17d0a0d708e1ac9dd

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

@@ -13,7 +13,7 @@
    <wd-cell-group border>
      <wd-input
        label="用户名"
        label-width="100px"
        label-width="200rpx"
        prop="username"
        clearable
        v-model="model.username"
@@ -22,7 +22,7 @@
      />
      <wd-input
        label="密码"
        label-width="100px"
        label-width="200rpx"
        prop="password"
        show-password
        clearable
@@ -31,28 +31,46 @@
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </wd-cell-group>
    <view class="footer mt-6">
      <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
    <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>

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

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

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

const form = ref()
function handleSubmit() {
@@ -67,25 +85,68 @@
      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)
  console.error(res)
  accessStore.setAccessInfo(res as any)
  console.error(accessStore.accessInfo.access_token)
  // userStore.setUserInfo({ nickname: '菲鸽', avatar: '', token: 'abcdef' })
  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()
  console.error(query.redirect)
  uni.switchTab({ url: query.redirect })
  uni.switchTab({ url: '/pages/home/index' })
  tabbarStore?.setCurIdx(0)
  tabbarStore?.setLastIdx(0)
}





</script>

<style scoped lang="scss">
.footer {
  padding: 12px;
  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>