tyt-weapp/pages/index/index.vue

<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" },
	{ title: "病人反馈", img: "/static/health_record.png" },
	{ title: "品牌详情", img: "/static/health_assessment.png" },
	{ title: "科普宣传", img: "/static/health_plan_overview.png" },
	{ title: "数据统计", img: "/static/tongji.png" },
])
let showModel = ref(false);
let handleClose = () => {
	showModel.value = false;
};
const showLogin = () => {
	if (userStore.isLogin) {
		return
	}
	showModel.value = true;
}
// 点击菜单
const clickMenu = (value) => {
	if (!userStore.isLogin){
		toast.warning("请先登录")
		return
	}
	switch (value) {
		case 0:
			uni.navigateTo({
				url:"/pages/patient/patientList/patientList"
			})
			break;
		case 2:
			uni.navigateTo({
				url:"/pages/patient/patientFbList/patientFbList"
			})
			break;
		case 3:
			uni.navigateTo({
				url:"/pages/brand/brandList/brandList"
			})
			break;
	
		default:
			toast.warning('功能开发中')
			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 main">
		<!-- 头部 -->
		<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, i) in list" :key="item.title" class="item shadow" @tap="clickMenu(i)">
				<view>
					<image :src="item.img"></image>
					<view>{{item.title }}</view>
				</view>
			</view>
		</view>
		<!-- 软件使用反馈 -->
		<button class="feedback_btn">软件使用反馈</button>
		<!-- 退出登录 -->
		<button v-if="userStore.isLogin" class="logout_btn" type="warn" @tap="logout">退出登录</button>
		<view class="bottom shadow">
			<view></view>
			<view></view>
			<view>
				<wd-icon name="user" size="40rpx" />
				<view>我的</view>
			</view>
		</view>
	</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>
	.home{
		padding: 20rpx;
		.shadow {
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    		border: 1rpx solid #e8f2ff;
			background-color: #fff;
			border-radius: 14rpx;
		}
		.header {
			display: flex;
			gap: 25rpx;
    		padding: 30rpx;
			.img {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #e8f2ff 0%, #f0f8ff 100%);
				border: 2rpx solid #e1ecf4;
				
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			.info {
				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;
					}
				}
			}
		}
		.menu {
			display: flex;
			gap: 27rpx;
			flex-wrap: wrap;
			margin-top: 35rpx;
			.item {
				width: 30%;
				text-align: center;
				aspect-ratio: 1;
				transition: all 0.2s ease;
				display: flex;
				align-items: center;
				justify-content: center;
				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
				}
				image {
					width: 60rpx;
					height: 60rpx;
				}
				view {
					font-size: 25rpx;
					color: #334155;
            		text-align: center;
				}
			}
		}
		.feedback_btn {
			margin: 35rpx 0;
			font-size: 30rpx;
			height: 95rpx;
			line-height: 95rpx;
			background-color: #fff;
			text-align-last: left;
		}
		.logout_btn {
			font-size: 30rpx;
			height: 95rpx;
			line-height: 95rpx;
			text-align-last: left;
		}
		.bottom {
			position: fixed;
    		bottom: 2rpx;
			left: 0;
			display: flex;
			padding: 15rpx;
			width: 100%;
			text-align: center;
			font-size: 23rpx;
			>view {
				width: 33%;				
			}
		}
	}
	.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>