sundynix/sundynix-plant-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add plant identification feature with image upload, classification results display, and integration into the wiki page.

Browse Source
This commit is contained in:
Blizzard
2026-02-10 14:02:35 +08:00
parent 6ea77c00ce
commit 6f88bc656b
15 changed files with 1481 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/garden/add/index.js
+38 -12
View File
@@ -15,6 +15,12 @@ Page({
uploadedImageId: '', // Store the uploaded image ID
// Extra fields
potMaterial: '',
potSize: '',
sunlight: '',
plantingMaterial: '',
showActionSheet: false,
actionSheetItems: [
{ label: '拍摄', value: 'camera' },
@@ -85,7 +91,7 @@ Page({
});
// Show loading
wx.showLoading({ title: 'Uploading...' });
wx.showLoading({ title: '上传中...' });
// Call upload API
request.upload(tempFilePath).then(data => {
@@ -103,13 +109,11 @@ Page({
uploadedImageId: imageId,
isLocalImage: true
});
wx.showToast({ title: 'Success', icon: 'success' });
} else {
wx.showToast({ title: 'No URL returned', icon: 'none' });
}
}).catch(err => {
wx.hideLoading();
wx.showToast({ title: 'Upload Failed', icon: 'none' });
wx.showToast({ title: '上传失败', icon: 'none' });
});
},
fail: (err) => {
@@ -123,6 +127,12 @@ Page({
onLocationInput(e) { this.setData({ newPlantLocation: e.detail.value }); },
onDateChange(e) { this.setData({ newPlantDate: e.detail.value }); },
// Extra field inputs
onPotMaterialInput(e) { this.setData({ potMaterial: e.detail.value }); },
onPotSizeInput(e) { this.setData({ potSize: e.detail.value }); },
onSunlightInput(e) { this.setData({ sunlight: e.detail.value }); },
onPlantingMaterialInput(e) { this.setData({ plantingMaterial: e.detail.value }); },
handleAddCareTask() {
const tasks = this.data.newCareTasks;
const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'other');
@@ -162,7 +172,14 @@ Page({
onTaskFreqInput(e) {
const { id } = e.currentTarget.dataset;
const tasks = this.data.newCareTasks.map(t => t.id === id ? { ...t, frequencyValue: parseInt(e.detail.value) || 1 } : t);
const raw = e.detail.value;
// Allow empty while editing; validate on save
const tasks = this.data.newCareTasks.map(t => {
if (t.id === id) {
return { ...t, frequencyValue: raw === '' ? '' : (parseInt(raw) || '') };
}
return t;
});
this.setData({ newCareTasks: tasks });
},
@@ -223,10 +240,19 @@ Page({
return;
}
// Validate care task periods
for (const task of newCareTasks) {
const p = parseInt(task.frequencyValue);
if (!p || p < 1) {
wx.showToast({ title: `"${task.taskName || '未命名事项'}" 的周期天数不合法`, icon: 'none' });
return;
}
}
// Construct Care Plans
const carePlans = newCareTasks.map(task => ({
name: task.taskName || '未命名事项',
period: task.frequencyValue || 1,
period: parseInt(task.frequencyValue) || 1,
icon: JSON.stringify(task.taskIcon || {}) // Serialize icon details
}));
@@ -237,14 +263,14 @@ Page({
placement: newPlantLocation || '',
ossIds: [uploadedImageId],
carePlans: carePlans,
potMaterial: '',
potSize: '',
sunlight: '',
plantingMaterial: ''
potMaterial: this.data.potMaterial || '',
potSize: this.data.potSize || '',
sunlight: this.data.sunlight || '',
plantingMaterial: this.data.plantingMaterial || ''
};
// Submit
wx.showLoading({ title: 'Creating...' });
wx.showLoading({ title: '植物种植中...' });
request.post('/plant/add', payload).then(async () => {
wx.hideLoading();
wx.showToast({ title: '添加成功', icon: 'success' });
pages/garden/add/index.wxml
+78 -28
View File
@@ -26,40 +26,92 @@
</view>
</view>
<!-- Form Fields -->
<view class="form-group">
<text class="field-label">植物昵称</text>
<view class="custom-input-box">
<input class="native-input" placeholder="例如：小绿、旺财" placeholder-class="input-placeholder" value="{{newPlantName}}" bindinput="onNameInput" />
<!-- Section: 基本信息 -->
<view class="form-section">
<view class="section-title-bar">
<view class="section-dot"></view>
<text class="section-title-text">基本信息</text>
</view>
</view>
<view class="form-group">
<text class="field-label">摆放位置</text>
<view class="custom-input-box">
<input class="native-input" placeholder="例如：客厅、卧室" placeholder-class="input-placeholder" value="{{newPlantLocation}}" bindinput="onLocationInput" />
</view>
</view>
<view class="form-group">
<text class="field-label">入家日期</text>
<picker mode="date" value="{{newPlantDate}}" bindchange="onDateChange">
<view class="custom-input-box picker-box">
<text class="picker-text">{{newPlantDate}}</text>
<t-icon name="calendar" size="40rpx" color="#666" />
<view class="form-group">
<text class="field-label">植物昵称</text>
<view class="custom-input-box">
<input class="native-input" placeholder="例如：小绿、旺财" placeholder-class="input-placeholder" value="{{newPlantName}}" bindinput="onNameInput" />
</view>
</picker>
</view>
<view class="form-group">
<text class="field-label">摆放位置</text>
<view class="custom-input-box">
<input class="native-input" placeholder="例如：客厅、卧室" placeholder-class="input-placeholder" value="{{newPlantLocation}}" bindinput="onLocationInput" />
</view>
</view>
<view class="form-group">
<text class="field-label">入家日期</text>
<picker mode="date" value="{{newPlantDate}}" bindchange="onDateChange">
<view class="custom-input-box picker-box">
<text class="picker-text">{{newPlantDate}}</text>
<t-icon name="calendar" size="40rpx" color="#666" />
</view>
</picker>
</view>
</view>
<!-- Care Plan -->
<view class="care-section-group">
<view class="section-header-row">
<text class="field-label" style="margin-bottom: 0;">养护计划</text>
<!-- Section: 养护环境 -->
<view class="form-section">
<view class="section-title-bar">
<view class="section-dot"></view>
<text class="section-title-text">养护环境</text>
</view>
<view class="form-row">
<view class="form-group half">
<text class="field-label">花盆材质</text>
<view class="custom-input-box">
<input class="native-input" placeholder="红陶、塑料等" value="{{potMaterial}}" bindinput="onPotMaterialInput" />
</view>
</view>
<view class="form-group half">
<text class="field-label">花盆大小</text>
<view class="custom-input-box">
<input class="native-input" placeholder="20cm × 18cm" value="{{potSize}}" bindinput="onPotSizeInput" />
</view>
</view>
</view>
<view class="form-row">
<view class="form-group half">
<text class="field-label">光照条件</text>
<view class="custom-input-box">
<input class="native-input" placeholder="明亮散射光" value="{{sunlight}}" bindinput="onSunlightInput" />
</view>
</view>
<view class="form-group half">
<text class="field-label">植料/土壤</text>
<view class="custom-input-box">
<input class="native-input" placeholder="营养土、颗粒土" value="{{plantingMaterial}}" bindinput="onPlantingMaterialInput" />
</view>
</view>
</view>
</view>
<!-- Section: 养护计划 -->
<view class="form-section">
<view class="section-title-bar">
<view class="section-dot"></view>
<text class="section-title-text">养护计划</text>
<view class="add-task-btn-small" bindtap="handleAddCareTask">
<t-icon name="add" size="28rpx" />
<text>添加</text>
</view>
</view>
<!-- Empty state -->
<view wx:if="{{newCareTasks.length === 0}}" class="care-empty">
<t-icon name="tips" size="48rpx" color="#C5E1A5" />
<text class="care-empty-text">暂无养护事项，点击右上角添加</text>
</view>
<view class="care-list-styled">
<view wx:for="{{newCareTasks}}" wx:key="id" class="care-row-styled">
@@ -84,7 +136,7 @@
</view>
<view class="care-input-col freq-col">
<view class="custom-input-box small-box flex-row">
<input type="number" class="native-input center-text" style="width: 50rpx;" value="{{item.frequencyValue}}" bindinput="onTaskFreqInput" data-id="{{item.id}}" />
<input type="number" class="native-input center-text" style="width: 80rpx;" value="{{item.frequencyValue}}" bindinput="onTaskFreqInput" data-id="{{item.id}}" />
<text class="suffix-text">天</text>
</view>
</view>
@@ -94,11 +146,9 @@
</view>
</view>
<!-- Scroll anchor for newly added care items -->
<view id="care-list-bottom"></view>
</view>
<!-- Spacer for bottom button -->
<view style="height: 180rpx;"></view>
</scroll-view>
pages/garden/add/index.wxss
+154 -131
View File
@@ -5,7 +5,7 @@ page {
}
.add-plant-page {
background-color: #FFFFFF;
background-color: #F5F7F5;
height: 100vh;
display: flex;
flex-direction: column;
@@ -14,35 +14,20 @@ page {
.page-content {
height: calc(100vh - 140rpx - env(safe-area-inset-bottom));
padding: 32rpx 40rpx;
background: #FFFFFF;
padding: 24rpx 32rpx;
background: #F5F7F5;
box-sizing: border-box;
}
/* Hide scrollbar - multiple approaches for compatibility */
.page-content::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
}
/* For scroll-view component */
::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
scroll-view ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Upload Section */
/* ======== Upload Section ======== */
.upload-section {
margin: 0 0 40rpx;
margin: 0 0 24rpx;
display: flex;
justify-content: center;
}
@@ -50,9 +35,9 @@ scroll-view ::-webkit-scrollbar {
.image-upload-area {
width: 100%;
height: 240rpx;
border-radius: 32rpx;
border: 4rpx dashed #ddd; /* Match prototype dashed border */
background: #fafafa;
border-radius: 28rpx;
border: 4rpx dashed #C5E1A5;
background: #FAFFF5;
display: flex;
flex-direction: column;
align-items: center;
@@ -62,21 +47,16 @@ scroll-view ::-webkit-scrollbar {
transition: all 0.2s;
}
.uploaded-img {
width: 100%;
height: 100%;
border-radius: 32rpx; /* Matches container */
object-fit: cover;
}
.image-upload-area:active {
border-color: #558B2F; /* var(--primary) */
background: #F1F8E9;
}
.image-upload-area:active { opacity: 0.9; }
.image-upload-area.has-image {
border: none;
height: 360rpx; /* Taller when has image */
height: 360rpx;
}
.image-upload-area .uploaded-img {
width: 100%;
height: 100%;
}
.upload-placeholder {
@@ -87,41 +67,74 @@ scroll-view ::-webkit-scrollbar {
}
.upload-placeholder text {
color: #BDBDBD;
color: #9CA3AF;
font-size: 26rpx;
}
/* Form Styles */
/* ======== Section Cards ======== */
.form-section {
background: #FFFFFF;
border-radius: 28rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.03);
}
.section-title-bar {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 28rpx;
}
.section-dot {
width: 8rpx;
height: 32rpx;
border-radius: 4rpx;
background: linear-gradient(180deg, #558B2F, #689F38);
}
.section-title-text {
font-size: 30rpx;
font-weight: 700;
color: #1F2937;
flex: 1;
}
/* ======== Form Fields ======== */
.form-group {
margin-bottom: 40rpx;
margin-bottom: 28rpx;
}
.form-group:last-child {
margin-bottom: 0;
}
.field-label {
display: block;
font-size: 28rpx;
font-size: 26rpx;
font-weight: 600;
color: #263238;
margin-bottom: 16rpx;
color: #374151;
margin-bottom: 12rpx;
}
.custom-input-box {
background: #f9f9f9;
border: 2rpx solid #e0e0e0;
border-radius: 24rpx;
padding: 24rpx 32rpx;
color: #263238;
font-size: 30rpx;
background: #F9FAFB;
border: 2rpx solid #E5E7EB;
border-radius: 20rpx;
padding: 22rpx 28rpx;
color: #1F2937;
font-size: 28rpx;
transition: all 0.2s;
}
.custom-input-box:active, .custom-input-box:focus-within {
.custom-input-box:focus-within {
background: #FFFFFF;
border-color: #558B2F;
box-shadow: 0 0 0 4rpx rgba(85, 139, 47, 0.1);
}
.input-placeholder {
color: #999;
}
.input-placeholder { color: #9CA3AF; }
.native-input {
width: 100%;
@@ -134,109 +147,93 @@ scroll-view ::-webkit-scrollbar {
align-items: center;
}
/* Care Section */
.care-section-group {
margin-top: 24rpx;
margin-bottom: 48rpx;
}
.section-header-row {
/* Two-column layout */
.form-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
gap: 20rpx;
margin-bottom: 28rpx;
}
.form-row:last-child {
margin-bottom: 0;
}
.form-group.half {
flex: 1;
margin-bottom: 0;
}
/* ======== Care Plan Section ======== */
.add-task-btn-small {
font-size: 26rpx;
font-size: 24rpx;
color: #558B2F;
background: #F1F8E9;
border: 2rpx dashed #558B2F;
padding: 12rpx 20rpx;
border: 2rpx dashed #A5D6A7;
padding: 10rpx 20rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
gap: 8rpx;
gap: 6rpx;
margin-left: auto;
}
.add-task-btn-small:active {
background: #E8F5E9;
}
/* Care empty state */
.care-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 48rpx 0 16rpx;
gap: 16rpx;
}
.care-empty-text {
font-size: 24rpx;
color: #9CA3AF;
}
.care-list-styled {
display: flex;
flex-direction: column;
gap: 24rpx;
gap: 20rpx;
}
.care-row-styled {
display: flex;
align-items: center;
gap: 16rpx;
gap: 12rpx;
}
.care-input-col.task-col {
flex: 1;
}
.care-input-col.freq-col {
flex-shrink: 0;
}
.care-input-col.task-col { flex: 1; }
.care-input-col.freq-col { flex-shrink: 0; }
.small-box {
padding: 24rpx;
background: #f9f9f9;
padding: 20rpx;
background: #F9FAFB;
}
.flex-row {
display: flex;
align-items: center;
padding-right: 20rpx;
padding-right: 16rpx;
}
.center-text {
text-align: center;
}
.center-text { text-align: center; }
.suffix-text {
color: #888;
font-size: 28rpx;
color: #9CA3AF;
font-size: 26rpx;
font-weight: 500;
}
.delete-btn-pink {
width: 84rpx;
height: 84rpx;
background: #FFEBEE;
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
color: #EF5350;
flex-shrink: 0;
}
/* Footer */
.page-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 32rpx 40rpx calc(32rpx + env(safe-area-inset-bottom));
background: white;
z-index: 100;
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.02);
}
/* Footer Button */
.page-footer t-button {
--td-button-font-weight: 600;
--td-button-primary-bg-color: #558B2F;
--td-button-primary-border-color: #558B2F;
box-shadow: 0 8rpx 32rpx rgba(85, 139, 47, 0.3);
}
/* Care Icon Button */
.care-icon-btn {
width: 84rpx;
height: 84rpx;
border-radius: 24rpx;
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -244,17 +241,49 @@ scroll-view ::-webkit-scrollbar {
transition: all 0.2s;
}
.care-icon-btn:active {
.care-icon-btn:active { transform: scale(0.95); }
.delete-btn-pink {
width: 80rpx;
height: 80rpx;
background: #FFF5F5;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
color: #EF5350;
flex-shrink: 0;
transition: all 0.15s;
}
.delete-btn-pink:active {
background: #FFEBEE;
transform: scale(0.95);
}
/* Icon Picker Popup */
.icon-picker-mask {
/* ======== Footer ======== */
.page-footer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
bottom: 0;
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
background: white;
z-index: 100;
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.03);
}
.page-footer t-button {
--td-button-font-weight: 600;
--td-button-primary-bg-color: #558B2F;
--td-button-primary-border-color: #558B2F;
box-shadow: 0 8rpx 32rpx rgba(85, 139, 47, 0.3);
}
/* ======== Icon Picker Popup ======== */
.icon-picker-mask {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
opacity: 0;
@@ -269,9 +298,7 @@ scroll-view ::-webkit-scrollbar {
.icon-picker-popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
left: 0; right: 0; bottom: 0;
background: #fff;
border-radius: 32rpx 32rpx 0 0;
z-index: 1001;
@@ -280,9 +307,7 @@ scroll-view ::-webkit-scrollbar {
padding-bottom: env(safe-area-inset-bottom);
}
.icon-picker-popup.show {
transform: translateY(0);
}
.icon-picker-popup.show { transform: translateY(0); }
.icon-picker-header {
display: flex;
@@ -323,9 +348,7 @@ scroll-view ::-webkit-scrollbar {
padding: 20rpx 0;
}
.icon-picker-item:active {
opacity: 0.7;
}
.icon-picker-item:active { opacity: 0.7; }
.icon-circle {
width: 96rpx;