@uxda/appkit 4.2.75 → 4.2.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxda/appkit",
-  "version": "4.2.75",
+  "version": "4.2.76",
   "description": "小程序应用开发包",
   "main": "dist/index.js",
   "module": "dist/index.ts",

package/rollup.config.mjs

@@ -1,11 +1,11 @@
-import vue from 'rollup-plugin-vue'
-import css from 'rollup-plugin-css-only'
-import esbuild from 'rollup-plugin-esbuild'
-import postcss from 'rollup-plugin-postcss'
-import atImport from 'postcss-import'
-import NutUIResolver from '@nutui/auto-import-resolver'
-import Components from 'unplugin-vue-components/rollup'
-import { visualizer } from "rollup-plugin-visualizer"
+import vue from 'rollup-plugin-vue';
+import css from 'rollup-plugin-css-only';
+import esbuild from 'rollup-plugin-esbuild';
+import postcss from 'rollup-plugin-postcss';
+import atImport from 'postcss-import';
+import NutUIResolver from '@nutui/auto-import-resolver';
+import Components from 'unplugin-vue-components/rollup';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 export default [
   {
@@ -33,7 +33,17 @@ export default [
       postcss({
         include: /\.scss/,
         extract: 'appkit.css',
-        plugins: [atImport()],
+        plugins: [
+          atImport(),
+          {
+            postcssPlugin: 'remove-charset',
+            Once(root) {
+              root.walkAtRules('charset', (rule) => {
+                rule.remove();
+              });
+            },
+          },
+        ],
       }),
       esbuild({}),
       Components({
@@ -64,4 +74,4 @@ export default [
   //     })
   //   ]
   // },
-]
+];

package/src/balance/components/PromoterCard.vue

@@ -274,8 +274,10 @@ const arrowImg = computed(() => {
   }
 
   &-tab {
+    position: relative;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 12px;
 
     &-item {

package/src/index.ts

@@ -88,4 +88,5 @@ export * from './shared'
 export * from './register'
 export * from './notice'
 export * from './user'
+export * from './scenarios'
 export { type AppKitOptions }

package/src/scenarios/components/SharePoster.vue

@@ -0,0 +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" @click="onCancelClick"
+            >取消</nut-button
+          >
+          <nut-button type="primary" @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>

package/src/scenarios/components/index.ts

@@ -0,0 +1,3 @@
+import SharePoster from './SharePoster.vue'
+
+export { SharePoster }

package/src/scenarios/components/poster-paste.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="poster-paste">
+    <div
+      :class="['picture']"
+      :style="{ backgroundImage: `url(${poster.back})` }"
+    ></div>
+    <div
+      class="logo"
+      v-if="logo"
+      :style="{
+        width: `${tx(25)}%`,
+        height: `${ty(25)}%`,
+        ...(poster.logoX ? { left: `${tx(20)}%` } : {}),
+        ...(poster.logoX ? { top: `${ty(25)}%` } : {}),
+        backgroundImage: `url(${logo})`,
+        backgroundRepeat: 'no-repeat',
+      }"
+    ></div>
+    <div
+      v-if="nick"
+      class="nick"
+      :style="{
+        ...(poster.nickX ? { left: `${t(poster.nickX)}px` } : {}),
+        ...(poster.nickY ? { top: `${t(28)}px` } : {}),
+        fontSize: `${t(16)}px`,
+        color: '#353535',
+      }"
+    >
+      {{ nick }}
+    </div>
+    <div
+      class="qr"
+      v-if="poster.qr"
+      :style="{
+        ...(poster.qrW ? { width: `${tx(poster.qrW)}%` } : {}),
+        ...(poster.qrH ? { height: `${ty(poster.qrW)}%` } : {}),
+        ...(poster.qrX ? { left: `${tx(poster.qrX)}%` } : {}),
+        ...(poster.qrY ? { top: `${ty(poster.qrY)}%` } : {}),
+        backgroundImage: `url(${poster.qr})`,
+      }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  poster: any;
+  logo: string;
+  nick: string;
+  zoom: number;
+}>();
+
+const t = (s: number) => Math.round(s * (props.zoom || 1)); // 缩放后坐标值
+const tx = (s: number) => (100 * Math.round(s * (props.zoom || 1))) / 221; // 缩放后坐标值
+const ty = (s: number) => (100 * Math.round(s * (props.zoom || 1))) / 480; // 缩放后坐标值
+</script>
+
+<style lang="scss">
+.poster-paste {
+  position: relative;
+  width: auto;
+  height: 480px;
+  aspect-ratio: 375/812;
+  transition: transform 0.5s;
+  .picture {
+    position: absolute;
+    background-size: cover;
+    background-position: center;
+    height: 100%;
+    width: 100%;
+    border-radius: 10px;
+  }
+  .logo {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    left: 25px;
+    top: 25px;
+    background-size: contain;
+    background-position: center;
+  }
+  .nick {
+    position: absolute;
+    top: 24px;
+    line-height: 15px;
+  }
+  .qr {
+    position: absolute;
+    background-size: contain;
+    background-position: center;
+  }
+}
+</style>