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 position: absolute;\r\n bottom: -80rpx;\r\n left: 50%;\r\n width: 600rpx;\r\n transform: translateX(-50%);\r\n\r\n .cancel-btn {\r\n width: 240rpx;\r\n height: 70rpx;\r\n font-size: 28rpx;\r\n font-weight: 500;\r\n line-height: 70rpx;\r\n color: $dark-9;\r\n background: $white;\r\n border-radius: 35rpx;\r\n }\r\n\r\n .save-btn {\r\n width: 240rpx;\r\n height: 70rpx;\r\n font-size: 28rpx;\r\n font-weight: 500;\r\n line-height: 70rpx;\r\n border-radius: 35rpx;\r\n }\r\n}\r\n\r\n.poster-img {\r\n border-radius: 20rpx;\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/components/s-share-modal/canvas-poster/index.vue'\nwx.createComponent(Component)"],"names":["reactive","sheep","ref","unref","uni","getPosterData"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAM,QAAQ;AAWd,UAAM,SAASA,cAAAA,SAAS;AAAA,MACtB,KAAK;AAAA;AAAA,QAEH,OAAOC,YAAAA,MAAM,UAAU,OAAO,cAAc;AAAA,QAC5C,QAAQ;AAAA,MACT;AAAA,MACD,OAAO,CAAE;AAAA,IACX,CAAC;AAED,UAAM,QAAQ;AAEd,UAAM,gBAAgB,MAAM;AAC1B,YAAM,OAAO;AAAA,IACf;AAEA,UAAM,aAAaC,cAAAA,IAAK;AACxB,UAAM,kBAAkBA,cAAAA,IAAK;AAE7B,UAAM,eAAe,MAAY;AAC/B,YAAM,WAAW,MAAM,OAAOC,cAAK,MAAC,MAAM,CAAC;AAAA,IAC7C;AAEA,UAAM,qBAAqB,CAAC,SAAS;AACnC,sBAAgB,QAAQ;AAAA,IAC1B;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,CAAC,yBAAyB,IAAI,EAAE,SAASF,kBAAM,UAAU,IAAI,GAAG;AAClEA,0BAAM,QAAQ,MAAM,SAAS;AAC7B;AAAA,MACD;AAGDG,oBAAAA,MAAI,uBAAuB;AAAA,QACzB,UAAU,gBAAgB;AAAA,QAC1B,SAAS,CAAC,QAAQ;AAChB,wBAAe;AACfH,4BAAM,QAAQ,MAAM,MAAM;AAAA,QAC3B;AAAA,QACD,MAAM,CAAC,QAAQ;AACbA,4BAAM,QAAQ,MAAM,MAAM;AAC1B,kBAAQ,IAAI,WAAW,GAAG;AAAA,QAC3B;AAAA,MACL,CAAG;AAAA,IACH;AAGA,aAAe,YAAY;AAAA;AACzB,wBAAgB,QAAQ;AACxB,eAAO,QAAQ,MAAMI,qEAAc;AAAA,UACjC,OAAO,OAAO,IAAI;AAAA,UAClB,WAAW,MAAM;AAAA,QACrB,CAAG;AACD,cAAM,aAAc;AAAA,MACtB;AAAA;AAEA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxHD,GAAG,gBAAgB,SAAS;"} |