54 lines
1.7 KiB
Markdown
54 lines
1.7 KiB
Markdown
我将在 `apps/frontend/src/views/GreetingCard/GreetingCard.vue` 中实现七夕情人节贺卡功能。
|
||
|
||
根据您的要求：
|
||
|
||
1. **不使用 Tailwind CSS**。
|
||
2. **图片功能为文件上传**（非填写地址）。我将实现本地文件读取（转换为 Base64）来模拟上传效果，确保用户可以直接选择本地图片进行预览和保存。
|
||
|
||
实施计划如下：
|
||
|
||
1. **功能概览与用户提示**:
|
||
|
||
* 在页面顶部添加美观的提示区域，说明：“下单时可选择绑定贺卡，收到货时将额外赠送一张带有二维码的贺卡，扫码即可查看您的祝福。”
|
||
|
||
* 使用自定义 CSS (`<style scoped>`) 实现浪漫粉色系视觉风格。
|
||
|
||
2. **贺卡管理 (增删改查)**:
|
||
|
||
* **列表视图**: 使用 Grid 布局展示贺卡列表。
|
||
|
||
* **添加/编辑弹窗**: 使用 Element Plus (`el-dialog`) 组件。
|
||
|
||
* **图片上传**: 使用 `el-upload` 组件。
|
||
|
||
* 设置为**点击选择文件**模式。
|
||
|
||
* 拦截默认上传行为，使用 `FileReader` 将图片转换为 Base64 格式进行本地预览和存储。
|
||
|
||
* **祝福寄语**: `el-input` (type="textarea") 用于输入祝福。
|
||
|
||
* **删除操作**: `el-popconfirm` 确认后删除。
|
||
|
||
3. **模拟数据**:
|
||
|
||
* 初始化包含示例贺卡的数据列表。
|
||
|
||
* 数据结构: `id`, `imageUrl` (Base64字符串), `message`, `createTime`.
|
||
|
||
4. **技术栈**:
|
||
|
||
* **Vue 3 组合式 API**
|
||
|
||
* **Element Plus** (Upload, Dialog, Button, Card, etc.)
|
||
|
||
* **CSS / SCSS** (Scoped styles)
|
||
|
||
**实施步骤**:
|
||
|
||
1. 清理文件并搭建基础 UI 结构。
|
||
2. 实现图片上传并转 Base64 的核心逻辑。
|
||
3. 完成添加、编辑、删除功能的逻辑绑定。
|
||
4. 编写 CSS 样式美化页面。
|
||
5. 验证功能流程。
|
||
|