首页添加登录逻辑

main.js

@@ -1,16 +1,4 @@
 import App from './App'
-// // #ifndef VUE3
-// import Vue from 'vue'
-// import './uni.promisify.adaptor'
-// Vue.config.productionTip = false
-// App.mpType = 'app'
-// const app = new Vue({
-//   ...App
-// })
-// app.$mount()
-// // #endif
-
-// // #ifdef VUE3
 import { createSSRApp } from 'vue'
 import pinia from './store'
 export function createApp() {
@@ -20,4 +8,3 @@ export function createApp() {
     app
   }
 }
-// #endif

package.json

@@ -3,5 +3,8 @@
 		"pinia": "^3.0.4",
 		"pinia-plugin-persistedstate": "^4.7.1",
 		"wot-design-uni": "^1.13.0"
+	},
+	"devDependencies": {
+		"vue": "^3.5.26"
 	}
 }

pages.json

@@ -7,17 +7,17 @@
 	},
 	
 	"pages": [
-		{
-			"path": "pages/patient/patient",
-			"style": {
-				"navigationBarTitleText": "患者列表"
-			}
-		},
 		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "个人中心"
 			}
+		},
+		{
+			"path": "pages/patient/patient",
+			"style": {
+				"navigationBarTitleText": "患者列表"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { ref } from 'vue';
-
+import { useToast, useMessage } from 'wot-design-uni'
+import { useUserStore } from '@/store';
+const toast = useToast()
+const message = useMessage()
+const userStore = useUserStore()
 const list = ref([
 	{ title: "病人管理", img: "/static/patient.png" },
 	{ title: "组员管理", img: "/static/ss.png" },
@@ -9,39 +13,98 @@ const list = ref([
 	{ title: "档案管理", img: "/static/health_plan_overview.png" },
 	{ title: "数据统计", img: "/static/tongji.png" },
 ])
-
+let showModel = ref(false);
-function change(){
+let handleClose = () => {
-	a.value = "lsp"
+	showModel.value = false;
+};
+const showLogin = () => {
+	showModel.value = true;
 }
+// 点击菜单
+const clickMenu = (value) => {
+	if (!userStore.isLogin){
+		toast.warning("请先登录")
+		return
+	}
+	switch (value) {
+		case 0:
+			wx.navigateTo({
+				url:"/pages/patient/patient"
+			})
+			
+			break;
+	
+		default:
+			break;
+	}
+}
+// 获取用户数据
+const getPhoneNumber = ({detail}) => {
+	if (detail.errMsg === "getPhoneNumber:ok") {
+		userStore.setUserInfo(detail)
+		toast.success("登录成功")
+		
+	} else {
+		toast.error("登录失败")
+	}
+	handleClose()
+}
+// 退出登录
+const logout = async() => {
+	await message.confirm({
+      msg: '确定要退出登录吗？',
+      title: '提示'
+    })
+	userStore.logOut()
+}
+
 </script>
-
-
 <template>
-	<!-- 头部 -->
 	<view class="home">
-		<view class="header shadow">
+		<!-- 头部 -->
-			<view class="img">
+		<view class="header shadow" @tap="showLogin">
-				<image src="/static/hospital.png"></image>
+			<template v-if="userStore.isLogin">
-			</view>
+				<view class="img">
-			<view class="info">
+					<image src="/static/hospital.png"></image>
-				<view>南方医科大学珠江医院</view>
+				</view>
-				<view>李玉华</view>
+				<view class="info">
-			</view>
+					<view>南方医科大学珠江医院</view>
+					<view>李玉华</view>
+				</view>
+			</template>
+			<template v-else>
+				<view class="img">
+					<image src="/static/deviceManufacturer.png"></image>
+				</view>
+				<view class="info">
+					<view>立即登录</view>
+				</view>
+			</template>
 		</view>
 		<!-- 功能菜单 -->
 		<view class="menu">
-			<view v-for="item in 9" :key="title" class="item shadow">
+			<view v-for="(item, i) in list" :key="item.title" class="item shadow" @tap="clickMenu(i)">
 				<view>
-					<image :src="list[item - 1]?.img"></image>
+					<image :src="item.img"></image>
-					<view>{{ list[item - 1]?.title }}</view>
+					<view>{{item.title }}</view>
 				</view>
 			</view>
 		</view>
 		<!-- 软件使用反馈 -->
 		<button class="feedback_btn">软件使用反馈</button>
 		<!-- 退出登录 -->
-		<button class="logout_btn" type="warn">退出登录</button>
+		<button v-if="userStore.isLogin" class="logout_btn" type="warn" @tap="logout">退出登录</button>
 	</view>
+	<!-- 登录弹出框 -->
+	<wd-popup v-model="showModel" :close-on-click-modal="false" position="bottom" custom-style="border-radius: 20rpx 20rpx 0 0;">
+		<view class="login_model">
+			<text @tap="handleClose">暂不登录</text>
+			<image src="/static/logo.png"></image>
+			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
+		</view>
+	</wd-popup>
+	<wd-toast />
+	<wd-message-box />
 
 </template>
 <style lang="scss" scoped>
@@ -75,16 +138,21 @@ function change(){
 				}
 			}
 			.info {
-				:first-child {
+				display: flex;
-					font-size: 32rpx;
+				align-items: center;
-					font-weight: bold;
+				flex-wrap: wrap;
-					color: #1a365d;
+				view {
-					margin-bottom: 8rpx;
+					width: 100%;
-					letter-spacing: 0.5rpx;
+					&:nth-child(1) {
-				}
+						font-size: 32rpx;
-				:last-child {
+						font-weight: bold;
-					font-size: 26rpx;
+						color: #1a365d;
-            		color: #64748b;
+						letter-spacing: 0.5rpx;
+					}
+					&:nth-child(2) {
+						font-size: 26rpx;
+						color: #64748b;
+					}
 				}
 			}
 		}
@@ -129,4 +197,29 @@ function change(){
 			line-height: 95rpx;
 		}
 	}
+	.login_model {
+		position: relative;
+		text-align: center;
+		text {
+			position: absolute;
+			top: 15rpx;
+			right: 15rpx;
+			color: #999;
+			font-size: 24rpx;
+		}
+		image {
+			width: 180rpx;
+			height: 180rpx;
+			margin-top: 25rpx;
+		}
+		button {
+			color: #767676;
+			font-weight: bold;
+			margin-bottom: 40rpx;
+			background: white;
+			&::after{
+				border: 0;
+			}
+		}
+	}
 </style>

pnpm-lock.yaml

@@ -17,6 +17,10 @@ importers:
       wot-design-uni:
         specifier: ^1.13.0
         version: 1.13.0(vue@3.5.26)
+    devDependencies:
+      vue:
+        specifier: ^3.5.26
+        version: 3.5.26
 
 packages:
 

store/index.js

@@ -6,5 +6,5 @@ const pinia = createPinia()
 // 使用持久化存储插件
 pinia.use(piniaPersist)
 
-// 默认导出，给 main.ts 使用
 export default pinia
+export * from './modules/user'

store/modules/user.js

@@ -0,0 +1,34 @@
+import { defineStore } from "pinia";
+import { ref, computed} from "vue";
+export const useUserStore = defineStore(
+    "user",
+    () => {
+        const isLogin = computed(() => Boolean(userInfo.value));
+        let userInfo = ref(null);
+        const setUserInfo = (newPhone) => {
+            userInfo.value = newPhone;
+        };
+        const logOut = () => {
+           userInfo.value = null;
+        }
+        return {
+            isLogin,
+            userInfo,
+            setUserInfo,
+            logOut
+        };
+    },
+    {
+        // 小程序端配置持久化
+        persist: {
+            storage: {
+                getItem(key) {
+                    return uni.getStorageSync(key);
+                },
+                setItem(key, value) {
+                    uni.setStorageSync(key, value);
+                },
+            },
+        },
+    }
+);