feat: Add plant identification feature with image upload, classification results display, and integration into the wiki page.
This commit is contained in:
Blizzard
+165
-136
@@ -12,7 +12,6 @@ Page({
|
||||
isLocalImage: false,
|
||||
uploadedImageId: '',
|
||||
|
||||
// Extra fields requested by user struct
|
||||
potMaterial: '',
|
||||
potSize: '',
|
||||
sunlight: '',
|
||||
@@ -27,7 +26,6 @@ Page({
|
||||
{ label: '从手机相册选取', value: 'album' }
|
||||
],
|
||||
|
||||
// Icon picker
|
||||
careTaskIcons: [],
|
||||
showIconPicker: false,
|
||||
currentEditingTaskId: null
|
||||
@@ -35,44 +33,26 @@ Page({
|
||||
|
||||
onLoad(options) {
|
||||
const { id } = options;
|
||||
if (!id) {
|
||||
wx.navigateBack();
|
||||
return;
|
||||
}
|
||||
if (!id) { wx.navigateBack(); return; }
|
||||
|
||||
this.setData({
|
||||
plantId: id,
|
||||
careTaskIcons: CARE_TASK_ICONS
|
||||
});
|
||||
this.setData({ plantId: id, careTaskIcons: CARE_TASK_ICONS });
|
||||
|
||||
// Try to receive data from opener page first
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
let hasReceivedData = false;
|
||||
|
||||
|
||||
|
||||
if (eventChannel) {
|
||||
// Listen for events from the opener page
|
||||
eventChannel.on('acceptDataFromOpenerPage', (data) => {
|
||||
|
||||
if (data && data.plant) {
|
||||
hasReceivedData = true;
|
||||
// Directly render with passed data
|
||||
this.renderPlantUI(data.plant);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const isFromDetail = options.source === 'detail';
|
||||
|
||||
// If from detail, wait longer for event channel. If direct open, fetch immediately.
|
||||
const waitTime = isFromDetail ? 2000 : 0;
|
||||
|
||||
setTimeout(() => {
|
||||
if (!hasReceivedData) {
|
||||
this.fetchPlantDetail(id);
|
||||
}
|
||||
}, waitTime);
|
||||
if (!hasReceivedData) this.fetchPlantDetail(id);
|
||||
}, isFromDetail ? 2000 : 0);
|
||||
},
|
||||
|
||||
fetchPlantDetail(id) {
|
||||
@@ -86,57 +66,37 @@ Page({
|
||||
renderPlantUI(plant) {
|
||||
const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'water') || CARE_TASK_ICONS[0];
|
||||
|
||||
// Parse carePlans (careSchedule is from detail UI structure, carePlans is from backend)
|
||||
// If passed from detail page, it might already have 'careSchedule' with parsed icons.
|
||||
// But backend structure 'carePlans' needs parsing.
|
||||
// Let's handle both cases robustly.
|
||||
|
||||
let tasks = [];
|
||||
if (plant.careSchedule) {
|
||||
// Data from Detail Page
|
||||
tasks = plant.careSchedule.map(cp => ({
|
||||
id: cp.id,
|
||||
name: cp.name,
|
||||
period: cp.period,
|
||||
taskIcon: cp.taskIcon
|
||||
id: cp.id, name: cp.name, period: cp.period,
|
||||
taskIcon: cp.taskIcon, isNew: false,
|
||||
_original: { name: cp.name, period: cp.period, icon: JSON.stringify(cp.taskIcon || {}) }
|
||||
}));
|
||||
} else if (plant.carePlans) {
|
||||
// Data from Backend
|
||||
tasks = plant.carePlans.map(cp => {
|
||||
let iconObj = defaultIcon;
|
||||
if (typeof cp.icon === 'string' && cp.icon.startsWith('{')) {
|
||||
try {
|
||||
iconObj = JSON.parse(cp.icon);
|
||||
} catch (e) { }
|
||||
try { iconObj = JSON.parse(cp.icon); } catch (e) { }
|
||||
}
|
||||
const iconStr = JSON.stringify(iconObj);
|
||||
return {
|
||||
id: cp.id,
|
||||
name: cp.name,
|
||||
period: cp.period,
|
||||
taskIcon: iconObj
|
||||
id: cp.id, name: cp.name, period: cp.period,
|
||||
taskIcon: iconObj, isNew: false,
|
||||
_original: { name: cp.name, period: cp.period, icon: iconStr }
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Map images: get first one if exists and handle path resolution
|
||||
let imageUrl = '';
|
||||
let imageId = '';
|
||||
|
||||
let imageUrl = '', imageId = '';
|
||||
if (plant.imgList && plant.imgList.length > 0) {
|
||||
imageUrl = plant.imgList[0].url || '';
|
||||
imageId = plant.imgList[0].id || '';
|
||||
}
|
||||
|
||||
// Path resolution for local vs remote
|
||||
if (imageUrl && !imageUrl.startsWith('http') && !imageUrl.startsWith('/') && !imageUrl.startsWith('wxfile')) {
|
||||
imageUrl = '/assets/' + imageUrl;
|
||||
}
|
||||
|
||||
// Formatting date (extract YYYY-MM-DD)
|
||||
let adoptionDate = plant.plantTime || '';
|
||||
if (adoptionDate.includes('T')) {
|
||||
adoptionDate = adoptionDate.split('T')[0];
|
||||
}
|
||||
if (adoptionDate.includes('T')) adoptionDate = adoptionDate.split('T')[0];
|
||||
|
||||
this.setData({
|
||||
newPlantName: plant.name || '',
|
||||
@@ -150,20 +110,23 @@ Page({
|
||||
plantingMaterial: plant.plantingMaterial || '',
|
||||
newCareTasks: tasks
|
||||
});
|
||||
|
||||
// Store original base fields for change detection
|
||||
this._originalPlant = {
|
||||
name: plant.name || '',
|
||||
placement: plant.placement || '',
|
||||
potMaterial: plant.potMaterial || '',
|
||||
potSize: plant.potSize || '',
|
||||
sunlight: plant.sunlight || '',
|
||||
plantingMaterial: plant.plantingMaterial || ''
|
||||
};
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
showActionSheet() {
|
||||
this.setData({ showActionSheet: true });
|
||||
},
|
||||
|
||||
onActionSheetCancel() {
|
||||
this.setData({ showActionSheet: false });
|
||||
},
|
||||
handleBack() { wx.navigateBack(); },
|
||||
|
||||
// ======== Image Upload ========
|
||||
showActionSheet() { this.setData({ showActionSheet: true }); },
|
||||
onActionSheetCancel() { this.setData({ showActionSheet: false }); },
|
||||
onActionSheetSelected(e) {
|
||||
const { value } = e.detail.selected;
|
||||
this.handleImageUpload(value);
|
||||
@@ -172,28 +135,18 @@ Page({
|
||||
|
||||
handleImageUpload(sourceType) {
|
||||
wx.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: [sourceType],
|
||||
camera: 'back',
|
||||
count: 1, mediaType: ['image'], sourceType: [sourceType], camera: 'back',
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFiles[0].tempFilePath;
|
||||
this.setData({
|
||||
newPlantImage: tempFilePath,
|
||||
isLocalImage: true
|
||||
});
|
||||
|
||||
wx.showLoading({ title: '上传图片...' });
|
||||
this.setData({ newPlantImage: tempFilePath, isLocalImage: true });
|
||||
wx.showLoading({ title: '上传中...' });
|
||||
request.upload(tempFilePath).then(data => {
|
||||
wx.hideLoading();
|
||||
const fileData = data?.file || {};
|
||||
if (fileData.id) {
|
||||
this.setData({
|
||||
uploadedImageId: fileData.id,
|
||||
newPlantImage: fileData.url
|
||||
});
|
||||
this.setData({ uploadedImageId: fileData.id, newPlantImage: fileData.url });
|
||||
}
|
||||
}).catch(err => {
|
||||
}).catch(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({ title: '上传失败', icon: 'none' });
|
||||
});
|
||||
@@ -201,102 +154,113 @@ Page({
|
||||
});
|
||||
},
|
||||
|
||||
// ======== Form Inputs ========
|
||||
onNameInput(e) { this.setData({ newPlantName: e.detail.value }); },
|
||||
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 }); },
|
||||
|
||||
// ======== Care Plan: Local Add ========
|
||||
handleAddCareTask() {
|
||||
const tasks = this.data.newCareTasks;
|
||||
const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'other') || CARE_TASK_ICONS[0];
|
||||
|
||||
tasks.push({
|
||||
const tasks = [...this.data.newCareTasks, {
|
||||
id: 'new_' + Date.now(),
|
||||
name: '',
|
||||
period: 1,
|
||||
period: 7,
|
||||
iconId: 'other',
|
||||
taskIcon: defaultIcon
|
||||
});
|
||||
taskIcon: defaultIcon,
|
||||
isNew: true // Mark as new, not yet saved to backend
|
||||
}];
|
||||
|
||||
this.setData({
|
||||
newCareTasks: tasks,
|
||||
scrollIntoViewId: ''
|
||||
}, () => {
|
||||
this.setData({ newCareTasks: tasks, scrollIntoViewId: '' }, () => {
|
||||
setTimeout(() => {
|
||||
this.setData({ scrollIntoViewId: 'care-list-bottom' });
|
||||
}, 50);
|
||||
});
|
||||
},
|
||||
|
||||
// ======== Care Plan: Delete ========
|
||||
handleRemoveCareTask(e) {
|
||||
const id = e.currentTarget.dataset.id;
|
||||
const tasks = this.data.newCareTasks.filter(t => t.id !== id);
|
||||
this.setData({ newCareTasks: tasks });
|
||||
const task = this.data.newCareTasks.find(t => t.id === id);
|
||||
|
||||
// New (unsaved) tasks: just remove locally
|
||||
if (task && task.isNew) {
|
||||
const tasks = this.data.newCareTasks.filter(t => t.id !== id);
|
||||
this.setData({ newCareTasks: tasks });
|
||||
return;
|
||||
}
|
||||
|
||||
// Existing tasks: confirm then call API
|
||||
wx.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个养护事项吗？',
|
||||
confirmColor: '#EF5350',
|
||||
success: (res) => {
|
||||
if (!res.confirm) return;
|
||||
wx.showLoading({ title: '删除中...' });
|
||||
request.get('/plant/plan/delete', { id: id }).then(() => {
|
||||
wx.hideLoading();
|
||||
const tasks = this.data.newCareTasks.filter(t => t.id !== id);
|
||||
this.setData({ newCareTasks: tasks });
|
||||
wx.showToast({ title: '已删除', icon: 'success' });
|
||||
}).catch(err => {
|
||||
wx.hideLoading();
|
||||
console.error('Delete care plan failed', err);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// ======== Care Task Inline Editing ========
|
||||
onTaskNameInput(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
const tasks = this.data.newCareTasks.map(t => t.id === id ? { ...t, name: e.detail.value } : t);
|
||||
const tasks = this.data.newCareTasks.map(t =>
|
||||
t.id === id ? { ...t, name: e.detail.value } : t
|
||||
);
|
||||
this.setData({ newCareTasks: tasks });
|
||||
},
|
||||
|
||||
onTaskFreqInput(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
const tasks = this.data.newCareTasks.map(t => t.id === id ? { ...t, period: parseInt(e.detail.value) || 1 } : t);
|
||||
const raw = e.detail.value;
|
||||
const val = raw === '' ? '' : (parseInt(raw) || '');
|
||||
const tasks = this.data.newCareTasks.map(t =>
|
||||
t.id === id ? { ...t, period: val } : t
|
||||
);
|
||||
this.setData({ newCareTasks: tasks });
|
||||
},
|
||||
|
||||
// ======== Icon Picker ========
|
||||
showIconPickerForTask(e) {
|
||||
const taskId = e.currentTarget.dataset.id;
|
||||
this.setData({
|
||||
showIconPicker: true,
|
||||
currentEditingTaskId: taskId
|
||||
});
|
||||
this.setData({ showIconPicker: true, currentEditingTaskId: e.currentTarget.dataset.id });
|
||||
},
|
||||
|
||||
hideIconPicker() {
|
||||
this.setData({
|
||||
showIconPicker: false,
|
||||
currentEditingTaskId: null
|
||||
});
|
||||
this.setData({ showIconPicker: false, currentEditingTaskId: null });
|
||||
},
|
||||
|
||||
selectIcon(e) {
|
||||
const iconId = e.currentTarget.dataset.iconid;
|
||||
const { currentEditingTaskId, careTaskIcons, newCareTasks } = this.data;
|
||||
|
||||
const selectedIcon = careTaskIcons.find(i => i.id === iconId);
|
||||
|
||||
if (selectedIcon && currentEditingTaskId) {
|
||||
const updatedTasks = newCareTasks.map(t => {
|
||||
if (t.id === currentEditingTaskId) {
|
||||
return {
|
||||
...t,
|
||||
iconId: iconId,
|
||||
taskIcon: selectedIcon,
|
||||
name: t.name || selectedIcon.name
|
||||
};
|
||||
return { ...t, iconId, taskIcon: selectedIcon, name: t.name || selectedIcon.name };
|
||||
}
|
||||
return t;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
newCareTasks: updatedTasks,
|
||||
showIconPicker: false,
|
||||
currentEditingTaskId: null
|
||||
});
|
||||
this.setData({ newCareTasks: updatedTasks, showIconPicker: false, currentEditingTaskId: null });
|
||||
}
|
||||
},
|
||||
|
||||
// ======== Save All ========
|
||||
handleSavePlant() {
|
||||
const {
|
||||
plantId, newPlantName, newPlantLocation, potMaterial, potSize,
|
||||
sunlight, plantingMaterial
|
||||
sunlight, plantingMaterial, newCareTasks
|
||||
} = this.data;
|
||||
|
||||
if (!newPlantName) {
|
||||
@@ -304,23 +268,93 @@ Page({
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
// Validate all care task periods
|
||||
for (const task of newCareTasks) {
|
||||
const p = parseInt(task.period);
|
||||
if (!p || p < 1) {
|
||||
wx.showToast({ title: `"${task.name || '未命名事项'}" 的周期天数不合法`, icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!task.name) {
|
||||
wx.showToast({ title: '请填写所有养护事项名称', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Split tasks into existing and new
|
||||
const existingTasks = newCareTasks.filter(t => !t.isNew);
|
||||
const newTasks = newCareTasks.filter(t => t.isNew);
|
||||
|
||||
// Only include MODIFIED existing tasks in carePlans
|
||||
const modifiedPlans = existingTasks.filter(task => {
|
||||
if (!task._original) return false;
|
||||
const currentIcon = JSON.stringify(task.taskIcon || {});
|
||||
return task.name !== task._original.name ||
|
||||
parseInt(task.period) !== task._original.period ||
|
||||
currentIcon !== task._original.icon;
|
||||
}).map(task => ({
|
||||
id: String(task.id),
|
||||
name: task.name,
|
||||
period: parseInt(task.period) || 1,
|
||||
icon: JSON.stringify(task.taskIcon || {})
|
||||
}));
|
||||
|
||||
// Build payload for /plant/update (UpdateMyPlant struct)
|
||||
const updatePayload = {
|
||||
id: plantId,
|
||||
name: newPlantName,
|
||||
placement: newPlantLocation || '',
|
||||
potMaterial: potMaterial || '',
|
||||
potSize: potSize || '',
|
||||
sunlight: sunlight || '',
|
||||
plantingMaterial: plantingMaterial || ''
|
||||
plantingMaterial: plantingMaterial || '',
|
||||
carePlans: modifiedPlans
|
||||
};
|
||||
|
||||
request.post('/plant/update', payload).then(() => {
|
||||
wx.showToast({ title: '修改成功', icon: 'success' });
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
// Build payload for /plant/plan/add if there are new tasks (AddPlans struct)
|
||||
const addPayload = newTasks.length > 0 ? {
|
||||
carePlan: newTasks.map(task => ({
|
||||
plantId: plantId,
|
||||
name: task.name,
|
||||
period: parseInt(task.period) || 1,
|
||||
icon: JSON.stringify(task.taskIcon || {})
|
||||
}))
|
||||
} : null;
|
||||
|
||||
// Check if base fields changed
|
||||
const orig = this._originalPlant || {};
|
||||
const baseChanged = newPlantName !== orig.name ||
|
||||
(newPlantLocation || '') !== orig.placement ||
|
||||
(potMaterial || '') !== orig.potMaterial ||
|
||||
(potSize || '') !== orig.potSize ||
|
||||
(sunlight || '') !== orig.sunlight ||
|
||||
(plantingMaterial || '') !== orig.plantingMaterial;
|
||||
|
||||
const needUpdate = baseChanged || modifiedPlans.length > 0;
|
||||
const needAdd = addPayload !== null;
|
||||
|
||||
if (!needUpdate && !needAdd) {
|
||||
wx.showToast({ title: '没有修改', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
wx.showLoading({ title: '保存中...' });
|
||||
|
||||
const promises = [];
|
||||
if (needUpdate) {
|
||||
promises.push(request.post('/plant/update', updatePayload));
|
||||
}
|
||||
if (needAdd) {
|
||||
promises.push(request.post('/plant/plan/add', addPayload));
|
||||
}
|
||||
|
||||
Promise.all(promises).then(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({ title: '保存成功', icon: 'success' });
|
||||
setTimeout(() => { wx.navigateBack(); }, 1000);
|
||||
}).catch(err => {
|
||||
console.error('Update plant failed', err);
|
||||
wx.hideLoading();
|
||||
console.error('Save failed', err);
|
||||
});
|
||||
},
|
||||
|
||||
@@ -331,13 +365,8 @@ Page({
|
||||
confirmColor: '#EF5350',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// Assuming there might be a delete API later, but user didn't provide one.
|
||||
// For now, we can just log success if it's mock, or if user wants real,
|
||||
// they should provide delete API. I'll just keep the UI feedback.
|
||||
wx.showToast({ title: '已删除', icon: 'success' });
|
||||
setTimeout(() => {
|
||||
wx.switchTab({ url: '/pages/garden/index' });
|
||||
}, 1000);
|
||||
setTimeout(() => { wx.switchTab({ url: '/pages/garden/index' }); }, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -19,14 +19,10 @@
|
||||
height="100%"
|
||||
t-class="uploaded-img"
|
||||
/>
|
||||
|
||||
<!-- Placeholder shown when NO image -->
|
||||
<view wx:if="{{!newPlantImage}}" class="upload-placeholder">
|
||||
<t-icon name="upload" size="64rpx" color="#999" />
|
||||
<text>点击设置封面图</text>
|
||||
</view>
|
||||
|
||||
<!-- Update hint shown when HAS image (for edit UX) -->
|
||||
<view wx:if="{{newPlantImage}}" class="edit-overlay">
|
||||
<t-icon name="camera" size="32rpx" color="#FFF" />
|
||||
<text>更换照片</text>
|
||||
@@ -34,72 +30,98 @@
|
||||
</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>
|
||||
|
||||
<!-- Advanced Fields from Struct -->
|
||||
<view class="form-group">
|
||||
<text class="field-label">花盆材质</text>
|
||||
<view class="custom-input-box">
|
||||
<input class="native-input" placeholder="例如：红陶、塑料、陶瓷" value="{{potMaterial}}" bindinput="onPotMaterialInput" />
|
||||
</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>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="field-label">花盆大小</text>
|
||||
<view class="custom-input-box">
|
||||
<input class="native-input" placeholder="例如：直径 20cm × 高度 18cm" value="{{potSize}}" bindinput="onPotSizeInput" />
|
||||
<!-- 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>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="field-label">光照条件</text>
|
||||
<view class="custom-input-box">
|
||||
<input class="native-input" placeholder="例如：每日12小时、明亮散射光" value="{{sunlight}}" bindinput="onSunlightInput" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<text class="field-label">植料/土壤</text>
|
||||
<view class="custom-input-box">
|
||||
<input class="native-input" placeholder="例如：营养土、颗粒土" value="{{plantingMaterial}}" bindinput="onPlantingMaterialInput" />
|
||||
</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 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">
|
||||
<view wx:for="{{newCareTasks}}" wx:key="id" class="care-row-styled {{item.isNew ? 'care-row-new' : ''}}">
|
||||
<!-- New badge -->
|
||||
<view wx:if="{{item.isNew}}" class="new-badge">新</view>
|
||||
|
||||
<!-- Icon Selector -->
|
||||
<view
|
||||
class="care-icon-btn"
|
||||
@@ -121,7 +143,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.period}}" bindinput="onTaskFreqInput" data-id="{{item.id}}" />
|
||||
<input type="number" class="native-input center-text" style="width: 80rpx;" value="{{item.period}}" bindinput="onTaskFreqInput" data-id="{{item.id}}" />
|
||||
<text class="suffix-text">天</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -131,19 +153,17 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Scroll anchor for newly added care items -->
|
||||
<view id="care-list-bottom"></view>
|
||||
</view>
|
||||
|
||||
<!-- Delete Button for Edit Page -->
|
||||
<view class="delete-section" style="margin-top: 40rpx; padding-bottom: 40rpx;">
|
||||
<view class="delete-section" style="margin-top: 16rpx; padding-bottom: 40rpx;">
|
||||
<view class="delete-page-btn" bindtap="handleDeletePlant">
|
||||
<t-icon name="delete" size="32rpx" />
|
||||
<text>删除植物档案</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Spacer for bottom button -->
|
||||
<view style="height: 180rpx;"></view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
+162
-100
@@ -5,7 +5,7 @@ page {
|
||||
}
|
||||
|
||||
.add-plant-page {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #F5F7F5;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -14,21 +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 */
|
||||
::-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;
|
||||
}
|
||||
@@ -36,9 +35,9 @@ page {
|
||||
.image-upload-area {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
border-radius: 32rpx;
|
||||
border: 4rpx dashed #ddd;
|
||||
background: #fafafa;
|
||||
border-radius: 28rpx;
|
||||
border: 4rpx dashed #C5E1A5;
|
||||
background: #FAFFF5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -48,9 +47,7 @@ page {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.image-upload-area:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.image-upload-area:active { opacity: 0.9; }
|
||||
|
||||
.image-upload-area.has-image {
|
||||
border: none;
|
||||
@@ -70,11 +67,10 @@ page {
|
||||
}
|
||||
|
||||
.upload-placeholder text {
|
||||
color: #BDBDBD;
|
||||
color: #9CA3AF;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* Edit Overlay Hint */
|
||||
.edit-overlay {
|
||||
position: absolute;
|
||||
bottom: 24rpx;
|
||||
@@ -86,42 +82,75 @@ page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: #FFFFFF;
|
||||
color: #FFF;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 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: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,113 +163,171 @@ page {
|
||||
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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.care-input-col.task-col {
|
||||
flex: 1;
|
||||
/* New task highlight */
|
||||
.care-row-new {
|
||||
background: #FAFFF5;
|
||||
border: 2rpx dashed #C5E1A5;
|
||||
border-radius: 24rpx;
|
||||
padding: 12rpx;
|
||||
margin: -12rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.care-input-col.freq-col {
|
||||
flex-shrink: 0;
|
||||
.new-badge {
|
||||
position: absolute;
|
||||
top: -4rpx;
|
||||
right: -4rpx;
|
||||
background: linear-gradient(135deg, #558B2F, #689F38);
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
font-weight: 700;
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 12rpx 24rpx 12rpx 12rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Care Icon Button */
|
||||
.care-icon-btn {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.care-icon-btn:active { transform: scale(0.95); }
|
||||
|
||||
.delete-btn-pink {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
background: #FFEBEE;
|
||||
border-radius: 24rpx;
|
||||
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 Button for Edit Page */
|
||||
.delete-btn-pink:active {
|
||||
background: #FFEBEE;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* ======== Delete Plant ======== */
|
||||
.delete-page-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
color: #FF5252;
|
||||
color: #EF5350;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
padding: 20rpx;
|
||||
padding: 24rpx;
|
||||
border: 2rpx solid #FFCDD2;
|
||||
border-radius: 24rpx;
|
||||
background: #FFF9F9;
|
||||
}
|
||||
|
||||
.delete-page-btn:active {
|
||||
background: #FFEBEE;
|
||||
}
|
||||
.delete-page-btn:active { background: #FFEBEE; }
|
||||
|
||||
/* Footer */
|
||||
/* ======== Footer ======== */
|
||||
.page-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 32rpx 40rpx calc(32rpx + env(safe-area-inset-bottom));
|
||||
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.02);
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.page-footer t-button {
|
||||
@@ -250,29 +337,10 @@ page {
|
||||
box-shadow: 0 8rpx 32rpx rgba(85, 139, 47, 0.3);
|
||||
}
|
||||
|
||||
/* Care Icon Button */
|
||||
.care-icon-btn {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.care-icon-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Icon Picker Popup */
|
||||
/* ======== Icon Picker Popup ======== */
|
||||
.icon-picker-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
@@ -287,9 +355,7 @@ page {
|
||||
|
||||
.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;
|
||||
@@ -298,9 +364,7 @@ page {
|
||||
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;
|
||||
@@ -341,9 +405,7 @@ page {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.icon-picker-item:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.icon-picker-item:active { opacity: 0.7; }
|
||||
|
||||
.icon-circle {
|
||||
width: 96rpx;
|
||||
|
||||
Reference in New Issue
Block a user