登录

api/auth.js

@@ -1,30 +0,0 @@
-import request from "@/utils/request"
-
-// 刷新令牌
-export const refreshToken = (refreshToken) => {
-  return request({
-    url: '/menduner/system/auth/refresh-token',
-    method: "POST",
-    params: {
-      refreshToken
-    },
-    custom: {
-      showLoading: false,
-      showError: false
-    }
-  })
-}
-
-// 发送手机验证码
-export const sendSmsCode = (data) => {
-  return request({
-    url: '/menduner/system/auth/send-sms-code',
-    method: "POST",
-    data,
-    custom: {
-      loadingMsg: '发送中',
-      showSuccess: true,
-      successMsg: '发送成功'
-    }
-  })
-}

api/common.js

@@ -0,0 +1,79 @@
+import request from "@/utils/request"
+
+// 刷新令牌
+export const refreshToken = (refreshToken) => {
+  return request({
+    url: '/menduner/system/auth/refresh-token',
+    method: "POST",
+    params: {
+      refreshToken
+    },
+    custom: {
+      showLoading: false,
+      showError: false
+    }
+  })
+}
+
+// 发送手机验证码
+export const sendSmsCode = (data) => {
+  return request({
+    url: '/menduner/system/auth/send-sms-code',
+    method: "POST",
+    data,
+    custom: {
+      loadingMsg: '发送中',
+      showSuccess: true,
+      successMsg: '发送成功'
+    }
+  })
+}
+
+// 短信登录
+export const smsLogin = (data) => {
+  return request({
+    url: '/menduner/system/auth/sms-login',
+    method: 'POST',
+    data,
+    custom: {
+      showLoading: false
+    }
+  })
+}
+
+// 密码登录
+export const passwordLogin = (data) => {
+  return request({
+    url: '/menduner/system/auth/login',
+    method: 'POST',
+    data,
+    custom: {
+      showLoading: false
+    }
+  })
+}
+
+// 退出登录
+export const logout = () => {
+  return request({
+    url: '/menduner/system/auth/logout',
+    method: 'POST',
+    custom: {
+      showLoading: false,
+      auth: true
+    }
+  })
+}
+
+// 字典
+export const getDictData = (params) => {
+  return request({
+    url: '/system/dict-data/type',
+    method: 'GET',
+    params,
+    custom: {
+      showLoading: false,
+      auth: true
+    }
+  })
+}

pages/index/my.vue

@@ -1,28 +1,45 @@
 <template>
-  <view>
-    <view class="text-center" @tap="handleLogin">
-      <img src="https://minio.citupro.com/dev/menduner/7.png" alt="" class="img-box">
-      <view class="font-weight-bold font-size-20">点击登录</view>
+  <view class="ss-p-b-30">
+    <view class="text-center">
+      <img :src="getUserAvatar(userInfo?.avatar, userInfo?.sex)" alt="" class="img-box">
+      <view v-if="!useUserStore.isLogin" class="font-weight-bold font-size-20" @tap="handleLogin">点击登录</view>
+      <view v-else class="font-weight-bold font-size-20">{{ userInfo.name || userInfo.phone }}</view>
     </view>
     <view style="margin-top: 80rpx;">
-		<uni-grid :column="4" :show-border="false">
-			<uni-grid-item :index="0" v-for="(val, index) in grid" :key="index" class="text-center">
-				<uni-icons :type="val.icon" size="40" color="#00897B"></uni-icons>
-				<text class="font-size-13 color-999 mt-5">{{ val.title }}</text>
-			</uni-grid-item>
-		</uni-grid>
+      <uni-grid :column="4" :show-border="false">
+        <uni-grid-item :index="0" v-for="(val, index) in grid" :key="index" class="text-center">
+          <uni-icons :type="val.icon" size="40" color="#00897B"></uni-icons>
+          <text class="font-size-13 color-999 mt-5">{{ val.title }}</text>
+        </uni-grid-item>
+      </uni-grid>
+      </view>
+      <view style="height: 10rpx; background-color: #f8f8fa;"></view>
+
+      <view class="card">
+      <uni-list>
+        <uni-list-item v-for="item in list" :key="item.title" :title="item.title" link showArrow :rightText="item.rightTex || ''"></uni-list-item>
+      </uni-list>
     </view>
