首页添加登录逻辑
This commit is contained in:
parent
05f693e5fa
commit
67af8e3c2b
15
main.js
15
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() {
|
||||
@ -19,5 +7,4 @@ export function createApp() {
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
12
pages.json
12
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": {
|
||||
|
||||
@ -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" },
|
||||
])
|
||||
|
||||
function change(){
|
||||
a.value = "lsp"
|
||||
let showModel = ref(false);
|
||||
let handleClose = () => {
|
||||
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">
|
||||
<image src="/static/hospital.png"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view>南方医科大学珠江医院</view>
|
||||
<view>李玉华</view>
|
||||
</view>
|
||||
<!-- 头部 -->
|
||||
<view class="header shadow" @tap="showLogin">
|
||||
<template v-if="userStore.isLogin">
|
||||
<view class="img">
|
||||
<image src="/static/hospital.png"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<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>
|
||||
<view>{{ list[item - 1]?.title }}</view>
|
||||
<image :src="item.img"></image>
|
||||
<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 {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1a365d;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
:last-child {
|
||||
font-size: 26rpx;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
view {
|
||||
width: 100%;
|
||||
&:nth-child(1) {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1a365d;
|
||||
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>
|
||||
4
pnpm-lock.yaml
generated
4
pnpm-lock.yaml
generated
@ -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:
|
||||
|
||||
|
||||
@ -6,5 +6,5 @@ const pinia = createPinia()
|
||||
// 使用持久化存储插件
|
||||
pinia.use(piniaPersist)
|
||||
|
||||
// 默认导出，给 main.ts 使用
|
||||
export default pinia
|
||||
export default pinia
|
||||
export * from './modules/user'
|
||||
34
store/modules/user.js
Normal file
34
store/modules/user.js
Normal file
@ -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);
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
Loading…
x
Reference in New Issue
Block a user