project init & fix ui

2023-01-06 14:24:11 +08:00
parent abc4f65a8e
commit ac9b479805
866 changed files with 39916 additions and 53 deletions
--- a/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.js
+++ b/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.js
@@ -0,0 +1,121 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { styles, setIcon } from '../common/utils';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-image-viewer`;
+let ImageViewer = class ImageViewer extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.properties = Object.assign({}, props);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            currentSwiperIndex: 0,
+            windowHeight: 0,
+            windowWidth: 0,
+            imagesShape: {},
+        };
+        this.options = {
+            multipleSlots: true,
+        };
+        this.controlledProps = [
+            {
+                key: 'visible',
+                event: 'close',
+            },
+        ];
+        this.observers = {
+            visible(value) {
+                this.setData({
+                    currentSwiperIndex: value ? this.properties.initialIndex : 0,
+                });
+            },
+            closeBtn(closeBtn) {
+                const obj = setIcon('closeBtn', closeBtn, 'close');
+                this.setData(Object.assign({}, obj));
+            },
+            deleteBtn(deleteBtn) {
+                const obj = setIcon('deleteBtn', deleteBtn, 'delete');
+                this.setData(Object.assign({}, obj));
+            },
+        };
+        this.methods = {
+            saveScreenSize() {
+                const { windowHeight, windowWidth } = wx.getSystemInfoSync();
+                this.setData({
+                    windowHeight,
+                    windowWidth,
+                });
+            },
+            calcImageDisplayStyle(imageWidth, imageHeight) {
+                const { windowWidth, windowHeight } = this.data;
+                const ratio = imageWidth / imageHeight;
+                if (imageWidth < windowWidth && imageHeight < windowHeight) {
+                    return {
+                        styleObj: {
+                            width: `${imageWidth * 2}rpx`,
+                            height: `${imageHeight * 2}rpx`,
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                        },
+                    };
+                }
+                if (ratio >= 1) {
+                    return {
+                        styleObj: {
+                            width: '100vw',
+                            height: `${(windowWidth / ratio) * 2}rpx`,
+                        },
+                    };
+                }
+                return {
+                    styleObj: {
+                        width: `${ratio * windowHeight * 2}rpx`,
+                        height: '100vh',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                    },
+                };
+            },
+            onImageLoadSuccess(e) {
+                const { detail: { width, height }, currentTarget: { dataset: { index }, }, } = e;
+                const { mode, styleObj } = this.calcImageDisplayStyle(width, height);
+                const origin = this.data.imagesShape;
+                this.setData({
+                    imagesShape: Object.assign(Object.assign({}, origin), { [index]: {
+                            mode,
+                            style: styles(Object.assign({}, styleObj)),
+                        } }),
+                });
+            },
+            onSwiperChange(e) {
+                const { detail: { current }, } = e;
+                this.setData({
+                    currentSwiperIndex: current,
+                });
+                this._trigger('change', { index: current });
+            },
+            onClose() {
+                this._trigger('close', { visible: false, trigger: 'button', index: this.data.currentSwiperIndex });
+            },
+            onDelete() {
+                this._trigger('delete', { index: this.data.currentSwiperIndex });
+            },
+        };
+    }
+    ready() {
+        this.saveScreenSize();
+    }
+};
+ImageViewer = __decorate([
+    wxComponent()
+], ImageViewer);
+export default ImageViewer;