init: initial commit

pages/plant-detail/edit/index.js

@@ -0,0 +1,248 @@
+// pages/plant-detail/edit/index.js
+import { MOCK_PLANTS, CARE_TASK_ICONS } from '../../../utils/mockData';
+
+Page({
+    data: {
+        plantId: '',
+        newPlantName: '',
+        newPlantLocation: '',
+        newPlantDate: '',
+        newPlantImage: null,
+        isLocalImage: false,
+        newCareTasks: [],
+        scrollIntoViewId: '',
+
+        showActionSheet: false,
+        actionSheetItems: [
+            { label: '拍摄', value: 'camera' },
+            { label: '从手机相册选取', value: 'album' }
+        ],
+
+        // Icon picker
+        careTaskIcons: [],
+        showIconPicker: false,
+        currentEditingTaskId: null
+    },
+
+    onLoad(options) {
+        const { id } = options;
+        if (!id) {
+            wx.navigateBack();
+            return;
+        }
+
+        const plant = MOCK_PLANTS.find(p => p.id === id);
+        if (!plant) {
+            wx.showToast({ title: '植物不存在', icon: 'error' });
+            setTimeout(() => wx.navigateBack(), 1500);
+            return;
+        }
+
+        const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'water') || CARE_TASK_ICONS[0];
+
+        // Deep copy tasks and ensure icons
+        let tasks = plant.careSchedule ? JSON.parse(JSON.stringify(plant.careSchedule)) : [];
+        tasks = tasks.map(task => {
+            const icon = CARE_TASK_ICONS.find(i => i.id === task.iconId) || defaultIcon;
+            return { ...task, taskIcon: icon };
+        });
+
+        // Set default date if not present (today)
+        let adoptionDate = plant.adoptionDate;
+        if (!adoptionDate) {
+            const now = new Date();
+            adoptionDate = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
+        }
+
+        this.setData({
+            plantId: id,
+            newPlantName: plant.name || '',
+            newPlantLocation: plant.location || '',
+            newPlantDate: adoptionDate,
+            newPlantImage: plant.images && plant.images.length > 0 ? plant.images[0] : null,
+            newCareTasks: tasks,
+            careTaskIcons: CARE_TASK_ICONS
+        });
+    },
+
+    handleBack() {
+        wx.navigateBack();
+    },
+
+    showActionSheet() {
+        this.setData({ showActionSheet: true });
+    },
+
+    onActionSheetCancel() {
+        this.setData({ showActionSheet: false });
+    },
+
+    onActionSheetSelected(e) {
+        const { value } = e.detail.selected;
+        this.handleImageUpload(value);
+        this.setData({ showActionSheet: false });
+    },
+
+    handleImageUpload(sourceType) {
+        wx.chooseMedia({
+            count: 1,
+            mediaType: ['image'],
+            sourceType: [sourceType],
+            camera: 'back',
+            success: (res) => {
+                const tempFilePath = res.tempFiles[0].tempFilePath;
+                this.setData({
+                    newPlantImage: tempFilePath,
+                    isLocalImage: true
+                });
+            }
+        });
+    },
+
+    onNameInput(e) { this.setData({ newPlantName: e.detail.value }); },
+    onLocationInput(e) { this.setData({ newPlantLocation: e.detail.value }); },
+    onDateChange(e) { this.setData({ newPlantDate: e.detail.value }); },
+
+    handleAddCareTask() {
+        const tasks = this.data.newCareTasks;
+        const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'other') || CARE_TASK_ICONS[0];
+
+        tasks.push({
+            id: Date.now().toString(),
+            taskName: '',
+            frequencyValue: 1,
+            frequencyUnit: 'day',
+            iconId: 'other',
+            taskIcon: defaultIcon
+        });
+
+        this.setData({
+            newCareTasks: tasks,
+            scrollIntoViewId: ''
+        }, () => {
+            setTimeout(() => {
+                this.setData({ scrollIntoViewId: 'care-list-bottom' });
+            }, 50);
+        });
+    },
+
+    handleRemoveCareTask(e) {
+        const id = e.currentTarget.dataset.id;
+        const tasks = this.data.newCareTasks.filter(t => t.id !== id);
+        this.setData({ newCareTasks: tasks });
+    },
+
+    onTaskNameInput(e) {
+        const { id } = e.currentTarget.dataset;
+        const tasks = this.data.newCareTasks.map(t => t.id === id ? { ...t, taskName: 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, frequencyValue: parseInt(e.detail.value) || 1 } : t);
+        this.setData({ newCareTasks: tasks });
+    },
+
+    showIconPickerForTask(e) {
+        const taskId = e.currentTarget.dataset.id;
+        this.setData({
+            showIconPicker: true,
+            currentEditingTaskId: taskId
+        });
+    },
+
+    hideIconPicker() {
+        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,
+                        taskName: t.taskName || selectedIcon.name
+                    };
+                }
+                return t;
+            });
+
+            this.setData({
+                newCareTasks: updatedTasks,
+                showIconPicker: false,
+                currentEditingTaskId: null
+            });
+        }
+    },
+
+    handleSavePlant() {
+        if (!this.data.newPlantName) {
+            wx.showToast({ title: '请输入植物名称', icon: 'none' });
+            return;
+        }
+
+        const plantIndex = MOCK_PLANTS.findIndex(p => p.id === this.data.plantId);
+        if (plantIndex === -1) return;
+
+        const adoption = new Date(this.data.newPlantDate);
+        const today = new Date();
+        const diffTime = Math.abs(today.getTime() - adoption.getTime());
+        const daysPlanted = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) || 0;
+
+        const updatedPlant = {
+            ...MOCK_PLANTS[plantIndex],
+            name: this.data.newPlantName,
+            location: this.data.newPlantLocation || '',
+            adoptionDate: this.data.newPlantDate,
+            images: [this.data.newPlantImage],
+            daysPlanted: daysPlanted,
+            careSchedule: this.data.newCareTasks.map(task => ({
+                id: task.id,
+                taskName: task.taskName,
+                frequencyValue: task.frequencyValue,
+                frequencyUnit: task.frequencyUnit,
+                iconId: task.iconId,
+                taskIcon: task.taskIcon
+            }))
+        };
+
+        MOCK_PLANTS[plantIndex] = updatedPlant;
+
+        wx.showToast({ title: '修改成功', icon: 'success' });
+
+        setTimeout(() => {
+            wx.navigateBack();
+        }, 1000);
+    },
+
+    handleDeletePlant() {
+        wx.showModal({
+            title: '确认删除',
+            content: '确定要删除这个植物吗？删除后无法恢复。',
+            confirmColor: '#EF5350',
+            success: (res) => {
+                if (res.confirm) {
+                    const idx = MOCK_PLANTS.findIndex(p => p.id === this.data.plantId);
+                    if (idx > -1) {
+                        MOCK_PLANTS.splice(idx, 1);
+                        wx.showToast({ title: '已删除', icon: 'success' });
+                        setTimeout(() => {
+                            wx.switchTab({ url: '/pages/garden/index' });
+                        }, 1000);
+                    }
+                }
+            }
+        });
+    }
+})

