first commit
This commit is contained in:
39
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-canvas/props.d.ts
vendored
Normal file
39
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-canvas/props.d.ts
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
declare const _default: {
|
||||
value: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
icon: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
size: {
|
||||
type: NumberConstructor;
|
||||
value: number;
|
||||
};
|
||||
iconSize: {
|
||||
type: any;
|
||||
value: null;
|
||||
};
|
||||
level: {
|
||||
type: StringConstructor;
|
||||
value: import("../../../common/shared/qrcode/types").ErrorCorrectionLevel;
|
||||
};
|
||||
bgColor: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
color: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
includeMargin: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
marginSize: {
|
||||
type: NumberConstructor;
|
||||
value: number;
|
||||
};
|
||||
};
|
||||
export default _default;
|
||||
@@ -0,0 +1 @@
|
||||
import{DEFAULT_MARGIN_SIZE,DEFAULT_NEED_MARGIN,DEFAULT_BACKGROUND_COLOR,DEFAULT_FRONT_COLOR}from"../../../common/shared/qrcode/utils";export default{value:{type:String,value:""},icon:{type:String,value:""},size:{type:Number,value:160},iconSize:{type:null,value:40},level:{type:String,value:"M"},bgColor:{type:String,value:DEFAULT_BACKGROUND_COLOR},color:{type:String,value:DEFAULT_FRONT_COLOR},includeMargin:{type:Boolean,value:DEFAULT_NEED_MARGIN},marginSize:{type:Number,value:DEFAULT_MARGIN_SIZE}};
|
||||
61
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-canvas/qrcode-canvas.d.ts
vendored
Normal file
61
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-canvas/qrcode-canvas.d.ts
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
import { SuperComponent } from '../../../common/src/index';
|
||||
export default class QRCode extends SuperComponent {
|
||||
properties: {
|
||||
value: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
icon: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
size: {
|
||||
type: NumberConstructor;
|
||||
value: number;
|
||||
};
|
||||
iconSize: {
|
||||
type: any;
|
||||
value: null;
|
||||
};
|
||||
level: {
|
||||
type: StringConstructor;
|
||||
value: import("../../../common/shared/qrcode/types").ErrorCorrectionLevel;
|
||||
};
|
||||
bgColor: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
color: {
|
||||
type: StringConstructor;
|
||||
value: string;
|
||||
};
|
||||
includeMargin: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
marginSize: {
|
||||
type: NumberConstructor;
|
||||
value: number;
|
||||
};
|
||||
};
|
||||
lifeTimes: {
|
||||
ready(): void;
|
||||
};
|
||||
observers: {
|
||||
'**': () => void;
|
||||
};
|
||||
methods: {
|
||||
initCanvas(): Promise<void>;
|
||||
drawQrcode(canvas: WechatMiniprogram.Canvas, ctx: WechatMiniprogram.CanvasContext): Promise<void>;
|
||||
drawCenterIcon(canvas: WechatMiniprogram.Canvas, ctx: WechatMiniprogram.CanvasContext, width: number, height: number, numCells: number): Promise<void>;
|
||||
getSizeProp(iconSize: number | {
|
||||
width: number;
|
||||
height: number;
|
||||
} | null | undefined): {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
checkdefaultValue(): void;
|
||||
getCanvasNode(): Promise<unknown>;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__awaiter,__decorate}from"tslib";import props from"./props";import useQRCode from"../../hooks/useQRCode";import{SuperComponent,wxComponent}from"../../../common/src/index";import{DEFAULT_MINVERSION,excavateModules}from"../../../common/shared/qrcode/utils";let QRCode=class extends SuperComponent{constructor(){super(...arguments),this.properties=props,this.lifeTimes={ready(){this.checkdefaultValue(),this.initCanvas()}},this.observers={"**":function(){this.checkdefaultValue(),this.initCanvas()}},this.methods={initCanvas(){return __awaiter(this,void 0,void 0,function*(){wx.createSelectorQuery().in(this).select("#qrcodeCanvas").fields({node:!0,size:!0}).exec(e=>__awaiter(this,void 0,void 0,function*(){var t;if(!(null===(t=e[0])||void 0===t?void 0:t.node))return;const o=e[0].node,i=o.getContext("2d");yield this.drawQrcode(o,i)}))})},drawQrcode(e,t){var o,i,r;return __awaiter(this,void 0,void 0,function*(){if(!t)return;const{value:a,icon:l,size:n,iconSize:s,level:d,bgColor:c,color:h,includeMargin:u,marginSize:v}=this.properties,g=this.getSizeProp(s);try{const s=useQRCode({value:a,level:d,minVersion:DEFAULT_MINVERSION,includeMargin:u,marginSize:v,size:n,imageSettings:l?{src:l,width:g.width,height:g.height,excavate:!0}:void 0}),m=wx.getWindowInfo().pixelRatio||1;e.width=n*m,e.height=n*m;const p=n*m/s.numCells;t.scale(p,p),t.fillStyle=c,t.fillRect(0,0,s.numCells,s.numCells);let C=s.cells;l&&(null===(o=s.calculatedImageSettings)||void 0===o?void 0:o.excavation)&&(C=excavateModules(s.cells,s.calculatedImageSettings.excavation)),t.fillStyle=h,C.forEach((e,o)=>{e.forEach((e,i)=>{e&&t.fillRect(i+s.margin,o+s.margin,1.05,1.05)})}),l&&(yield this.drawCenterIcon(e,t,(null===(i=s.calculatedImageSettings)||void 0===i?void 0:i.w)||0,(null===(r=s.calculatedImageSettings)||void 0===r?void 0:r.h)||0,s.numCells)),this.triggerEvent("drawCompleted")}catch(e){this.triggerEvent("drawError",{error:e})}})},drawCenterIcon(e,t,o,i,r){return __awaiter(this,void 0,void 0,function*(){const a=e.createImage();yield new Promise((e,t)=>{a.onload=e,a.onerror=t,a.src=this.properties.icon});const l=Math.floor((r-o)/2),n=Math.floor((r-i)/2);t.globalAlpha=1,t.drawImage(a,l,n,o,i)})},getSizeProp:e=>e?"number"==typeof e?{width:e,height:e}:{width:e.width,height:e.height}:{width:0,height:0},checkdefaultValue(){const e={bgColor:"",color:""};let t=!1;const{bgColor:o,color:i}=this.properties,{bgColor:r,color:a}=props;""===o&&r.value&&(e.bgColor=r.value,t=!0),""===i&&a.value&&(e.color=a.value,t=!0),t&&this.setData(e)},getCanvasNode(){return new Promise(e=>{wx.createSelectorQuery().in(this).select("#qrcodeCanvas").fields({node:!0,size:!0}).exec(t=>{var o;e(null===(o=t[0])||void 0===o?void 0:o.node)})})}}}};QRCode=__decorate([wxComponent()],QRCode);export default QRCode;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true}
|
||||
@@ -0,0 +1 @@
|
||||
<canvas type="2d" class="t-qrcode__canvas" id="qrcodeCanvas"></canvas>
|
||||
@@ -0,0 +1 @@
|
||||
@import '../../../common/style/index.wxss';canvas{width:100%;height:100%;align-self:stretch;min-width:0;flex:auto;}
|
||||
12
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-canvas/type.d.ts
vendored
Normal file
12
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-canvas/type.d.ts
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ErrorCorrectionLevel } from '../../../common/shared/qrcode/types';
|
||||
export interface TdQRCodeProps {
|
||||
value?: string;
|
||||
icon?: string;
|
||||
size?: number;
|
||||
iconSize?: null;
|
||||
level?: ErrorCorrectionLevel;
|
||||
bgColor?: string;
|
||||
color?: string;
|
||||
includeMargin?: boolean;
|
||||
marginSize?: number;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
19
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-status/props.d.ts
vendored
Normal file
19
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-status/props.d.ts
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
declare const _default: {
|
||||
status: {
|
||||
type: StringConstructor;
|
||||
value: "loading" | "active" | "expired" | "scanned";
|
||||
};
|
||||
locale: {
|
||||
type: ObjectConstructor;
|
||||
value: {
|
||||
expiredText?: string;
|
||||
refreshText?: string;
|
||||
scannedText?: string;
|
||||
};
|
||||
};
|
||||
statusRender: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
};
|
||||
export default _default;
|
||||
@@ -0,0 +1 @@
|
||||
export default{status:{type:String,value:""},locale:{type:Object,value:{expiredText:"二维码过期",refreshText:"点击刷新",scannedText:"已扫描"}},statusRender:{type:Boolean,value:!1}};
|
||||
35
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-status/qrcode-status.d.ts
vendored
Normal file
35
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-status/qrcode-status.d.ts
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
import { SuperComponent } from '../../../common/src/index';
|
||||
export default class QRCode extends SuperComponent {
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: {
|
||||
statusRender: {
|
||||
type: BooleanConstructor;
|
||||
value: boolean;
|
||||
};
|
||||
status: {
|
||||
type: StringConstructor;
|
||||
value: "loading" | "active" | "expired" | "scanned";
|
||||
};
|
||||
locale: {
|
||||
type: ObjectConstructor;
|
||||
value: {
|
||||
expiredText?: string;
|
||||
refreshText?: string;
|
||||
scannedText?: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
isSkyline: boolean;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
};
|
||||
methods: {
|
||||
handleRefresh(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import props from"./props";import config from"../../../common/config";import{SuperComponent,wxComponent}from"../../../common/src/index";const{prefix:prefix}=config,name=`${prefix}-qrcode`;let QRCode=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.properties=Object.assign(Object.assign({},props),{statusRender:{type:Boolean,value:!1}}),this.data={prefix:prefix,classPrefix:name,isSkyline:!1},this.lifetimes={attached(){this.setData({isSkyline:"skyline"===this.renderer})}},this.methods={handleRefresh(){this.triggerEvent("refresh")}}}};QRCode=__decorate([wxComponent()],QRCode);export default QRCode;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"usingComponents":{"t-loading":"../../../loading/loading","t-icon":"../../../icon/icon"}}
|
||||
@@ -0,0 +1 @@
|
||||
<block wx:if="{{statusRender}}"><slot name="statusRender" status="{{status}}"></slot></block><block wx:else><view wx:if="{{status === 'expired'}}" class="{{prefix}}-expired"><view class="{{prefix}}-expired__text">{{locale.expiredText}}<view class="{{prefix}}-expired__button" bindtap="handleRefresh"><t-icon name="refresh" size="36rpx"/>{{locale.refreshText}}</view></view></view><view wx:elif="{{status === 'loading'}}" class="{{prefix}}-loading-container"><t-loading size="64rpx" theme="{{isSkyline ? 'spinner' : 'circular'}}"/></view><view wx:elif="{{status === 'scanned'}}" class="{{prefix}}-scanned"><t-icon name="check-circle-filled" class="{{prefix}}-scanned__icon" size="44rpx"/>{{locale.scannedText}}</view></block>
|
||||
@@ -0,0 +1,5 @@
|
||||
@import '../../../common/style/index.wxss';.t-expired__text{color:var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9)));font-weight:600;}
|
||||
.t-expired__button{display:flex;color:var(--td-brand-color,var(--td-primary-color-7,#0052d9));box-shadow:none;cursor:pointer;column-gap:8px;align-items:center;height:32px;transition:all .2s cubic-bezier(.215,.61,.355,1);}
|
||||
.t-expired__button:hover{color:var(--td-brand-color-hover);}
|
||||
.t-scanned{display:flex;column-gap:8px;align-items:center;}
|
||||
.t-scanned__icon{color:var(--td-success-color);}
|
||||
9
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-status/type.d.ts
vendored
Normal file
9
miniprogram_npm/tdesign-miniprogram/qrcode/components/qrcode-status/type.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
export interface QRCodeStatusProps {
|
||||
status?: 'active' | 'expired' | 'loading' | 'scanned';
|
||||
locale?: {
|
||||
expiredText?: string;
|
||||
refreshText?: string;
|
||||
scannedText?: string;
|
||||
};
|
||||
statusRender?: boolean;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
Reference in New Issue
Block a user