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

 新功能:
- 创建了4个主要Tab页面:宠物、助手、领养、我的
- 集成uview-ui-next UI框架
- 添加可爱的宠物主题图标
- 实现宠物列表展示和管理功能
- 配置微信小程序登录功能

🎨 界面优化:
- 使用uView组件美化界面
- 统一的设计风格和配色方案
- 响应式布局适配

📦 技术栈:
- uni-app + Vue3
- uview-ui-next UI框架
- 微信小程序平台
This commit is contained in:
yvan 2025-08-12 10:30:31 +08:00
parent dfdd118952
commit 3c7238a45c
19 changed files with 630 additions and 5 deletions

View File

@ -12,6 +12,7 @@
}
</script>
<style>
<style lang="scss">
/*每个页面公共css */
@import "uview-ui-next/index.scss";
</style>

88
README.md Normal file
View File

@ -0,0 +1,88 @@
# 宠爱小程序
一个专注于宠物管理的微信小程序提供宠物档案管理、AI助手、领养专区等功能。
## 项目结构
```
pet-ai/
├── pages/
│ ├── pets/ # 宠物管理页面
│ ├── assistant/ # AI助手页面
│ ├── adoption/ # 领养专区页面
│ └── profile/ # 个人中心页面
├── static/
│ └── tabbar/ # Tab图标文件夹
└── uni_modules/ # 插件模块(需要安装)
```
## 当前完成状态
✅ 基础项目结构搭建
✅ Tab导航配置
✅ 四个主要页面创建
✅ 宠物页面基础功能
## 待完成任务
### 1. UI框架安装
**推荐方式**在HBuilderX中打开项目通过插件市场安装uview-next
- 插件市场地址https://ext.dcloud.net.cn/plugin?id=24021
- 插件IDuview-next
- 安装后需要配置main.js和uni.scss
### 2. Tab图标获取
需要为以下4个tab页面添加可爱的宠物主题图标
**推荐图标资源**
- [iconfont阿里巴巴矢量图标库](https://www.iconfont.cn/)
- [Feather Icons](https://feathericons.com/)
- [Heroicons](https://heroicons.com/)
**所需图标**
- `static/tabbar/pets.png` - 宠物图标(如猫爪、宠物头像)
- `static/tabbar/pets-active.png` - 宠物图标激活状态
- `static/tabbar/assistant.png` - AI助手图标如机器人、对话框
- `static/tabbar/assistant-active.png` - AI助手图标激活状态
- `static/tabbar/adoption.png` - 领养图标(如爱心、房子)
- `static/tabbar/adoption-active.png` - 领养图标激活状态
- `static/tabbar/profile.png` - 个人中心图标(如用户头像)
- `static/tabbar/profile-active.png` - 个人中心图标激活状态
**图标规格**
- 尺寸81px × 81px推荐
- 格式PNG
- 背景:透明
### 3. 功能完善
- [ ] 宠物详情页面
- [ ] 添加宠物页面
- [ ] 宠物记录功能
- [ ] AI对话功能
- [ ] 领养信息发布
- [ ] 微信登录集成
## 技术栈
- **前端框架**uni-app + Vue3
- **UI框架**uview-next待安装
- **开发工具**HBuilderX
- **部署平台**:微信小程序
## 开发指南
1. 使用HBuilderX打开项目
2. 安装uview-next插件
3. 添加tab图标文件
4. 运行到微信开发者工具测试
## 项目特色
🐱 **宠物管理**:完整的宠物档案和日常记录系统
🤖 **AI助手**:智能宠物问答和健康建议
❤️ **领养专区**:宠物领养信息发布平台
👤 **个人中心**:用户信息和设置管理
## 联系方式
如有问题或建议,请联系开发团队。

View File

@ -1,9 +1,11 @@
import App from './App'
import uView from 'uview-ui-next'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
Vue.use(uView)
App.mpType = 'app'
const app = new Vue({
...App
@ -15,6 +17,7 @@ app.$mount()
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uView)
return {
app
}

32
package-lock.json generated Normal file
View File

@ -0,0 +1,32 @@
{
"name": "pet-ai",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "pet-ai",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"mitt": "^3.0.1",
"uview-ui-next": "^0.0.1"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
"license": "MIT"
},
"node_modules/uview-ui-next": {
"version": "0.0.1",
"resolved": "https://registry.npmmirror.com/uview-ui-next/-/uview-ui-next-0.0.1.tgz",
"integrity": "sha512-CGK4XPt1lYhCb+7aHgMpp6/VV1owOH67dPz52ypJ9dcVs0Ixgl5/PF0xajlel11R2yRhtRydLu6nIXs9eDZSBw==",
"license": "MIT",
"dependencies": {
"mitt": "^3.0.0"
}
}
}
}

16
package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "pet-ai",
"version": "1.0.0",
"description": "一个专注于宠物管理的微信小程序提供宠物档案管理、AI助手、领养专区等功能。",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"mitt": "^3.0.1",
"uview-ui-next": "^0.0.1"
}
}

View File

