login

zhuguifei

2025-04-18 e40a419e5533530a8103d754d751595013f5644a

login

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

@@ -1,6 +1,7 @@
<route lang="json5">
{
  layout: 'tabbar',
  needLogin: true,
  style: {
    navigationBarTitleText: '关于',
  },

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

@@ -3,30 +3,126 @@
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    class="bg-white overflow-hidden pt-2 px-4"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
    class="bg-base overflow-hidden"
    :style="{
      marginTop: safeAreaInsets?.top + 'px',
    }"
  >
    <view class="mt-12">
      <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
    </view>
    <view class="text-center text-4xl main-title-color mt-4">unibest</view>
    <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
    <view class="bg-white h-[80rpx] px-2 flex items-center justify-between">
      <view class="flex items-center" @click="handleUserInfo">
        <wd-icon name="user" size="40rpx" class="icon-color-base"></wd-icon>
        <text class="ml-1 text-color-base">张三</text>
      </view>

    <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
    <view class="text-center mt-8">
      当前平台是：
      <text class="text-green-500">{{ PLATFORM.platform }}</text>
      <view class="flex items-center">
        <wd-icon name="notification" size="40rpx" class="icon-color-base mr-3"></wd-icon>
        <wd-icon name="tips" size="40rpx" class="icon-color-base mr-3"></wd-icon>
        <wd-icon name="app" size="40rpx" class="icon-color-base"></wd-icon>
      </view>
    </view>
    <view class="text-center mt-4">
      模板分支是：
      <text class="text-green-500">tabbar</text>

    <view class="bg-white py-2 px-2">
      <wd-img class="w-full h-[260rpx]" src="/static/images/pic4.jpeg" />
    </view>
    <view class="bg-noti flex flex-row">
      <wd-notice-bar
        text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
        prefix="clock"
        type="info"
        :scrollable="false"
        custom-class="flex-1  overflow-hidden"
      />
      <wd-button type="text" class="w-[120rpx]">查看</wd-button>
    </view>

    <view class="bg-white">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">数据总览</view>
          </view>
        </template>
        <view class="flex flex-row justify-around">
          <view class="flex flex-col justify-center">
            <text class="text-lg text-center">0</text>
            <text class="text-color-gray">设备总数</text>
          </view>
          <view class="flex flex-col justify-center">
            <text class="text-lg text-center">0</text>
            <text class="text-color-gray">故障设备数</text>
          </view>
          <view class="flex flex-col justify-center">
            <text class="text-lg text-center">0</text>
            <text class="text-color-gray">未修复故障</text>
          </view>
        </view>
      </wd-card>
    </view>

    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">数据总览</view>
          </view>
        </template>
        <wd-grid :column="4">
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot is-dot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
          <wd-grid-item use-slot class="flex justify-center items-center">
            <image class="slot-img text-center" src="/static/menu/menu2.png" />
            <text>12</text>
          </wd-grid-item>
        </wd-grid>
      </wd-card>
    </view>

    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">数据总览</view>
          </view>
        </template>
        <wd-grid :column="4">
          <wd-grid-item
            use-slot
            class="flex justify-center items-center"
            v-for="(item, index) in menuList"
            :key="item.id"
          >
            <image class="slot-img text-center" :src="item.url" />
            <text>{{ item.name }}</text>
          </wd-grid-item>
        </wd-grid>
      </wd-card>
    </view>
  </view>
</template>
@@ -50,10 +146,62 @@
  console.log(author)
  console.log(TestEnum.A)
})

const menuList = reactive([
  {
    id: 1,
    name: '测试',
    url: '/static/menu/menu1.png',
  },
  {
    id: 2,
    name: '测试',
    url: '/static/menu/menu1.png',
  },
])

function handleUserInfo() {
  console.error('12121')
}


</script>

<style lang="scss" scoped>
.main-title-color {
  color: $uni-color-primary;
}

.bg-noti {
  background: #f4f9ff;
}

:deep(.wd-card) {
  margin-bottom: 0;
}

:deep(.wd-card__footer) {
  padding: 0 !important;
}

:deep(.wd-card__footer)::after {
  height: 0 !important;
}

.menu-title-box {
  height: 30rpx;
}

.menu-indicator {
  width: 6rpx;
  height: 24rpx;
  border-radius: 10rpx;
  background-color: $uni-color-primary;
}

.slot-img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 8rpx;
}
</style>

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

@@ -2,19 +2,90 @@
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>

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

<script setup lang="ts">
import { currRoute } from '@/utils'
import { useUserStore, useAccessStore } from '@/store'
import { useToast } from 'wot-design-uni'
import { login } from '@/service/login'
const userStore = useUserStore()
const accessStore = useAccessStore()
const { success: showSuccess } = useToast()

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

const form = ref()
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        toLogin()
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const toLogin = async () => {
  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 { query } = currRoute()
  console.error(query.redirect)
  uni.switchTab({ url: query.redirect })
}





</script>

<template>

</template>

<style scoped lang="scss">

.footer {
  padding: 12px;
}
</style>

 eims-ui-mobile/src/utils/http.ts

@@ -15,7 +15,7 @@
        if (res.statusCode >= 200 && res.statusCode < 300) {
          // 2.1 提取核心数据 res.data
          if ((res.data as IResData<T>).code === 200) {
            resolve((res.data as IResData<T>).data as IResData<T>)
            resolve(((res.data as IResData<T>).data || res.data) as IResData<T>)
          } else {
            uni.showToast({
              icon: 'none',