init: initial commit
This commit is contained in:
Blizzard
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -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,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>
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
// pages/plant-detail/index.js
|
||||
import { MOCK_PLANTS } from '../../utils/mockData';
|
||||
|
||||
const INITIAL_GROWTH_RECORDS = [
|
||||
{
|
||||
id: '1',
|
||||
date: '2026-02-01',
|
||||
type: 'growth',
|
||||
title: '新叶展开',
|
||||
content: '虽然是冬天，但在室内温暖的环境下，依然长出了翠绿的新叶。',
|
||||
image: 'monstera_plant_1769757312755.png'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
date: '2026-01-20',
|
||||
type: 'growth',
|
||||
title: '茎秆长高',
|
||||
content: '主茎又长高了约5cm，状态良好。'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
date: '2025-12-15',
|
||||
type: 'repot',
|
||||
title: '换盆记录',
|
||||
content: '原来的盆有点小了，换了一个大一号的陶盆，底部加了陶粒。'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
date: '2025-11-28',
|
||||
type: 'pest',
|
||||
title: '发现蚜虫',
|
||||
content: '叶片背面发现少量蚜虫，已用肥皂水清洗处理。'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
date: '2025-11-10',
|
||||
type: 'growth',
|
||||
title: '气根生长',
|
||||
content: '节点处长出了新的气根，说明生长环境湿度适宜。'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
date: '2025-10-25',
|
||||
type: 'other',
|
||||
title: '调整位置',
|
||||
content: '从北窗移到了东窗，增加早晨的光照。'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
date: '2025-10-12',
|
||||
type: 'other',
|
||||
title: '加入花园',
|
||||
content: '欢迎名为"小怪兽"的小家伙正式入住！'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
date: '2025-09-28',
|
||||
type: 'growth',
|
||||
title: '购入记录',
|
||||
content: '在花市购入，高度约30cm，有5片成熟叶子。',
|
||||
image: 'monstera_plant_1769757312755.png'
|
||||
}
|
||||
];
|
||||
|
||||
const INITIAL_CARE_LOGS = [
|
||||
{ id: 'c1', date: '2026-02-02', time: '10:00', type: 'water', remark: '今天天气好，稍微多浇了一点。' },
|
||||
{ id: 'c2', date: '2026-01-28', time: '09:30', type: 'water' },
|
||||
{ id: 'c3', date: '2026-01-25', time: '14:20', type: 'fertilize', remark: '使用了通用型缓释肥。' },
|
||||
{ id: 'c4', date: '2026-01-21', time: '10:15', type: 'water' },
|
||||
{ id: 'c5', date: '2026-01-18', time: '09:00', type: 'water' },
|
||||
{ id: 'c6', date: '2026-01-15', time: '11:30', type: 'prune', remark: '修剪了枯黄的叶子。' },
|
||||
{ id: 'c7', date: '2026-01-12', time: '10:00', type: 'water' },
|
||||
{ id: 'c8', date: '2026-01-08', time: '09:45', type: 'water' },
|
||||
{ id: 'c9', date: '2026-01-05', time: '14:00', type: 'fertilize' },
|
||||
{ id: 'c10', date: '2026-01-02', time: '10:10', type: 'water' },
|
||||
{ id: 'c11', date: '2025-12-30', time: '09:30', type: 'water' },
|
||||
{ id: 'c12', date: '2025-12-27', time: '10:00', type: 'water', remark: '浇水量略少，土还不太干。' },
|
||||
{ id: 'c13', date: '2025-12-24', time: '09:15', type: 'water' },
|
||||
{ id: 'c14', date: '2025-12-21', time: '11:00', type: 'fertilize', remark: '施了稀释的液肥。' },
|
||||
{ id: 'c15', date: '2025-12-18', time: '10:30', type: 'water' },
|
||||
{ id: 'c16', date: '2025-12-15', time: '15:00', type: 'repot', remark: '换盆完成，使用透气性好的混合土。' },
|
||||
{ id: 'c17', date: '2025-12-12', time: '09:45', type: 'water' },
|
||||
{ id: 'c18', date: '2025-12-09', time: '10:20', type: 'water' },
|
||||
];
|
||||
|
||||
Page({
|
||||
data: {
|
||||
currentPlant: null,
|
||||
activeImageIndex: 0,
|
||||
activeTab: 'care',
|
||||
careLogs: [],
|
||||
displayCareLogs: [],
|
||||
displayCareLimit: 5,
|
||||
records: [],
|
||||
displayRecords: [],
|
||||
displayRecordLimit: 5,
|
||||
swiperImages: [],
|
||||
|
||||
// Growth Modal
|
||||
showGrowthModal: false,
|
||||
newRecordType: 'growth',
|
||||
newRecordContent: ''
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.initData(options.id);
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (this.data.currentPlant && this.data.currentPlant.id) {
|
||||
this.initData(this.data.currentPlant.id);
|
||||
}
|
||||
},
|
||||
|
||||
initData(id) {
|
||||
const plant = MOCK_PLANTS.find(p => p.id === id);
|
||||
if (plant) {
|
||||
this.setData({
|
||||
currentPlant: plant,
|
||||
swiperImages: (plant.images || ['monstera_plant_1769757312755.png']).map(img => (img.indexOf('http') === 0 || img.indexOf('wxfile') === 0) ? img : `/assets/${img}`),
|
||||
careLogs: this.processLogs(INITIAL_CARE_LOGS),
|
||||
records: INITIAL_GROWTH_RECORDS
|
||||
});
|
||||
this.updateDisplayLogs();
|
||||
this.updateDisplayRecords();
|
||||
}
|
||||
},
|
||||
|
||||
processLogs(logs) {
|
||||
return logs.map(log => {
|
||||
const parts = log.date.split('-');
|
||||
return {
|
||||
...log,
|
||||
day: parts[2],
|
||||
month: parts[1],
|
||||
typeLabel: this.getCareTypeLabel(log.type)
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
getCareTypeLabel(type) {
|
||||
const map = {
|
||||
water: '浇水',
|
||||
fertilize: '施肥',
|
||||
prune: '修剪',
|
||||
repot: '换盆'
|
||||
};
|
||||
return map[type] || '养护';
|
||||
},
|
||||
|
||||
updateDisplayLogs() {
|
||||
this.setData({
|
||||
displayCareLogs: this.data.careLogs.slice(0, this.data.displayCareLimit)
|
||||
});
|
||||
},
|
||||
|
||||
onSwiperChange(e) {
|
||||
this.setData({ activeImageIndex: e.detail.current });
|
||||
},
|
||||
|
||||
switchTab(e) {
|
||||
const tab = e.currentTarget.dataset.tab;
|
||||
if (tab) {
|
||||
this.setData({ activeTab: tab });
|
||||
}
|
||||
},
|
||||
|
||||
// Prevent background scroll when modal is open
|
||||
preventTouchMove() {
|
||||
return false;
|
||||
},
|
||||
|
||||
toggleCareLimit() {
|
||||
const newLimit = this.data.displayCareLimit + 5;
|
||||
this.setData({ displayCareLimit: newLimit });
|
||||
this.updateDisplayLogs();
|
||||
},
|
||||
|
||||
updateDisplayRecords() {
|
||||
this.setData({
|
||||
displayRecords: this.data.records.slice(0, this.data.displayRecordLimit)
|
||||
});
|
||||
},
|
||||
|
||||
toggleRecordLimit() {
|
||||
const newLimit = this.data.displayRecordLimit + 5;
|
||||
this.setData({ displayRecordLimit: newLimit });
|
||||
this.updateDisplayRecords();
|
||||
},
|
||||
|
||||
// Navigate to Edit Page
|
||||
handleOpenEditModal() {
|
||||
if (this.data.currentPlant && this.data.currentPlant.id) {
|
||||
wx.navigateTo({
|
||||
url: `/pages/plant-detail/edit/index?id=${this.data.currentPlant.id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// Growth Record Logic
|
||||
openGrowthModal() { this.setData({ showGrowthModal: true, newRecordContent: '', newRecordType: 'growth' }); },
|
||||
onGrowthPopupVisibleChange(e) { this.setData({ showGrowthModal: e.detail.visible }); },
|
||||
closeGrowthModal() { this.setData({ showGrowthModal: false }); },
|
||||
|
||||
setRecordType(e) {
|
||||
const type = e.currentTarget.dataset.type;
|
||||
if (e.detail.checked) {
|
||||
this.setData({ newRecordType: type });
|
||||
}
|
||||
},
|
||||
setRecordTypeByTap(e) {
|
||||
const type = e.currentTarget.dataset.type;
|
||||
this.setData({ newRecordType: type });
|
||||
},
|
||||
onRecordContentInput(e) { this.setData({ newRecordContent: e.detail.value }); },
|
||||
|
||||
handleAddRecord() {
|
||||
if (!this.data.newRecordContent.trim()) return;
|
||||
|
||||
const mapTitle = { growth: '生长记录', repot: '换盆记录', pest: '病虫害记录', other: '日常记录' };
|
||||
const now = new Date();
|
||||
const dateStr = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
|
||||
|
||||
const record = {
|
||||
id: Date.now().toString(),
|
||||
date: dateStr,
|
||||
type: this.data.newRecordType,
|
||||
title: mapTitle[this.data.newRecordType],
|
||||
content: this.data.newRecordContent
|
||||
};
|
||||
|
||||
this.setData({
|
||||
records: [record, ...this.data.records],
|
||||
showGrowthModal: false
|
||||
});
|
||||
this.updateDisplayRecords();
|
||||
|
||||
wx.showToast({ title: '记录成功', icon: 'success' });
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"navigationBarTitleText": "植物详情",
|
||||
"usingComponents": {
|
||||
"t-swiper": "tdesign-miniprogram/swiper/swiper",
|
||||
"t-tabs": "tdesign-miniprogram/tabs/tabs",
|
||||
"t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
|
||||
"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-steps": "tdesign-miniprogram/steps/steps",
|
||||
"t-step-item": "tdesign-miniprogram/step-item/step-item",
|
||||
"t-tag": "tdesign-miniprogram/tag/tag",
|
||||
"t-cell": "tdesign-miniprogram/cell/cell",
|
||||
"t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
|
||||
"t-image": "tdesign-miniprogram/image/image",
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-chip": "tdesign-miniprogram/check-tag/check-tag"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
<wxs src="../../utils/tools.wxs" module="tools" />
|
||||
<view class="plant-detail">
|
||||
<!-- Header -->
|
||||
<view class="detail-header">
|
||||
<view class="settings-btn-detail" bindtap="handleOpenEditModal">
|
||||
<t-icon name="setting" size="44rpx" color="#263238" />
|
||||
</view>
|
||||
|
||||
<view class="header-gallery">
|
||||
<t-swiper
|
||||
current="{{activeImageIndex}}"
|
||||
autoplay="{{false}}"
|
||||
navigation="{{ { type: '' } }}"
|
||||
list="{{swiperImages}}"
|
||||
bind:change="onSwiperChange"
|
||||
height="500rpx"
|
||||
/>
|
||||
<view class="header-gradient"></view>
|
||||
|
||||
<!-- Custom Carousel Indicators -->
|
||||
<view class="carousel-indicators">
|
||||
<view wx:for="{{swiperImages}}" wx:key="index" class="carousel-dot {{index === activeImageIndex ? 'active' : ''}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="header-info">
|
||||
<text class="header-title">{{currentPlant.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content -->
|
||||
<view class="detail-content">
|
||||
<!-- Custom Tabs -->
|
||||
<view class="pd-tabs">
|
||||
<view class="pd-tab-btn {{activeTab === 'care' ? 'active' : ''}}" bindtap="switchTab" data-tab="care">
|
||||
养护记录
|
||||
</view>
|
||||
<view class="pd-tab-btn {{activeTab === 'archive' ? 'active' : ''}}" bindtap="switchTab" data-tab="archive">
|
||||
植物档案
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Care Tab Scroll View -->
|
||||
<scroll-view
|
||||
scroll-y="{{!showGrowthModal}}"
|
||||
class="pd-content"
|
||||
enhanced="{{true}}"
|
||||
show-scrollbar="{{false}}"
|
||||
hidden="{{activeTab !== 'care'}}"
|
||||
>
|
||||
<view class="care-view fadeIn">
|
||||
<view class="section-title">
|
||||
<text class="h3">养护历史</text>
|
||||
</view>
|
||||
|
||||
<view class="care-log-list">
|
||||
<view wx:for="{{displayCareLogs}}" wx:key="id" class="care-log-item">
|
||||
<view class="log-left">
|
||||
<view class="log-date-v">
|
||||
<text class="l-day">{{item.day}}</text>
|
||||
<text class="l-month">{{item.month}}月</text>
|
||||
</view>
|
||||
<view class="log-type-icon {{item.type === 'water' ? 'icon-water' : (item.type === 'fertilize' ? 'icon-fertilize' : (item.type === 'prune' ? 'icon-prune' : 'icon-repot'))}}">
|
||||
<t-icon wx:if="{{item.type === 'water'}}" name="heart" size="36rpx" color="#2196F3" />
|
||||
<t-icon wx:elif="{{item.type === 'fertilize'}}" name="app" size="36rpx" color="#FFD700" />
|
||||
<t-icon wx:elif="{{item.type === 'prune'}}" name="cut" size="36rpx" color="#757575" />
|
||||
<t-icon wx:else name="assignment" size="36rpx" color="#8D6E63" />
|
||||
</view>
|
||||
<view class="log-info">
|
||||
<view class="log-header-row">
|
||||
<text class="log-type-name">{{item.typeLabel}}</text>
|
||||
<text class="log-time">{{item.time}}</text>
|
||||
</view>
|
||||
<text wx:if="{{item.remark}}" class="log-remark">{{item.remark}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<block wx:if="{{careLogs.length > displayCareLimit}}">
|
||||
<view class="load-more-btn" bindtap="toggleCareLimit">
|
||||
<text>加载更多 ({{displayCareLogs.length}}/{{careLogs.length}})</text>
|
||||
<t-icon name="chevron-down" size="32rpx" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- Archive Tab Scroll View -->
|
||||
<scroll-view
|
||||
scroll-y="{{!showGrowthModal}}"
|
||||
class="pd-content"
|
||||
enhanced="{{true}}"
|
||||
show-scrollbar="{{false}}"
|
||||
hidden="{{activeTab !== 'archive'}}"
|
||||
>
|
||||
<view class="archive-view fadeIn">
|
||||
<view class="archive-identity-card">
|
||||
<view class="aic-header">
|
||||
<view class="aic-badge">🏆 元老级植物</view>
|
||||
<view class="aic-location">
|
||||
<t-icon name="location" size="28rpx" color="#388E3C" />
|
||||
<text>{{currentPlant.location || '位置未定'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="aic-stats">
|
||||
<view class="aic-stat-item">
|
||||
<text class="label">入家时间</text>
|
||||
<text class="value">{{currentPlant.adoptionDate || '未知'}}</text>
|
||||
</view>
|
||||
<view class="aic-stat-item">
|
||||
<text class="label">入住天数</text>
|
||||
<text class="value">{{currentPlant.daysPlanted}} 天</text>
|
||||
</view>
|
||||
<view class="aic-stat-item">
|
||||
<text class="label">养护次数</text>
|
||||
<text class="value">{{careLogs.length}} 次</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-header">
|
||||
<text class="h3">成长记录</text>
|
||||
<view class="add-btn" bindtap="openGrowthModal">
|
||||
<t-icon name="edit" size="28rpx" color="#FFF" />
|
||||
<text>记录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="archive-timeline">
|
||||
<view wx:for="{{displayRecords}}" wx:key="id" class="timeline-item">
|
||||
<view class="timeline-dot"></view>
|
||||
<text class="timeline-date">{{item.date}}</text>
|
||||
<view class="timeline-content-box">
|
||||
<view class="timeline-title">
|
||||
<t-icon wx:if="{{item.type === 'growth'}}" name="thumb-up" size="32rpx" color="#4CAF50" />
|
||||
<t-icon wx:elif="{{item.type === 'repot'}}" name="swap" size="32rpx" color="#FF9800" />
|
||||
<t-icon wx:elif="{{item.type === 'pest'}}" name="error-circle" size="32rpx" color="#F44336" />
|
||||
<t-icon wx:else name="file" size="32rpx" color="#2196F3" />
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<text class="timeline-desc">{{item.content}}</text>
|
||||
<t-image wx:if="{{item.image}}" src="{{tools.resolvePath(item.image)}}" mode="widthFix" width="100%" class="timeline-img" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<block wx:if="{{records.length > displayRecordLimit}}">
|
||||
<view class="load-more-btn" bindtap="toggleRecordLimit">
|
||||
<text>加载更多 ({{displayRecords.length}}/{{records.length}})</text>
|
||||
<t-icon name="chevron-down" size="32rpx" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Growth Record Popup -->
|
||||
<t-popup visible="{{showGrowthModal}}" bind:visible-change="onGrowthPopupVisibleChange" placement="center" prevent-scroll-through>
|
||||
<view class="edit-modal">
|
||||
<view class="modal-header" catchtouchmove="preventTouchMove">
|
||||
<text class="modal-title">添加成长记录</text>
|
||||
<view class="close-btn" bindtap="closeGrowthModal">
|
||||
<t-icon name="close" size="40rpx" color="#666" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<!-- Record Type -->
|
||||
<view class="form-group">
|
||||
<text class="form-label">记录类型</text>
|
||||
<view class="chip-group">
|
||||
<view class="chip {{newRecordType === 'growth' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="growth">
|
||||
<t-icon name="thumb-up" size="28rpx" />
|
||||
<text>生长</text>
|
||||
</view>
|
||||
<view class="chip {{newRecordType === 'repot' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="repot">
|
||||
<t-icon name="swap" size="28rpx" />
|
||||
<text>换盆</text>
|
||||
</view>
|
||||
<view class="chip {{newRecordType === 'pest' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="pest">
|
||||
<t-icon name="error-circle" size="28rpx" />
|
||||
<text>病虫害</text>
|
||||
</view>
|
||||
<view class="chip {{newRecordType === 'other' ? 'active' : ''}}" bindtap="setRecordTypeByTap" data-type="other">
|
||||
<t-icon name="file" size="28rpx" />
|
||||
<text>其他</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content -->
|
||||
<view class="form-group">
|
||||
<text class="form-label">备注</text>
|
||||
<textarea
|
||||
class="form-textarea"
|
||||
placeholder="记录这一刻的变化..."
|
||||
value="{{newRecordContent}}"
|
||||
bindinput="onRecordContentInput"
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-footer" catchtouchmove="preventTouchMove">
|
||||
<view class="submit-btn" bindtap="handleAddRecord">
|
||||
<text>保存记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</t-popup>
|
||||
</view>
|
||||
@@ -0,0 +1,716 @@
|
||||
/** pages/plant-detail/index.wxss **/
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plant-detail {
|
||||
background-color: #F4F6F0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.detail-header {
|
||||
position: relative;
|
||||
height: 500rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-btn-detail {
|
||||
position: absolute;
|
||||
top: 88rpx;
|
||||
right: 32rpx;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.5);
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.settings-btn-detail:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.header-gallery {
|
||||
height: 500rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-gradient {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 240rpx;
|
||||
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Carousel Indicators */
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
right: 48rpx;
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.carousel-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.carousel-dot.active {
|
||||
background: white;
|
||||
width: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
position: absolute;
|
||||
bottom: 80rpx;
|
||||
left: 48rpx;
|
||||
right: 48rpx;
|
||||
z-index: 20;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 56rpx;
|
||||
font-weight: 800;
|
||||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.detail-content {
|
||||
flex: 1;
|
||||
background: #F4F6F0;
|
||||
border-top-left-radius: 64rpx;
|
||||
border-top-right-radius: 64rpx;
|
||||
margin-top: -64rpx;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Custom Tabs */
|
||||
.pd-tabs {
|
||||
display: flex;
|
||||
padding: 48rpx 48rpx 0;
|
||||
border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pd-tab-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 32rpx 48rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
background: none;
|
||||
border: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pd-tab-btn.active {
|
||||
color: #558B2F;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pd-tab-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2rpx;
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
height: 6rpx;
|
||||
background: #558B2F;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.pd-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 48rpx;
|
||||
padding-bottom: 160rpx;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for pd-content */
|
||||
.pd-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation: fadeIn 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Section Title */
|
||||
.section-title {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 34rpx;
|
||||
font-weight: 800;
|
||||
color: #263238;
|
||||
}
|
||||
|
||||
/* Care Log List - Matching Prototype */
|
||||
.care-log-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.care-log-item {
|
||||
background: white;
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.log-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.log-date-v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 80rpx;
|
||||
border-right: 2rpx solid #F0F0F0;
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
|
||||
.l-day {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.l-month {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.log-type-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: #FAFAFA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.log-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.log-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.log-type-name {
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.log-remark {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Load More Button */
|
||||
.load-more-btn {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
background: #f5f5f5;
|
||||
border: 2rpx dashed #e0e0e0;
|
||||
border-radius: 24rpx;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.load-more-btn:active {
|
||||
background: #EEEEEE;
|
||||
color: #558B2F;
|
||||
border-color: #558B2F;
|
||||
}
|
||||
|
||||
/* Archive View */
|
||||
.archive-view {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Identity Card */
|
||||
.archive-identity-card {
|
||||
background: white;
|
||||
border-radius: 40rpx;
|
||||
padding: 48rpx;
|
||||
margin-bottom: 48rpx;
|
||||
box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.06);
|
||||
border: 2rpx solid rgba(0, 0, 0, 0.02);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.archive-identity-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12rpx;
|
||||
background: linear-gradient(90deg, #AED581, #2E7D32);
|
||||
}
|
||||
|
||||
.aic-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.aic-badge {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #2E7D32;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.aic-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #388E3C;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.aic-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.aic-stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aic-stat-item .label {
|
||||
font-size: 22rpx;
|
||||
color: #558B2F;
|
||||
margin-bottom: 8rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.aic-stat-item .value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1B5E20;
|
||||
}
|
||||
|
||||
/* Section Header */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.archive-timeline {
|
||||
position: relative;
|
||||
padding-left: 48rpx;
|
||||
border-left: 4rpx solid #E0E0E0;
|
||||
margin-left: 24rpx;
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -62rpx;
|
||||
top: 0;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: white;
|
||||
border: 6rpx solid #558B2F;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 0 8rpx #F4F6F0;
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
font-size: 24rpx;
|
||||
color: #9E9E9E;
|
||||
margin-bottom: 16rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.timeline-content-box {
|
||||
background: white;
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
border: 2rpx solid rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.timeline-content-box:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.timeline-desc {
|
||||
font-size: 28rpx;
|
||||
color: #546E7A;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.timeline-img {
|
||||
border-radius: 24rpx;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Popup Styles */
|
||||
.popup-content {
|
||||
background: white;
|
||||
border-radius: 48rpx 48rpx 0 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: #263238;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 0 0 32rpx;
|
||||
}
|
||||
|
||||
.chip-group-td {
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
/* Edit Modal - Matching Prototype */
|
||||
.edit-modal {
|
||||
background: white;
|
||||
width: 680rpx;
|
||||
max-width: 90vw;
|
||||
border-radius: 48rpx;
|
||||
padding: 48rpx;
|
||||
box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.2);
|
||||
animation: modalSlideUp 0.3s ease-out;
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes modalSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:active {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
max-height: 55vh;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep scrollable */
|
||||
.modal-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-group {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 24rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background: #FAFAFA;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
background: white;
|
||||
border-color: #558B2F;
|
||||
box-shadow: 0 0 0 6rpx rgba(85, 139, 47, 0.1);
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date-picker .placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/* Modal Footer */
|
||||
.modal-footer {
|
||||
margin-top: 40rpx;
|
||||
flex-shrink: 0;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 28rpx;
|
||||
background: linear-gradient(135deg, #689F38, #558B2F);
|
||||
border-radius: 32rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 8rpx 24rpx rgba(85, 139, 47, 0.4);
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: scale(0.98);
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
/* Keep existing add-btn style */
|
||||
.add-btn {
|
||||
background: #558B2F;
|
||||
color: white;
|
||||
padding: 16rpx 32rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(85, 139, 47, 0.3);
|
||||
}
|
||||
|
||||
.add-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* Care Type Icons */
|
||||
.icon-water {
|
||||
color: #2196F3;
|
||||
background: #E1F5FE;
|
||||
}
|
||||
|
||||
.icon-fertilize {
|
||||
color: #FFD700;
|
||||
background: #FFFDE7;
|
||||
}
|
||||
|
||||
.icon-prune {
|
||||
color: #757575;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.icon-repot {
|
||||
color: #8D6E63;
|
||||
background: #EFEBE9;
|
||||
}
|
||||
|
||||
/* Chip Group */
|
||||
.chip-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 16rpx 24rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 32rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.chip.active {
|
||||
background: #E8F5E9;
|
||||
color: #558B2F;
|
||||
border-color: #558B2F;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chip:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
/* Form Textarea */
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
min-height: 160rpx;
|
||||
padding: 24rpx;
|
||||
border: 2rpx solid #e0e0e0;
|
||||
border-radius: 24rpx;
|
||||
font-size: 30rpx;
|
||||
box-sizing: border-box;
|
||||
background: #FAFAFA;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-textarea:focus {
|
||||
background: white;
|
||||
border-color: #558B2F;
|
||||
box-shadow: 0 0 0 6rpx rgba(85, 139, 47, 0.1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user