1 line
5.9 KiB
Plaintext
1 line
5.9 KiB
Plaintext
|
{"version":3,"file":"index.js","sources":["../../../../../../../src/sheep/components/s-share-modal/canvas-poster/index.vue","../../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC9jb21wb25lbnRzL3Mtc2hhcmUtbW9kYWwvY2FudmFzLXBvc3Rlci9pbmRleC52dWU"],"sourcesContent":["<!-- 海报弹窗 -->\r\n<template>\r\n <su-popup :show=\"show\" round=\"10\" @close=\"onClosePoster\" type=\"center\" class=\"popup-box\">\r\n <view class=\"ss-flex-col ss-col-center ss-row-center\">\r\n <image\r\n v-if=\"!!painterImageUrl\"\r\n class=\"poster-img\"\r\n :src=\"painterImageUrl\"\r\n :style=\"{\r\n height: poster.css.height + 'px',\r\n width: poster.css.width + 'px',\r\n }\"\r\n :show-menu-by-longpress=\"true\"\r\n />\r\n </view>\r\n <view\r\n class=\"poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center\"\r\n v-if=\"!!painterImageUrl\"\r\n >\r\n <button class=\"cancel-btn ss-reset-button\" @tap=\"onClosePoster\">取消</button>\r\n <button class=\"save-btn ss-reset-button ui-BG-Main\" @tap=\"onSavePoster\">\r\n {{\r\n ['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)\r\n ? '长按图片保存'\r\n : '保存图片'\r\n }}\r\n </button>\r\n </view>\r\n <!-- 海报画板：默认隐藏只用来生成海报。生成方式为主动调用 -->\r\n <l-painter\r\n isCanvasToTempFilePath\r\n pathType=\"url\"\r\n @success=\"setPainterImageUrl\"\r\n hidden\r\n ref=\"painterRef\"\r\n />\r\n </su-popup>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 海报生成和展示\r\n * 提示：小程序码默认跳转首页，由首页进行 spm 参数解析后跳转到对应的分享页面\r\n * @description 用于生成分享海报，如：分享商品海报。\r\n * @tutorial https://ext.dcloud.net.cn/plugin?id=2389\r\n * @property {Boolean} show 弹出层控制\r\n * @property {Object} shareInfo 分享信息\r\n */\r\nimport { reactive, ref, unref } from 'vue'\r\nimport sheep from '@/sheep'\r\nimport { getPosterData } from '@/sheep/components/s-share-modal/canvas-poster/poster'\r\n\r\nconst props = defineProps({\r\n show: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n shareInfo: {\r\n type: Object,\r\n default: () => {},\r\n },\r\n})\r\n\r\nconst poster = reactive({\r\n css: {\r\n // 根节点若无尺寸，自动获取父级节点\r\n width: sheep.$platform.device.windowWidth * 0.9,\r\n height: 600,\r\n },\r\n views: [],\r\n})\r\n\r\nconst emits = defineEmits(['success', 'close'])\r\n\r\nconst onClosePoster = () => {\r\n emits('close')\r\n}\r\n\r\nconst painterRef = ref() // 海报画板\r\nconst painterImageUrl = ref() // 海报 url\r\n// 渲染海报\r\nconst renderPoster = async () => {\r\n await painterRef.value.render(unref(poster))\r\n}\r\n// 获得生成的图片\r\nconst setPainterImageUrl = (path) => {\r\n painterImageUrl.value = path\r\n}\r\n// 保存海报图片\r\nconst onSavePoster = () => {\r\n if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {\r\n sheep.$helper.toast('请长按图片保存')\r\n return\r\n }\r\n\r\n // 非H5 保存到相册\r\n uni.saveImageToPhotosAlbum({\r\n filePath: painterImageUrl.value,\r\n success: (res) => {\r\n onClosePoster()\r\n sheep.$helper.toast('保存成功')\r\n },\r\n fail: (err) => {\r\n sheep.$helper.toast('保存失败')\r\n console.log('图片保存失败:', err)\r\n },\r\n })\r\n}\r\n\r\n// 获得海报数据\r\nasync function getPoster() {\r\n painterImageUrl.value = undefined\r\n poster.views = await getPosterData({\r\n width: poster.css.width,\r\n shareInfo: props.shareInfo,\r\n })\r\n await renderPoster()\r\n}\r\n\r\ndefineExpose({\r\n getPoster,\r\n})\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.popup-box {\r\n position: relative;\r\n}\r\n\r\n.poster-title {\r\n color: #999;\r\n}\r\n\r\n// 分享海报\r\n.poster-btn-box {\r\n posit
|