-    <view style="height: 10rpx; background-color: #f8f8fa;"></view>
 
-    <view class="card">
-		<uni-list>
-			<uni-list-item v-for="item in list" :key="item.title" :title="item.title" link showArrow :rightText="item.rightTex || ''"></uni-list-item>
-		</uni-list>
-	</view>
+    <button v-if="useUserStore.isLogin" class="send-button" @tap="handleLogout">退出登录</button>
+
+    <uni-popup ref="popup" type="dialog">
+			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="系统提示" content="确认退出账号？" @confirm="handleLogoutConfirm"
+				@close="handleLogoutClose"></uni-popup-dialog>
+		</uni-popup>
   </view>
 </template>
 
 <script setup>
+import { ref, computed } from 'vue'
+import { userStore } from '@/store/user'
+import { getUserAvatar } from '@/utils/avatar'
+
+const useUserStore = userStore()
+const userInfo = computed(() => {
+  return useUserStore.userInfo
+})
+const popup = ref()
 const grid = [
   { title: '全部', icon: 'list' },
   { title: '被查看', icon: 'eye-filled' },
@@ -42,6 +59,16 @@ const handleLogin = () => {
     url: '/pages/login/index'
   })
 }
+
+const handleLogout = () => {
+  popup.value.open()
+}
+const handleLogoutClose = () => {
+  popup.value.close()
+}
+const handleLogoutConfirm = () => {
+  useUserStore.handleLogout()
+}
 </script>
 
 <style scoped lang="scss">

pages/login/index.vue

@@ -49,18 +49,20 @@
         </uni-forms-item>
       </uni-forms>
 
-      <button class="send-button" @tap="smsLoginSubmit"> 登录/注册 </button>
+      <button class="send-button" @tap="handleLogin"> 登录/注册 </button>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, unref } from 'vue'
 import { mobile, password, code } from '@/utils/validate'
 import { getSmsCode, getSmsTimer } from '@/utils/code'
+import { userStore } from '@/store/user'
 
+const useUserStore = userStore()
 const items = ['短信登录', '账号登录']
