init: initial commit
This commit is contained in:
Blizzard
@@ -0,0 +1,228 @@
|
||||
// pages/garden/add/index.js
|
||||
import { MOCK_PLANTS, CARE_TASK_ICONS } from '../../../utils/mockData';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
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() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = (now.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = now.getDate().toString().padStart(2, '0');
|
||||
|
||||
// Default care task with water icon
|
||||
const defaultIcon = CARE_TASK_ICONS.find(i => i.id === 'water');
|
||||
|
||||
this.setData({
|
||||
newPlantDate: `${year}-${month}-${day}`,
|
||||
newCareTasks: [{
|
||||
id: Date.now().toString(),
|
||||
taskName: '浇水',
|
||||
frequencyValue: 7,
|
||||
frequencyUnit: 'day',
|
||||
iconId: 'water',
|
||||
taskIcon: defaultIcon
|
||||
}],
|
||||
careTaskIcons: CARE_TASK_ICONS
|
||||
});
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
// Action Sheet Logic
|
||||
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' or 'album'
|
||||
camera: 'back',
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFiles[0].tempFilePath;
|
||||
this.setData({
|
||||
newPlantImage: tempFilePath,
|
||||
isLocalImage: true
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('User cancelled', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Form Handlers
|
||||
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');
|
||||
|
||||
tasks.push({
|
||||
id: Date.now().toString(),
|
||||
taskName: '',
|
||||
frequencyValue: 1,
|
||||
frequencyUnit: 'day',
|
||||
iconId: 'other',
|
||||
taskIcon: defaultIcon
|
||||
});
|
||||
|
||||
// First clear the scrollIntoViewId, then set it to trigger scroll
|
||||
this.setData({
|
||||
newCareTasks: tasks,
|
||||
scrollIntoViewId: ''
|
||||
}, () => {
|
||||
// Use setTimeout to ensure the DOM has updated before scrolling
|
||||
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 });
|
||||
},
|
||||
|
||||
// Icon Picker
|
||||
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,
|
||||
// Auto-fill task name if empty
|
||||
taskName: t.taskName || selectedIcon.name
|
||||
};
|
||||
}
|
||||
return t;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
newCareTasks: updatedTasks,
|
||||
showIconPicker: false,
|
||||
currentEditingTaskId: null
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
handleAddPlant() {
|
||||
if (!this.data.newPlantName) {
|
||||
wx.showToast({ title: '请输入植物名称', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const newId = (MOCK_PLANTS.length + 1).toString();
|
||||
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));
|
||||
|
||||
// Prepare care schedule with icon info
|
||||
const careSchedule = this.data.newCareTasks.map(task => ({
|
||||
id: task.id,
|
||||
taskName: task.taskName,
|
||||
frequencyValue: task.frequencyValue,
|
||||
frequencyUnit: task.frequencyUnit,
|
||||
iconId: task.iconId,
|
||||
taskIcon: task.taskIcon
|
||||
}));
|
||||
|
||||
const newPlant = {
|
||||
id: newId,
|
||||
name: this.data.newPlantName,
|
||||
images: [this.data.newPlantImage || 'monstera_plant_1769757312755.png'],
|
||||
daysPlanted: daysPlanted,
|
||||
adoptionDate: this.data.newPlantDate,
|
||||
location: this.data.newPlantLocation || '未分配位置',
|
||||
scientificName: 'Unknown',
|
||||
family: '未知科',
|
||||
genus: '未知属',
|
||||
description: '新添加的植物...',
|
||||
difficulty: '⭐️',
|
||||
toxicity: '未知',
|
||||
flowerMsg: '充满希望',
|
||||
careSchedule: careSchedule
|
||||
};
|
||||
|
||||
// In a real app we would call an API or update global store
|
||||
// For this mock, we append to the imported array (memory only)
|
||||
MOCK_PLANTS.push(newPlant);
|
||||
|
||||
wx.showToast({ title: '添加成功', icon: 'success' });
|
||||
|
||||
setTimeout(() => {
|
||||
wx.navigateBack();
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
<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%" />
|
||||
<view wx:else class="upload-placeholder">
|
||||
<t-icon name="upload" size="64rpx" color="#999" />
|
||||
<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>
|
||||
|
||||
<!-- 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="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>
|
||||
@@ -0,0 +1,336 @@
|
||||
/** pages/garden/add/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 - 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 {
|
||||
margin: 0 0 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-upload-area {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
border-radius: 32rpx;
|
||||
border: 4rpx dashed #ddd; /* Match prototype dashed border */
|
||||
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 {
|
||||
border-color: #558B2F; /* var(--primary) */
|
||||
background: #F1F8E9;
|
||||
}
|
||||
|
||||
.image-upload-area.has-image {
|
||||
border: none;
|
||||
height: 360rpx; /* Taller when has image */
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.upload-placeholder text {
|
||||
color: #BDBDBD;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* 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:active, .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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
// pages/garden/index.js
|
||||
import { MOCK_PLANTS } from '../../utils/mockData';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
plants: [],
|
||||
dateString: '',
|
||||
greeting: ''
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.initTime();
|
||||
this.loadPlants();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' &&
|
||||
this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 0
|
||||
})
|
||||
}
|
||||
// Refresh list in case new plant was added
|
||||
this.loadPlants();
|
||||
},
|
||||
|
||||
loadPlants() {
|
||||
this.setData({ plants: MOCK_PLANTS });
|
||||
},
|
||||
|
||||
initTime() {
|
||||
const updateTime = () => {
|
||||
const now = new Date();
|
||||
const hour = now.getHours();
|
||||
|
||||
let greet = '晚上好';
|
||||
if (hour >= 5 && hour < 12) greet = '上午好';
|
||||
else if (hour >= 12 && hour < 14) greet = '中午好';
|
||||
else if (hour >= 14 && hour < 19) greet = '下午好';
|
||||
|
||||
const month = now.getMonth() + 1;
|
||||
const day = now.getDate();
|
||||
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
const weekDay = weekDays[now.getDay()];
|
||||
|
||||
this.setData({
|
||||
greeting: greet,
|
||||
dateString: `${month}月${day}日 ${weekDay}`
|
||||
});
|
||||
};
|
||||
|
||||
updateTime();
|
||||
},
|
||||
|
||||
navigateToDetail(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/plant-detail/index?id=${id}`,
|
||||
});
|
||||
},
|
||||
|
||||
navigateToAdd() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/garden/add/index'
|
||||
});
|
||||
},
|
||||
|
||||
onScrollLower() {
|
||||
console.log('Scroll to lower - loading more plants...');
|
||||
// In a real app, this would trigger pagination
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"navigationBarTitleText": "我的花园",
|
||||
"usingComponents": {
|
||||
"t-fab": "tdesign-miniprogram/fab/fab",
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"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-upload": "tdesign-miniprogram/upload/upload",
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<wxs src="../../utils/tools.wxs" module="tools" />
|
||||
<view class="garden-page">
|
||||
<view class="page-header with-banner">
|
||||
<view class="header-content">
|
||||
<text class="date-text">{{dateString}}</text>
|
||||
<view class="greeting-row">
|
||||
<text class="greeting-main">{{greeting}}，园长</text>
|
||||
</view>
|
||||
<text class="subtitle">今天也要好好照顾它们哦</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="banner-container">
|
||||
<image src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=800" class="garden-banner" mode="aspectFill" />
|
||||
<view class="banner-overlay">
|
||||
<text class="count-tag">共养护 {{plants.length}} 盆植物</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="garden-list-wrapper">
|
||||
<scroll-view scroll-y class="garden-list-container" enhanced show-scrollbar="{{false}}" bindscrolltolower="onScrollLower">
|
||||
<view class="plant-grid">
|
||||
<view wx:for="{{plants}}" wx:key="id" class="plant-card" bindtap="navigateToDetail" data-id="{{item.id}}">
|
||||
<view class="plant-image-container">
|
||||
<t-image src="{{tools.resolvePath(item.images[0])}}" mode="aspectFill" width="100%" height="100%" />
|
||||
<view class="days-badge">{{item.daysPlanted}}天</view>
|
||||
</view>
|
||||
<view class="plant-info">
|
||||
<text class="plant-name">{{item.name}}</text>
|
||||
<view class="status-wrap">
|
||||
<text class="status">生长中</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100rpx;"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Custom Floating Action Button -->
|
||||
<view class="floating-add-btn" bindtap="navigateToAdd">
|
||||
<t-icon name="add" size="40rpx" color="#FFF" />
|
||||
<text>添加植物</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,194 @@
|
||||
/** pages/garden/index.wxss **/
|
||||
.garden-page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header.with-banner {
|
||||
padding: 40rpx 40rpx 20rpx;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 26rpx;
|
||||
color: #558B2F; /* var(--primary) */
|
||||
margin-bottom: 8rpx;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.greeting-main {
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(120deg, #33691E, #689F38);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
display: inline-block;
|
||||
margin-bottom: 12rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 30rpx;
|
||||
color: #90A4AE;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
margin: 0 40rpx 48rpx;
|
||||
height: 280rpx;
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 12rpx 32rpx rgba(85, 139, 47, 0.15);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.garden-banner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 24rpx 32rpx;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.count-tag {
|
||||
color: white;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
backdrop-filter: blur(8rpx);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.garden-list-wrapper {
|
||||
flex: 1;
|
||||
background: #F4F6F0;
|
||||
border-top-left-radius: 60rpx;
|
||||
border-top-right-radius: 60rpx;
|
||||
padding: 48rpx 40rpx 0;
|
||||
box-shadow: 0 -8rpx 40rpx rgba(0,0,0,0.05);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.garden-list-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Plant Grid Layout */
|
||||
.plant-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.plant-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 40rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 24rpx rgba(85, 139, 47, 0.08), inset 0 0 0 2rpx rgba(255, 255, 255, 0.6);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plant-card:active {
|
||||
transform: translateY(-8rpx);
|
||||
box-shadow: 0 16rpx 32rpx rgba(85, 139, 47, 0.15);
|
||||
}
|
||||
|
||||
.plant-image-container {
|
||||
height: 300rpx;
|
||||
position: relative;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plant-image-container t-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.days-badge {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: #33691E;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.plant-info {
|
||||
padding: 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.plant-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #263238;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.status-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 22rpx;
|
||||
color: #33691E;
|
||||
background: #DCEDC8;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Custom Floating Button */
|
||||
.floating-add-btn {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: 60rpx;
|
||||
background: #558B2F;
|
||||
color: white;
|
||||
padding: 24rpx 40rpx;
|
||||
border-radius: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
box-shadow: 0 12rpx 32rpx rgba(85, 139, 47, 0.4);
|
||||
z-index: 1000;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.floating-add-btn:active {
|
||||
transform: scale(0.92);
|
||||
box-shadow: 0 4rpx 16rpx rgba(85, 139, 47, 0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user