婚恋小程序

社交婚恋案例ID：235966

！盘羊

12 年经验· 深圳信飞软件有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

这是婚礼请柬的核心编辑能力，让你可以自由排版请柬内容（文字格式、图片、视频等）。
技术依赖：基于 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，传入金额、祝福语、订单类型接口返回成功后，模拟唤起支付成功