sundynix-plant-mp/pages/plant-detail/edit/index.wxml

<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="{{newPlantImage}}" 
                    mode="aspectFill" 
                    width="100%" 
                    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>
                </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>

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

        <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" />
            </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>
                <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.name}}" 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.period}}" 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>