完成宠物小程序基础功能开发

✨ 新功能: - 创建了4个主要Tab页面：宠物、助手、领养、我的 - 集成uview-ui-next UI框架 - 添加可爱的宠物主题图标 - 实现宠物列表展示和管理功能 - 配置微信小程序登录功能 🎨 界面优化: - 使用uView组件美化界面 - 统一的设计风格和配色方案 - 响应式布局适配 📦 技术栈: - uni-app + Vue3 - uview-ui-next UI框架 - 微信小程序平台
2025-08-12 10:30:31 +08:00
parent dfdd118952
commit 3c7238a45c
19 changed files with 630 additions and 5 deletions
@@ -0,0 +1,157 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<text class="title">我的</text>
+		</view>
+		
+		<view class="user-info" v-if="userInfo">
+			<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
+			<text class="nickname">{{ userInfo.nickName || '未登录' }}</text>
+		</view>
+		
+		<view class="login-section" v-if="!userInfo">
+			<button class="login-btn" @click="wxLogin" open-type="getUserInfo" @getuserinfo="getUserInfo">
+				微信登录
+			</button>
+		</view>
+		
+		<view class="menu-list">
+			<view class="menu-item" @click="navigateTo('/pages/profile/settings')">
+				<text class="menu-text">设置</text>
+				<text class="menu-arrow">></text>
+			</view>
+			<view class="menu-item" @click="navigateTo('/pages/profile/about')">
+				<text class="menu-text">关于我们</text>
+				<text class="menu-arrow">></text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			userInfo: null
+		}
+	},
+	onLoad() {
+		this.checkLogin()
+	},
+	methods: {
+		checkLogin() {
+			// 检查是否已登录
+			const userInfo = uni.getStorageSync('userInfo')
+			if (userInfo) {
+				this.userInfo = userInfo
+			}
+		},
+		
+		wxLogin() {
+			uni.login({
+				provider: 'weixin',
+				success: (res) => {
+					console.log('登录成功', res)
+					// 这里应该调用后端接口获取用户信息
+				},
+				fail: (err) => {
+					console.error('登录失败', err)
+					uni.showToast({
+						title: '登录失败',
+						icon: 'none'
+					})
+				}
+			})
+		},
+		
+		getUserInfo(e) {
+			if (e.detail.userInfo) {
+				this.userInfo = e.detail.userInfo
+				uni.setStorageSync('userInfo', e.detail.userInfo)
+			}
+		},
+		
+		navigateTo(url) {
+			uni.navigateTo({ url })
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	background-color: #f8f9fa;
+	min-height: 100vh;
+}
+
+.header {
+	padding: 20rpx 30rpx;
+	background-color: white;
+	
+	.title {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #333;
+	}
+}
+
+.user-info {
+	background-color: white;
+	padding: 40rpx 30rpx;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+	
+	.avatar {
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 60rpx;
+		margin-right: 30rpx;
+	}
+	
+	.nickname {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333;
+	}
+}
+
+.login-section {
+	background-color: white;
+	padding: 40rpx 30rpx;
+	margin-bottom: 20rpx;
+	
+	.login-btn {
+		background-color: #07c160;
+		color: white;
+		border-radius: 10rpx;
+		font-size: 32rpx;
+	}
+}
+
+.menu-list {
+	background-color: white;
+	
+	.menu-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 40rpx 30rpx;
+		border-bottom: 1rpx solid #f0f0f0;
+		
+		&:last-child {
+			border-bottom: none;
+		}
+		
+		.menu-text {
+			font-size: 30rpx;
+			color: #333;
+		}
+		
+		.menu-arrow {
+			font-size: 28rpx;
+			color: #999;
+		}
+	}
+}
+</style>