first commit

h5/js/utils/loading.js

@@ -0,0 +1,150 @@
+/**
+ * 封装加载提示
+ */
+class Loading {
+    /**
+     * 加载进度
+     */
+    loading() {
+        this.SetLoading()
+        // 塞入loading的html
+        this.$(".isShow .loading").innerHTML = 
+        `
+            <div class="back">
+                <div class="load8">
+                    <div class="load8-container container1">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container2">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container3">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                </div>                 
+            </div>
+        `;
+        this.$(".isShow .back").style = `padding: 0.4rem;`
+        this.show()
+    }
+
+    /**
+     * 显示toast提示
+     * @param {*} text 文字
+     * @param {*} time 自动关闭提示的时间 默认3秒
+     */
+    toast(text, time = 3000) {
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `<div class="back"></div>`
+        // 设置边距
+        this.$(".isShow .back").style = `padding: 0.14rem 0.4rem;`
+
+        // 设置内容
+        this.$(".isShow .back").innerHTML = `<span>${text}</span>`;
+        this.show()
+        setTimeout(()=> this.close(),time)
+    }
+
+    /**
+     * 弹出框 dialog
+     * @param {*} params 
+     */
+    dialog(params) {
+        params == undefined ? params = {} : null;
+        let defaultParams = { title: '标题', message: '内容', 
+            cancelText: '取消', confirmText: '确定', 
+            cancelColor: '#323233', confirmColor: '#fb7299'
+        };
+
+        defaultParams.title = params.title ||  defaultParams.title;
+        defaultParams.message = params.message ||  defaultParams.message;
+        defaultParams.cancelText = params.cancelText ||  defaultParams.cancelText;
+        defaultParams.confirmText = params.confirmText ||  defaultParams.confirmText;
+        defaultParams.cancelColor = params.cancelColor ||  defaultParams.cancelColor;
+        defaultParams.confirmColor = params.confirmColor ||  defaultParams.confirmColor;
+  
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `
+            <div class="dialog_f">
+              <div class="dialog_header">${defaultParams.title}</div>
+              <div class="dialog_content">
+                <div class="dialog_message">${defaultParams.message}</div>
+              </div>
+              <div class="dialog_footer">
+                <div class="dialog_cancel" style="color:${defaultParams.cancelColor}">
+                    ${defaultParams.cancelText}
+                </div>
+                <div class="dialog_confirm" style="color:${defaultParams.confirmColor}">
+                    ${defaultParams.confirmText}
+                </div>
+              </div>
+            </div>
+        `;
+        // 取消按钮被点击的时候
+        this.$(".isShow .dialog_cancel").onclick = () => {
+            params.cancel && params.cancel()
+            this.close()
+        }
+         // 确定按钮被点击的时候
+         this.$(".isShow .dialog_confirm").onclick = () => {
+            params.confirm && params.confirm()
+            this.close()
+        }
+        this.$(".isShow .loading").style = 'background: rgba(0, 0, 0, 0.7)'
+        this.show()
+    }
+
+    /**
+     * 填充loading的html结构
+     */
+    SetLoading () {
+        if (this.$(".isShow") == null) {
+            var isShow = document.createElement("div")
+            isShow.className = "isShow"
+            isShow.style = "display: none;"
+
+            var loading = document.createElement("div")
+            loading.className = "loading";
+            isShow.appendChild(loading)
+            this.$("body").appendChild(isShow)
+        }
+    }
+   
+    /**
+     * 删除内容，隐藏弹窗
+     */
+    close() {
+        this.clearContent()
+        this.$(".isShow").style.display = "none"
+    }
+
+    /**
+     * 显示弹窗
+     */
+    show() {
+        this.$(".isShow").style.display = "block"
+    }
+
+    /**
+     * 清空弹窗内部的内容
+     */
+    clearContent() {
+        this.$(".isShow .loading").style = "";
+        this.$(".isShow .loading").innerHTML = "";
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+}
+
+var Tips = new Loading()