pages/plant-detail/edit/index.json

@@ -0,0 +1,13 @@
+{
+    "navigationBarTitleText": "编辑植物",
+    "navigationBarBackgroundColor": "#FFFFFF",
+    "usingComponents": {
+        "t-input": "tdesign-miniprogram/input/input",
+        "t-button": "tdesign-miniprogram/button/button",
+        "t-icon": "tdesign-miniprogram/icon/icon",
+        "t-image": "tdesign-miniprogram/image/image",
+        "t-cell": "tdesign-miniprogram/cell/cell",
+        "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+        "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet"
+    }
+}

pages/plant-detail/edit/index.wxml

@@ -0,0 +1,151 @@
+<wxs src="../../../utils/tools.wxs" module="tools" />
+<view class="add-plant-page">
+    <scroll-view 
+        scroll-y 
+        class="page-content" 
+        show-scrollbar="{{false}}" 
+        enhanced="{{true}}"
+        scroll-into-view="{{scrollIntoViewId}}"
+        scroll-with-animation="{{true}}"
+    >
+        <!-- Upload Area -->
+        <view class="upload-section">
+            <view class="image-upload-area {{newPlantImage ? 'has-image' : ''}}" bindtap="showActionSheet">
+                <t-image wx:if="{{newPlantImage}}" src="{{tools.resolvePath(newPlantImage)}}" mode="aspectFill" width="100%" height="100%" />
+                
+                <!-- 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>
+                </view>
+            </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" />
+            </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>
+            </picker>
+        </view>
+
+        <!-- Care Plan -->
+        <view class="care-section-group">
+            <view class="section-header-row">
+                <text class="field-label" style="margin-bottom: 0;">养护计划</text>
+                <view class="add-task-btn-small" bindtap="handleAddCareTask">
+                    <t-icon name="add" size="28rpx" />
+                    <text>添加</text>
+                </view>
+            </view>
+            
+            <view class="care-list-styled">
+                <view wx:for="{{newCareTasks}}" wx:key="id" class="care-row-styled">
+                    <!-- Icon Selector -->
+                    <view 
+                        class="care-icon-btn" 
+                        bindtap="showIconPickerForTask" 
+                        data-id="{{item.id}}" 
+                        style="background: {{item.taskIcon ? item.taskIcon.bgColor : '#f5f5f5'}};"
+                    >
+                        <t-icon 
+                            name="{{item.taskIcon ? item.taskIcon.icon : 'ellipsis'}}" 
+                            size="40rpx" 
+                            color="{{item.taskIcon ? item.taskIcon.color : '#999'}}" 
+                        />
+                    </view>
+                    
+                    <view class="care-input-col task-col">
+                        <view class="custom-input-box small-box">
+                            <input class="native-input" placeholder="事项名称" value="{{item.taskName}}" bindinput="onTaskNameInput" data-id="{{item.id}}" />
+                        </view>
+                    </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}}" />
+                            <text class="suffix-text">天</text>
+                        </view>
+                    </view>
+                    <view class="delete-btn-pink" bindtap="handleRemoveCareTask" data-id="{{item.id}}">
+                        <t-icon name="delete" size="36rpx" />
+                    </view>
+                </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-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>
+
+    <view class="page-footer">
+        <t-button theme="primary" block size="large" icon="check" shape="round" bind:tap="handleSavePlant">确认保存</t-button>
+    </view>
+
+    <t-action-sheet 
+        visible="{{showActionSheet}}" 
+        description="请选择图片来源"
+        items="{{actionSheetItems}}" 
+        bind:selected="onActionSheetSelected" 
+        bind:cancel="onActionSheetCancel"
+        show-cancel="{{true}}"
+    />
+
+    <!-- Icon Picker Popup -->
+    <view class="icon-picker-mask {{showIconPicker ? 'show' : ''}}" bindtap="hideIconPicker"></view>
+    <view class="icon-picker-popup {{showIconPicker ? 'show' : ''}}">
+        <view class="icon-picker-header">
+            <text class="icon-picker-title">选择图标</text>
+            <view class="icon-picker-close" bindtap="hideIconPicker">
+                <t-icon name="close" size="40rpx" color="#999" />
+            </view>
+        </view>
+        <view class="icon-picker-grid">
+            <view 
+                wx:for="{{careTaskIcons}}" 
+                wx:key="id" 
+                class="icon-picker-item" 
+                bindtap="selectIcon" 
+                data-iconid="{{item.id}}"
+            >
+                <view class="icon-circle" style="background: {{item.bgColor}};">
+                    <t-icon name="{{item.icon}}" size="48rpx" color="{{item.color}}" />
+                </view>
+                <text class="icon-name">{{item.name}}</text>
+            </view>
+        </view>
+    </view>
+</view>

