打包

components.d.ts

@@ -20,7 +20,6 @@ declare module '@vue/runtime-core' {
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     Mobile: typeof import('./src/components/mobile/index.vue')['default']
     Pc: typeof import('./src/components/pc/index.vue')['default']
-    Qrcode: typeof import('./src/components/Qrcode/src/Qrcode.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "vite build",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
 </script>
 
 <template>

src/components/Qrcode/index.ts

@@ -1,5 +0,0 @@
-import { withInstall } from '@/utils';
-import qrCode from './src/Qrcode.vue';
-
-export const QrCode = withInstall(qrCode);
-export * from './src/typing';

src/components/Qrcode/src/Qrcode.vue

@@ -1,112 +0,0 @@
-<template>
-  <div>
-    <component :is="tag" ref="wrapRef" />
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, watch, PropType, ref, unref, onMounted } from 'vue';
-  import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus';
-  import { toDataURL } from 'qrcode';
-  import { downloadByUrl } from '@/utils/file/download';
-  import { QrcodeDoneEventParams } from './typing';
-
-  export default defineComponent({
-    name: 'QrCode',
-    props: {
-      value: {
-        type: [String, Array] as PropType<string | any[]>,
-        default: null,
-      },
-      // 参数
-      options: {
-        type: Object as PropType<QRCodeRenderersOptions>,
-        default: null,
-      },
-      // 宽度
-      width: {
-        type: Number as PropType<number>,
-        default: 200,
-      },
-      // 中间logo图标
-      logo: {
-        type: [String, Object] as PropType<Partial<LogoType> | string>,
-        default: '',
-      },
-      // img 不支持内嵌logo
-      tag: {
-        type: String as PropType<'canvas' | 'img'>,
-        default: 'canvas',
-        validator: (v: string) => ['canvas', 'img'].includes(v),
-      },
-    },
-    emits: { done: (data: QrcodeDoneEventParams) => !!data, error: (error: any) => !!error },
-    setup(props, { emit }) {
-      const wrapRef = ref<HTMLCanvasElement | HTMLImageElement | null>(null);
-      async function createQrcode() {
-        try {
-          const { tag, value, options = {}, width, logo } = props;
-          const renderValue = String(value);
-          const wrapEl = unref(wrapRef);
-
-          if (!wrapEl) return;
-
-          if (tag === 'canvas') {
-            const url: string = await toCanvas({
-              canvas: wrapEl,
-              width,
-              logo: logo as any,
-              content: renderValue,
-              options: options || {},
-            });
-            emit('done', { url, ctx: (wrapEl as HTMLCanvasElement).getContext('2d') });
-            return;
-          }
-
-          if (tag === 'img') {
-            const url = await toDataURL(renderValue, {
-              errorCorrectionLevel: 'H',
-              width,
-              ...options,
-            });
-            (unref(wrapRef) as HTMLImageElement).src = url;
-            emit('done', { url });
-          }
-        } catch (error) {
-          emit('error', error);
-        }
-      }
-      /**
-       * file download
-       */
-      function download(fileName?: string) {
-        let url = '';
-        const wrapEl = unref(wrapRef);
-        if (wrapEl instanceof HTMLCanvasElement) {
-          url = wrapEl.toDataURL();
-        } else if (wrapEl instanceof HTMLImageElement) {
-          url = wrapEl.src;
-        }
-        if (!url) return;
-        downloadByUrl({
-          url,
-          fileName,
-        });
-      }
-
-      onMounted(createQrcode);
-
-      // 监听参数变化重新生成二维码
-      watch(
-        props,
-        () => {
-          createQrcode();
-        },
-        {
-          deep: true,
-        },
-      );
-
-      return { wrapRef, download };
-    },
-  });
-</script>

src/components/Qrcode/src/drawCanvas.ts

@@ -1,37 +0,0 @@
-import { toCanvas } from 'qrcode';
-import type { QRCodeRenderersOptions } from 'qrcode';
-import { RenderQrCodeParams, ContentType } from './typing';
-import { cloneDeep } from 'lodash-es';
-
-export const renderQrCode = ({
-  canvas,
-  content,
-  width = 0,
-  options: params = {},
-}: RenderQrCodeParams) => {
-  const options = cloneDeep(params);
-  // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
-  options.errorCorrectionLevel = options.errorCorrectionLevel || getErrorCorrectionLevel(content);
-
-  return getOriginWidth(content, options).then((_width: number) => {
-    options.scale = width === 0 ? undefined : (width / _width) * 4;
-    return toCanvas(canvas, content, options);
-  });
-};
-
-// 得到原QrCode的大小，以便缩放得到正确的QrCode大小
-function getOriginWidth(content: ContentType, options: QRCodeRenderersOptions) {
-  const _canvas = document.createElement('canvas');
-  return toCanvas(_canvas, content, options).then(() => _canvas.width);
-}
-
-// 对于内容少的QrCode，增大容错率
-function getErrorCorrectionLevel(content: ContentType) {
-  if (content.length > 36) {
-    return 'M';
-  } else if (content.length > 16) {
-    return 'Q';
-  } else {
-    return 'H';
-  }
-}

src/components/Qrcode/src/drawLogo.ts

@@ -1,88 +0,0 @@
-import { isString } from '@/utils/is';
-import { RenderQrCodeParams, LogoType } from './typing';
-export const drawLogo = ({ canvas, logo }: RenderQrCodeParams) => {
-  if (!logo) {
-    return new Promise((resolve) => {
-      resolve((canvas as HTMLCanvasElement).toDataURL());
-    });
-  }
-  const canvasWidth = (canvas as HTMLCanvasElement).width;
-  const {
-    logoSize = 0.15,
-    bgColor = '#ffffff',
-    borderSize = 0.05,
-    crossOrigin,
-    borderRadius = 8,
-    logoRadius = 0,
-  } = logo as LogoType;
-
-  const logoSrc: string = isString(logo) ? logo : logo.src;
-  const logoWidth = canvasWidth * logoSize;
-  const logoXY = (canvasWidth * (1 - logoSize)) / 2;
-  const logoBgWidth = canvasWidth * (logoSize + borderSize);
-  const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
-
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  // logo 底色
-  canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius);
-  ctx.fillStyle = bgColor;
-  ctx.fill();
-
-  // logo
-  const image = new Image();
-  if (crossOrigin || logoRadius) {
-    image.setAttribute('crossOrigin', crossOrigin || 'anonymous');
-  }
-  image.src = logoSrc;
-
-  // 使用image绘制可以避免某些跨域情况
-  const drawLogoWithImage = (image: CanvasImageSource) => {
-    ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
-  };
-
-  // 使用canvas绘制以获得更多的功能
-  const drawLogoWithCanvas = (image: HTMLImageElement) => {
-    const canvasImage = document.createElement('canvas');
-    canvasImage.width = logoXY + logoWidth;
-    canvasImage.height = logoXY + logoWidth;
-    const imageCanvas = canvasImage.getContext('2d');
-    if (!imageCanvas || !ctx) return;
-    imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
-
-    canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
-    if (!ctx) return;
-    const fillStyle = ctx.createPattern(canvasImage, 'no-repeat');
-    if (fillStyle) {
-      ctx.fillStyle = fillStyle;
-      ctx.fill();
-    }
-  };
-
-  // 将 logo绘制到 canvas上
-  return new Promise((resolve) => {
-    image.onload = () => {
-      logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
-      resolve((canvas as HTMLCanvasElement).toDataURL());
-    };
-  });
-};
-
-// copy来的方法，用于绘制圆角
-function canvasRoundRect(ctx: CanvasRenderingContext2D) {
-  return (x: number, y: number, w: number, h: number, r: number) => {
-    const minSize = Math.min(w, h);
-    if (r > minSize / 2) {
-      r = minSize / 2;
-    }
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.arcTo(x + w, y, x + w, y + h, r);
-    ctx.arcTo(x + w, y + h, x, y + h, r);
-    ctx.arcTo(x, y + h, x, y, r);
-    ctx.arcTo(x, y, x + w, y, r);
-    ctx.closePath();
-    return ctx;
-  };
-}

