feat: 完善登录页请求

src/api/login.js

@@ -0,0 +1,38 @@
+
+import { http } from '@/utils/https';
+
+export const userApi = {
+  /**
+   * 用户登录
+   */
+  postLogin: data => http({
+    method: 'POST',
+    url: '/login',
+    data
+  }),
+  
+  /**
+   * 账号信息
+   */
+  getUserInfo: () => http({
+    method: 'GET',
+    url: '/getInfo'
+  }),
+
+  // getUserInfo: () => http.get('/getInfo'),
+
+  /**
+   * 退出登录
+   */
+  postLogout: () => http.post('/logout'),
+
+  /**
+   * 修改个人信息接口
+   */
+  UpUser: (data) => http.put('/system/user/profile', data),
+  
+  /**
+   * 修改密码
+   */
+  putPassword: ({ oldPassword, newPassword }) => http.put(`/system/user/profile/updatePwd?oldPassword=${oldPassword}&newPassword=${newPassword}`),
+}

src/pages.json

@@ -3,13 +3,16 @@
 		{
 			"path": "pages/login/index",
 			"style": {
-        "navigationStyle": "custom"
+        "disableScroll": true,
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "登录"
 			}
 		},
 		{
-			"path": "pages/index/index",
+			"path": "pages/home/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+        "navigationStyle": "custom",
+				"navigationBarTitleText": "首页"
 			}
 		}
 	],

src/pages/home/index.vue

@@ -0,0 +1,5 @@
+<template>
+
+  这个是首页
+
+</template>

src/pages/index/index.vue

@@ -1,48 +0,0 @@
-<template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: 'Hello',
-    }
-  },
-  onLoad() {},
-  methods: {},
-}
-</script>
-
-<style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
-</style>

src/pages/login/index.vue

@@ -1,42 +1,80 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, unref } from 'vue';
+import { userApi } from '@/api/login';
+import { useUserStore } from '@/stores/modules/userStore';
+
+const REMOTE_PATH = {
+  logo: 'https://static.fuxicarbon.com/bigModel/wechat/login/img-desc.png',
+  username: 'https://static.fuxicarbon.com/bigModel/wechat/login/icon-username.png',
+  password: 'https://static.fuxicarbon.com/bigModel/wechat/login/icon-password.png'
+}
+
+const userStore = useUserStore();
 
