@uxda/appkit 4.3.2 → 4.3.3

package/src/scenarios/components/SharePoster.vue

@@ -1,364 +1,364 @@
-<template>
-  <nut-popup round v-model:visible="sheetOpen" position="bottom">
-    <template v-if="sheetOpen">
-      <div class="share-dialog column align-stretch">
-        <div class="swiper-container">
-          <div
-            class="poster-display row justify-center"
-            v-if="posters.length === 1"
-          >
-            <poster-paste
-              :poster="posters[0]"
-              :logo="config.logo"
-              :nick="config.nick"
-              :zoom="zoom"
-            />
-          </div>
-          <swiper
-            v-if="posters.length > 1"
-            class="swiper"
-            :current="current"
-            :autoplay="false"
-            :indicator-dots="false"
-            :circular="true"
-            display-multiple-items="3"
-            @change="onSwiperChange"
-          >
-            <swiper-item
-              :class="['swiper-item', { center: isCenter(index) }]"
-              v-for="(poster, index) in posters"
-              :key="`${index}`"
-            >
-              <div class="slide">
-                <poster-paste
-                  :poster="poster"
-                  :logo="config.logo"
-                  :nick="config.nick"
-                  :zoom="zoom"
-                />
-              </div>
-            </swiper-item>
-          </swiper>
-        </div>
-        <div class="swiper-dots" justify="center" :gap="8">
-          <div
-            class="dot"
-            :class="{
-              current:
-                current === index || current - posters.length / 2 === index,
-            }"
-            v-for="(_, index) in Array(posters.length / 2).fill('')"
-            :key="index"
-          />
-        </div>
-        <div
-          class="text-center"
-          style="font-size: 13px; color: #666666; margin: 10px"
-          v-if="text"
-        >
-          {{ text }}
-        </div>
-        <div class="line"></div>
-        <div class="bottom">
-          <nut-button class="cancel-btn" v-track-click="'海报分享-取消'" @click="onCancelClick"
-            >取消</nut-button
-          >
-          <nut-button type="primary" v-track-click="'海报分享-确定'" @click="onPosterShare">确定</nut-button>
-        </div>
-      </div>
-      <canvas
-        type="2d"
-        id="poster-canvas"
-        :style="`height: ${o.h}px;width:${o.w}px;transform:translate3d(-5000px, 0, 0);position: absolute;`"
-      >
-      </canvas>
-    </template>
-  </nut-popup>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import Taro from '@tarojs/taro';
-import PosterPaste from '../components/poster-paste.vue';
-import { dataURItoBlob, isWeb } from '../../utils/utils';
-import { Swiper, SwiperItem } from '@tarojs/components';
-
-const emit = defineEmits(['share']);
-
-export type ShareDialogProps = {
-  // 海报列表
-  posters: any[];
-  text?: string;
-};
-
-const props = defineProps<ShareDialogProps>();
-
-const o = {
-    // 图片原始大小
-    w: 375,
-    h: 812,
-  },
-  z = 480, // 缩放后高度
-  zoom = z / o.h;
-
-const config = ref();
-config.value = {
-  nick: '',
-  logo: '',
-  qr: '',
-};
-
-// 真实的 current
-const current = ref(0);
-
-const getCentered = () => {
-  // change 事件返回的 current 为三张图中最左侧一张
-  // 为了中间放大的效果, 将 swiper 属性 current 设置为 下一张
-  if (props.posters.length === 1) return 0;
-  // 多张海报, *假选中*中间一张
-  let centered: number = current.value + 1;
-  centered = centered === props.posters.length ? 0 : centered;
-  return centered;
-};
-
-const isCenter = (index: number) => {
-  return getCentered() === index;
-};
-
-const onSwiperChange = ({ detail }) => {
-  current.value = detail.current;
-};
-
-const initCanvas = () => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      if (Taro.getEnv() === 'WEB') {
-        const canvas = document.getElementById(
-          'poster-canvas'
-        ) as HTMLCanvasElement;
-        const context = canvas.getContext('2d');
-        canvas.height = o.h * 2;
-        canvas.width = o.w * 2;
-        resolve({ context, canvas });
-      } else {
-        const pageInstance = Taro.getCurrentInstance()?.page || {}; // 拿到当前页面实例
-        const query = Taro.createSelectorQuery().in(pageInstance); // 确定在当前页面内匹配子元素
-        query
-          .select('#poster-canvas')
-          .fields({ node: true, size: true, context: true }, (res) => {
-            const canvas = res.node;
-            const context = canvas.getContext('2d');
-            canvas.height = o.h * 2;
-            canvas.width = o.w * 2;
-            canvas.destHeight = o.h * 2;
-            canvas.destWidth = o.w * 2;
-            resolve({ context, canvas });
-          })
-          .exec();
-      }
-    }, 300);
-  });
-};
-
-const drawImage = async (
-  canvas: any,
-  context: any,
-  src: string,
-  x?: number,
-  y?: number,
-  w?: number,
-  h?: number
-) => {
-  return new Promise((resolve, reject) => {
-    if (!src) {
-      resolve(void 0);
-      return;
-    }
-    const image = !isWeb() ? canvas.createImage() : new Image();
-    image.crossOrigin = 'Anonymous';
-    image.src = src;
-    image.onload = function () {
-      context.drawImage(image, x || 0, y || 0, w || o.w, h || o.h);
-      resolve(void 0);
-    };
-    image.onerror = (e) => {
-      resolve(image);
-    };
-  });
-};
-const onPosterShare = async () => {
-  !isWeb() && Taro.showLoading({ title: '加载中...', mask: true });
-  // @ts-ignore
-  const { context, canvas } = await initCanvas(),
-    c = getCentered();
-  const p = props.posters[c];
-  await drawImage(canvas, context, p.back, 0, 0, o.w * 2, o.h * 2);
-  if (p.qr) {
-    await drawImage(
-      canvas,
-      context,
-      p.qr,
-      p.qrX * 2,
-      p.qrY * 2,
-      p.qrW * 2,
-      p.qrH * 2
-    );
-  }
-  if (config.value.nick) {
-    context.font = '24px sans-serif';
-    context.fillText(config.value.nick, p.nickX * 2 - 10, p.nickY * 2 + 34);
-  }
-  if (config.value.logo) {
-    await drawImage(
-      canvas,
-      context,
-      config.value.logo,
-      p.logoX * 2,
-      p.logoY * 2,
-      54,
-      54
-    );
-  }
-  context.save();
-  if (isWeb()) {
-    const dataURL = canvas.toDataURL('image/png');
-    const blob = dataURItoBlob(dataURL);
-    const imgUrl = URL.createObjectURL(blob);
-    emit('share', imgUrl);
-  } else {
-    Taro.canvasToTempFilePath({
-      canvas,
-      success: (result) => {
-        Taro.hideLoading();
-        Taro.showShareImageMenu({
-          path: result.tempFilePath,
-        });
-      },
-      fail: () => {
-        Taro.showToast({
-          title: '海报生成失败，请重试',
-          icon: 'none',
-        });
-      },
-    });
-  }
-};
-
-watch(
-  () => props.posters,
-  () => {
-    if (props.posters[0]?.nick) {
-      config.value.nick = props.posters[0].nick;
-    }
-    if (props.posters[0]?.logo) {
-      config.value.logo = props.posters[0].logo;
-    }
-  }
-);
-
-const sheetOpen = ref(false);
-const onCancelClick = () => {
-  sheetOpen.value = false;
-};
-function openShareDialog() {
-  sheetOpen.value = !sheetOpen.value;
-}
-
-defineExpose({
-  openShareDialog,
-});
-</script>
-
-<style lang="scss">
-.share-dialog {
-  padding: 40px 0 0;
-  overflow: hidden auto;
-
-  .swiper-container {
-    position: relative;
-    width: 100%;
-    height: 480px;
-    overflow: hidden;
-  }
-
-  .swiper {
-    width: 180%;
-    height: 100%;
-    margin: 0 -40%;
-  }
-
-  .swiper-item {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .poster-paste {
-      transform: scale(0.8);
-    }
-
-    &.center {
-      .poster-paste {
-        transform: scale(1);
-      }
-    }
-  }
-
-  .swiper-dots {
-    margin-top: 10px;
-    height: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .dot {
-      width: 6px;
-      height: 6px;
-      background-color: #b0b7c4;
-      border-radius: 3px;
-      transition: width 0.5s;
-      margin: 0 2px;
-
-      &.current {
-        background-color: #017fff;
-        width: 15px;
-      }
-    }
-  }
-
-  .slide {
-    width: 100%;
-  }
-
-  .buttons {
-    margin-top: 60px;
-
-    .btn {
-      width: 50px;
-      height: 50px;
-      background-size: 100% 100%;
-      background-color: #f8f8f8;
-      border-radius: 10px;
-    }
-  }
-
-  .bottom {
-    padding: 12px;
-    display: flex;
-    .nut-button {
-      flex: 1;
-    }
-    .cancel-btn {
-      margin-right: 12px;
-      flex: 1;
-      border: 1px solid #017fff;
-      color: #017fff;
-      background: #fff;
-    }
-  }
-
-  .line {
-    background: #f1f5f9;
-    height: 8.5px;
-  }
-}
-</style>
+<template>
+  <nut-popup round v-model:visible="sheetOpen" position="bottom">
+    <template v-if="sheetOpen">
+      <div class="share-dialog column align-stretch">
+        <div class="swiper-container">
+          <div
+            class="poster-display row justify-center"
+            v-if="posters.length === 1"
+          >
+            <poster-paste
+              :poster="posters[0]"
+              :logo="config.logo"
+              :nick="config.nick"
+              :zoom="zoom"
+            />
+          </div>
+          <swiper
+            v-if="posters.length > 1"
+            class="swiper"
+            :current="current"
+            :autoplay="false"
+            :indicator-dots="false"
+            :circular="true"
+            display-multiple-items="3"
+            @change="onSwiperChange"
+          >
+            <swiper-item
+              :class="['swiper-item', { center: isCenter(index) }]"
+              v-for="(poster, index) in posters"
+              :key="`${index}`"
+            >
+              <div class="slide">
+                <poster-paste
+                  :poster="poster"
+                  :logo="config.logo"
+                  :nick="config.nick"
+                  :zoom="zoom"
+                />
+              </div>
+            </swiper-item>
+          </swiper>
+        </div>
+        <div class="swiper-dots" justify="center" :gap="8">
+          <div
+            class="dot"
+            :class="{
+              current:
+                current === index || current - posters.length / 2 === index,
+            }"
+            v-for="(_, index) in Array(posters.length / 2).fill('')"
+            :key="index"
+          />
+        </div>
+        <div
+          class="text-center"
+          style="font-size: 13px; color: #666666; margin: 10px"
+          v-if="text"
+        >
+          {{ text }}
+        </div>
+        <div class="line"></div>
+        <div class="bottom">
+          <nut-button class="cancel-btn" v-track-click="'海报分享-取消'" @click="onCancelClick"
+            >取消</nut-button
+          >
+          <nut-button type="primary" v-track-click="'海报分享-确定'" @click="onPosterShare">确定</nut-button>
+        </div>
+      </div>
+      <canvas
+        type="2d"
+        id="poster-canvas"
+        :style="`height: ${o.h}px;width:${o.w}px;transform:translate3d(-5000px, 0, 0);position: absolute;`"
+      >
+      </canvas>
+    </template>
+  </nut-popup>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import Taro from '@tarojs/taro';
+import PosterPaste from '../components/poster-paste.vue';
+import { dataURItoBlob, isWeb } from '../../utils/utils';
+import { Swiper, SwiperItem } from '@tarojs/components';
+
+const emit = defineEmits(['share']);
+
+export type ShareDialogProps = {
+  // 海报列表
+  posters: any[];
+  text?: string;
+};
+
+const props = defineProps<ShareDialogProps>();
+
+const o = {
+    // 图片原始大小
+    w: 375,
+    h: 812,
+  },
+  z = 480, // 缩放后高度
+  zoom = z / o.h;
+
+const config = ref();
+config.value = {
+  nick: '',
+  logo: '',
+  qr: '',
+};
+
+// 真实的 current
+const current = ref(0);
+
+const getCentered = () => {
+  // change 事件返回的 current 为三张图中最左侧一张
+  // 为了中间放大的效果, 将 swiper 属性 current 设置为 下一张
+  if (props.posters.length === 1) return 0;
+  // 多张海报, *假选中*中间一张
+  let centered: number = current.value + 1;
+  centered = centered === props.posters.length ? 0 : centered;
+  return centered;
+};
+
+const isCenter = (index: number) => {
+  return getCentered() === index;
+};
+
+const onSwiperChange = ({ detail }) => {
+  current.value = detail.current;
+};
+
+const initCanvas = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      if (Taro.getEnv() === 'WEB') {
+        const canvas = document.getElementById(
+          'poster-canvas'
+        ) as HTMLCanvasElement;
+        const context = canvas.getContext('2d');
+        canvas.height = o.h * 2;
+        canvas.width = o.w * 2;
+        resolve({ context, canvas });
+      } else {
+        const pageInstance = Taro.getCurrentInstance()?.page || {}; // 拿到当前页面实例
+        const query = Taro.createSelectorQuery().in(pageInstance); // 确定在当前页面内匹配子元素
+        query
+          .select('#poster-canvas')
+          .fields({ node: true, size: true, context: true }, (res) => {
+            const canvas = res.node;
+            const context = canvas.getContext('2d');
+            canvas.height = o.h * 2;
+            canvas.width = o.w * 2;
+            canvas.destHeight = o.h * 2;
+            canvas.destWidth = o.w * 2;
+            resolve({ context, canvas });
+          })
+          .exec();
+      }
+    }, 300);
+  });
+};
+
+const drawImage = async (
+  canvas: any,
+  context: any,
+  src: string,
+  x?: number,
+  y?: number,
+  w?: number,
+  h?: number
+) => {
+  return new Promise((resolve, reject) => {
+    if (!src) {
+      resolve(void 0);
+      return;
+    }
+    const image = !isWeb() ? canvas.createImage() : new Image();
+    image.crossOrigin = 'Anonymous';
+    image.src = src;
+    image.onload = function () {
+      context.drawImage(image, x || 0, y || 0, w || o.w, h || o.h);
+      resolve(void 0);
+    };
+    image.onerror = (e) => {
+      resolve(image);
+    };
+  });
+};
+const onPosterShare = async () => {
+  !isWeb() && Taro.showLoading({ title: '加载中...', mask: true });
+  // @ts-ignore
+  const { context, canvas } = await initCanvas(),
+    c = getCentered();
+  const p = props.posters[c];
+  await drawImage(canvas, context, p.back, 0, 0, o.w * 2, o.h * 2);
+  if (p.qr) {
+    await drawImage(
+      canvas,
+      context,
+      p.qr,
+      p.qrX * 2,
+      p.qrY * 2,
+      p.qrW * 2,
+      p.qrH * 2
+    );
+  }
+  if (config.value.nick) {
+    context.font = '24px sans-serif';
+    context.fillText(config.value.nick, p.nickX * 2 - 10, p.nickY * 2 + 34);
+  }
+  if (config.value.logo) {
+    await drawImage(
+      canvas,
+      context,
+      config.value.logo,
+      p.logoX * 2,
+      p.logoY * 2,
+      54,
+      54
+    );
+  }
+  context.save();
+  if (isWeb()) {
+    const dataURL = canvas.toDataURL('image/png');
+    const blob = dataURItoBlob(dataURL);
+    const imgUrl = URL.createObjectURL(blob);
+    emit('share', imgUrl);
+  } else {
+    Taro.canvasToTempFilePath({
+      canvas,
+      success: (result) => {
+        Taro.hideLoading();
+        Taro.showShareImageMenu({
+          path: result.tempFilePath,
+        });
+      },
+      fail: () => {
+        Taro.showToast({
+          title: '海报生成失败，请重试',
+          icon: 'none',
+        });
+      },
+    });
+  }
+};
+
+watch(
+  () => props.posters,
+  () => {
+    if (props.posters[0]?.nick) {
+      config.value.nick = props.posters[0].nick;
+    }
+    if (props.posters[0]?.logo) {
+      config.value.logo = props.posters[0].logo;
+    }
+  }
+);
+
+const sheetOpen = ref(false);
+const onCancelClick = () => {
+  sheetOpen.value = false;
+};
+function openShareDialog() {
+  sheetOpen.value = !sheetOpen.value;
+}
+
+defineExpose({
+  openShareDialog,
+});
+</script>
+
+<style lang="scss">
+.share-dialog {
+  padding: 40px 0 0;
+  overflow: hidden auto;
+
+  .swiper-container {
+    position: relative;
+    width: 100%;
+    height: 480px;
+    overflow: hidden;
+  }
+
+  .swiper {
+    width: 180%;
+    height: 100%;
+    margin: 0 -40%;
+  }
+
+  .swiper-item {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .poster-paste {
+      transform: scale(0.8);
+    }
+
+    &.center {
+      .poster-paste {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .swiper-dots {
+    margin-top: 10px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .dot {
+      width: 6px;
+      height: 6px;
+      background-color: #b0b7c4;
+      border-radius: 3px;
+      transition: width 0.5s;
+      margin: 0 2px;
+
+      &.current {
+        background-color: #017fff;
+        width: 15px;
+      }
+    }
+  }
+
+  .slide {
+    width: 100%;
+  }
+
+  .buttons {
+    margin-top: 60px;
+
+    .btn {
+      width: 50px;
+      height: 50px;
+      background-size: 100% 100%;
+      background-color: #f8f8f8;
+      border-radius: 10px;
+    }
+  }
+
+  .bottom {
+    padding: 12px;
+    display: flex;
+    .nut-button {
+      flex: 1;
+    }
+    .cancel-btn {
+      margin-right: 12px;
+      flex: 1;
+      border: 1px solid #017fff;
+      color: #017fff;
+      background: #fff;
+    }
+  }
+
+  .line {
+    background: #f1f5f9;
+    height: 8.5px;
+  }
+}
+</style>