这是婚礼请柬的核心编辑能力,让你可以自由排版请柬内容(文字格式、图片、视频等)。
技术依赖:基于 Tiptap(Vue3 生态中最流行的富文本编辑器) + StarterKit 基础扩展包
加粗:通过 editor.chain().focus().toggleBold().run() 触发编辑器的加粗指令
斜体:toggleItalic() 指令实现文字斜体效果
下划线:toggleUnderline() 指令添加文字下划线
挂载时(onMounted)初始化编辑器实例,传入扩展配置和初始内容
卸载时(onUnmounted)销毁编辑器实例,避免内存泄漏
你可以像使用 Word 一样,选中文字后点击工具栏的加粗 / 斜体 / 下划线按钮,快速设置文字格式;编辑器初始内容为 “请编辑你的婚礼请柬内容...”,支持回车换行、段落分割等基础排版操作。
上传接口地址:/api/upload/file(需后端实现文件存储,如阿里云 OSS / 腾讯云 COS)
图片:调用 setImage({ src: url }) 插入到富文本光标位置
视频:插入 <video> 标签,自动添加播放控件(controls)并适配宽度
状态反馈:上传成功 / 失败都会通过 ElMessage 给出提示,提升用户体验
你点击 “上传图片 / 视频” 按钮后,会弹出本地文件选择框,选择文件后自动上传,上传完成后文件会直接出现在编辑区域,图片可直接显示,视频带播放控件。
生成 9 位随机字符串作为请柬 ID(Math.random().toString(36).substr(2, 9))
拼接成完整分享链接:https://your-domain.com/invitation/${inviteId}
依赖 qrcode 库,调用 QRCode.toDataURL(shareLink) 将链接转为二维码图片的 Base64 地址
在弹窗中展示二维码图片,方便亲友扫码打开请柬
4. 支付功能(礼金支付)支持亲友在线支付礼金,并可填写祝福语。
点击 “礼金支付” 按钮弹出支付表单,包含 “支付金额” 和 “祝福语” 两个字段金额字段做校验:必须输入大于 0 的数字,则提示错误支付接口调用:调用模拟支付接口 /api/pay/create,传入金额、祝福语、订单类型接口返回成功后,模拟唤起支付成功