-const showPassword = ref(false);
-const formData = ref({
-  username: '',
-  password: ''
+const showPasswordIcon = ref(false);
+const loading = ref(false);
+const loginFormData = ref({
+  username: 'admin',
+  password: 'admin123'
 });
 
+const handleSubmit = async () => {
+
+  const { username, password } = unref(loginFormData);
+  
+  if (!username) {
+    return uni.showToast({ icon: 'none', title: "请输入账号", duration: 3 * 1000 });
+  }
+  if (!password) {
+    return uni.showToast({ icon: 'none', title: "请输入密码", duration: 3 * 1000 });
+  }
+
+  loading.value = true;
+
+  try {
+    const { token } = await userApi.postLogin({ username, password });
+
+    userStore.setUserInfo({ token });
+
+    const { user } = await userApi.getUserInfo();
+
+    userStore.setUserInfo({ ...user });
+
+    await uni.showToast({ icon: 'none', title: "登录成功", duration: 2 * 1000});
+
+    setTimeout(() => uni.redirectTo({url: '/pages/home/index'}), 2 * 1000);
+  } catch (error) {
+    console.log("打印error", error);
+  } finally {
+    loading.value = false;
+  }
+}
 </script>
 
 <template>
-
   <view class="login-viewport">
     <TheNavBar title-text="登录" class="nav-bar"></TheNavBar>
-
     <view class="login-content">
-
       <view class="logo-inner">
-        <image src="https://static.fuxicarbon.com/bigModel/wechat/login/img-desc.png" class="img-desc"></image>
+        <image :src="REMOTE_PATH.logo" class="img-desc"></image>
       </view>
-
       <view class="form-inner">
         <view class="login-form-item">
-          <image src="https://static.fuxicarbon.com/bigModel/wechat/login/icon-username.png" class="image"></image>
-          <input class="inp" v-model="formData.username" placeholder="请输入账号" placeholder-style="color: #ADB0BD" />
+          <image :src="REMOTE_PATH.username" class="image"></image>
+          <input class="inp" v-model.trim="loginFormData.username" placeholder="请输入账号"
+            placeholder-style="color: #ADB0BD" />
         </view>
         <view class="login-form-item">
-          <image src="https://static.fuxicarbon.com/bigModel/wechat/login/icon-password.png" class="image"></image>
-          <input class="inp uni-input" :password="!showPassword" v-model="formData.password" placeholder="请输入密码"
-            placeholder-style="color: #ADB0BD" />
-          <uni-icons size="20" :type="showPassword ? 'eye' : 'eye-slash'" color="#ADB0BD" class="icon-eye"
-            @click="showPassword = !showPassword"></uni-icons>
+          <image :src="REMOTE_PATH.password" class="image"></image>
+          <input class="inp" v-model.trim="loginFormData.password" placeholder="请输入密码"
+            placeholder-style="color: #ADB0BD" :password="!showPasswordIcon" />
+          <uni-icons size="20" color="#ADB0BD" class="icon-eye" :type="showPasswordIcon ? 'eye' : 'eye-slash'"
+            @click="showPasswordIcon = !showPasswordIcon"></uni-icons>
         </view>
-        <button class="sub-btn" hover-color="sub-btn_hover">
+        <button class="sub-btn" hover-class="sub-btn_hover" :loading="loading" @click="handleSubmit">
           <text>登录</text>
         </button>
       </view>
-
       <view class="text-inner">
         <text>人工智能运营体智慧决策助手</text>
       </view>
@@ -77,8 +115,9 @@ const formData = ref({
           height: 52rpx;
           padding: 24rpx 96rpx 24rpx 96rpx;
           border-radius: 100rpx;
-          background: #F6F7F8;
+          background: #f6f7f8;
           line-height: 100rpx;
+          font-size: 32rpx;
         }
 
         .image {
@@ -113,7 +152,11 @@ const formData = ref({
         line-height: 100rpx;
         font-size: 32rpx;
         color: #fff;
-        background: #8AB1FF;
+        background: #8ab1ff;
+      }
+
+      .sub-btn_hover {
+        background: #6495f7;
       }
     }
 
@@ -125,4 +168,4 @@ const formData = ref({
     }
   }
 }
-</style>
+</style>

src/stores/modules/appStrore.js

@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
-export const useAppStore = defineStore("app", () => {
-  
-}, {
+export const useAppStore = defineStore("app", () => {}, {
   persist: {
     storage: {
       setItem(key, value) {
@@ -11,7 +9,7 @@ export const useAppStore = defineStore("app", () => {
       },
       getItem(key) {
         return uni.getStorageSync(key);
-      }
-    }
-  }
+      },
+    },
+  },
 });

src/stores/modules/userStore.js

@@ -0,0 +1,41 @@
+import { ref, unref } from "vue";
+import { defineStore } from "pinia";
+
+export const useUserStore = defineStore(
+  "user",
+  () => {
+    const userInfo = ref({});
+    const dialogStatus = ref(false);
+
+    const setUserInfo = (params) => {
+      userInfo.value = { ...unref(userInfo), ...params };
+    };
+
+    const clearUserInfo = (user) => {
+      userInfo.value = {};
+    };
+
+    const setDialogStatus = (params) => {
+      dialogStatus.value = params;
+    };
+    return {
+      userInfo,
+      setUserInfo,
+      clearUserInfo,
+      dialogStatus,
+      setDialogStatus,
+    };
+  },
+  {
+    persist: {
+      storage: {
+        setItem(key, value) {
+          uni.setStorageSync(key, value);
+        },
+        getItem(key) {
+          return uni.getStorageSync(key);
+        },
+      },
+    },
+  }
+);

src/utils/https.js

@@ -1,34 +1,30 @@
-// import { useMemberStore } from "@/stores/modules/member";
+import { useUserStore } from "@/stores/modules/userStore";
 
 // 开发
-// export const baseURL = 'http://192.168.31.78:8080'
-// 测试
-// export const baseURL = 'https://clz.cq.bjlvliba.com/prod-api';
-// 生产
-export const baseURL = 'https://clz.cq.agritechure.com/prod-api';
+export const baseURL = 'http://10.0.0.28:8080';
 
-// const memberStore = useMemberStore();
+const userStore = useUserStore();
 
 const httpInterceptor = {
   invoke(options) {
     if (!options.url.startsWith('http')) {
       options.url = baseURL + options.url
     }
-    options.timeout = 10000
+    options.timeout = 3000
     options.header = {...options.header}
 
-    // const token = memberStore.profile?.token;
-    token && (options.header.Authorization = token);
+    const token = userStore.userInfo?.token;
+    token && (options.header.Authorization = 'Bearer ' + token);
   },
 }
 
 uni.addInterceptor('request', httpInterceptor);
 
 export const http = (options) => {
-  uni.showLoading({
-    title: "加载中...",
-    mask: true
-  })
+  // uni.showLoading({
+  //   title: "加载中...",
+  //   mask: true
+  // })
   return new Promise((resolve, reject) => {
     uni.request({
       ...options,
@@ -62,6 +58,7 @@ export const http = (options) => {
         uni.showToast({
           icon: 'none',
           title: '网络错误，换个网络试试',
+          duration: 3 * 1000
         })
         reject(err)
       },