sundynix-plant-mp/pages/garden/add/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"
                />
                <view wx:else class="upload-placeholder">
                    <t-icon name="upload" size="64rpx" color="#999" />
                    <text>点击上传封面图</text>
                </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>

            <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>
        </view>

        <!-- 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">
                    <!-- 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: 80rpx;" 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>
            
            <view id="care-list-bottom"></view>
        </view>
        
        <view style="height: 180rpx;"></view>
    </scroll-view>

    <view class="page-footer">
        <t-button theme="primary" block size="large" icon="check" shape="round" bind:tap="handleAddPlant">确认添加</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>