海报：完善商品海报分享

sheep/components/s-share-modal/canvas-poster/index.vue

@@ -2,15 +2,39 @@
 <template>
   <su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
     <view class="ss-flex-col ss-col-center ss-row-center">
-      <template v-if="poster.views.length > 0">
-        <l-painter :board="poster" />
-      </template>
+      <view
+        v-if="poster.views.length === 0"
+        class="poster-title ss-flex ss-row-center"
+        :style="{
+          height: poster.height + 'px',
+          width: poster.width + 'px',
+        }"
+      >
+        海报加载中...
+      </view>
+      <!-- v-if 保障等待所有的海报信息都加载完后才开始渲染 -->
+          <template v-if="poster.views.length > 0">
+            <l-painter :board="poster" ref="painterRef"/>
+          </template>
+    </view>
+    <view
+      class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
+      v-if="poster.views.length > 0"
+    >
+      <button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
+      <button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
+        {{
+          ['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
+            ? '长按图片保存'
+            : '保存图片'
+        }}
+      </button>
     </view>
   </su-popup>
 </template>
 
 <script setup>
-  import { getCurrentInstance, reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import sheep from '@/sheep';
   import { getPosterData } from '@/sheep/components/s-share-modal/canvas-poster/poster';
 
@@ -26,24 +50,22 @@
     },
   });
 
-
   const poster = reactive({
     css: {
       // 根节点若无尺寸，自动获取父级节点
       width: sheep.$platform.device.windowWidth * 0.9,
-      height: 600,
+      height: 600
     },
     views: [],
   });
 
-
   const emits = defineEmits(['success', 'close']);
-  const vm = getCurrentInstance();
 
   const onClosePoster = () => {
     emits('close');
   };
 
+  const painterRef = ref()
   // 保存海报图片
   const onSavePoster = () => {
     if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
@@ -51,26 +73,35 @@
       return;
     }
 
-    uni.saveImageToPhotosAlbum({
-      filePath: poster.src,
+    painterRef.value.canvasToTempFilePathSync({
+      fileType: "jpg",
+      // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+      pathType: 'url',
+      quality: 1,
       success: (res) => {
-        onClosePoster();
-        sheep.$helper.toast('保存成功');
-      },
-      fail: (err) => {
-        sheep.$helper.toast('保存失败');
-        console.log('图片保存失败:', err);
+        console.log(res.tempFilePath);
+        // 非H5 保存到相册
+        uni.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: (res) => {
+            onClosePoster();
+            sheep.$helper.toast('保存成功');
+          },
+          fail: (err) => {
+            sheep.$helper.toast('保存失败');
+            console.log('图片保存失败:', err);
+          },
+        });
       },
     });
   };
 
-  // 使用 canvas 生成海报
-  async function getPoster(params) {
-    let drawer = await getPosterData({
-      width: sheep.$platform.device.windowWidth * 0.9,
+  // 获得海报数据
+  async function getPoster() {
+    poster.views = await getPosterData({
+      width: poster.css.width,
       shareInfo: props.shareInfo,
     });
-    poster.views = drawer;
   }
 
   defineExpose({
@@ -120,10 +151,4 @@
     border-radius: 20rpx;
   }
 
-  .hideCanvas {
-    position: fixed;
-    top: -99999rpx;
-    left: -99999rpx;
-    z-index: -99999;
-  }
 </style>