@ -1,5 +1,37 @@
{
"pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages
"pages": [
{
"path": "pages/pets/pets",
"style": {
"navigationBarTitleText": "我的宠物",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/assistant/assistant",
"style": {
"navigationBarTitleText": "AI助手",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/adoption/adoption",
"style": {
"navigationBarTitleText": "领养专区",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/profile/profile",
"style": {
"navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/index/index",
"style": {
@ -9,9 +41,47 @@
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"navigationBarTitleText": "宠爱小程序",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f8f9fa"
},
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "uview-ui-next/components/u-$1/u-$1.vue"
}
},
"tabBar": {
"color": "#999999",
"selectedColor": "#ff6b6b",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/pets/pets",
"text": "宠物",
"iconPath": "static/tabbar/pets.png",
"selectedIconPath": "static/tabbar/pets-active.png"
},
{
"pagePath": "pages/assistant/assistant",
"text": "助手",
"iconPath": "static/tabbar/assistant.png",
"selectedIconPath": "static/tabbar/assistant-active.png"
},
{
"pagePath": "pages/adoption/adoption",
"text": "领养",
"iconPath": "static/tabbar/adoption.png",
"selectedIconPath": "static/tabbar/adoption-active.png"
},
{
"pagePath": "pages/profile/profile",
"text": "我的",
"iconPath": "static/tabbar/profile.png",
"selectedIconPath": "static/tabbar/profile-active.png"
}
]
},
"uniIdRouter": {}
}

View File

@ -0,0 +1,41 @@
<template>
<view class="container">
<view class="header">
<text class="title">领养专区</text>
</view>
<view class="content">
<text class="desc">宠物领养信息发布与浏览</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 20rpx;
background-color: #f8f9fa;
min-height: 100vh;
}
.header {
padding: 20rpx 0;
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
}
.content {
padding: 40rpx 0;
.desc {
font-size: 28rpx;
color: #666;
}
}
</style>

View File

@ -0,0 +1,105 @@
<template>
<view class="assistant-container">
<view class="header">
<text class="title">AI助手</text>
</view>
<view class="chat-area">
<view class="welcome-message">
<text class="welcome-text">您好我是您的宠物AI助手</text>
<text class="welcome-desc">可以为您解答宠物饲养健康训练等问题</text>
</view>
</view>
<view class="input-area">
<input class="message-input" placeholder="请输入您的问题..." />
<view class="send-btn">
<text class="send-text">发送</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.assistant-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f8f9fa;
}
.header {
padding: 20rpx 30rpx;
background-color: white;
border-bottom: 1rpx solid #eee;
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
}
.chat-area {
flex: 1;
padding: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.welcome-message {
text-align: center;
.welcome-text {
font-size: 32rpx;
color: #333;
display: block;
margin-bottom: 20rpx;
}
.welcome-desc {
font-size: 26rpx;
color: #666;
display: block;
}
}
.input-area {
background-color: white;
padding: 20rpx 30rpx;
border-top: 1rpx solid #eee;
display: flex;
align-items: center;
.message-input {
flex: 1;
background-color: #f5f5f5;
border-radius: 30rpx;
padding: 20rpx 30rpx;
font-size: 28rpx;
margin-right: 20rpx;
}
.send-btn {
background-color: #4ecdc4;
padding: 20rpx 40rpx;
border-radius: 30rpx;
.send-text {
color: white;
font-size: 28rpx;
}
}
}
</style>

109
pages/pets/pets.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<view class="pets-container">
<u-navbar title="我的宠物" :border="false" bg-color="#ffffff">
<template #right>
<u-icon name="plus-circle-fill" color="#ff6b6b" size="24" @click="addPet"></u-icon>
</template>
</u-navbar>
<view class="pets-list" v-if="petsList.length > 0">
<u-card v-for="pet in petsList" :key="pet.id" :margin="20" :padding="20" @click="viewPetDetail(pet)">
<view class="pet-card-content">
<u-avatar :src="pet.avatar || '/static/default-pet.png'" size="60" shape="circle"></u-avatar>
<view class="pet-info">
<u-text :text="pet.name" type="primary" size="16" bold></u-text>
<u-text :text="pet.breed" type="info" size="14"></u-text>
<u-text :text="`${pet.age}岁 · 陪伴${pet.companionDays}天`" type="tips" size="12"></u-text>
</view>
<view class="pet-actions">
<u-button type="primary" size="mini" @click.stop="addRecord(pet)">记录</u-button>
</view>
</view>
</u-card>
</view>
<u-empty v-else mode="data" text="还没有添加宠物哦">
<template #bottom>
<u-button type="primary" text="添加第一只宠物" @click="addPet"></u-button>
</template>
</u-empty>
</view>
</template>
<script>
export default {
data() {
return {
petsList: [
//
{
id: 1,
name: '小橘',
breed: '橘猫',
age: 2,
companionDays: 365,
avatar: '/static/cat-avatar.jpg',
gender: '公',
weight: '4.5kg',
birthday: '2022-01-15'
},
{
id: 2,
name: '小白',
breed: '金毛',
age: 3,
companionDays: 1095,
avatar: '/static/dog-avatar.jpg',
gender: '母',
weight: '25kg',
birthday: '2021-03-20'
}
]
}
},
methods: {
addPet() {
uni.navigateTo({
url: '/pages/pets/add-pet'
})
},
viewPetDetail(pet) {
uni.navigateTo({
url: `/pages/pets/pet-detail?id=${pet.id}`
})
},
addRecord(pet) {
uni.navigateTo({
url: `/pages/pets/add-record?petId=${pet.id}`
})
}
}
}
</script>
<style lang="scss" scoped>
.pets-container {
background-color: #f8f9fa;
min-height: 100vh;
}
.pet-card-content {
display: flex;
align-items: center;
.pet-info {
flex: 1;
margin-left: 20rpx;
/deep/ .u-text {
margin-bottom: 8rpx;
}
}
.pet-actions {
margin-left: 20rpx;
}
}
</style>

157
pages/profile/profile.vue Normal file
View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
static/tabbar/adoption.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/tabbar/assistant.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
static/tabbar/pets.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
static/tabbar/profile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -74,3 +74,6 @@ $uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
/* uView UI主题变量 */
@import "uview-ui-next/theme.scss";