src/components/Qrcode/src/qrcodePlus.ts

@@ -1,4 +0,0 @@
-// 参考 qr-code-with-logo 进行ts版本修改
-import { toCanvas } from './toCanvas';
-export * from './typing';
-export { toCanvas };

src/components/Qrcode/src/toCanvas.ts

@@ -1,10 +0,0 @@
-import { renderQrCode } from './drawCanvas';
-import { drawLogo } from './drawLogo';
-import { RenderQrCodeParams } from './typing';
-export const toCanvas = (options: RenderQrCodeParams) => {
-  return renderQrCode(options)
-    .then(() => {
-      return options;
-    })
-    .then(drawLogo) as Promise<string>;
-};

src/components/Qrcode/src/typing.ts

@@ -1,38 +0,0 @@
-import type { QRCodeSegment, QRCodeRenderersOptions } from 'qrcode';
-type Fn = (...arg: any) => any;
-export type ContentType = string | QRCodeSegment[];
-
-export type { QRCodeRenderersOptions };
-
-export type LogoType = {
-  src: string;
-  logoSize: number;
-  borderColor: string;
-  bgColor: string;
-  borderSize: number;
-  crossOrigin: string;
-  borderRadius: number;
-  logoRadius: number;
-};
-
-export interface RenderQrCodeParams {
-  canvas: any;
-  content: ContentType;
-  width?: number;
-  options?: QRCodeRenderersOptions;
-  logo?: LogoType | string;
-  image?: HTMLImageElement;
-  downloadName?: string;
-  download?: boolean | Fn;
-}
-
-export type ToCanvasFn = (options: RenderQrCodeParams) => Promise<unknown>;
-
-export interface QrCodeActionType {
-  download: (fileName?: string) => void;
-}
-
-export interface QrcodeDoneEventParams {
-  url: string;
-  ctx?: CanvasRenderingContext2D | null;
-}