-const current = ref(0)
+const current = ref(1)
 const accountLoginRef = ref()
 const smsLoginRef = ref()
 const state = ref({
@@ -101,7 +103,12 @@ const handleCode = () => {
   getSmsCode('smsLogin', state.value.sms.phone)
 }
 
-const smsLoginSubmit = () => {}
+// 登录
+const handleLogin = async () => {
+  const validate = await unref(current.value === 0 ? smsLoginRef : accountLoginRef).validate()
+  if (!validate) return
+  await useUserStore.handleSmsLogin(current.value === 0 ? state.value.sms : state.value.account, current.value === 0 ? true : false)
+}
 </script>
 
 <style scoped lang="scss">

store/user.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { clone, cloneDeep } from 'lodash-es';
 import { getUserInfo } from '@/api/user';
+import { smsLogin, passwordLogin, logout } from '@/api/common'
 
 // 默认用户信息
 const defaultUserInfo = {
@@ -20,7 +21,7 @@ const defaultAccountInfo = {
   userId: ''
 }
 
-export const user = defineStore({
+export const userStore = defineStore({
   id: 'user',
   state: () => ({
     userInfo: {}, // 用户信息
@@ -30,6 +31,21 @@ export const user = defineStore({
   }),
 
   actions: {
+    // 登录
+    async handleSmsLogin (query, type) {
+      const api = type ? smsLogin : passwordLogin
+      const { data, code } = await api(query)
+      if (code === 0) {
+        uni.showToast({
+          title: '登录成功'
+        })
+      }
+      this.accountInfo = data
+      this.getInfo()
+      uni.switchTab({
+        url: '/pages/index/my'
+      })
+    },
     // 获取用户信息
     async getInfo() {
       const { code, data } = await getUserInfo({ userId: this.accountInfo.userId });
@@ -69,7 +85,7 @@ export const user = defineStore({
 
       // 获取最新信息
       // await this.getInfo();
-      this.getWallet();
+      // this.getWallet();
       return this.userInfo;
     },
 
@@ -88,7 +104,8 @@ export const user = defineStore({
     },
 
     // 登出系统
-    async logout() {
+    async handleLogout() {
+      await logout()
       this.resetUserData();
       return !this.isLogin;
     },
@@ -101,6 +118,4 @@ export const user = defineStore({
       },
     ],
   },
-});
-
-export default user;
+});

utils/avatar.js

@@ -0,0 +1,10 @@
+const male = 'https://minio.citupro.com/dev/menduner/11.png'
+const female = 'https://minio.citupro.com/dev/menduner/7.png'
+
+// 根据性别返回默认头像
+export const getUserAvatar = (avatar, sex) => {
+  if (avatar) return avatar
+  if (!sex) return female
+  if (sex === '1') return male
+  else return female
+}

utils/code.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { sendSmsCode } from '@/api/auth'
+import { sendSmsCode } from '@/api/common'
 import { modalStore } from '@/store/modal'
 import dayjs from 'dayjs';
 import test from '@/utils/test'

utils/request.js

@@ -4,8 +4,8 @@
  */
 
 import Request from 'luch-request';
-import { refreshToken } from '@/api/auth';
-import { user } from '@/store/user'
+import { refreshToken } from '@/api/common';
+import { userStore } from '@/store/user'
 
 const baseUrl = 'http://menduner.citupro.com:7878'
 const tenantId = '155'
@@ -68,11 +68,12 @@ const http = new Request({
  */
 http.interceptors.request.use(
 	(config) => {
-    const useUserStore = user()
+    const useUserStore = userStore()
     // 自定义处理【auth 授权】：必须登录的接口，则跳出 AuthModal 登录弹窗
 		if (config.custom.auth && !useUserStore.isLogin) {
 			uni.showToast({
-				title:'请先登录'
+				title:'请先登录',
+				icon: 'none'
 			})
 			uni.navigateTo({
 				url: '/pages/login/index'
@@ -116,8 +117,8 @@ http.interceptors.response.use(
 	(response) => {
 		// 约定：如果是 /auth/ 下的 URL 地址，并且返回了 accessToken 说明是登录相关的接口，则自动设置登陆令牌
 		if (response.config.url.indexOf('/system/auth/') >= 0 && response.data?.data?.accessToken) {
-			const userStore = user()
-			userStore.setToken(response.data.data.accessToken, response.data.data.refreshToken);
+			const useUserStore = userStore()
+			useUserStore.setToken(response.data.data.accessToken, response.data.data.refreshToken);
 		}
 
     // 自定处理【loading 加载中】：如果需要显示 loading，则关闭 loading
@@ -154,8 +155,8 @@ http.interceptors.response.use(
 		return Promise.resolve(response.data);
 	},
 	(error) => {
-		const userStore = user()
-		const isLogin = userStore.isLogin;
+		const useUserStore = userStore()
+		const isLogin = useUserStore.isLogin;
 		let errorMessage = '网络请求出错';
 		if (error !== undefined) {
 			switch (error.statusCode) {
@@ -278,10 +279,11 @@ const handleRefreshToken = async (config) => {
  * 处理 401 未登录的错误
  */
 const handleAuthorized = () => {
-  const userStore = user()
-  userStore.logout(true);
+  const useUserStore = userStore()
+  useUserStore.handleLogout(true);
   uni.showToast({
-		title:'请先登录'
+		title:'请先登录',
+		icon: 'none'
 	})
 	uni.navigateTo({
 		url: '/pages/login/index'
@@ -289,7 +291,7 @@ const handleAuthorized = () => {
   // 登录超时
   return Promise.reject({
     code: 401,
-    msg: userStore.isLogin ? '您的登陆已过期' : '请先登录'
+    msg: useUserStore.isLogin ? '您的登陆已过期' : '请先登录'
   })
 }