pages/plant-detail/edit/index.wxss

@@ -0,0 +1,356 @@
+/** pages/plant-detail/edit/index.wxss **/
+page {
+    height: 100%;
+    overflow: hidden;
+}
+
+.add-plant-page {
+    background-color: #FFFFFF;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.page-content {
+    height: calc(100vh - 140rpx - env(safe-area-inset-bottom));
+    padding: 32rpx 40rpx;
+    background: #FFFFFF;
+    box-sizing: border-box;
+}
+
+/* Hide scrollbar */
+::-webkit-scrollbar {
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+/* Upload Section */
+.upload-section {
+    margin: 0 0 40rpx;
+    display: flex;
+    justify-content: center;
+}
+
+.image-upload-area {
+    width: 100%;
+    height: 240rpx;
+    border-radius: 32rpx;
+    border: 4rpx dashed #ddd;
+    background: #fafafa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s;
+}
+
+.image-upload-area:active {
+    opacity: 0.9;
+}
+
+.image-upload-area.has-image {
+    border: none;
+    height: 360rpx;
+}
+
+.upload-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.upload-placeholder text {
+    color: #BDBDBD;
+    font-size: 26rpx;
+}
+
+/* Edit Overlay Hint */
+.edit-overlay {
+    position: absolute;
+    bottom: 24rpx;
+    right: 24rpx;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10rpx);
+    padding: 12rpx 24rpx;
+    border-radius: 30rpx;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    color: #FFFFFF;
+    font-size: 24rpx;
+    font-weight: 500;
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 40rpx;
+}
+
+.field-label {
+    display: block;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: #263238;
+    margin-bottom: 16rpx;
+}
+
+.custom-input-box {
+    background: #f9f9f9;
+    border: 2rpx solid #e0e0e0;
+    border-radius: 24rpx;
+    padding: 24rpx 32rpx;
+    color: #263238;
+    font-size: 30rpx;
+    transition: all 0.2s;
+}
+
+.custom-input-box:focus-within {
+    background: #FFFFFF;
+    border-color: #558B2F;
+}
+
+.input-placeholder {
+    color: #999;
+}
+
+.native-input {
+    width: 100%;
+    height: 100%;
+}
+
+.picker-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Care Section */
+.care-section-group {
+    margin-top: 24rpx;
+    margin-bottom: 48rpx;
+}
+
+.section-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24rpx;
+}
+
+.add-task-btn-small {
+    font-size: 26rpx;
+    color: #558B2F;
+    background: #F1F8E9;
+    border: 2rpx dashed #558B2F;
+    padding: 12rpx 20rpx;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.care-list-styled {
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+}
+
+.care-row-styled {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+}
+
+.care-input-col.task-col {
+    flex: 1;
+}
+
+.care-input-col.freq-col {
+    flex-shrink: 0;
+}
+
+.small-box {
+    padding: 24rpx;
+    background: #f9f9f9;
+}
+
+.flex-row {
+    display: flex;
+    align-items: center;
+    padding-right: 20rpx;
+}
+
+.center-text {
+    text-align: center;
+}
+
+.suffix-text {
+    color: #888;
+    font-size: 28rpx;
+    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;
+}
+
+/* Delete Button for Edit Page */
+.delete-page-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    color: #FF5252;
+    font-size: 28rpx;
+    font-weight: 500;
+    padding: 20rpx;
+    border: 2rpx solid #FFCDD2;
+    border-radius: 24rpx;
+    background: #FFF9F9;
+}
+
+.delete-page-btn:active {
+    background: #FFEBEE;
+}
+
+/* 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);
+}
+
+.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;
+    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-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s;
+}
+
+.icon-picker-mask.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.icon-picker-popup {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    border-radius: 32rpx 32rpx 0 0;
+    z-index: 1001;
+    transform: translateY(100%);
+    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.icon-picker-popup.show {
+    transform: translateY(0);
+}
+
+.icon-picker-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32rpx 40rpx;
+    border-bottom: 2rpx solid #f5f5f5;
+}
+
+.icon-picker-title {
+    font-size: 34rpx;
+    font-weight: 600;
+    color: #333;
+}
+
+.icon-picker-close {
+    width: 64rpx;
+    height: 64rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24rpx;
+    padding: 32rpx 40rpx;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.icon-picker-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12rpx;
+    padding: 20rpx 0;
+}
+
+.icon-picker-item:active {
+    opacity: 0.7;
+}
+
+.icon-circle {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.icon-name {
+    font-size: 24rpx;
+    color: #666;
+}