src/components/Toast/Confirm.vue

@@ -16,8 +16,7 @@
       <div class="footer">
         <button
           @click="
-            cancelCallback;
-            close()
+            cancelCallback
           "
           size="mini"
           type="gray"
@@ -25,7 +24,7 @@
           取消
         </button>
         <button
-          @click="confirmCallback;close"
+          @click="confirmCallback"
           size="mini"
           type="primary"
         >
@@ -36,7 +35,7 @@
   </div>
 </template>
   
-  <script>
+  <script lang="ts">
 // 注意：当前组件不是在 #app 下进行渲染，无法使用 #app 下的环境（全局组件，全局指令，原型属性函数）
 import { ref } from 'vue'
 // import { onClickOutside } from '@vueuse/core'

src/components/pc/header.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
 import logoCn from '@/assets/images/logoCn.png'
 import logoEn from '@/assets/images/logoEn.png'
 //得到i18n的locale

src/utils/file/download.ts

@@ -95,6 +95,7 @@ export function downloadByData(data: BlobPart, filename: string, mime?: string,
  * Download file according to file address
  * @param {*} sUrl
  */
+declare type TargetContext = '_self' | '_blank';
 export function downloadByUrl({
   url,
   target = '_blank',

src/utils/index.ts

@@ -3,9 +3,11 @@ import type { App, Plugin } from 'vue';
 
 import { unref } from 'vue';
 import { isObject } from '@/utils/is';
+import type { Component } from 'vue';
 
 export const noop = () => { };
-
+declare type TargetContext = '_self' | '_blank';
+declare type Recordable<T = any> = Record<string, T>;
 /**
  * @description:  Set ui mount node
  */

src/views/HomeView.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
 </script>
 
 <template>

src/views/mobile/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { show, showConfirm } from '@/components/Toast'
+import { showConfirm } from '@/components/Toast'
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
 import { openPay, getOrderInfo } from '@/api/api'
@@ -14,11 +14,11 @@ const is_weixn = computed(() => {
     return true
   }
 })
-let PAYSID = {
-  wechatPay: is_weixn.value ? 1 : 0,
-  alipay: 4,
-  paypal: 5
-}
+// let PAYSID = {
+//   wechatPay: is_weixn.value ? 1 : 0,
+//   alipay: 4,
+//   paypal: 5
+// }
 //判断是否微信
 onMounted(() => {
   getDetial()
@@ -27,7 +27,7 @@ const { token, info, isEur } = useUserStore()
 async function handelPay() {
   let apiData = {
     orderSn: GetRequest('orderSn'),
-    payType: !is_weixn.value?'1':payType.value,
+    payType: !is_weixn.value ? '1' : payType.value,
     openId: 'dolor exercitation velit'
   }
   const res = await openPay(apiData)
@@ -36,7 +36,7 @@ async function handelPay() {
     //微信内支付
     onBridgeReady(res)
   } else {
-    window.location.href = res.form || res.h5Url;
+    window.location.href = res.form || res.h5Url
   }
 }
 // 调微信支付

src/views/pc/index.vue

@@ -12,18 +12,17 @@ import { useRouter, useRoute } from 'vue-router';
 import { GetRequest } from '@/utils/index'
 import { getCurrentInstance } from 'vue'
 
-//得到i18n的locale
+//得到i18n的locale token, info, 
 const { locale: language } = useI18n()
-const { token, info, isEur } = useUserStore()
+const { isEur, info } = useUserStore()
 let { $cdn } = getCurrentInstance()?.proxy;
-const qrcodeRef = ref<HTMLElement | null>(null)
 let PAYSID = {
   wechatPay: 2,
   alipay: 3,
   paypal: 0
 }
 const selectedPayType = ref('alipay')
-watch(selectedPayType, (newValue, oldValue) => {
+watch(selectedPayType, () => {
   getCode()
 })
 const qrCodeUrl = ref('')
@@ -31,7 +30,6 @@ const response = ref({
   price: 0.01,
   src: ''
 })
-const t1 = ref(null)
 onMounted(() => {
   getCode()
 })
@@ -50,7 +48,6 @@ async function getCode() {
 </script>
 <template>
   <div class="pcPage">
-    {{ token }}
     <div class="mall-pay">
       <div class="container">
         <div class="pay-header">

tsconfig.json

@@ -1,13 +1,33 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
-    }
+    "@/*":["src/*"]
+  }
   },
-
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "src/store/userInfo.js",
+    "src/theme/theme.ts"
+  ],
   "references": [
     {
       "path": "./tsconfig.node.json"

tsconfig.node.json

@@ -1,8 +1,10 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
-  }
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"],
 }
+

vite.config.ts

@@ -1,5 +1,3 @@
-import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'